How to Create a Team Members Section in Divi Builder

Divi Builder comes with a module called Person. It’s a versatile enough module. Thanks to its ability to add dynamic content, you can use the module to add an author box to a custom single post template you created with Divi Builder. Another usage example, you can use the Person module to create a team members section, which we will cover shortly in this article. There are 5 elements you can add when creating a team members section using the Person module of Divi Builder.

  • Image
  • Name
  • Job title
  • Description
  • Social media profiles

Here is an example of the team members section created with the Person module.

You can definitely create a better team members section than the one above. It’s just an example.

How to create a team members section in Divi Builder using the Person module

Start by adding a new regular section by clicking the blue plus icon on the canvas area of the Divi Builder editor. Add a row and select a column structure according to the number of team members you want to add. We select the three-column structure in this example.

Add a new module by clicking the grey plus icon on the first column (leftmost). Since we want to add the Person module then select Person.

The Person module settings panel will appear right after you add the Person module. You can make the customization and styling process from this panel.

As we said earlier, there are 5 elements you can add to each team member profile:

Image

To add the image of your team member, you can open the Image block under the Content tab on the Person module settings panel. Simply click the image holder to select the image you want to use. Or, if you want to use a dynamic image instead (i.e. user profile picture), you can hover your mouse the image holder and click the trash icon then click the database icon to select a dynamic image type you want to use.

To style up the image, you can open the Image block under the Design tab. From this block, you can set the border radius, border style, apply CSS filters, and so on.

If you want it, you can use an animation effect where the image changes when a visitor hovers on it. Read our previous article to learn more.

Name, job title, description, and social media profiles

To add your team name, job title, description, and social media profiles, you can open the Text block under the Content tab on the Person module settings panel. Simply add the name on the Name field, the job position on the Position field, description on the Body field, and social media profiles on the available social media fields. If you want to add dynamic content, you can click the database icon on each field.

Once done adding the name, job description, and so on, you can go the Design tab style them up.

Styling up the social media icons

To style up the social media icons, you can open the Icon block on the Design tab. You can set the icon color from this block. If you want to use a custom icon size, simply enable the Use Icon Font Size option and set the size you want.

If you want to change the default alignment (left), you can open the Text block and select the alignment you want from the Text Alignment option. This setting will also set the alignment of other elements (except for the image), but since you can set custom stylings for other elements, you can set the alignment of the icons from here.

Styling up the name

To style up the name element, you can open the Title Text block on the Design tab. From this block, you can set the typography (font family, font style, font size, and so on) of the name, the text color, add text shadow, set the alignment, and so on.

Styling up job title

To style up the job title element, you can open the Position Text block on the Design tab. Same as the name element above, you can also set the typography, text color, and alignment of the job description element from this block.

Styling up the description

To style up the description element, you can open the Body block under the Design tab. You can also set the typography, text color, and alignment of the description element from this block. Especially for the description, you can also style up the link element, bullet, numbering, and blockquote. Simply click the tabs to style them up.

Copy the Person module on the first column

Once you are done styling up the Person module on the first column, you can copy it and paste it to other columns and then tailor the content (image, name, job position, description, and social media profiles). This will save you a lot of time rather than adding and styling up the Person module on each column from scratch.

To copy the Person module on the first column, click the three-dot icon on the module handle and select Copy Module then go to the second column. Right-click and select Paste Module. Do the same thing in the third column.

The bottom line

If you are looking to create a team members section on your Divi Builder-powered page, you can use the Person module. You can add elements such as the images of your members, their names, job position, a short intro about them, and their social media profiles. While the module is useful enough to create a team members section, it has some drawbacks. For instance, it offers no full control to customize social media icons. Also, there is no option to add an Instagram account. Also, you won’t be able to set the size of the image element.

How to Change an Image on Hover in Divi Builder (A Simpler Method)

Creating a page using Divi Builder, you can apply some animation effects to the elements on your page. From a simple effect like changing an image on hover to a complex scroll effect. In this article, we will show you how to add the first mentioned effect.

Does it require CSS knowledge to change an image on hover in Divi Builder? Unless you want to apply an advanced effect style, it requires no CSS skills to do so. Divi Builder comes with a built-in setting option to allow you to change an image on hover. Well, not just the image. You can actually display different content on other elements — such as a button and text — when a user hovers over the associated elements.

Here is an example we created. As you can see, each image changes as the cursor pointed to it.

In the example above, we added the images on three different columns on a row.

To get started, first, prepare a section and row where you want to add your images. You can read our previous articles to learn about section and row in Divi Builder. Once everything is ready, click the grey plus icon on a column and add the Image module.

The Image module settings panel will appear right after you add the Image module. Click the image holder on the Image block under the Content tab on this panel and select your first image (the image before the hover).

Once your first image is added, hover your mouse over it and click the mouse icon and click the Hover tab.

Once you are on the Hover tab, simply click the existing image and replace it with the second image (the image that appears on hover).

That’s it. You can go to the Design tab to style up the image. Read our previous article to learn how to work with the Image module in Divi Builder.

A little tip. You can apply different CSS transform to the second image to get a more compelling animation style. Take a look at the example below.

How to apply a CSS transform?

First, open the settings panel of one of the Image modules (by clicking the gear icon on the module handle). On the Image module settings panel, go to the Design tab and open the Transform block. On the Transform block, click the cursor icon and select the Hover tab.

