Tag: Divi Resources

Using the Divi Call to Action Module vs Separate Modules

In Divi, we provide an array of native modules for you to craft stunning and potent web pages. Combining sections, rows, and columns allows you to combine these modules to produce distinct and fashionable designs. A prime illustration of this can be seen when crafting call-to-action (CTA) prompts. In marketing, a CTA draws attention and prompts viewers to make a specific decision. Some commonplace CTA phrases that you may recognize include ‘buy now’, ‘click here’, and ‘read more’.

A CTA typically links to another webpage where the encouraged activity occurs. When you come across a CTA online, it generally features a title, supportive text, and a button. Such attributes can be found in our Call to Action Module. That said, there might be instances when you need to create a CTA but don’t want to use the native module. In this post, we’ll compare using the Divi Call to Action Module vs independent Modules in the Divi Builder!

Pros of Using the Divi Call to Action Module vs. Separate Modules

Divi’s Call to Action Module comes with a title, body text, and button. Each of these elements can be customized to your heart’s desire. As a standalone module, the Call to Action Module provides you with many options that you can use to add an effective call-to-action to your page quickly. Let’s look at some positives of using this module in your next project.

1. Beautifully Mobile Responsive

By using the Call to Action Module, you can trust that your call to action will be perfectly mobile responsive. Out of the box, Divi modules provide you with controls that you can use to customize the mobile breakpoints of any module.

You can set responsive designs for desktop, tablet, and mobile for each element, all within one module. When thinking about the number of people who use mobile devices to access the web, this is great. By making sure that your most important page elements are mobile-friendly, you are doing more for your page.

2. Keep Your Page Organized

Adding too many modules to your page can get confusing. Using one module keeps your page clean, organized, and easy to maneuver. As the Call to Action Module comes with a title, body text, and button, that’s three modules in one. There is no reason to use two separate text modules (or one, if you’d like) plus an additional button module. One module will suffice. In the Call to Action Module, you have the full range of Divi’s customization settings to style your text and button.

You can even go a step further and style the module background using Divi’s rich background styling options. Use gradients, patterns, colors, and masks to create attractive backgrounds for your Call to Action Module.

Cons of Using the Divi Call to Action Module vs. Separate Modules

There are some areas where the Call to Action Module shines. We can also look at some areas where it may be better to use several modules instead. Let’s look at some of the limits of using a lone Call to Action Module.

1. No Iconography

Unlike the Blurb Module, the Call to Action Module does not have the option to use icons. The only place where images can be in use is in the module’s background. It may be better to combine the Blurb Module or Icon Module with several Text Modules to create an illustrated or more visually appealing call to action.

Using these modules together lets you benefit from the icon libraries within your call-to-action designs.

2. Restricted to Standard Typography

There is a bit of a restriction when it comes to adding more flair to the text within your Call to Action Module. While with the power of Divi, you can deeply change the aesthetics of your text, adding individual design elements to type is not possible. You may want to add a highlight to the title text or circle a word within your body text. The standard Call to Action Module will not allow you to do this. To further extend the design of your text, you may want to consider using custom CSS within the module.

3. Can’t Animate Individual Items

Divi provides several ways to add movement and animation within its modules. In the Transform tab, a module can scale, translate, rotate, skew, and transform from the origin. Add animations like fade, slide, bounce, zoom, flip, fold, and roll from within the Animation tab. However, with the Call to Action Module, there is a limit on your options. While you can animate the module as a whole, you cannot animate individual elements. So, you can’t scale your title or fade in your body text. If you seek to change the button on hover or have the title fly in, these additions would require custom CSS. While using CSS is not bad, adding these animations and transformations to individual modules is easy.

To Sum it Up

With a full library of modules, Divi provides the tools needed to create a stunning website. Its extensive resources allow for a blend of different modules, resulting in diverse page designs. The traditional method is the Call to Action Module. It’s reliable, customizable, and can be extended with the right CSS. You can push your creativity further using various individual modules and create a unique call to action. This is where the power of Divi’s native modules shines, particularly when enhanced with animations. Custom modules from the Divi Marketplace offer further options for creating unique and engaging calls to action. We want to know how you use the platform – do you stick with the Call to Action Module or blend different modules for your calls to action? Let us know in the comments section. We love hearing from you!

The post Using the Divi Call to Action Module vs Separate Modules appeared first on Elegant Themes Blog.

03.10.2023
Get a Free Sunglass Shop Layout Pack for Divi
Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

This time around, the design team has created a beautiful Sunglass Shop Layout Pack thatâ€™ll help you get your next Sunglass Shop website up and running in no time!

This layout pack includes:

– 7 Premade page layouts strategically designed for any Sunglass Shop website (including a footer design)
– Original, royalty-free photos and graphics + customizable source file (see below)
– Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

Check Out The Divi Sunglass Shop
Layout Pack Below

Get it for free today!

Landing Page Design

View The Live Layout Demo

Home Page Design

View The Live Layout Demo

Shop Page Design

View The Live Layout Demo

Product Page Design

View The Live Layout Demo

About Page Design

View The Live Layout Demo

Blog Page Design

View The Live Layout Demo

Contact Page Design

View The Live Layout Demo

Key Features

If you’re looking for a sleek new design for your eyewear business, check out the Sunglass Shop Layout Pack for Divi. It’s packed with a modern monochrome color scheme with pops of tangerine to showcase your shades with style. Images with rounded corners and oversized text accentuate the design, allowing your customers to look in all the right places. Kickstart your new website with this modern and sophisticated design.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.
Access This Layout Right Now
Directly from Your Divi Builder

Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Sunglass Shop Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

For more, check out this video to learn how you can get this layout pack up and running today.

Subscribe To Our Youtube Channel

Authentication Required

Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

Use Layout Images for FREE with No Licensing Restrictions

The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

New Layout Pack Every Week!

We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

The post Get a Free Sunglass Shop Layout Pack for Divi appeared first on Elegant Themes Blog.
02.10.2023
Divi Product Highlight: Gravity Forms Styler Module for Divi

