标签： divi

The Divi Fullwidth Menu Module

The Divi Fullwidth Menu Module
How to add, configure and customize the Divi fullwidth menu module.

The Fullwidth Menu module lets you place a navigation menu anywhere on the page. This could be used to add a secondard menu down the page, or it could be used in conjunction with the Blank Page feature to move your main navigation down the page. For example, you could move your menu down below your first section to greet people with a large splash image. This essentially allow your header navigation to move around the page usig the builder!

View A Live Demo Of This Module
How To Add A Fullwidth Menu Module To Your Page
Before you can add a fullwidth menu module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Enable Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New fullwidth modules can only be added inside of fullwidth sections. If you are starting a new page, don』t forget to add a fullwidth section to your page first. We have some great tutorials about how to use Divi』s section elements.

Locate the fullwidth menu module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「fullwidth menu」 and then click enter to automatically find and add the fullwidth menu module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding a Fullwidth Menu Below the Page Header
For this example, I』m going to show you how to add a fullwidth menu below the header section of a page.
Here is an example:

Since this new fullwidth menu will be replacing the default primary navigation menu, it is necessary to select the blank page template so that the default navigation menu doesn』t show at the top of the page in addition to the fullwidth menu I』m going to add.
To change your page template, go to your page editor and select the 「blank page」 template from the Page Attributes box on the right sidebar.

Since this module will display a menu that already exists, it is important that you already have the menu created before adding it to the Fullwidth Menu Module.

Once you have your menu created, use the visual builder to add a Fullwidth Section just below the header section of the page. Then add a Fullwidth Menu Module to the section.

Update the Fullwidth Menu Settings as follows:
Content Options
Menu: [select menu that should be used in the module]
Background: #333333
Design Options
Text Color: Light
Text Orientation: Center
Menu Font: Roboto
Menu Font Size: 20px
That』s it!
Tip: You may want to take advantage of the Display options under the Advanced tab in order to hide this menu on mobile and show a different menu above the header so that mobile users will see the menu without having to scroll down the page.

Fullwidth Menu Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Menu
Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu.
Background Color
By default the menu module has a white background color. If you would like to use a different color for your menu background then you can choose it here using the color picker.
Dropdown Menu Background Color
By default, the dropwn menus in your menu module inherit the background color defined in the previous setting. If you would like your dropdown menus to have their own unique color you can choose a custom color using this setting.
Mobile Menu Background Color
On mobile, the menu module transforms into a different and more mobile-friendly design. You can control the background color of the mobile dropdown menu independently from it』s desktop counterpart.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Fullwidth Menu Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Sub-Menus Open
By default, all sub menus open in a dropdown menu below the main menu bar. If you are placing your menu towards the bottom of the page, and your menu contains long dropdown menus, you may wish to have those menus open above the menu module instead so that the menu does not extend beyond the browser viewport.
Make Menu Links Fullwidth
By default, the top level links with the menu module are placed inside the bounds of your default content width. If you would like to remove this restriction and have your links extend the full width of page, starting from far left of the screen, then you can enable this option.
Dropdown Menu Line Color
Within dropdown menus, links are separated by a 1 pixel line. If you would like to customize the color of this line, you can choose a custom color using the color picker in this setting.
Text Color
Here you can choose the value of your text. If you are working with a dark background, then your text should be set to light. If you are working with a light background, then your text should be dark.
Text Orientation
This controls the how your text is aligned within the module. You can choose between Left, Right and Centered.
Active Link Color
Active link colors are highlighted in the menu module to show the user their current location. You can change the highlight color that is used for these active links using this setting.
Dropdown Menu Text Color
By default, text within the module』s dropdown menus inherit the main menu text color. However, you may wish to change this color if you have defined a custom dropdown menu background color.
Mobile Menu Text Color
By default, text within the module』s dropdown menus inherit the main menu text color. However, you may wish to change this color if you have defined a custom mobile menu background color.
Menu Font
You can change the font of your menu font by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Menu Font Size
Here you can adjust the size of your menu font. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Menu Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your number text, choose your desired color from the color picker using this option.
Menu Letter Spacing<
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your number text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Menu Line Height
Line height affects the space between each line of your number text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Fullwidth Menu Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Dropdown Menu Animation
You can choose between various animations to be used when a dropdown menu is activated. By default the animation is set to fade, but you change that to: expand, slide or flip.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