Select the CSS transform you want to apply (by clicking one of the available tabs) and you use your mouse to set the transform value (or you can also set the value manually by typing your preferred value).

To set the transition duration of the CSS transform, you can go to the Advanced tab and open the Transition block. From this block, you can also set the transition delay and the transition speed curve.

Simply repeat the steps above to apply a CSS transform to other images you have.

10 Elementor Add-ons to Create Team Members Section

There are two possible reasons why you want to create a team members section on your Elementor page. First, you want to appreciate your team members. Second, you want to let your aspiring clients know that your business is run by the right people. There are over 90 widgets offered by Elementor in total. Unfortunately, there is no widget dedicated specifically to creating a team members section.

To create a team members section is Elementor, you can use the combination of the Image widget, Text widget, and Social Icons on a column. Or, if you look for a simpler solution, you can use one of the following add-ons. The Elementor add-ons we are going to mention below come with a widget dedicated to creating a team members section. Here is the list.

1. JetElements

JetElements is a premium Elementor add-on part of the JetPlugins family. It offers creative widgets to enrich your Elementor widgets collection. There are over 40 widgets offered by JetElements in total, including a Team Member widget that is aimed specifically at creating a team member section. You can add elements like image, name, job position, description, social media icons, and so on to the team members section. The setting options offered by JetElements for its Team Member widget are rich enough. You can see the demo of its Team Member widget on its official site.

2. Happy Addons

Happy Addons is a popular enough Elementor add-on, with over 100,000 active users. One of the benefits of using Happy Addons is that it offers some features to streamline your workflow. For example, it offers presets to allow you to instantly have a stylish widget. Happy Addons also comes with a widget to allow you to create a team members section more effortlessly. There are ten presets you can choose from to instantly have a stylish team members section. The screenshot above is one of the presets offered by Happy Addons. The widget to create team members is available on the free version of Happy Addons

3. Essential Addons

If you are looking for a free add-on to create a team members section, Essential Addons is an add-on you can give a try. The add-on itself is released as a freemium product. You can create a team members section for free as the widget to do so is available on the free version. When creating a team members section using this add-on, you can also add elements like image, name, job title, social media profiles, and so on. You can see the examples of the team members section created using Essential Addons on its official website.

4. HT Mega

HT Mega also offers a widget to make it easier for you to create a team members section on your Elementor page. It offers seven presets you can choose from so that you can create a stylish team members section more quickly. One drawback we found is that HT Mega doesn’t offer a setting option to set the image size. It’s a bit hassle as you need to edit the image first (using Photoshop or GIMP) to get a precise size before you use it. You can create a team members section for free using HT Mega.

5. PowerPack

PowerPack is developed by the same company that develops DiviMonk, a website that offers Divi Builder layouts. PowerPack itself is released as a premium Elementor add-on just like JetElements. In other words, you can’t use it for free. It’s especially a great add-on for agencies thanks to its white-label feature that allows you to replace the PowerPack attributes with your company’s attributes. The add-on also offers a widget that you can use to create a team members section. You can visit its official website to see the examples of the team members section created using PowerPack.

6. Mighty Addons

Compared to other add-ons above, say JetElements, the styling options offered by Mighty Addons for the Team widget tend to limit. Some add-ons above, including JetElements, allow you to create a team members section in several styles. For instance, you can create the type of team members section where the team member’s info (name, job title, description, and so on) appears only when you hover your mouse over its profile picture. In Mighty Addons, you can’t do so. All you can do is use a different image shape (by setting the border radius).

7. Unlimited Elements

Unlimited Elements is an add-on you can try if you are looking for a free solution to create a team members section is Elementor. There are several team member section styles you can create with this add-on, including the one you see on the image. When creating a team members section using this add-on, you can customize the elements to your liking. Unfortunately, there is no setting option to set the image width. Instead, you can only set the image height.

8. Move Addons

Another Elementor add-on that you can use to create a team members section for free is Move Addons. The add-on offers 5 presets for the Team Member widget to streamline your workflow. Elements like image, name, description, and social media profiles can be added. To add an image element, you need to edit it first to get the precise size as Move Addons offers no setting option to set the image size.

9. Premium Addons

Premium Addons has about 300,000 active installations, making it one of the most popular Elementor add-ons. This add-on also comes with a widget — which is available on the free version — that you can use to create a team members section on an Elementor page. The setting options offered by Premium Addons for the Team Member widget are complete enough. You can, for instance, set the width of the image so that you don’t need to edit the image on a third-party tool. You can even apply CSS filters and blend mode to the image element.

10. Master Addons

Master Addons is another add-on that allows you to effortlessly create a team members section to an Elementor page. Just like other add-ons above, the Team Member widget of Master Addons also allows you to add elements like image, name, description, and social media profiles. There are 11 presets you can choose from to instantly have a stylish team member section. There is no option to set the image width so that you need to edit the image before you use it to get a precise size. The widget to create the team members section is available on both versions of Master Addons (free and pro).

How to Use the Blog Module of Divi Builder

Divi Builder allows you to add dynamic content to the page or theme builder template you are working on. From the default dynamic content of WordPress to custom fields you created with plugins like ACF and Pods. One of the dynamic content types you can add is the blog post. In Divi Builder, you can use the Blog module to add the blog posts. You can also use the module to display other content types on your website, including pages and even media.

You can use the Blog module to display blog posts on any page. From the homepage, the custom category page, custom author archive page, and so on. You can even use the module to display blog posts on the footer area if you want it.