Gravity Forms Styler Module for Divi is a plugin available in the Divi Marketplace that makes it easy to completely customize the styling of your Gravity Forms right within the familiar Divi Builder interface. With this plugin, you can add Gravity Forms to your Divi layouts just like you would any other module. Using the options in the design tab, you have full control over each form aspect.

One unique feature of this plugin is that you can preview the entire form, the form with validation errors, and the confirmation message page right within the Divi Builder. In this product highlight, weâ€™ll take a closer look at the Gravity Forms Styler Module for Divi and help you decide if itâ€™s the right product for you.

Letâ€™s get started!

Installing the Gravity Forms Styler Module for Divi

First, ensure the Gravity Forms plugin is installed and activated on your site. Additionally, purchase the Gravity Forms Styler Module for Divi plugin from the Divi Marketplace and download the plugin file.

To install the plugin, open the Add New page under the Plugins heading in the WordPress dashboard. Click the Upload Plugins button, then click Choose File to select the plugin file from your computer. Finally, click Install Now, and the plugin will be added to your website.

Once the plugin is installed, click Activate Plugin.

Gravity Forms Styler Module for Divi

The Gravity Forms Styler Module for Divi is a module that is added to the Divi Builder, which means that you can add Gravity Forms anywhere you could add any other Divi module, giving you the ultimate flexibility in your layouts and designs. Start by adding a new page to your site and select the Divi Builder option.

On the new page, click the grey plus icon to insert a module. Select the Gravity Form module from the list.

Content Settings

Open the options for the Gravity Form module. The first option, titled â€œFormâ€ allows you to select the Gravity Form you want to display.

You can also customize the title and description shown on the form. You can hide each of these elements, set a custom title or description, or display the title or description set in the Gravity Forms settings.

Next, you can enable Ajax for form submissions. If enabled, the page will not reload after form submission. You can specify the starting tab index for the form fields and default field values in the content settings.

Background

In the content tab, you can also add a background to the Gravity Forms module. Using Diviâ€™s extensive background options, you can add a background color, gradient, image, video, pattern, or mask to create unique layouts for your form.

Design Settings

Now, letâ€™s move over to the design tab. Here is where you can fully customize the design of every element in the form.

Font

Under the font tab, you can set the styles for the text in the form. In this section, you can set the font, font weight, style, alignment, color, text size, letter spacing, line height, and text shadow. Here, I set the font and font color.

Form Heading

In the form heading settings, you can customize the styling of the form heading font, title font, padding and margin, border, and background. With these options, you can fully customize the heading section separate from the rest of the form. For this example, I increased the size of the form title text.

Fields

The fields setting section is where you can set the styling of the form fields, including the background color, text color, focus styling, margin and padding, font styling, and border styling. In this section, I set the field color to white.

I also enabled focus borders. This applies unique styling to the border of the active field, as you can see in the screenshot.

Fields Error

Next, the fields error section is where you can style the text, background, and border colors for the form fields error.

Labels

In the labels section, you can style the label text, set the padding and margin, style the border, and add a background or box shadow. For this example, I increased the label text size and changed the color. I also removed the bottom padding.

Required Text

The next section is where you can style the required text. The options allow you to style the asterisk that appears next to the required fields.

Sub Labels

Next is the sub labels settings. Here, you can customize the styling of the sub label text, padding and margin, border styles, background, and box shadow. I set the sub label text color to grey and adjusted the top margin.

Fields Description

The fields description settings are similar to the last, where you can customize the text styling, padding and margin, border styles, background, and box shadow. I adjusted the margins in this example to bring the description and title closer together.

Next, you can set the field validation font styling in the fields validation setting. Additionally, you can customize the padding and margin, border styles, background, and box shadow.

Error Notification

The error notification settings are very similar, with options to customize the font, spacing, border, background, and box shadow.

Confirmation Message

The next section is for customizing the confirmation message. You can use the preview option at the top to view the confirmation message layout.

Radio Buttons

In the radio buttons settings, you can set the radio colors, text styling, and list spacing. Here, I modified the checked background color.

Checkboxes

Similarly, you can change the checkbox colors, text styling, and list spacing in this section.

File Uploads

The file uploads section can be customized here. You can customize the font styling, spacing, border, background, and box shadow.

Section Break

Here you can customize the font styling for the section break description and heading and customize the spacing, border, background, and box shadow.

Pricing Fields

You can also customize the Gravity Forms pricing fields using this module. You can style the product price, shipping price, and total price fields.

Progress Bar

Next is the progress bar option. The progress bar appears in the form if there are multiple pages and provides a visual indicator for how far along in the form you are. In the design settings, you can customize the styling of the progress bar. You can set the colors, the bar height, customize the font options, add a border, and adjust the spacing.

Form Footer

In the form footer options, you can set the button alignment, spacing, border styles, background, and box shadow styles.

Button Styling

Next are four sections where you can customize the buttons in the form: Submit Button, Page Navigation Buttons, Save and Continue Button, and Select All Button. In each of these sections, you can enable custom button styles to modify the styling to match the design of your form.

Sizing

In the sizing settings, you can adjust the form width, height, and alignment. Here, I set the width to 75% and the alignment to center.

Spacing

Next, you can modify the margin and padding for the form. I added some padding to each side for this example.

Border

In the border settings, you can add a border around the form. Here, I added a blue border.

Box Shadow

Next, you can add a box shadow to the form.

Filters

Here, you can use different filters to modify how the form is displayed.

Transform

In the transform settings, you can adjust how the form appears using scale, translation, rotation, skew, and transform-origin settings.

Animation

Finally, you can apply an animation effect to the form in this section. You can select from seven different animation styles and customize the animation duration, delay, intensity, and more.

Predesigned Layouts

Gravity Forms Styler Module for Divi also comes with access to some predesigned layouts for fully-styled forms. You can download the layouts from the plugin authorâ€™s website. These layouts are a great way to get a head start on the styling process.

Gravity Forms Styler Module for Divi Layout Example

Here is one example of how to style your Gravity Form using the Gravity Forms Styler Module for Divi.

First Page

Second Page

Validation Error

Confirmation Page

Purchase Gravity Forms Styler Module for Divi

Gravity Forms Styler Module for Divi is available in the Divi Marketplace. It costs $39 for unlimited website usage and 1 year of support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