Importing & Exporting Divi Builder Layouts & Library Collections

Importing & Exporting Divi Builder Layouts & Library Collections
Export your Divi Library from one website and import into onto another.

The Divi Portability System
Divi has an extensive portability system that stretches every inch of the theme. Everything inside of Divi can be exported from one website and then imported into a new website. Divi exports are also a great way to back up parts of your website, save your favorite presets for new client builds, or share your custom Divi layouts and settings with your peers. This includes Theme Options, Theme Customizer Settings, Divi Roles, and most importantly Divi Layout and Divi Library collections. Each system works exactly the same and you will notice the Divi portability icon throughout the theme. When you export a Divi Layout or Divi Library item, it can then be shared and used on any Divi website. Everything, including images, custom CSS and Advanced Design Settings are contained in a single JSON file. When you import the file to a new website, your uploaded Divi Layouts will be ready to use!
Exporting Divi Library Items
The Divi Library is a powerful tool for web designers, as it allows you to build and categorize custom designs that you can use to jump-start your future projects. Using the portability system, these custom designs can now be easily transfered between websites and shared with your peers. To export Divi Library items, you will first need to navigate to the Divi > Divi Library page in your WordPress Dashboard. Here you will see a list of all of your Divi Library items, along with an 「Import & Export」 button at the top of the screen. Clicking this button will launch the portability popup.

From within this popup, while inside the 「Export」 tab, you can click the 「Export Divi Builder Layouts」 button to begin exporting your entire Divi Library. You can also choose a name for your export file. Exporting large library collections, especially those that contain high resolution photos, can take some time. It』s recommend to export your library into moderately-sized collections.

If you have a very large library, you may want to pick and choose individual items to export instead of exporting everything at once. Divi allows you to select individual items to export. To do this, close the portability popup and, within your list of library items, select the items that you would like to export.

Click the 「Import & Export」 once again to launch the portability popup. Before exporting, select the 「Only export selected items」 check box. Now Divi will only export the items that you have previously selected from your Divi Library.

After the export process has completed, your browser will automatically download a .JSON file. This file can be used to import your exported items onto a new website using the 「Import」 tab inside the portability popup.
Importing Divi Library Items
Once you have exported a Divi Library collection, you can import it onto a new website. You will be using the same portability popup to do this. First things first, navigate to your Divi > Divi Library page and then click the 「Import & Export」 button. This time you will need to click the 「Import」 tab to reveal the import options.

Once inside the Import tab, click the 「Choose File」 button and locate the .JSON file that you previously exported. Once you have selected the file, click the 「Import Divi Builder Layouts」 button to begin importing. Once the import process has completed, you will notice that the Divi Library items have been added to your library and included images have been imported into your WordPress Media Library.
Exporting Individual Divi Layouts
Individual Divi Builder Layouts can also be exported. The process works exactly the same as exporting library items, the only difference is that individual items can be exported and imported directly from and onto the post you are currently editing within the Divi Builder.When using the Divi Builder, look for the Divi portability icon. Clicking this icon will launch the portability system, and you can export your current Divi Layout.

Importing Individual Divi Layouts
Once you have exported your Divi Layout and downloaded the .JSON file, this file can be imported onto a new page. Imported layouts will replace your current page content with the exported content. To import a Divi Builder Layout, click the portability icon within the Divi Builder to launch the portability system. Navigate to the Import tab. Click the 「Choose File」 button and locate your previously-exported Divi Builder layout and click the 「Import Divi Builder Layouts button.」」

Importing and Exporting Divi Roles Settings
If you would like to export the Role Settings for your site, first navigate to the Divi > Role Editor page in your WordPress Dashboard. Once you have saved your role settings how you want them, click the portability icon above the Role Settings. This will launch the portability system where you can export your current Role settings. Alternatively, if you have a previously-exported Role Settings .JSON file, you can choose to import those settings here.

The ability to import and export Divi Role Settings comes in handy when you have certain settings that you want to duplicate for other websites. With a few clicks, you can have your role settings in place.
Importing and Exporting Divi Theme Options