New to Divi Builder? Read on to learn how to use the Blog module.

How to use the Blog module of Divi Builder

The Blog module can be added to a row on either a regular section or specialty section (read our previous article to learn more about row and section in Divi Builder). To add the Blog module, simply click the grey plus icon on the column — on the canvas area — where you want to add the module to and select Blog.

The Blog module settings panel will appear right after you select the Blog module. You can use the settings panel to set the layout, set the basic settings (excerpt length, enable/disable post elements), apply some styling options, and so on.

The basic settings

One crucial thing you need to know before we step further. Unlike the Posts widget of Elementor, the Blog module of Divi Builder offers no advanced filtering feature to filter the blog posts by author, category, or tag. If you want to display blog posts from a category, for instance, you can create a custom category page from theme builder (Divi -> Theme Builder). You can filter the blog posts from there. Read this article for more detailed instructions.

To make the basic settings, you can open the available blocks under the Content tab on the Blog module settings panel. There are 5 setting blocks you can open on the Content tab.

  • Content

As mentioned earlier, not only you can use the Blog module to display blog posts, but also other content types like pages and media. You can select the content type to be displayed on the Content block under the Content tab. From this block, you can also set the excerpt length, the number of posts (post count), and the date format.

  • Elements

From this block, you can set the post elements to be displayed. From featured image, read more button, author, date, excerpt, pagination, comment count, and so on.

  • Link

You can open this block to add a link to the Blog module. Please note that this not a link for individual blog posts. Instead, it’s a link for the Blog module. If you add a link to the module, your module will be wrapped by a link you add (you can still click links of individual blog posts).

  • Background

You can open this block if you want to add a background to the Blog module. There are 4 background types you can add: solid color, gradient color, image, and video. If you prefer to use an image background, you can enable the parallax effect if you want it.

  • Admin Label

Admin label is a kind of identifier name to make it easier for you to identify an element in Divi Builder. Adding an admin label is useful if you are creating a long, complex page. You can open the Admin Label block under the Content tab to add an admin label to the Blog module.

Styling up the Blog module

Once you are done making the basic settings on the Content tab, you can switch to the Design tab to style up the Blog module. First off, you can open the Layout block to set the layout.

As you can see, Divi Builder only offers two layout options for the Blog module: Fullwidth and Grid. If you want to display the blog posts in a list style, you need to add custom CSS.

Here are other blocks you can open on the Design tab on the Blog module settings panel.

  • Overlay

You can open this block to add an overlay color to the featured image of the blog posts. Make sure to enable the Featured Image Overlay option before being able to set the overlay.

  • Image

You can open this block to apply some stylings to the featured image of the blog posts. You can set the border radius, border color, border size, apply CSS filters, and so on. You can read our previous article to learn how to style up an image in Builder.

  • Text

You can open this block to set the alignment as well as applying text shadow to the text content (title, excerpt, and post meta). You can set custom stylings to individual text content on the blocks beneath this block.

  • Title Text

As just said above, you can set custom stylings to the individual text content of the blog posts. The Title Text block allows you to set the typography (font family, font style, text size, and so on) of the title text, as well the text color and text shadow.

  • Body Text

You can open this block to set the typography of the post excerpt (or post body if you prefer to display the full content). Divi Builder allows you to use different typography settings on each element on the blog post (link, block quote, bullet, and numbering). You can click the tabs to set the typography of each element.

  • Meta Text

You can open this block to set the typography of the post meta (author, date, category, comment count). You can also set the text color, alignment as well as the text shadow.

  • Read More Text

You can open this block to set the typography of the read more element. In addition, you can also set the text color as well as the text shadow.

  • Pagination Text

You can open this block to set the typography of the pagination. Also, you can set the text color as well as the text shadow.

  • Sizing

You can open this Sizing block to set the height as well as the width of the Blog module. You can use either a percent unit or a pixel unit. If you want to use the percent unit, you can type the percent symbol manually.

  • Spacing

You can open this block to set the margin as well as the padding of the Blog module. You can read our previous article to learn more about margin and padding in web design.

  • Border

If you want it, you can add a border to each blog post on the Blog module. You can add a border to each side (top, bottom, right, left). You can click the tabs on the Border Styles section to set a custom border.

  • Box Shadow

From this block, you can set the box shadow of the Blog module. Divi Builder offers 7 box shadow styles you can choose from. After selecting one, you can set the shadow color.

  • Filters

From this block, you can apply CSS filters to the Blog module. There are 6 CSS filters you can apply to the blog (Hue, Saturation, Brightness, Contrast, Invert, and Sepia). Also, you can set the opacity level as well as the blur level.

  • Transforms

Divi Builder also offers a setting option to add CSS transform to an element. If you want to apply a CSS transform to the Blog module, you can open the Transform block. Simply select a CSS transform you want to apply and use your mouse to set the transform value (or simply type your desired transform value instead).

  • Animation

Want to add an entrance animation to the Blog module? You can do so from the Animation block. There are 7 entrance animation styles offered by Divi Builder you can choose from.

Advanced settings

If you need to make some advanced settings to the Blog module, you can go to the Advanced tab.

  • CSS ID & Classes

Divi Builder allows you to add custom CSS and you have two options to do so: via the Code module or directly. If you prefer the first method, you can open the CSS ID & Classes to add the CSS id or CSS class.

  • Custom CSS