Gravity Forms Styler Module for Divi brings all of the function and design flexibility of Divi to your forms built with Gravity Forms. With so many ways to customize the styling of each element, the design options are practically endless. If youâ€™re tired of using Custom CSS to achieve your form styling and want an easy way to customize Gravity Forms using the Divi Builder, this may be a great product for you. We would love to hear from you! Have you tried the Gravity Forms Styler Module for Divi? Let us know what you think about it in the comments!

The post Divi Product Highlight: Gravity Forms Styler Module for Divi appeared first on Elegant Themes Blog.

01.10.2023
How to Add Dynamic Links to Divi Button Modules
The Divi Button Module offers many design options, enabling great freedom when crafting attractive links in your designs. Whether you’re altering the background color or adding a box shadow, your creative possibilities are endless. This isn’t limited to the standard Button Module; it applies anywhere a button is active within Divi.

The primary purpose of a button is navigation, guiding you to a different location, whether that’s within or beyond your website. Links can lead to numerous places on the internet, the options are endless. In the context of a Divi site, dynamic content streamlines linking between a variety of pages, posts, and media. To illustrate how to add dynamic links to your Divi buttons, we’ll employ the free Plumbing Layout Pack in this guide. It’s now easier than ever to enhance your Divi site’s navigability.

Why Use Dynamic Links

In HTML, links come in two forms: absolute or relative. An absolute link provides the exact address you aim to reach, and it typically includes either https:// or www.Â On the other hand, a relative link pertains to a page or directory that aligns with the current page you’re browsing. For instance, https://google.com is an absolute link. But if you were on the Elegant Themes website, and wanted to link to /modules, it would direct you to our modules gallery page. You wouldn’t be able to link from Google’s home page to the modules page on the Elegant Themes website because they are separate domains. Even if Google had a URL of /modules, it wouldn’t take you to the Elegant Themes modules page due to their unrelated nature.

Keeping track of the URLs of the pages and posts you’ve created can become a tricky task as your website expands. Memorizing short or basic URLs is straightforward. However, you may find it increasingly challenging as you start optimizing your content for SEO and incorporating long-tail keywords into your content URLs. This approach could lead to lengthier URLs that are harder to recall. This is when dynamic links prove their value.

Relative Links, Dynamic Links, and Divi

In Divi, it is possible to link to a variety of destinations within your WordPress install, without having to know the URL. You can simply search for a few keywords and be able to link directly to these places on your site.

Within dynamic links, you can link to:
- The current page: the page you are working on
- The author page: the page of the author of the page/post
- Your homepage: your website’s home page
- Posts: posts within your website
- Pages: pages on your website
- Media: Files that can be found in the media gallery (this doesn’t link directly to the file, but the media’s page on your site)
- Projects: The project custom post type in Divi
- Products: If you have WooCommerce installed, you can dynamically link to a WooCommerce product
- Manual Custom Fields: Custom fields that you have manually created
As you add more custom post types to your website, they may also appear as dynamic content that you can link to within Divi.

Adding Dynamic Links to Divi Buttons

To demonstrate how dynamic links can work for you, let’s start by installing the Plumbing Landing Page Layout.

Install the Layout Pack

To start, we’ll install the page layout. We first need to create a new page in WordPress. From the WordPress dashboard, hover over the Pages menu item from the left-hand menu. Then, we click Add New.

Once inside the default WordPress editor Gutenberg, set a title for your new page. Next, click on the purple Use Divi Builder button.

You will then be presented with three options. We’re going to click on the purple, middle button, Browse Layouts.

This will open up Divi’s vast layout library which comes packed with pre-designed pages for you to choose from. We’ll be selecting the Plumbing Layout Pack.

From the Plumbing Layout Pack, select the Landing Page Layout.

Then, click on the blue Use This Layout button. Wait for the layout to install on your new page. Finally, click the green Publish button to make your page and new layout live.

We’ll work with the button found within the Header section of the layout.

Adding Your Links:Â Linking to Pages

Now that our layout is installed, we can begin dynamically linking to various places within our WordPress install. To begin, we click on the Button Module’s gear icon. This will open the settings menu of the button.

Next, we click on the Link tab. Notice the icon for dynamic content. This is where we’ll be able to link to various places throughout our website. Click on the Dynamic Content icon.

Since we’ll link to a page on our website, let’s click on the Page Link option.

This will reveal a list of pages on our site. If you have many pages on your site, you can use the search box to help narrow your results.

Once you have found the page that you are looking to link to, click on it. This will link it to your button. Then, click on the green checkmark to select your page.

Once you have done this, you’ll notice that the Link URL textbox now shows that you have a Page Link.

Should you need to, you can click on the gear icon to update this link, changing it to another page. Or, you can click on the trash can icon to remove the dynamic link altogether. To save your changes, click on the green checkmark at the bottom of the Button Module settings box. Now, you’ve added a dynamic page link to your button. Another added beauty of using dynamic links in Divi is that should you change the URL of the dynamically added page, you don’t need to worry about changing every instance of it. As long as the link was made dynamically, it will automatically update wherever it is being called.

Now, let’s add a dynamic link to a blog post within our website.

Adding Your Links: Linking to Posts

To begin, we’re going to remove the previously added dynamic link. To start, click on the gear icon of the header button.

Notice that because we already have a dynamic link, we see that the link textbox is filled. We will click on the trash can icon to remove this dynamic link.

Once we’ve deleted the link, we will go back and click on the Dynamic Content icon.

This time, however, we will select the Post Link as we want to link to a blog post.

With our list of blog posts presented to us, we can select the one that we want to link to. Then, click the green check mark to save your selection.

Notice that the link no longer says Page Link, but Post Link as we are linking to a blog post. Finally, click on the green check mark to save your changes.

Rounding it All Up

With Divi’s Button Module, you can unleash your creativity with your links. This tool makes it easy to connect to various destinations on your website. Adopting dynamic links with your Button Module is a smart way to save time, eliminating the hassle of manually searching for links. Not only time but energy too – you won’t need to remember to update any altered links. With dynamic links, easily craft long-tail keyword URLs without the burden of memorizing URLs. The use of dynamic links throughout your linking and design process is highly recommended. With Divi, it’s a breeze!