If you would like to export Divi Theme Options, first navigate to the Divi > Theme Options page in your WordPress Dashboard. Once you have saved your Theme Options how you want them, click the portability icon. This will launch the portability system where you can export your current Divi Theme Options. Alternatively, if you have a previously-exported Theme Options .JSON file, you can choose to import those options here.
Importing and Exporting Divi Theme Customizer Settings

Importing and exporting Divi Theme Customizer Settings is an easy way to jumpstart your next project. Getting the theme customizer settings just right can take time. Why not export these settings to speed up your next project?
If you would like to export Divi Theme Customizer Settings, first navigate to the Divi > Theme Customizer page in your WordPress Dashboard. Once you have saved your Divi Theme Customizer Settings how you want them, click the portability icon at the top of the customizer. This will launch the portability system where you can export your current Divi Theme Options. Alternatively, if you have a previously-exported .JSON file with your Theme Customer Settings, you can choose to import those options here.

The Divi Number Counter Module

The Divi Number Counter Module
How to add, configure and customize the Divi number counter module.

The number counter is a great way to display numbers in a fun and engaging way. This module is commonly used to display statistics about yourself or your company. For example, display your customer count or Facebook followers is a great way to showcase social proof.

View A Live Demo Of This Module
How To Add A Number Counter Module To Your Page
Before you can add a number counter module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the number counter module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「number counter」 and then click enter to automatically find and add the number counter module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Using the Number Counter Module to Display Project Results in a Case Study
One great ways to use the Number Counter Module is to illustrate stats for case studies. Simply label each number counter with a certain result metric so the user can easily see the success of the project. In this example, I』m using the Number Counter Module to display four project results.
As you can see the, the top of the page includes the three project goals using the Bar Counter Module and the bottom of the page includes the results of the case study using the Number Counter Modules.

The section of the page showing the results of the case study using the Number Modules requires the use of a Specialy Section. Using the Visual Builder, add a Specialty Section to the page and select the following layout:

Select a 1 column layout for the right side of the section and enter the Headline and text needed for the case study results.

Insert a 2 column layout directly under the 1 column layout on the right side of the section.

Now add your first Number Counters Module to the left column.

Update the Number Counters Settings as follows:
Content Options
Title: New Visitors
Number: 54210
Percent Sign: OFF
Design Options
Text Color: Dark
Title font: default
Title Font Size: 20px
Title Text Color: #405c60
Title Line Height: 1em
Number Font: Default, Bold
Number Font Size: 60px
Number Text color: #e07a5e
Number Line Height: 72px

Save Settings
Duplicate the Number Counters Module and drag it into the adjacent right column and update the Title and Number options.

Duplicate the row that holds the two Number Counters Modules so that two more number counters are displayed below.

Then update the Title and Number options for those as well. Now you have all four number counters complete.

Don』t forget to add the 667 x 320 image to the left column/side of the specialty section.
It is finished! The combination of Number Counters and Bar Counters on this case study page really makes the content engaging.

Number Counter Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Title
Input a title for the counter. This will be displayed below the number in smaller text.
Number
This is the number that the counter will count to. As you scroll down the page and reach the counter, the number will quickly count up from 0 until it reaches the number you define here. Only number values can be placed here.
Percent Sign
Here you can choose whether the percent sign should be added after the number set above.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Number Counter Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Text Color
Here you can choose whether your title text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.
Title Font
You can change the font of your title text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Title Font Size
Here you can adjust the size of your title text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your title text, choose your desired color from the color picker using this option.
Title Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your title text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Line Height
Line height affects the space between each line of your title text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Number Font
You can change the font of your number text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Number Font Size
Here you can adjust the size of your number text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Number Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your number text, choose your desired color from the color picker using this option.
Number Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your number text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Number Line Height
Line height affects the space between each line of your number text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Number Counter Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

Using Premade Layouts In Divi

Using Premade Layouts In Divi
Divi ships with tons of great premade layouts that you can use to jumpstart your design.

How to Access Pre-Made Layouts
You can access and import pre-made layouts directly from the Divi Builder when creating or editing a page.
When you add a new page from the WordPress Dashboard, deploy the Visual Builder.