You can open the Custom CSS block if you want to add CSS directly instead of via the Code module. You can simply type the CSS code on the available fields.

  • Visibility

If you want to disable the Blog on a certain device type, you can open the Visibility block. You can simply tick the device type (desktop, tablet, smartphone) you want to disable the module on to disable it.

  • Transitions

You can open this block to apply the transitions of the Blog module. In this context, transitions refer to the duration of the hover animation.

  • Position

In Divi Builder, when you add a new element — be it a section, row, or module — the position is set to static (Default). In case you want to use a custom position, you can open the Position block. The custom position options you can set are:

Relative: If you select this option, the Blog module will follow the normal flow of the page. This option offers top, bottom, and right properties. Also, you can set the Z index.

Absolute: If you select this option, there will be no actual space created on the page for the Blog module. You can think of it as a floating module on top of other sections that take up actual space.

Fixed: If you select this option, the Blog module will break the normal flow of the page and it has no actual space on the page.

  • Scroll Effects

If you want to advanced scroll effects to the Blog module, you can open this block. There are 6 scroll effects you can set. You can read our previous article to learn how to add scroll effects in Divi Builder. From the Scroll Effects block, you can also apply a sticky effect to the Blog module

The bottom line

The Blog module is a Divi Builder module dedicated to displaying the content on your website. From blog posts, pages, to media. You can use it when creating a custom homepage — or other site parts like custom category page, custom author archive page, and so on — on WordPress using Divi Builder. Technically, you can add the Blog module anywhere. Even when you are creating a custom footer, for instance, you can also use it to display your site content.

8 Elementor Add-ons to Add Accordion Content

Elementor has a native widget — the Accordion widget — to add accordion content to a page or theme builder template. The widget is available on both the free version and the pro version of Elementor. While you can use the widget to add accordion to the page you are working on, there are probably some styling options you expected that are not available, so you prefer to use an Elementor add-on instead. Or maybe, you want to add an image accordion?

For the latter scenario, you need to install an add-on as Elementor has no native widget to add an image accordion.

Whichever your scenario, if you are looking for an Elementor add-on that offers widgets to add accordion content, here are the options you can choose.

1. Essential Addons

Discussing Elementor add-ons, you just can’t miss out Essential Addons. By far, it is the most popular Elementor add-on with over 800,000 active users according to a stat on WordPress.org. The add-on — which is developed by WPDeveloper — offers two widgets to add accordion content: the Advanced Accordion widget and the Image Accordion widget. The Advanced Accordion widget is used to add text accordion while the Image Accordion widget is used to add an image accordion. The Image Accordion widget allows you to add either vertical or horizontal image accordion. These widgets are available on both versions of Essential Addons (the free version and the pro version).

2. JetTabs

JetTabs is a premium Elementor add-on. To be able to use it, you need to spend at least $15 per year. It is a part of the JetPlugins family. The add-on adds 4 widgets to your Elementor, including two widgets to add accordion content: The Classic Accordion widget to add a text accordion and the Image Accordion widget to add an image accordion. When adding a text accordion, you can also add the icon as well as image elements. You can use the JetTabs add-on to add a stylish accordion to a page.

3. Happy Addons

Happy Addons has a widget called Advanced Accordion. Despite its name, you can only use the widget to create a basic accordion. There is no option to create an image accordion although you can add an image element thanks to its WYSIWYG content editor. To streamline your workflow, Happy Addons offers ten predefined accordion styles (presets) you can choose from. You can simply select one to instantly get a stylish accordion. The Advanced Accordion widget of Happy Addons allows you to use a custom icon for each accordion item. To be able to use the widget, you need to use the pro version of Happy Addons.

4. Stratum

If you are looking for an Elementor add-on that offers a free widget to add an image accordion, Stratum is one of the options you can give a try. In addition, there is also a widget to add a text accordion. When adding an accordion content using Stratum, you can set the interaction option. Whether hover or click. In addition to two widgets to add the accordion content, there are over 18 other widgets offered by Stratum.

5. PowerPack

If you work for a web agency, PowerPack is a great add-on. Mainly because it offers a white-label feature to allow you to legally remove the PowerPack attributes with your company’s attributes as if the add-on is developed by your company. PowerPack — which is released as a premium add-on — also comes with widgets to create accordion content just like other add-ons above. With PowerPack, you can either create a text accordion or an image accordion. The Image Accordion widget — the widget to create an image accordion, allows you to create a vertical or horizontal accordion.

6. Mighty Addons

Mighty Addons is another add-on you can try if you need to look for an alternative to Elementor native Accordion widget. Unlike other widgets of the add-ons above, the widget of Mighty Addons — called the Accordion widget — offers an option to open multiple items on the accordion. There is also an FAQ Schema option in case you want to create a FAQ section on a page. Mighty Addons itself is a freemium add-on and the widget to create the accordion is available on both versions of Mighty Addons. In other words, you can add accordion content to a page using Mighty Addons without needing to spend extra money.

7. Unlimited Elements

Unlimited Elements is an Elementor add-on that offers rich enough widgets. If you need to create a basic accordion — the text accordion — you can use the free version of Unlimited Elementors. While to create an image accordion you need to use the pro version. The free version also offers several other widgets to create an accordion, including the Faq Accordion widget and the Post Accordion widget.

8. The Plus Addons