The post How to Add Dynamic Links to Divi Button Modules appeared first on Elegant Themes Blog.
26.09.2023
Get a Free Book Store Layout Pack for Divi
Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

This time around, the design team has created a beautiful Book Store Layout Pack thatâ€™ll help you get your next Book Store website up and running in no time!

This layout pack includes:

– 7 Premade page layouts strategically designed for any Book Store website (including a footer design)
– Original, royalty-free photos and graphics + customizable source file (see below)
– Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

Check Out The Divi Book Store
Layout Pack Below

Get it for free today!

Landing Page Design

View The Live Layout Demo

Home Page Design

View The Live Layout Demo

Shop Page Design

View The Live Layout Demo

Product Page Design

View The Live Layout Demo

About Page Design

View The Live Layout Demo

Blog Page Design

View The Live Layout Demo

Contact Page Design

View The Live Layout Demo

Key Features

Looking for a bold new design to sell your books online? Check out the Book Store Layout Pack for Divi. Packed with quirky design details, bold colors, and beautiful simplicity, this layout pack will have your visitors coming back for more.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.
Access This Layout Right Now
Directly from Your Divi Builder

Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Book Store Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

For more, check out this video to learn how you can get this layout pack up and running today.

Subscribe To Our Youtube Channel

Authentication Required

Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

Use Layout Images for FREE with No Licensing Restrictions

The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

New Layout Pack Every Week!

We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

The post Get a Free Book Store Layout Pack for Divi appeared first on Elegant Themes Blog.
25.09.2023
Divi Product Highlight: Divi Layouts Extended
Divi Layouts Extended is a third-party product for Divi that includes over 1700 layouts that are imported through a custom dashboard. They cover a wide range of genres and include modules, sections, and complete pages. In this post, we’ll look at Divi Layouts Extended to help you decide if it’s the right product for your Divi toolbox.

Installing Divi Layouts Extended

Installing Divi Layouts was simple. Upload it and activate it the same as any plugin. To upload it, go to:
1. Plugins
2. Add New
3. Upload Plugin
4. Choose File
5. Install Now
Once it installs, you’ll see an option to activate the plugin. Select to activate it, and it’s ready to use.
1. Activate Plugin
Update: New User Interface

Before we dive into the product highlight, Divi Extended has recently given Divi Layouts Extended a new look and feel. Take a look below to see what you can expect from the new user interface. They’ve also added 200 more layouts to their library, providing you with even more options to choose from when building your websites!

Divi Layouts Extended Dashboard

A new Divi Layouts Extended menu is added to the WordPress dashboard. Clicking it opens the new dashboard where you can select the layouts you want. I found this dashboard to be simple and highly intuitive.

It includes tabs to see the layouts, modules, sections, or pages. You can also search for anything you want and sort them by popularity, name, and date in ascending or descending order. The layouts appear as cards. You can preview the layout or save it to your library, scroll the larger layouts to see them, and preview the layouts to get a better look at them. This example shows the All tab, which includes modules, sections, and pages.

Scrolling to the bottom of the list is navigation where you can select a page or choose First or Last.

Clicking Preview opens the item on the Divi Layouts Extended website. You can scroll through the layout, click on all the clickable things, hover to see the hover effects, and see the layout with images, products, etc.

When you choose Save to Library, the layout will import, and the button changes from a purple button to a green Saved button.

You’ll also see the layout in your library where you can use it as normal in your pages, posts, and the Divi Theme Builder. They’ll include the categories and types. In this example, I’ve saved a home page. It includes the home page category and layout type.

Divi Layouts Extended Modules

The Divi Layouts Extended Modules include buttons and sliders. We’ll look at a few examples.

Divi Layouts Extended Buttons

There are 55 buttons to choose from. The button’s text works as a short description of what the button does or its layout.

Designs include solid colors, no colors, gradients, images, text, with or without borders, square or rounded edges, with or icons, with or without shadows, with or without hover effects, and more. Most are made to stand out, and they stand out well. I especially like the buttons with icons and with hover effects.

Divi Layouts Extended Sliders

There are 15 sliders to choose from. They’re full-screen and include different designs for their layouts and navigation. They include a call to action, images, backgrounds, products, navigation, etc.

This example shows an angled background, styled navigation, an image, text, and CTA.

Divi Layouts Extended Sections

There are 855 sections in 27 different categories. They include sections such as About, blog, CTAs, client logos, headers, footers, top bars, number counters, testimonials, hero sections, galleries, services, and lots more.

Headers

It includes 130 headers. They include menus, social media icons, search fields, clickable phone numbers, CTAs, styled dropdown menus, and lots more. Many include a top bar.

This example shows headers 127-129. They include navigation, social icons, search, contact information, etc.

This example shows headers 101-103. They include CTA buttons with hover animations. I’m hovering over the second header’s menu to show the dropdown menu.

Blogs

There are 60 blog sections. They include grid layouts, alternating layouts, single-column layouts, styling, hover effects, etc. The blog cards provide a lot of styling options.

This example has a magazine-style layout with two columns. The latest blog posts are displayed in the left column and include featured images, while the others are stacked in the right column and include large read-more buttons.

This example shows a grid layout with overlapping titles and excerpts. I’m hovering over the second post to show its hover effect.

CTAs

There are 38 call-to-action sections to choose from. They’re full-width and include images, messages, buttons, forms, number counters, and more in multiple types of layouts.

This example shows an email CTA with red highlights and contact information. The phone number is clickable.

Hero Sections

It includes 60 hero sections. They include CTAs, embedded videos, countdown timers, images, backgrounds, forms, blurbs, posts, products, and more. These are some of my favorite layouts in Divi Layouts Extended.

This example shows a CTA with a graph that overlaps two backgrounds. The background includes shapes in different colors to stand out.

This example includes links to the various pages in the shop. They include solid colors and images with titles, buttons, or discounts.

Team

Choose from 35 team layouts. They display styled Person Modules in different ways and include supporting text, buttons, and more. Most are placed in a grid, but there are a few with single-column layouts, mosaic layouts, etc.