If this is a new page, you will be prompted with three choices regarding how you want to start building your page. Select the option 「Choose A Premade Layout」.

This will automatically launch the 「Load From Library」 popup where you will find all the pre-made layouts.
Premade Layouts, Saved Layouts, or Existing Pages
In the Load From Library popup you will have three tabs available. The Premade Layouts tab is where you will find all of the premade layouts created by the Elegant Themes design team free for you to use. The 「Your Saved Layouts」 tab is where you can access any layouts you personally have saved to the Divi Library. And the 「Your Existing Pages」 tab will contain a list of all the pages (including posts and projects) currently on your website where you may choose to clone an existing page to kickstart the design of a new page.

Loading a Premade Layout
Under the Premade Layouts tab, you can easily find a new layout by scrolling through the list of layout packs or by searching by category in the left column.

Once you select a layout pack, you will be able to preview all the individual page layouts included in the pack. Clicking on a page layout on the right will generate a preview of the page on the left. Under the preview, you can click the 「view Live Demo」 button to open the live demo of the page in a new tab. When you are ready to use the layout, simply click the 「Use This Layout」 button to deploy the layout on your page.

Adding a premade layout to a page is not a one time thing. You can access new layouts at anytime within the Visual Builder for new or existing pages. Simply open the visual builder』s page settings menu at the bottom of the page by clicking the purple circle icon with three dots.

Then click the 「Load From Library」 icon (it looks like a plus symbol) to deploy the Load From Library popup will all the premade layouts.

Add Layouts to Existing Content or Replace Existing Content
You can either load a premade layout into a blank page, an existing layout, or you can replace existing content. Loading a layout to a blank page will simply add the layout to your page as expected. Loading a premade layout to an existing page will, by default, add the layout under the existing content of the page. So if you don』t see a change to your page initially when adding a new layout to it, you will need to scroll down to see the new layout content that was deployed in addition to the existing layout. If you want to replace the existing content entirely with the new premade layout, you can check the option to 「Replace Existing Content」 before choosing to use the premade layout. This option is located right under the layout preview and buttons.

Loading Saved Layouts and Cloning Existing Pages
If you have saved layouts to your Divi Library, you can access these layouts from the Load From Library popup under the 「Your Saved Layouts」 tab. To load the saved layout to your page simply click the saved layout from the list.

See More about saving and loading custom layouts in Divi.
You can also kickstart the design of your page by cloning one of your website』s existing pages. Click the 「Your Existing Pages」 tab and select the page you want to clone. This will deploy the layout (and content) of the page to your new page.

Customization and Flexibility
The ability to add premade layouts to kickstart the building of a new page opens up a world of flexibility for creating your own unique layouts. Once the layouts are deployed, you can edit them however you would like. For example, if you like a particular layout, but would rather not have a certain section, simply delete it by clicking on the trash can icon for that section and its gone!

And by replacing each element on the page with your own content you can have a beautiful, custom site in just minutes. With the visual builder making these changes is simple. Hover over any area you want to make changes to and the settings for it will appear. If you』d like to change text, simply select the text and start typing.

If you like the change you can hit 「command + save」 (or click the save button). If you don』t like the change you can hit 「command + z」 to undo it (or use the editing history button to roll back multiple actions all at once!).
To see more details on how to edit elements with the visual builder, see our post on getting started with the Divi Builder.

Using Selective Sync In Divi

Using Selective Sync In Divi
Select which part of the global library item you would like to sync.

Sync Only Parts Of A Global Library Item
Selective Sync allows you to save individual settings when saving a new global library item. You can choose to selectively sync any or all of the Content, Design, or Advanced tabs. For example, if you save a new module to the library as a global item, you can edit the settings to only sync the Design Settings, then only these settings will be added to the library. This is especially useful if you are delving into the Design or Advanced Tabs, and would like to use your unique styles for multiple modules on your website while at the same time adding unique content in the Content tab for each.
A simple example would be to create a uniquely-styled Header Module that is added to every page on your website. In this example you may want to have a unique combination of Design Settings shared across your entire website, but at the same time you need to be able to add unique title text to each module to represent the current page. In this example, choosing to selectively sync only the Design Settings makes the most sense.
Using Selective Sync
Using the Visual Builder, save a new item to your library and check the box to make it a global item. Then click to edit the settings of your module. You will see a small sync icon to the left of all the options within the Content, Design, and Advanced tabs. Click this icon to enable or disable the option to selectively sync any or all of the settings for the current global library item and click save. Only the options that you have selected will be editable within the library. When you add the global library item to your page, only the settings you have checked to be synced will be present.