The Plus Addons also offers a widget to create an accordion to the page you are working on. The widget is available on both the free version and the pro version of The Plus Addons, allowing you to add accordion content for free. The Accordion widget of The Plus Addons allows you to add the accordion content from a template, but you need to use the pro version to unlock this feature. The free version only allows you to create a basic accordion like the one you can create with the native Accordion widget of Elementor.

How to Add Scroll Effects in Divi Builder

Adding scroll effects is a great idea to impress your site visitors. If you have a WordPress-based website built with Divi Builder, you don’t need to install any additional plugin anymore as Divi Builder comes with a built-in feature to add scroll effects. Instead of one, there are 6 scroll effect types offered by Divi Builder. This article will show you how to add scroll effects in Divi Builder.

Before we take a step further, let’s start with a brief intro about scroll effects. What is a scroll effect?

A scroll effect is the type of animation that occurs when a visitor scrolls down or up the page on your website. In this context, the animation timeline is based on the object’s position within the browser viewport. When adding a scroll effect in Divi Builder, you can control the viewport. While the speed is based on how fast a user scrolls the page as well as the magnitude of the effect.

How to add scroll effects in Divi Builder

Divi Builder offers three element types that you can use to design your page: section, row, and module. You can add scroll effects to these three elements. There are 6 scroll effect types offered by Divi Builder. You can use one effect or combine two or three — or even six at once — scroll effects to create a stunning animation effect to an element.

To add scroll effects, first, open the settings panel by clicking the gear icon on the element handle (blue for section, green for row, and grey for module).

On the setting panels, go to the Advanced tab and open the Scroll Effects block. On the Scroll Transform Effects section, select the scroll effect type you want to add and toggle the Enable Vertical Motion switch.

After toggling the Enable Vertical Motion switch, you can set the top viewport and bottom viewport. You can also set the motion effect trigger.

What is viewport by the way? Viewport is user’s visible area on the web browser.

Scroll effect types offered by Divi Builder

As said earlier above, there are 6 scroll effect types offered by Divi Builder:

1. Vertical Motion

This scroll effect option moves the object/element vertically.

2. Horizontal

This scroll effect option moves the object/element horizontally.

3. Fading In and Out

This scroll effect adds fading and fading movement to the object/element.

4. Scaling Up and Down

This option adds scaling up and scaling down effect to the object/element.

5. Rotating

This option adds rotating effect to the object/element.

6. Blur

This option adds blur effect to the object/element.

How to Resize a Column Width in Divi Builder

To make it easy for you to set the layout when creating a page or theme builder template, Divi Builder offers columns you can make use of. You can add columns on a row (read our previous article to learn more about row in Divi Builder). Divi Builder itself offers 20 column structures which you can use according to your needs. Each column structure consists of a certain number of columns, with different predefined widths. Unlike, say Elementor, Divi Builder offers no built-in feature to resize the column width. To resize a column width in Divi Builder, you need to add CSS code.

In this article, we will show you how to resize a column width in Divi Builder. We have a row with three columns as follows.

As you can see, each column has the same width. We will resize the widths to get a composition like the following:

  • The width of the column 1: 25%
  • The width of the column 2: 50%
  • The width of the column 3: 25%

By the way, in the example above, we set the gutter width to 1. This setting removes the space between each column on a row. To set the gutter width, you can open the row settings panel by clicking the gear icon on the green handle. On the row settings panel, go to the Design tab and open the Sizing block. Enable the Use Custom Gutter With option and set the gutter with on the Gutter Width option.

To start resizing the column widths, open the row settings panel as you have just done above. On the Content tab, you can see the columns on the row. On the top is the first row (leftmost) while on the bottom is the last row (rightmost).

To resize the width of column one, you can open the column settings panel by clicking the gear icon on column one.

Once the panel switches to the column settings panel (from row settings panel), go to the Advanced tab and open the Custom CSS block. Paste the following CSS code to the Main Element field.

width: 25%!important;

If you want to set a precise width in pixel, you can also use the pixel unit (px) instead of percent.

You can repeat the steps above to resize the widths of other columns. Here is the result.

How to Use the Button Module in Divi Builder

When creating a landing page (or any page) using Divi Builder, you might want to add a button element to make it easier for your visitors to take an action you wish for, according to the purpose of the page creation. Amongst design elements (called modules) offered by Divi Builder is the Button module, which you can use to add a button element to the page you are working on. Of course, you can also add the Button module to a theme builder template such as the custom header template, custom footer template, and so on. If you are new to Divi Builder, this article will show you how to add a Button module as well as how to style it up.

How to add a Button module in Divi Builder

To create a page using Divi Builder, you need to add at least one section and one row. When adding a row, you can select the column structure according to your needs. You can then add the modules — including the Button module — to the columns on a row. We have separate articles that cover how to work with a section and a row in Divi Builder. You can read them to learn more.

To add a Button module, you can simply click the grey plus icon on the column you want to add it to and select Button.

The Button module settings will appear right after you select the Button module. You can make the button customization process from this panel.

Before start styling up the button, you can add a link to the button as well as set the button text. To add the link, you can open the Link block under the Content tab.

While to set the button text, you can open the Text block. Also under the Content tab. You can either add a static text or dynamic text. To add a dynamic text, you can click the database icon on the Button fields.

Setting the button size

Divi Builder offers no specific setting option dedicated to setting the button size. So, how to set the button size?