This example shows three Person Modules with text, a button, and a wavy background. Hovering over a module on either side makes it slide on a diagonal.

Testimonials

There are 25 testimonial sections to choose from. They include grid layouts, single-column layouts, alternating layouts, and lots more. They include background images or color on one side, different backgrounds for the Testimonial Modules, circled images, squared images, etc.

This example shows an image on one side and a testimonial slider overlapping the image on the other side. The slider includes navigation on the far right.

Timeline

There are 5 timeline sections to choose from. These are great for showing the process steps, a publication timeline, etc. They include horizontal and vertical layouts.

This one shows a production timeline, which is great for project management. It displays the timeline with different colored icons that alternate from the top to the bottom. The text is on the opposite side of the icons and includes titles in the same color as the icons.

Portfolio

Choose from 10 portfolio layouts. These are some of the most elegant layouts in Divi Layouts Extended. They include several background designs, including images and blocks of color. They include several layouts and portfolio card designs. Some include a CTA or a styled filter. They work for various industries, including industrial, consumer, shops, restaurants, photography, design, etc.

This example uses a portfolio section to create a restaurant menu. The portfolio cards have shadows, overlays, and rounded corners. They overlap the background image. I’m hovering over the item on the right to show the overlay.

Woo Sections

There are 30 Woo sections to choose from. They work as CTAs in the various categories in the shop and include styled backgrounds, styled images, offers, countdown timers, and many layout designs. They would work great as sections within layouts and as hero sections.

This example shows styled images with offset borders. They include two different layouts within the grid. It works as links to categories in the shop.

This example includes a countdown timer and a button to see the shop.

Divi Layouts Extended Pages

The Divi Layouts Extended Pages tab includes 23 types of pages. They include home, landing, about, coming soon, checkout, pricing, product, search, services, project, shop, team, testimonials, FAQs, Lookbook, 404, and more. They use the modules and sections from the other tabs to create pages in several genres with custom styling for each one. Here are a few examples.

Home

Choose from 10 home pages to choose from. They’re designed for shops, agencies, bands, real estate, weddings, and several service-based businesses.

This example shows the first half of Divi Concert, which was designed for bands and live events. It includes a hero section with a background image, CTA, and a number counter. It also includes sections for information, an event schedule, and a team section for the band members.

The second half includes an itinerary with two sections that display an image on one side and blurbs on the other. Also included are a blog section, pricing tables, and sponsor logos.

Landing

There are 40 landing pages to choose from in several genres with a focus on business. They include agencies, conferences, authors, podcasts, webinars, etc.

This is the landing page for a podcast. It includes a hero section with a CTA, an embedded video, sponsor logos, and an email form. It also includes a section for information, embedded audio files, and hosts.

Lookbook

There are 3 Lookbook pages to choose from. They include lots of styled images in various layouts to build shop pages that focus on images.

This example shows several sections of product images and includes a countdown timer and featured products.

Shop

There are 30 shop pages to choose from. They display products in various ways in grids, with large or small images, with or without sidebars, and with or without CTAs.

This example includes a sidebar with breadcrumbs, products, categories, and tags. A slider at the top of the page links to categories. The products include styled elements.

Post

There are 25 blog post layouts. They display the post elements in different ways. Choose a layout with or without a sidebar.

This example places the featured image on the left with the text and metadata on the right over a solid background. The content is presented in a wide single-column layout with post navigation, tags, and comments.

Coming Soon

There are 5 coming soon pages to choose from. They include large text, countdown timers, email forms, and social media follow icons.

This example displays the message on the left over a background image. On the right are a countdown timer, social media icons, and a button for an email form, all placed over a white background with a rounded left edge.

404

There are 10 404 pages. They include a combination of graphics, images, typography, social follow icons, contact information, search boxes, and a link to the home page. Most only include a few of these elements, which keeps them simple and easy to understand.

The example uses a background image of an event, which works great with the Divi Concert landing page. It includes a full-width background image, the 404 error message, a search box, and social icons.

Where to Purchase Divi Layouts Extended

Divi Layouts Extended is available in the Divi Marketplace for $49. It includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee.

Ending Thoughts on Divi Layouts Extended

That’s our look at Divi Layouts Extended. There are a lot of well-designed layouts in this Divi plugin. The dashboard is easy to use and only imports the layouts you want, keeping your Divi Library clean. Once imported into your Divi Library, they work the same as any Divi layout. If you’re interested in expanding your library of Divi layouts, Divi Layouts Extended is a great choice to consider.

We want to hear from you. Have you tried Divi Layouts Extended? Let us know what you think about it in the comments.

The post Divi Product Highlight: Divi Layouts Extended appeared first on Elegant Themes Blog.
24.09.2023
Download a FREE Blog Post Template for Diviâ€™s Web Developer Layout Pack
Hey Divi Creators! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand-new freebies. This time around we’re building upon the Web Developer Layout Pack with a brand new blog post template that matches the rest of the pack perfectly. Hope you enjoy it!

Check Out The Divi Web Developer
Blog Template Below

Desktop View

Tablet and Mobile View

Download The Divi Web Developer Blog Template

To lay your hands on the free Web Developer Blog Post Template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youâ€™re already on the list, simply enter your email address below and click download. You will not be â€œresubscribedâ€ or receive extra emails.

Download the Files

Download For Free

Join the Divi NewsletterÂ and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How to Upload The Template

Go to Divi Theme Builder

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

Upload the Divi Web Developer Blog Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

Navigate to the import tab, upload the JSON file that you could download in this post, and click on ‘Import Divi Theme Builder Templates’.

Save Divi Theme Builder Changes

Once the file is live, you’ll notice a new template with a new body area that has been assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template to be active.

How to Modify The Template

Open Post Template

To modify the template’s elements, start by opening the template.

Inside the Body Layout Editor, you can edit the design on the front end using the Divi Builder just like you would with a normal Divi page.

Since this is a template that has been assigned to all posts for the site, there is a post content module that is necessary for displaying the post content. You will need to keep that module in place, but you can adjust the post content module’s design elements, which will design the post content that is displayed dynamically.

About the Divi Web Developer Blog Template