Whenever you edit a global module, you can easily identify which options are currently being synced by the green color of the sync icon. Icons that are green are options that are currently being synced within the global module. Red means the item isn』t synced. Options edited with the green (enabled) sync icons are shared by all instances of the global item.
The Power of Selectively Sync
Using Selective Sync in combination with global modules can be extremely powerful. Let』s dig a little deeper. Let』s say you have a Fullwidth Header module at the top of all of your pages. This is quite common. Each header module has a different title in the 「Content」 settings to represent the current page. You have also used the 「Design」 settings to give your header a unique look by adjusting the title font style to Bold & All Caps, and you have increase the Custom Padding on the top and bottom of the header to make the header module larger. You want all of you header modules on each page to use this unique style, but you need each page to have unique titles. In this case, you can create a Global Fullwidth Header module and choose to selectively sync only the options in the 「Design」 tab. Now whenever you add this global module to a new page, the 「Design」 settings will be synced, but your 「Content」 settings will remain unique for the current module.
If you ever want to change the style of the headers on all your page, you can modify the synced 「Design」 settings shared by these global modules and the changes will be reflected on every single page that global header has been used! Wow, that saves you an incredible amount of time!
This same theory could be applied to the 「Advanced」 tab as well. Let』s say that you have created a Slider Module and used the 「Advanced」 tab to apply a unique animation to the slider』s button. You want to use this new unique animation on all of the Slider Modules on your website. In this case, you can create a new Global Slider Module and selectively sync the 「Advanced」 settings which include your custom CSS animation. Add this slider to your page and adjust the 「Content」 and 「Design」 settings freely, while keeping your unique Custom CSS synced across the entire series of modules. If you ever want to adjust the 「Advanced」 settings for this series of global modules, you only have to do it once. Editing the 「Advanced」 settings in one module updates for all implementations of this Global Slider Module.

The Divi Blurb Module

The Divi Blurb Module
How to add, configure and customize the Divi blurb module.

The blurb module is a simple and elegant combination of text and imagery. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Blurb modules can be placed in any column that you create.

View A Live Demo Of This Module
How To Add A Blurb Module To Your Page
Before you can add a blurb module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the blurb module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「blurb」 and then click enter to automatically find and add the blurb module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Using the Blurb Module to List Company Services on Homepage
Since the Blurb module combines both imagery and text to showcase certain features, you can use it to add a list of your company』s services on your homepage. The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. For this example, I』m going to use the Blurb Module to add four featured services to a homepage.

To add the four Blurbs to your page, use the visual builder to add a standard section with a four column row. Then add a Blurb module to the first column of your row.
Update the Blurb Settings with the following:
Content Options
Title: [enter title of service]
Content: [enter a short description of the service]
URL: [add a URL to the service page]
Use Icon: YES
Icon: [select an icon that illustrates your service]
Design Options
Icon Color: #42bb99 (make sure color compliments the site design)
Use Icon Font Size: YES
Icon Font Size: 68px (this adjusts the size of your icon)
Text Orientation: Center
Header Font Size: 24px
Body Font Size: 18px
Body Line Height: 1.5em

Now you have your first blurb finished.

Now duplicate the Blurb Module you just created three times and drag each of the duplicated blurbs over to the other three columns. Since your design settings have carried over to your duplicated modules, all you have to do is change the content (heading, content, icon, url, etc…) and tweak colors to fit each of your services.