To set the button size, you can set the padding. To do so, you can go to the Design tab on the Button module settings panel and open the Spacing block. You can simply set the top padding, bottom padding, right padding, and left padding. Setting the padding will add space between the button text and button border, which also affects the button size.

Styling up the button

Once you are done setting the button size, setting the text, and adding the link, you can start to style up the button. The default button look offered by Divi Builder is a white button with a blue border and blue text. Before being able to style up the button, you need to enable the custom style. To do so, open the Button block under the Design tab and enable Use Custom Styles For Button option. Enabling this option will open more styling options.

From the Button block under the Design tab (with the Use Custom Styles For Button enabled), you can:

  • Set the button text size
  • Set the button text color
  • Set the button background. You can use a solid color background, gradient, or image
  • Set the button border width
  • Set the button border color
  • Set the button border radius
  • Set the font family of the button text
  • Set the font weight of the button text
  • Set the button icon

Once done making the styling options on the Button block, you can open other blocks under the Design to apply other styling options.

  • Box Shadow

You can open this block to apply a box shadow to the button. There are 7 box shadow options offered by Divi Builder. After selecting one, you can set the shadow color, horizontal position, vertical position, blur strength, and spread strength.

  • Filters

You can open this block to apply CSS filters to the module.

  • Transform

You can open this block to apply CSS transform to the button. Simply select the CSS transform you want to apply (by clicking one of the available tabs), and use your mouse to set the transform value.

  • Animation

You can open this block to set the entrance animation of the Button module. There are seven entrance animation options you can choose from. After selecting one, you can set the animation duration, animation delay, and animation starting opacity.

Advanced settings

Once you are done making the styling on the Design tab, you can switch to the Advanced tab to make some advanced settings. From adding custom CSS to setting the scroll effect. There are 7 blocks you can open on the Advanced tab.

  • CSS ID & Classes

You can open this block to add custom CSS via the Code module. You can open the block to add the CSS id and CSS class.

  • Custom CSS

You can open this block to add the custom CSS directly instead of via the Code module. You can simply paste your CSS code to the available fields.

  • Attributes

You can open this block to set the button link attribute.

  • Visibility

From this block, you can disable/enable the button on certain device types (desktop, tablet, and smartphone). Simply tick the device type you want to disable the button on.

  • Transitions

You can open this block to set the transition of the hover animation.

  • Position

When you add a new module in Divi Builder (including the Button module), the position is set to static (Default). If you want it, you can set the position to Relative, Fixed, or Absolute.

Relative: If you select this option, the button module will follow the normal flow of the page. This option offers top, bottom, and right properties.

Absolute: If you select this option, there will be no actual space created on the page for the button module. You can think of it as a floating element on top of other rows that take up actual space.

Fixed: If you select this option, the button module will break the normal flow of the page and it has no actual space on the page.

  • Scroll Effects

You can open this block to set scroll effects to the Button module. You can either set the horizontal scroll effect or vertical scroll effect. You can also apply the sticky option from this block.

The bottom line

Adding a button will make it easy for your site visitors to take a certain action such as making a purchase or downloading a digital product. In Divi Builder, you can use the Button module to add a button element to a page or theme builder template. Divi Builder offers rich enough styling options to allow you to create a stylish button. If you have CSS knowledge, you have limitless customization options as Divi Builder allows you to add custom CSS.

How to Add a Label to a Menu Item in Divi Builder

Navigation menu is a common element found on the header section of a website. It makes it easier for visitors to navigate to the main content offered by a website. In Divi Builder, you can create a custom header and use the Menu module to add menu navigation to your header. The Menu module of Divi Builder allows you to add the search icon and the shopping cart icon. What about the label? Unfortunately, Divi Builder doesn’t offer it. To add a label to a menu item, you need to add custom CSS.

How to add a label to a menu item in Divi Builder

Adding a label to a menu item could draw attention to your visitors. You can implement this practice if you have special content to offer (or campaign). This article will show you how to add a label to a menu item in Divi Builder. Here is an example.

First off, you need to add a CSS class to the menu item you want to add the label to. To do so, go to Appearance -> Menu on your WordPress dashboard. Select the menu you use on your header and edit it.

On the Menu structure column, open the menu item you want to add the label to and paste the following code to the Navigation Label field.

The code:

<label class="menu-label featured-label">Featured</label>MENU ITEM 3
  • CSS class: featured-label
  • Label: Featured
  • Menu Item Label: MENU ITEM 3

Once done adding the CSS class to the menu item, go to Divi -> Theme Builder and edit the header that contains the menu where you want to add the label to. You can read our previous article to learn how to create a custom header in Divi Builder.

Once the Divi Builder editor opens, add the Code module and add the following code to the Code field on the Text block under the Content tab. You can add the Code module to the same column as the Menu module on your header section.

The code:

<style>
  
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
   
.featured-label {
background-color: #F9654D;
}
  
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}
 
.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}
 
@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}
 
}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
   
</style>

If you have CSS knowledge, you can modify the above code to replace the font size, label color, position, and so on.

If you want to add other labels to the other menu items, you can go to the Appearance -> Menu and add a CSS class to the menu items you want to add the label to as we have shown above then add edit the CSS code above. On the code above, the lines to add the label is:

.featured-label {
background-color: #F9654D;
}

So, to add a new label, you can copy and paste the lines above and replace the CSS class as well as the background color. The example below adds a new “Hot” label to a menu item.

How to Display Blog Posts in a List Style in Divi Builder