This blog post template has a lot of dynamic elements that will work with your blog posts immediately. For example, the entire post header has dynamic elements including a featured image as the background, the post title, and the post meta data (date, categories, author, and comment count). This content won’t need updating, but you can tweak the design of each of those elements if needed.

Other dynamic elements include the following:
- Post Title: Using the Text Module and Dynamic Content we showcase the title of the current blog post
- Post Category, Post Author and Comment Count: Blurb Modules are used here. We use Dynamic Content in the Blurb Title to populate the module with the category, author, and comment count of the blog post.
- Featured Image: The background of the section for the blog post title uses the featured image. We also have an Image Module that also is populated automatically.
- Blog: A Blog module is used to create a sidebar. We also use another blog module under the Comments Module that showcases more blog posts from the current blog category.
Here is a quick illustration that identifies the elements of the Web Developer blog post template.

While this layout uses many modules that use Dynamic Content, don’t forget to update static modules like titles throughout the template to match your brand voice.

New Freebies Every Week!

We hope you’ve enjoyed the Web Developer Layout Pack and the blog post template freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

The post Download a FREE Blog Post Template for Divi’s Web Developer Layout Pack appeared first on Elegant Themes Blog.
19.09.2023
Get a Free Online University Layout Pack for Divi
Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

This time around, the design team has created a beautiful Online University Layout Pack thatâ€™ll help you get your next Online University website up and running in no time!

This layout pack includes:

– 6 Premade page layouts strategically designed for any Online University website (including a footer design)
– Original, royalty-free photos and graphics + customizable source file (see below)
– Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

Check Out The Divi Online University
Layout Pack Below

Get it for free today!

Landing Page Design

View The Live Layout Demo

Home Page Design

View The Live Layout Demo

About Page Design

View The Live Layout Demo

Admissions Page Design

View The Live Layout Demo

Blog Page Design

View The Live Layout Demo

Contact Page Design

View The Live Layout Demo

Key Features

Are you looking for a sleek and sophisticated design for your online university website? Look no further than the Online University Layout Pack for Divi. This eye-catching design combines monochrome with a soft color palette to showcase your new venture in stunning style. From color blocks to image masks and unique image galleries, this modern design is full of daring design elements to engage your students.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.
Access This Layout Right Now
Directly from Your Divi Builder

Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Online University Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

For more, check out this video to learn how you can get this layout pack up and running today.

Subscribe To Our Youtube Channel

Authentication Required

Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

Use Layout Images for FREE with No Licensing Restrictions

The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

New Layout Pack Every Week!

We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

The post Get a Free Online University Layout Pack for Divi appeared first on Elegant Themes Blog.
18.09.2023
Divi Product Highlight: Furniture Shop Divi WooCommerce Theme
Furniture Shop Divi WooCommerce Theme is a third-party child theme for Divi that was designed for eCommerce. It includes multiple page designs and adds many features that work with WooCommerce. In this post, weâ€™ll take a look at the Furniture Shop Divi WooCommerce Theme to help you decide if itâ€™s the right Divi Child Theme for your online shop.

Installing Furniture Shop Divi WooCommerce Theme

Installing this Divi Child Theme was simple. With Divi activated, upload and activate the Furniture Shop Divi WooCommerce Theme like any WordPress theme. First, go to Themes:
1. Appearance
2. Themes
3. Add New
Next, upload the theme.
1. Upload Theme
2. Choose File
3. Install Now
Next, activate the Child Theme.
1. Activate
Select all of the content you want to install. This includes all of the pages, layouts, and even the plugins. It will also activate the plugins for you. Everything is selected by default. I recommend leaving everything selected. Click Import Demo Content and wait for the import to finish.
1. Import Demo Content
Finally, once everything has been imported and activated, youâ€™ll see a message that the process is complete, and you can then remove the importer.
1. Remove Demo Content and Import Functions
I got a message that the WooCommerce Wishlist plugin was misconfigured, but it was an easy fix. You will need to set up a few plugins, such as your WooCommerce options, the WooCommerce Wishlist Plugin options, FiboSearch settings, etc. The documentation does show the settings youâ€™ll need. Most of mine were correctly configured, but I did need to make some adjustments to match the documentation.

Furniture Shop Divi WooCommerce Theme Options

The theme settings include a one-click color change, color pickers, and preloaders. The general tab includes theme color options and color pickers where you can select the default primary and secondary colors.

The preloader tab includes 28 built-in preloaders to choose from. You can also upload a custom preloader and choose the color, background, effects, delay, and fadeout speed.

Furniture Shop Divi WooCommerce Theme Pages

Furniture Shop Divi WooCommerce Theme adds 32 pages to your website, not counting the pages created in the Divi Theme Builder. These include home pages, standard website pages, WooCommerce pages, etc.

Home Pages

Furniture Shop Divi WooCommerce Theme has 3 different home pages to choose from. All three follow the white color scheme with green highlights, include the same design elements, and focus on eCommerce. Hereâ€™s a look at all three home pages.

Home One

Hereâ€™s the top portion of the first home page. It includes a CTA slider at the top of the page with vertically placed social icons and a message on the right. Category icons with hover animations link to the various shop categories. A section for new products displays the products in a styled Shop Module. This section is labeled with a vertically placed title. A Deals section includes a CTA with a countdown timer and a product image and a background image.

This is the bottom portion of the page. It includes a newsletter form and a product section with images in a mosaic that link to product categories. They include gradient overlays. It also includes an About section, a styled blog section, and logos. Each of the sections includes vertical text.

Home Two

The first portion of the second home page includes a full-width slider for the hero section. Images with text work as links to the shop categories, icons show information, another slider works as a CTA, and the product section shows styled products in a grid.

The second portion shows new products, an overlapping CTA with a countdown timer, a small newsletter form, larger images for category CTAs, and a contact section with information on one side and a map on the other side.

Home Three

The first section of the third home page includes a full-width slider with overlapping icons that link to the shop categories. Large images in a mosaic work as CTAs to the shop.

The bottom portion shows a CTA with a countdown timer, a shop section with a CTA, a blog section, and logos.

Inner Pages

Furniture Shop Divi WooCommerce Theme has 25 inner pages to build your website. This includes all of the standard pages and a few extras.