Blurb Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Title
Give a title to your blurb that will appear above the body text of the blurb in a bold text style. The URL option below the Title Field will allow you to make your Title a hyperlink.
Content
This field is where you can enter the body content of your blurb. Blurb Text will also span the full width of your column up to 550px.
URL
Place a valid web URL in this field to turn your Blurb Title into a link. Leaving this field blank will simply leave your title as a static element.
URL Opens
Here you can choose whether or not your link opens in a new window.
Use Icon
When using Blurbs, you can choose to either use an Icon or and Image with your text. If you select 「yes」 for the 「Use Icon」 option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.
Icon
If you chose 「yes」 for the 「Use Icon」 setting, then this option will appear. This options presents you with a list of available icons that you can use with your blurb text. Simply click on the con that you would like to use and it will appear in your blurb.
Image
If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. However, your image will never scale larger than its original upload size. The height of the blurb image is determined by the aspect ratio of your original image, so making all of your blurb images the same height is a good idea if you are placing them side by side.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Blurb Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Icon Color
If you chose 「yes」 for the 「Use Icon」 setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color.
Circle Icon
If you chose 「yes」 for the 「Use Icon」 setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select 「yes」 for this setting, then you will be presented with additional options for customizing your circle color and border.
Circle Color
If you chose 「yes」 for the 「Circle Icon」 setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it』s color, will appear inside this a circle with the color you select here.
Show Circle Border
If you chose 「yes」 for the 「Circle Icon」 setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color.
Circle Border Color
If you chose 「yes」 for the 「Show Circle Border」 setting, then this option will appear. Here you can adjust the color of the circle border.
Image/Icon Placement
Here you can choose where you would like your image/icon to be placed. It can either appear above the text, or to the left of the text. Placing the image/icon to the left of your text will cause the image to be smaller than if it were placed at the top.
Use Icon Font Size
If enabled, you can input a custom size for the icon that is displayed above or two the left of your blurb text.
Text Color
If your blurb is being placed onto a dark background the Text Color should be set to 『Dark』. Visa versa, if your blurb is being placed onto a light background, the Text Color should be set to 『Light』.
Text Orientation
This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Image Max Width
Applying a max width value here will limit the width of the blurb image. This only affects blurbs that are not in icon mode.
Custom Margin
Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Blurb Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Image/Icon Animation
This controls the direction of the lazy-loading animation.
Image Alt Text
If you did not choose to use an Icon, then this setting will appear. Alternate text provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognized by search engines.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

Adjusting Divi Button Styles In The Theme Customizer

Adjusting Divi Button Styles In The Theme Customizer
Change the look and feel of your buttons to give your site a unique look.

Divi』s Buttons Are Infinitely Customizable
We have decked out the Theme Customizer with every button customization option you could ever need. Using these customizer controls, you can create truly unique and stunning buttons for your website.To begin customizing your website』s buttons, you must first enter the Theme Customizer by clicking the Divi > Theme Customizer link within your WordPress Dashboard. Next click the 「Buttons」 panel to reveal the button settings. The button settings are separated into two sections: Buttons Styles and Button Hover Styles.

Button Style
Here you can adjust the general appearance of your buttons using the various customizer controls. You can change the color of your button text & background, adjust the button font size and style, and even create rounded buttons using the border-radius slider. In addition, you can change the default font and icon used within the buttons.

Button Hover Style
You can adjust the button』s hover style as well. When you make a hover style different from the normal button style, the effect will be transitioned during hover, creating a pleasing animation. This animation is triggered when the visitors hovers over the button with their mouse.

The Divi Library

The Divi Library
The Divi Library is where you can save custom modules and layouts for later use.

What Is The Divi Library?
The Divi Library is your ultimate web design toolkit. Here you can store your favorite layouts, sections, rows or modules for later use. Whenever you save an item to your Divi Library, you can access it easily from within the module window when adding a new layout, module, section or row to the page.
Save yourself hours of design time by creating collections of your favorite module combinations. Did you spend hours customizing the Design and Advanced tabs of a module to create a completely unique look for your new website? Why not save all of those customized modules to your Library so that you can use them in the future without having to re-create them! Once you have created your collection of library items, you will find that starting to build new websites will become infinitely easier. In fact, you may never need to create a Child Theme again! Once you have developed a stellar library of custom modules, rows and sections, you can export these items and import them when creating new websites to speed up your design process.
The Divi Library is more than just a collection of saved layouts. Each library item can also be made 「Global.」 Global modules are synced and mirrored wherever they are placed. Whenever a Global module is altered, it updates automatically on all of the pages you have added it to! In this sense, Divi becomes more than just a page builder, it becomes a website builder. For example, you could create a Global section that is added to the footer of every page on your site. Update that Global Section once and have the footer of your entire website updated instantly.Modules in the library can also have their settings selectively synced. For example, if you have customized a module heavily using the Design and Advanced tabs, you can save the module to the library while only saving the settings in these two areas. If his module is made Global, your Design and Advanced settings will be synced, but everything in the Content tab can be different on each page the module is used on.
Saving New Items To The Library
With Divi』s Visual Builder, whenever you hover over a module, row or section in the Divi Builder, the menu bar includes a button to save the item to the library for later use. Simply click the icon, give your template a name and click 「Save to Library」.