Divi Builder comes with a module called Blog which is intended to display blog posts on your website. You can use the module when creating a custom homepage, custom category page, or other pages where you need to display the blog posts. When adding a Blog module to a page, you can style it up to make it more compelling. Unfortunately, the styling options offered by Divi Builder for the Blog module are limited enough. You can’t, for instance, set the module to display the blog posts in a list style. If you want to display blog posts in a list style, this article will show you how.

How to display blog posts in a list style in Divi Builder

There are probably some Divi Builder extensions out there that you can use to display blog posts in a list style. But since most Divi Builder extensions are not free, you need to spend extra money. This article will show you the free solution: by adding custom CSS.

First, prepare a section — as well as a row — you want to add the Blog module to. Once they are ready, add the Blog module by clicking the grey plus icon on the canvas area.

On the Blog settings panel (which appears right after you add the Blog module), go to the Design tab and open the Layout block. Make sure the layout is set to Fullwidth.

Next, go to the Advanced tab and open the CSS ID & Classes block. Paste the CSS id left-blog-image to the CSS Class field.

Close the settings panel. Before doing so, make sure to click the green checklist icon on the bottom-right corner to apply the changes.

The next step, add the Code module beneath the Blog module (make sure to add the Code module to the same column as the Blog module). Paste the following code to the Code field on the Text block under the Content tab.

The CSS code:

<style>
@media (min-width: 981px) {
  .left-blog-image .et_pb_post .entry-featured-image-url {
    float: left;
    width: 100%;
    max-width: 150px;
    margin: 0 20px 30px 0;
}
  .left-blog-image .et_pb_post {
    margin-bottom: 20px !important;
  }
}
</style>

You can modify the code above according to your needs. To set the image (thumbnail) size, you can replace the value on the max-width property. To set the space between the image and the text, you can replace the value on the margin property.

If you want to set the excerpt length, you can open the Blog settings panel. You can set the excerpt length on the Excerpt Length option on the Content block under the Content tab.

How to Use the Image Module in Divi Builder

Image is one of the modules offered by Divi Builder. Just like the name suggests, you can use this module to add an image element to the design you are working on (be it a page or theme builder template). New to Divi Builder? No worries. This article will cover everything you need to know about the Image module. From how to add it to how to style it up.

Image itself is an important element of a design. Web design is no exception. A design without an image will be tasteless. The Image module of Divi Builder makes it easier for you to add an image. You can either add a static image or dynamic image (such as featured image, site logo, and author profile picture). The Image module is designed to add a single image. If you want to add an image gallery, you can use the Gallery module.

How to add an image in Divi Builder

The Image module can be added to a row within a regular section (you can read our previous article to learn more about section and row in Divi Builder). To add the Image module, simply click the grey plus icon on a column within a row and select Module.

On the appearing panel, click the image picker on the Image block under the Content tab to select the image you want to use.

To add a dynamic image, hover your mouse over the image picker and click the trash can icon. Click the database icon and select the dynamic image type you want to use.

Adding the link to the image

You can add a link to your image. Same as the image itself, you can also add either a static link or a dynamic link. To add the link, you can open the Link block under the Content tab. You can also click the database icon to add a dynamic link.

Styling up the image

Once the image is added, you can start to style it up. Just like other Divi Builder modules, you can make the styling process on the Design tab on the module settings panel. There are 8 setting blocks you can open to style up the image:

  • Alignment

You can open this block to set the alignment of the image.

  • Sizing

You can open this block to set the size of the image (height and width). By default, Divi Builder uses the percent unit for the height and width, but you can use the pixel unit if you want to. To use the pixel unit, you can type the unit (px) as well as the value, manually.

There is also a Force Fullwidth option you can enable. Enabling this option will make the image fill the entire column associated with the Image module.

  • Spacing

You can open this block to set the padding and the spacing of the Image module. You can read our previous article to learn more about padding and margin in web design.

  • Border

You can open this block to set the border of the image. From the border style, border size, to border color. You can use a different color and size for each border (top, bottom, left, and right). Simply click the tabs on the Border Styles option to set the color and size of each border.

You can also set the border radius. Border radius refers to the tilt level of each corner of the image (top, bottom, left, and right). The higher the values of the border radius, the rounder your image will be. You can set the border radius on the Rounded Corners option.

  • Box Shadow

You can open this block to apply a box shadow to your image. There are 7 box shadow types you can choose from. After selecting one, you can set the horizontal position, vertical position, blur strength, spread strength, and shadow color.

  • Filters

You can open this block to apply CSS filters to the image. There are 6 CSS filter types you can apply:

  • Hue
  • Saturation
  • Brightness
  • Contrast
  • Invert
  • Sepia

You can also set the opacity level of your image from this block, as well as the blend mode.

  • Transform

You can open this block to set CSS transform to your image. There are 5 CSS transform types you can set:

  • Transform Scale
  • Transform Translate
  • Transform Rotate
  • Transform Skew
  • Transform Origin

Simply select the CSS transform you want to apply by clicking its tab and use your mouse to set the transform values.

  • Animation

You can open this block to apply an entrance animation to the Image module. There are 7 animation styles you can choose from. After selecting one, you can set the animation direction, animation duration, animation delay, and so on.

Advanced settings

Once you are done making the styling on the Design tab, you can switch to the Advanced tab to make some advanced settings such as adding custom CSS, set custom position, and so on. There are 7 blocks you can open here:

  • CSS ID & Classes