About

The About page includes a small hero section with information and breadcrumbs followed by a larger section with information. A set of text blocks shows company information. Team Members include social icons that reveal on over. Accordion Modules build the FAQs. It also includes a section for logos.

Our Team

The Our Team page includes Person Modules with social icons that show on hover, as you can see in the middle module of the bottom row. It also includes a smaller FAQ next to a contact form.

Testimonials

The testimonials page includes lots of styled testimonial cards with hover effects. Hovering moves the card downward, changes the color of the quote icon, adds a background to the icon, and adds a bar at the bottom of the card.

Blog

There are four blog pages to choose from including a 2-column grid, a 3-column grid, a list with the image on the left, and a list with the image on the right. The example below shows a 3-column blog grid. The blog cards include hover animations that zoom the image.

This example shows a list with the image on the right.

Blog Post

The layout for the blog posts displays the featured image, blog content, a styled sidebar, recent posts with cards that match the blog, and a styled comment section.

404

The 404 page displays a full-screen image with a background mask that reveals a portion of the image. It also includes a 404 message and a button to return to the home page.

Headers

There are three headers to choose from. All three include a mega menu.

First Header

The first header includes a top bar and navigation with a mega menu. The top bar includes a text CTA. Both areas include icons. Navigation is placed on the right.

Second Header

The second header includes three bars. The top bar shows shopping information, several CTAs, and social media icons. The second bar includes the logos and a search box. Navigation is placed in the bottom bar.

Third Header

The third header includes two bars. The top bar includes elements of the first two headers. Navigation is placed in the center.

Footers

There are three footers to choose from.

First Footer

The first footer displays two search boxes. The first includes a CTA and a small subscribe form, followed by shipping information, and links in multiple layouts.

Second Footer

The second footer displays the shipping information at the top, then the links, and the email form at the bottom.

Third Footer

The third footer includes a background image. A message and an email form are placed at the top, followed by links.

Furniture Shop Divi WooCommerce Theme WooCommerce Pages

Furniture Shop Divi WooCommerce Theme also includes lots of WooCommerce pages and features.

Shop Pages

There are three shop pages to choose from, and you can choose with or without a sidebar. They include AJAX product filters, an AJAX live search, a flying cart, a wishlist, and a quick view popup.

Shop Page One

The first shop pages include a small hero section followed by category icons. A large shop section covers most of the page. It ends with a CTA to a specific category. The shop section includes a filter, pagination, styled purchase buttons, etc.

Shop Page Two

The second shop page includes two shop sections. The first is the newest products. It includes a vertical title. The second is all products. It includes pagination.

Shop Page Three

The third shop page includes one shop section and adds a CTA with a number counter at the bottom of the page.

Single Product Page Layouts

There are several product pages. They include with or without a sidebar, and there are pages for product types. The types include simple, grouped, variable, and external. They all follow a similar design.

Simple Product Type

The simple product-type page includes a sidebar with box shadows. It also includes related products. The sidebar includes a product search, recently viewed products, and product tags. The green line under the title of each sidebar module expands on hover.

Grouped Product Type

The grouped product page type lets the user choose from multiple products on the same page. It also includes related products at the bottom of the page. This example shows a few more of the sidebars including reviews.

WooCommerce Features

There are also many extra features added to WooCommerce including a flying cart, AJAX filters, and more. Hereâ€™s a look at a few of the extra WooCommerce features.

Flying Cart

The flying cart is a popup that shows all the products with their counts in the cart. The user can change the number of items for each product, see the cart page, checkout, share the cart, and continue shopping. The green and red color schemes stand out. I think this is one of the most interesting features of the Furniture Shop Divi WooCommerce Theme.

Cart

The cart itself is clean and includes icons to show where the user is in the checkout process.

Wishlist Popup

When the user adds an item to the wishlist, a small popup confirms the item was added. It includes a list to view the wishlist.

Wishlist

The wishlist page includes the same styling as the rest of the site and includes social media sharing icons.

AJAX Search

Product search uses AJAX, so the user doesnâ€™t need to go to a different page to see the results. Itâ€™s fast and easy to use. It shows the categories and the products. This example shows the AJAX search box in the header.

Where to Buy Furniture Shop Divi WooCommerce Theme

Furniture Shop Divi WooCommerce Theme is available in the Divi Marketplace for $39.99. It includes unlimited usage, one year of updates and support, and a 30-day money-back guarantee.

Ending Thoughts

Thatâ€™s our look at the Furniture Shop Divi WooCommerce Theme for Divi. There are a lot of WooCommerce pages and features available within this Divi Child Theme. I found the pages and features easy to use. The color options make it easy to match the Child Theme to your branded colors, making it look different from the original design. If youâ€™re interested in a WooCommerce Child Theme, Furniture Shop Divi WooCommerce Theme is worth a look.

We want to hear from you. Have you used the Furniture Shop Divi WooCommerce Theme? Let us know how you like it in the comments.

The post Divi Product Highlight: Furniture Shop Divi WooCommerce Theme appeared first on Elegant Themes Blog.
17.09.2023
How to Show Diviâ€™s Comments Module to Logged-In Users Only
The comments section of any blog can be a place of great discussion. However, there may come a time when you want to build your community online. With the Divi Condition Options feature, we can prevent users not part of your blog from commenting on posts. This could work for a members-only community or as a perk of a membership site.

In this tutorial, we’ll show you how to display Divi’s Comments Module to logged-in users only, this will allow you to directly interact with your community! We’ll use the Film Lab Blog Post TemplateÂ for the base of this Divi tutorial.

How to Create a Members-Only Comment Section

Divi’s Condition feature allows us to choose a set of parameters with which modules, rows, columns, and sections can interact. For our case, we’ll want to set the display conditions based on a user’s logged-in status. Here’s a summary of the steps we’ll take in this tutorial to achieve our members-only comment section:
1. Upload your blog post template to the Divi Theme Builder (or create your blog template!)
2. Create your members-only comment section containing a Login Module
3. Activate Display Conditions for the row containing the Login Module
4. Activate Display Conditions for the row containing the Comment Module
5. Save and test the template in an incognito window
Before: A Free-for-All All Comment Section