Once it is added to the library, you can access the item at any time via the Divi > Divi Library link in your WordPress Dashboard, and you can add the saved item to a new page via the 「Add From Library」 tab when adding a new module, row or section to your page.

Once you click 「Save & Add To Library」 you will be asked to fill out some information about your new library item. You can give your new item a name to remember it by, choose which settings you would like to save, add your item to a category, as well as make the item a 「global library」 item. For more information about global items, be sure to read our global modules tutorial. We also have a great tutorial that talks about how to use the selective sync feature. Once you have filled out all of the necessary information, click 「Save」 to complete the process and add your new item to the library.

Creating & Managing Items In The Library
Whenever you add a new item to your library, this item can be managed and edited from within the Divi > Divi Library page in your WordPress Dashboard. When accessing this page you will get a list of all of your library items. You can sort your list via the controls at the top of the page, and you can edit any of your library items by clicking the 「edit」 link next to the item in the list. We just went over how to add an item to the library while you are using the Divi Builder. You can also build new items from scratch from inside of the Divi Library. Once you build a new library item, it will be available in the 「Add From Library」 tab while using the Divi Builder. To create a new item in the library, click the 「Add New」 button at the top of the screen while inside the Divi > Divi Library page in your WordPress Dashboard.

Adding Library Items To Your Page
Once an item has been added to your Divi Library, it can be quickly accessed when building new pages. Whenever you add a new Module, Row or Layout to your page, you will notice an 「Add From Library」 tab. Clicking this tab will reveal all of the items in your library. Click on the item that you would like to add to your page.

The Divi Button Module

The Divi Button Module
How to add, configure and customize the Divi button module.

View A Live Demo Of This Module
How To Add A Button Module To Your Page
Before you can add a button module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the button module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「button」 and then click enter to automatically find and add the button module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding a CTA Button to the Hero Section of a Landing Page.
There are countless ways to use the Button Module. For this example, I』m going to show you how to add a 「learn more」 button to the hero section of a landing page.

Let』s get started.
Use the visual builder to add a Standard Section with a fullwidth (1 column) layout. Add a Text Module to add and style the Headline and Subheadline. Then add the Button Module directly under the Text Module.

Update the Module Settings as follows:
Content tab
Button Text: Learn More
Button URL: [enter URL]
Design tab
Button alignment: Center
Text Color: Light
Use Custom Styles for Button: YES
Button Text Size: 20px
Button Text Color: #ffffff
Button Background Color: #0065cb
Button Border Width: 9px
Button Border Color: #0065cb
Button Border Radius: 100px
Button Letter Spacing: 2px
Button Font: Source Sans, Bold, Uppercase
Button Hover Letter Spacing: 2px

That』s it! This is just one of the countless ways you can use the button module.