You can open this block to add CSS ID or CSS class. You can add CSS ID or CSS class if you want to add custom CSS via the Code module.

  • Custom CSS

You can open this block to add custom CSS directly instead of via the Code module. You can add simply add the CSS code to the available fields.

  • Attributes

You can open this block to add the image attributes (alt text and title). You can either use static attributes or dynamic attributes. To add dynamic attributes, you can simply click the database icon on each field (Image Alternative and Image Title Text).

  • Visibility

You can open this block to disable the Image module on a certain device type. You can simply tick the device type to disable the module.

  • Transitions

You can open this block to set the transition of the Image module.

  • Position

When you add a new module in Divi Builder, the position is set to static (Default). If you want it, you can use a custom position for the Image module. You can set a custom position from the Position block under the Advanced tab. The position options you can set are:

Relative: If you select this option, the Image module will follow the normal flow of the page. This option offers top, bottom, and right properties. Also, you can set the Z index.

Absolute: If you select this option, there will be no actual space created on the page for the Image module. You can think of it as a floating module on top of other elements that take up actual space.

Fixed: If you select this option, the Image module will break the normal flow of the page and it has no actual space on the page.

  • Scroll Effects

You can open this block to apply a scroll effect to the Image module. You can, for instance, apply the sticky effect. You can also a scroll effect from this block.

The bottom line

The Image module of Divi Builder is intended to add an image to your design. You can use it to add either a static image or a dynamic image. As we have just covered above, there are plenty of styling options you can apply to your image, including the ability to apply a sticky effect, motion effect, and CSS filters. One thing to note. Make sure to click the green checklist icon on the bottom-right corner of the settings panel every time you make new changes to the Image module (and other Divi Builder modules).

How to Add Google Maps in Divi Builder

When creating a website for a business that has a physical location such as a photo studio rental, restaurant, and so on, you might want to add a map to make it easier for the aspiring customers to find the business you are creating the website of. The vast majority of WordPress page builder plugins have an element to add a map from Google Maps to a page. Divi Builder is no exception. To add a map from Google Maps in Divi Builder, you can use the Map module.

The Map module of Divi Builder supports multiple pins in case the business you are creating the website of has several branches in the city. To be able to use the Map module, you need to integrate Divi Builder with Google Maps first via an API key. Here is how to add Google Maps in Divi Builder.

Step 1: Integrate Divi Builder with Google Maps

As just said above, you need to integrate Divi Builder with Google Maps to be able to use the Map module. You can integrate the two using a Google Maps API key.

To get a Google Maps API key, go to the Google API Console website and login with your Google account. If you have no project yet, create one by clicking the dropdown menu on the top bar. On the appearing window, click the NEW PROJECT on the top-right corner.

Give your project a name and click the CREATE button.

Once your project is created, select it from the dropdown menu on top bar.

Click the Library menu on the left panel.

On the next page (the API Library page), select the Google Maps API type you want to use on the Maps section. In the case of Divi Builder, you can use the Maps JavaScript API.

Click the ENABLE button to enable the API.

Switch back to the main dashboard of Google API Console (by clicking the Google API Console logo on the top bar) and click the Credentials menu on the left panel followed by the CREATE CREDENTIALS button and select API key.

Copy the generated API key on the appearing window.

Once the API key is copied, login to your WordPress dashboard and go to Divi -> Theme Options (or Divi -> Plugin Options if you install Divi Builder on a WordPress theme other than Divi theme). If you use the Divi theme, you can paste the API key to the Google API Key field under the General tab. If you use Divi Builder on another theme (other than Divi), you can paste the API key to the GOOGLE API KEY field under the API Settings tab. Just don’t forget to save the change by clicking the Save button.

Step 2: Start adding the map

Once your Divi Builder is integrated with Google Maps, you can start adding a map to a page or theme builder template. Simply add the Map module by clicking the grey plus button on the canvas area.

Before adding a pin, you can set the map center address first in order to make Google Maps display the map around your business location. For instance, if your business is situated in London, you can set the map center to London. Or, you can set the map center to your business location instead. To set the map center, open the Map block under the Content tab on the settings panel and click the FIND button.

Adding pins

To add a pin to the map, you can simply click the Add New Pin button under the Content tab on the settings panel.

Open the Map block and enter the location you want to pin on the Map Pin Address and click the FIND button. To add the text, you can open the Text block.

You can repeat the steps above to add other pins.

Styling up the map

To style up the map, you can go to the Design tab on the settings panel. Before opening other blocks on this tab, you can open the Controls block to disable/enable the map control (mouse scroll zoom).

You can open other blocks to set things like margin and padding, apply CSS filters, set the entrance animation, and so on just like other Divi Builder modules.

Note:

If you find the “For Development Purposes Only” message when adding the map, make sure you have enabled your Google Cloud billing. The new Google policy requires users to enable Google Cloud billing. No worries, you can still use Google Maps API for free as long as not surpassed the monthly credit provided by Google ($200). Read this article to learn more.

The bottom line

If you are creating a website for a business that has a physical location then adding the map of the associated business is crucial enough. It will make it easy for aspiring customers to find the location of the business. If you are creating the website using WordPress+Divi Builder, you can add a map using the Map module. The module allows you to add a map from Google Maps. But first, you need to integrate both Divi Builder and Google Maps using an API key. The Map module of Divi Builder allows you to add multiple locations (pins) on your map.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.