This is what the Film Lab Blog Post Template looks like without the members-only comment section. Notice that anyone can land on a blog post, read it, and interact with the comments section.

After: A Members Only Comment Section

Using Divi’s Condition Options, we can now show a Login Module. Once a user has logged in, they can interact with the Comment Module. If they are not a logged-in user, they cannot see or submit a comment.

Installing the Blog Post Template

Before we start creating our members-only comment section, we need to download the template we’ll use. You can download the Film Lab Blog Post Template here.

Go to Divi Theme Builder

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

Upload Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

Navigate to the import tab, upload the JSON file you could download in this post, and click ‘Import Divi Theme Builder Templates.’

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new template with a new body area assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template activated.

Modifying The Template

Open Post Template

Now that our template is installed and assigned to all the blog posts on our site, we can begin building our members-only comment section. We start by opening the template.

Add a New Row for the Login Module

Add a new row within the same section as the Comment Module of this template. Switch to wireframe view to make it easier. Then, click the green plus icon to add a new row above the row containing the Comment Module.

Next, we’re going to add one column to the row.

Add Login Module

In our new row, we’re going to add a Login Module. We want users to log in to our website to access our members-only comment section. Scroll through the Module modal box till you see the

Add Text to Login Module

Let’s add a title to the Login Module. We’ll also use this title to ask users to log in before accessing our comments section.

Style Login Module

Now, we will style our newly added Login Module to match the branding of the Film Lab Blog Template.

Setting the Background of the Login Module

Click on the paint bucket icon. This will add a solid fill color of #ff4125 to the module’s background. Next, click on the Use Background Color toggle.

Background
- Background Color: #ff4125
- Use Background Color: Yes
Styling the Fields

For the Fields, we will use the same color as the section for its background with black text.

Fields: Background and Text Styling
- Fields Background Color: #eae9e4
- Fields Text Color: #000000
- Fields Focus Background Color: #eae9e4
- Fields Focus Text Color: #000000
We will also give the fields a border and no rounded corners. This will imitate the styling of the Comment Module.

Fields: Background and Text Styling
- Fields Rounded Corners: 0
- Fields Border Styles: All
- Fields Border Width: 1px
- Fields Border Color: #000000
- Fields Border Style: Solid
Styling the Title

The title will use the same font used throughout the template and will be white.

Title Text
- Title Heading Text: H2
- Title Font: Mulish
- Title Text Color: #ffffff
Notice that we add responsive sizes for the title to look good on different screen sizes.

Title Text: Font Size
- Title Text Font Size (Desktop): 64px
- Title Text Font Size (Tablet): 48px
- Title Text Font Size (Mobiler): 48px
Styling the Button

To save time, copy and paste the button settings from the Comment Module to our Login Module. Click on the settings icon for the Comment Module.

Navigate to the Design tab. Scroll down to the Button tab. Right-click on the button tab and click Copy Button Styles.

Afterward, exit the Comment Module. Enter the Login Module by clicking on the gear icon.

Again, click the Design tab and scroll down to the Button tab. Next, right-click and select Paste Button Styles. Voila! The button looks close to the button within the Comment Module.

Now, our Login Module’s button closely matches the styling of the Comment Module buttons. Yay us!

Apply Display Condition to Login Module Row

With our Login Module styled, we can now put our first Display Condition into place. The Display Condition is critical for creating a members-only comment section. Divi provides various options within the Display Condition feature that help make this possible. Click on the gear icon to enter the settings for the row containing the Login Module.

Click on the Advanced tab within the row settings, then click the Conditions tab. Then, click on the plus icon.

When you click on the plus icon, you’ll have many options for what condition you’ll display (or hide) this row. Scroll down to User Status, and then click Logged In Status.

Once that is done, we’ll receive another modal box. Within this modal box, we want to click on the dropdown that says, User is Logged In and change that to User is Logged Out. This is what contributes to our members-only comment section. As we want people to be site members, they must have a valid login credential to access our comments section. If they don’t have valid credentials, they can’t access the comment section of our site.

Display Conditions
- Display Only If: User is Logged Out
- Enable Condition: Yes
Once you’ve selected your Display Condition, ensure that you save your changes by clicking on the green check button of the modal box. Be aware of the notification regarding caching plugins.

Activating Display Conditions for the New Members Only Comment Section

The final piece of this tutorial is setting up the Display Condition for the row containing the Comment Module. To do this, click the gear icon to access the row settings.

Like the row containing the Login Module, once inside the Row Settings, we’ll click on the Advanced tab, then click the Conditions tab and press the plus icon to add our Display Condition.

For the row containing the Comment Module, instead of displaying only if the user is logged out, we want it to display only if the user is logged in.

A Finished Members Only Comment Section

Now that we’ve added Display Conditions to both the Comment Module and the row with the Login Module, we can do a quick test. Visit a blog post on your site in an incognito or private browsing window.

We use a private browser or incognito window to test our display conditions because the window will temporarily log us out of our website while browsing within it. When you go back to regular browsing and you *are* logged into your website, you should see your comment section. Alternatively, you can log out of your WordPress website to see your finished work! While we did this tutorial on a Comment Module, this can be applied to any module, row, column, or section natively within Divi; no additional plugin is needed. Take some time to mix and match the different display settings and see what you make.

In Conclusion

Creating a community on your WordPress website allows you to deepen the trust of those who use your website the most. A way to do this is by creating a members-only comments section that allows members to interact with each other easily. Divi has built-in tools and features that make doing this a breeze. With Divi’s native Display Conditions, allowing your users to only interact with each other is possible. Furthermore, you can easily style your Comments Module using the Design tab and Divi’s complete editing tools. To build an agile private community, you don’t need to install a membership plugin when you use Divi. By activating certain features in Divi’s core, you can create a logged-in user comment section, strengthen your online community, and keep your WordPress website light and agile. Before reaching for a plugin to add simple membership features to your website, consider checking out Divi’s Display Conditions for aspects of your website today.

The post How to Show Divi’s Comments Module to Logged-In Users Only appeared first on Elegant Themes Blog.
12.09.2023