Button Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Button Text
Input your desired button text.
Button URL
Input the destination URL for your button.
URL Opens
Here you can choose whether or not your link opens in a new window.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Button Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Button Alignment
Here you can choose to have your button aligned to the left, right or center.
Text Color
Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.
Use Custom Styles for Button
Enabling this option will reveal various button customization settings that you can use to change the appearance of your module』s button.
Button Text Size
This setting can be used to increase or decrease the size of the text within the button. The button will scale as the text size is increased and decreased.
Button Text Color
By default, buttons assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom text color to the button in this module. Select your custom color using the color picker to change the button』s color.
Button Background Color
By default, buttons have a transparent background color. This can be changed by selected your desired background color from the color picker.
Button Border Width
All Divi buttons have a 2px border by default. This border can be increased or decreased in size using this setting. Borders can be removed by inputting a value of 0.
Button Border Color
By default, button borders assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom border color to the button in this module. Select your custom color using the color picker to change the button』s border color.
Button Border Radius
Border radius affects how rounded the corners of your buttons are. By default, buttons in Divi has a small border radius that rounds the corners by 3 pixels. You can decrease this to 0 to create a square button or increase it significantly to create buttons with circular edges.
Button Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Font
You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Add Button Icon
Disabled this setting will remove icons from your button. By default, all Divi buttons display an arrow icon on hover.
Button Icon
If icons are enabled, you can use this setting to pick which icon to use in your button. Divi has various icons to choose from.
Button Icon Color
Adjusting this setting will change the color of the icon that appears in your button. By default, the icon color is the same as your buttons』 text color, but this setting allows you to adjust the color independently.
Button Icon Placement
You can choose to have your button icon display on the left or the right side of your button.
Only Show Icon On Hover for Button
By default, button icons are only displayed on hover. If you would like the icon to always appear, disable this setting.
Button Hover Text Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Background Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Radius
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Button Hover Letter Spacing
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Button Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Button Relationship
Here you can define a custom rel attribute for the button, such as rel=」nofollow.」 Divi lets you pick from all of the most common link attributes.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

The Divi Header & Navigation Theme Customizer Settings

The Divi Header & Navigation Theme Customizer Settings
Easily customize the look & feel, as well as the structure of your header.

Customizing The Header & Navigation Of Your Theme
To begin customizing your website』s Header & Navigation, you must first enter the Theme Customizer by clicking on the Divi > Theme Customizer link within your WordPress Dashboard. This will launch the customizer. Next look for the 「Header & Navigation」 panel. Click the panel to open up the relevant settings and begin customizing.

Header Format
Here you can adjust your header』s general format, such as switching between the main layouts modes: Default, Centered, Centered Inline Logo, Slide-in, and Fullscreen. Choosing Centered will place your logo above your navigation menu and centered both within the header. Choosing Centered Inline Logo will place the logo in-line with your nav menu elements, centered between the links. You can also enable Vertical Navigation from within this section, which will create a drastically new look for your site, putting the navigation bar on the left of your content.

Primary Menu Bar
In this menu you can adjust the size, style and color of your primary navigation menu. This is the large white bar at the top of your page that contains your logo and your primary menu links. Within this panel you can do a lot of things very easily, such as adjust the height of your logo, the background color of the menu bar and the color of your links.

Make Full Width
This extends the menu the full width of the browser window.
Hide Logo Image
If you want, here you can completely hide the logo image from your menu.
Menu Height
Here you can change the menu height to whatever you want. Although, be careful not to make your menu height too large since you could be wasting valuable real estate on a menu instead of your homepage content.
Logo Max Height
Here you can increase or decrease the max width percentage of your logo to make it bigger or smaller.
Text Size, Letter Spacing, Font, Font Style, Text Color, Active Link Color
These options allow you to customize the menu links.
Background Color
This allows you to change the background color of your primary menu.
Dropdown Menu Settings
Your dropdown menu doesn』t have to inherit the style of the main menu. Here you can create a unique design for your dropdown menu. You can even add custom animation when displaying the dropdown menu.
Secondary Menu Bar
The secondary menu bar is the smaller of the two navigation bars that appears above your main navigation bar. This menu will not appear unless you have assigned a menu to the secondary menu location. Once enabled a smaller blue menu bar will appear. This panel allows you to customize that menu bar and the text within it, adjusting the background color, text color and text styles.

Fixed Navigation
The fixed navigation bar refers to the navigation bar as it becomes fixed to the top of your screen when you scroll. You will notice that as you scroll down your page, your menu bar remains fixed to the top of the screen and shrinks to provide more readable space on the screen. All of this is customizable from within the Fixed Navigation panel. You can adjust the height of the menu if you think it shrinks too small, and you can adjust the colors of the menu and the menu links independently from the menu』s non-fixed state.

Header Elements
Header elements are various optional things that appear in your navigation bar, each of which can be toggled on and off here, such as your social follow icons, the search icon, phone number and email address.