Saving And Loading Custom Layouts In Divi

Saving And Loading Custom Layouts In Divi

Saving And Loading Custom Layouts In Divi
Learn how to save custom layouts and load them for later use in the Divi Builder.

One of the coolest features about Divi is its ability to save your layouts for future use. If you have spent a ton of time building an awesome page using the builder, and you think that you might want to build something similar in the future, then you can save your creation as a template for future use. When the saved layout is loaded on a blank page, all of the section, rows and modules that you created previously will appear. You can also load saved layouts onto a page that already has builder content. For example, if you have a repeating element on all of your pages (such as a call to action near the footer of your page), you could save a layout with that CTA already built and then add to all of your existing pages, and use it as a starting point for all future pages.

Saving A Layout

Once you have created a layout, you can save it for later use by click the 「Save Layout」 button at the bottom of the builder interface. Once you click the save layout icon, a popup will prompt you to name and save your layout. Type in your desired name, which will be used to identify the layout when loading it in the future, and click the save button. That』s it! Your layout has now been saved.
Loading A Saved Layout
Once you have saved a layout, you can load it at any time by clicking on it in the load from library popup. Loading a layout will populate the page that you are editing with the sections, rows and modules that you saved in the layout. When you load a saved layout, it will delete whatever content is currently on your page and replace it with the save layout unless you uncheck the 「replace the existing content with loaded layout」 option before loading.

Importing & Exporting Divi Builder Layouts & Library Collections

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.

Divi Keyboard Shortcuts

Divi Keyboard Shortcuts

Divi Keyboard Shortcuts
Divi』s keyboard shortcuts save a ton of time. Do anything in just a few keystrokes!

Using The Divi Builder Keyboard Shortcuts

The Divi Builder comes packed with a long list of very useful keyboard shortcuts. Once mastered, they will save you a ton of design time. Actions that might normally take 2, 3 or 4 clicks can often be accomplished in just a few keystrokes. The Divi Builder has hotkeys for just about everything!
Referencing Shortcuts While Building
The Divi Builder has a ton of very useful keyboard shortcuts, but memorizing them all can be a challenge at first. That』s why we created the Divi Builder Helper, which includes a full list of available keyboard shortcuts. To access the Divi Builder Helper, just press the 「?」 key at any time while building a site in the Visual Builder.
Visual Builder Shortcuts
The following keyboard shortcuts are available when the Visual Builder is active.
Page Shortcuts

Undo: Ctrl + Z
Redo: Ctrl + Y / Cmd + Shift + Z
Save Page: Ctrl + S
Save Page as Draft: Ctrl + Shift + S
Exit Visual Builder: Ctrl + E
Exit To Backend Builder: Ctrl + Shift + E
Responsive Preview Zoom-In: Ctrl + +
Responsive Preview Zoom-Out: Ctrl + -
Toggle Settings Bar: T
Open Page Settings Modal: O
Open History Modal: H
Open Portability Modal: P
List All Shortcuts: ?

Inline Editor Shortcuts

Exit Inline Editor: Esc

Module Shortcuts

Copy Module: Ctrl + C
Cut Module: Ctrl + X
Paste Module: Ctrl + V
Copy Module Design Settings: Alt + Ctrl + C
Paste Module Design Settings: Alt + Ctrl + V
Disable Module: D
Lock Module: L
Adjust Padding By 10px: Shift + Drag
Mirror Padding Adjustment: Shift + Alt + Drag
Adjust Padding To Opposite Side: Alt + Drag
Copy Module + DragAlt + Module Move
Change Column Structure C + 1 / 2 / 3 / 4
Make Row Fullwidth: R + F
Change Gutter Width: G + 1 / 2 / 3 / 4
Increase Row Padding: R + Left/Right/Up/Down
Increase Row Padding by 10px: Shift + R + Left/Right/Up/Down
Decrease Row Padding: Alt + R + Left/Right/Up/Down
Add New Row: R + 1 / 2 / 3 / 4
Increase Section Padding: S + Left/Right/Up/Down
Increase Section Padding by 10px: Shift + S + Left/Right/Up/Down
Decrease Section Padding: Alt + S + Left/Right/Up/Down
Add New Section: S + 1 / 2 / 3
Open Module Settings: Double Click on module.

Modal Shortcuts

Close: Esc
Undo: Ctrl + Z
Redo: Ctrl + Y / Cmd + Shift + Z
Save Changes: Enter
Switch TabsShift + Tab
Toggle Modal Expand: Ctrl + Enter
Toggle Modal Snap: Ctrl + Left Arrow / Right Arrow

Backend Builder Shortcuts
The following keyboard shortcuts are available when the Backend Builder is active.
Page Shortcuts

Save Page: Ctrl + S
Save Page as Draft: Ctrl + Shift + S
Undo: Ctrl + Z
Redo: Ctrl + Shift + Z
Open History: H
Open Portability: P
Open Page Settings: O

Module Shortcuts

Cut Module: Ctrl + X
Copy Module: Ctrl + C
Paste Module: Ctrl + V
Copy Module + DragAlt + Module Move
Disable Module: D

Lock Module: L
Change Column Structure C + 1 / 2 / 3 / 4
Add New Row: R + 1 / 2 / 3 / 4
Add New Section: S + 1 / 2 / 3
Open Module Settings: Double Click on module.

Modal Shortcuts

Close: Esc
Save Changes: Enter
Switch Tabs: Shift + Tab
Preview Module: Ctrl + P

How To Install The Divi Theme

How To Install The Divi Theme

How To Install The Divi Theme
Installing our themes can be done using the WP Dashboard.

Installing Divi Automatically With Divi Hosting
The easiest way to getting started with Divi is with Divi Hosting. With Divi Hosting, Divi is installed and activated with your license key automatically. Plus you get the benefit of fast WordPress hosting that meets all of Divi』s requirements of out the box! If you already have a website and a host, then follow the instructions below to install Divi manually via your WordPress Dashboard.
Download Your Theme
In this tutorial, we will be installing your theme using the Upload feature in your WordPress Dashboard. Before you can upload your theme, you first need to download it from the members area. Login to your account, and then look for the 「Divi」 theme in the Downloads tab. Click the 「download」 button to get the zipped theme folder.

Installing Your Theme In The WordPress Dashboard
To upload your theme, you first need to log in to your WordPress Dashboard. After you have logged in, click the Appearances > Themes tab to open up the themes page. Click the 「Add New」 button on the top of the screen.

On the next screen, click the 「Upload Theme」 button on the top of the page. This will bring you to a new page with an upload link. Click the 「Choose File」 button to open up a window to browse your computer. Locate the Divi.zip file that you just download from the members area, and select it.

After you have selected the file, the window will close. Click the 「Install Now」 button to install your theme. The page will re-load, and after the theme has been fully uploaded, you will be presented with an 「Activate Theme」 link. Click this theme to activate your theme and complete the installation.

The Divi Image Module

The Divi Image Module

The Divi Image Module
How to add, configure and customize the Divi image module.

Divi makes it easy to add images anywhere on the page. All images come with 4 different animation styles that make browsing your website fun and engaging. Image modules can be placed in any column that you create, and their size will be adjusted to fit.

View A Live Demo Of This Module
How To Add A Image Module To Your Page
Before you can add a image 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 image 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 「image」 and then click enter to automatically find and add the image 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 Overlapping Images to Illustrate Services on a Services Page
There are countless ways to use the image module. For this example, I』m going to show you how to add images to a services page for a small business website. Here is where I』m going to add the images. Each red circle represents an image.

Since adding an image to a page is a pretty simple and straightforward process, I』m going to add a little custom styling to position my images so that they overlap, creating a stacking effect.
Let』s get started.
Use the visual builder to add a standard section with a 1/4 1/4 1/2 layout. Then add a Text Module to the right 1/2 column of your row. Enter a header and description of the service.
Next add an Image Module to the far left 1/4 column.

Update the Image Module Settings as follows:
Content Options
Image URL: [enter URL or upload image with dimensions 500×625]
Design Options
Custom Margin: -60px Right
Advanced Options
Animation: Left To Right

Save Settings
Add another Image Module in the second 1/4 column (or middle column) and update the Image Settings as follows:
Content Options
Image URL: [enter URL or upload image with dimensions 500×625]
Design Options
Custom Margin: 100px Top, -60px Left
Advanced Options
Animation: Right To Left

Save Settings
That takes care of the first section. Now for the next service section we can duplicate the section we just created for the first service section. Once the section is duplicated, change the column structure of the row to a 1/2 1/4 1/4 column layout (the opposite of the one before).

Then drag the Text Module with the service header and description over to the far left 1/2 column. Make sure to drag the two image modules to fill each 1/4 column (now on the right).
Since the image modules are duplicates, we need to upload the new images for this particular service section. Also, the modules still have the custom margin settings as the first two image modules created. Let』s change this.
Starting with the Image Module in the far right 1/4 column, update the following Image Settings:
Content Options
Image URL: [enter URL or upload image with dimensions 500×625]
Design Options
Custom Margin: -60px Left (only)
Advanced tab
Animation: Right To Left
Finally, update the Image Settings for the middle 1/4 column Image Module with the following:
Content Options
Image URL: [enter URL or upload image with dimensions 500×625]
Design Options
Custom Margin: 100px Top, -60px Right
Advanced tab
Animation: Left To Right
Save Settings
Now check out the page!

Image 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.

Image URL
Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.
Open In Lightbox
Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will 「zoom in」 to their full size when clicked inside a modal window. This is a great feature for portfolios.
Link URL
Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element.
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.
Image 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.

Image Overlay
If enabled, an overlay color and icon will be displayed when a visitors hovers over the image.
Overlay Icon Color
Here you can define a custom color for the overlay icon
Hover Overlay Color
Here you can define a custom color for the overlay.
Hover Icon Picker
Here you can define a custom icon for the overlay.
Remove Space Below The Image
This option only affects images when they are the last module in a column. When enabled, the distance between the bottom of the image and the following section is removed, allowing the image to border the top of the next section on the page.
Image Alignment
Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered.
Always Center Image On Mobile
Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers.
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
By default, image max width is set to 100%. This means that the image will be displayed at its natural width unless the width of the image exceeds the width of the parent column, in which case the image will be limited to 100% of the width of the column. If you would like to further restrict the max width of the image, you can do so by entering your desired max width value here. For example, a value of 50% would limit the width of the image to 50% of the width of the parent column.
Force Fullwidth
By default, images are displayed at their native width. However, you can choose to force the image to extend the full width of the parent column by enabling this option.
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.
Image 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.
Animation
Use this dropdown menu to specify the lazy-loading animation for your image. You can choose for your image to fade in from the right, left, bottom, or top.
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.
Image Alt Text
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.

Using Header & Navigation Options

Using Header & Navigation Options

Using Header & Navigation Options
Easily customize the look & feel, as well as the structure of your header.

Divi comes with some great options for customizing your header and navigation area. Using various combinations of these settings can yield some very unique results, allowing you to create many different kinds of websites. All of these options are found in the theme customizer. To locate the theme customizer, log in to your WordPress Dashboard and the click the Appearances > Customize link.

Header and Navigation Settings
Header Format

Header Style
You can choose between several header styles: Default, Centered, Centered Inline Logo, Slide In, or Fullscreen. By default, your logo will be aligned to the left and your menu will be aligned to the right. Changing this option to 「Centered」 will center both the logo and the menu, placing the logo on top. If you choose the 「Centered Inline Logo」 option then your logo and menu items will be added to the same line with your logo placed directly in the center. The 「Slide In」 style option creates a hamburger menu icon in the top right-hand corner of the page. When clicked that menu slides in from the right. And finally, if you choose the 「Fullscreen」 option you will again see a hambuger icon in the top right hand corner. This time when clicked however, a fullscreen overlay menu will appear.
Enable Vertical Navigation
The vertical navigation settings will change the orientation of our header and navigation bars. You can choose to place the header on the top, or on the side of your page. Enabling the Vertical Navigation setting will change your header to the vertical style, displaying your logo and menu to the left of the page.
Hide Navigation Until Scroll
The 「Hide Navigation Until Scroll」 setting makes it so that your primary and secondary navigation bars will be invisible until a user begins to scroll down the page.
Primary and Secondary Menu Bar Settings

Here you can style your Primary or Secondary menu bars. These settings include options for menu height, text size and color, background color, and many others.
In order to activate your secondary menu, you must enter a phone number and/or email address under Theme Customizer > Header & Navigation > Header Elements. If you want to include your menu in the secondary menu bar, make sure you select it under Theme Customizer > Menus > Menu Locations.
Fixed Navigation Settings

By default, your navigation bar remains 「fixed」 at the top of your screen when scrolling down the page. this is referred to as your fixed navigation bar. You can style the fixed navigation bar using these settings.
Header Elements

Show Social Icons
If you have defined social profiles, then you can chose to display these in your header. This option will toggle the social icons on and off. Social icons, when enabled, will appear in the secondary navigation area.
Show Search Icon
You can also toggle the search icon on and off. If you would not like to allow your visitors to search your website, or if you are simply trying to reduce clutter in your header, then the search icon can be turned off using this setting.
Phone Number
Within the header, you can place contact information. Filling out the phone number field will display the defined phone number inside the secondary navigation bar.
Email
Within the header, you can place contact information. Filling out the Email field will display the defined email address inside the secondary navigation bar.

Divi Global Modules, Rows & Sections

Divi Global Modules, Rows & Sections

Divi Global Modules, Rows & Sections
Create a library item that syncs between all of the pages you use it on.

What Is A Global Library Item?
A Global library item is a module, row or section that appears exactly the same on whatever pages it is added to. You can add a single global module to multiple pages. If you change the global module on one page, it gets updated instantly on all of the other pages it has been added to as well. A simple use-case for this would be a Call To Action Module that appears at the bottom of many or all of the pages on your website. If a single module is repeated on multiple pages, it』s very useful to make this module Global. This way, you don』t have to edit every single page when you want to make a change to it.Global elements open up so many possibilities, especially when you consider that you can selectively sync individual settings for each module. For example, you could create a global Header Module that appears at the top of all of your pages, and choose to only sync certain options in the Design and Advanced Tabs. This will allow you to apply custom styling to the entire series of pages using this global header module, but still allow you to add unique title text content to each module within the modules 「Content」 tab (which has not been synced). If you ever want to adjust the look and feel of these global header modules, you only have to edit the options you chose to be synced once. Entire sections can also be made into global sections. This is a perfect way to create a custom footer for your entire site, and have that footer section mirrored across all of your pages. If you ever want to change your global footer section, you only have to edit it once and the changes get applied everywhere the section has been used.
Creating A New Global Library Item
Making a library item global is simple. When saving your library item, check the 「Save As Global」 option. Any item that is saved with this option selected becomes a global item.

Global items within the page builder are easily identified by their green color. If you are editing a module, row or section that is green, or if the current modal settings window that you have open is green, then you know that you are currently editing a global item. It』s important to know when a global item is being edited, because any change you make will be mirrored across every page that item has been placed on.

Global Modules & Selective Sync
As mentioned previously, you can selective sync any of the module settings options when saving a global library item. For example, if you create a new global module and choose to only sync the 「Background Color」 option, then only the 「Background Color」 for that module will be mirrored. What does this mean exactly and why is it useful?
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」 tab to represent the current page. You have also edited the options in the 「Design」 tab to give your header a unique look by adjusting the title font color to blue, title font style to Bold & All Caps, and title font size to 40px. 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 those options (font color, font style, and font size).

Now whenever you add this global module to a new page, these options will be synced, but all of your other options will remain unique for the current module.
If you ever want to change the style of the headers on all your pages, you can modify the synced options for the header text style 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 options in the 「Advanced」 tab as well. Let』s say that you have created a Slider Module and applied 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 Custom CSS for the Slide Button (which includes your custom CSS animation).

Add this slider to your page and you can adjust all of the other options freely, while keeping your unique Custom CSS option synced across the entire series of modules. If you ever want to adjust the Custom CSS option for this series of global modules, you only have to do it once. Editing the Custom CSS option in one module updates for all implementations of this Global Slider Module.

Whenever you edit a global module, you can easily identify which options are currently being synced by the green sync icon located on the left of each option. Options that have the green sync icon are options that are currently being synced within the global module. Options edited with green sync icons are shared by all instances of the global item. To un-sync an option, simply click the green sync icon and you will see the icon turn red. Options that have the red sync icon are NOT currently being synced within the global module.

The Divi Gallery Module

The Divi Gallery Module

The Divi Gallery Module
How to add, configure and customize the Divi gallery module.

Sharing a collection of images is always a great way to visually engage users in your content. The Gallery module lets you create and organize galleries anywhere on your website. The Divi Builder gallery module comes in both grid and slider format and supports large galleries with pagination.

View A Live Demo Of This Module
How To Add A Gallery Module To Your Page
Before you can add a gallery 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 gallery 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 「gallery」 and then click enter to automatically find and add the gallery 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 Image Gallery to Showcase Photography.
Adding a Gallery to your photography page is a great way to promote your work and increase credibility with clients. In this example, I』m going to show you how you can use the gallery module to add an image gallery with a grid layout that stretches the full width of the page. The images have no spacing between them which gives it a practical and aesthetic presentation.

And let』s not forget that each image opens a lightbox popup to scroll through larger versions of the images in the gallery.

Using the Visual Builder, add a new section under the header section with a fullwidth (1 column) row. Then add the Gallery Module to the row.
Update the Gallery Module Settings as follows:
Content Options
Gallery Images: Click updated gallery an select the images you want to include in the gallery.
Images Number: 12
Show Title and Caption: NO
Show Pagination: NO
Design Options
Layout: Grid
Thumbnail Orientation: Landscape
Zoom Icon Color: #ffffff
Hover Overlay Color: rgba(0,0,0,0.48)
Hover Icon Picker: default

Save Settings
Now all that is left to do is get rid of all the space around the images. Go back and select row settings. Under the Design tab update the following:
Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 1
It is important to remember that the number value 「1」 for gutter width is really zero (no width at all).

Save Settings
That』s it!
Gallery 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.

Gallery Images
Click the Update Gallery button to launch the WordPress media library where you can choose which images you would like to display in your gallery.
Images Number
Define the number of images that should be displayed per page. When more images than are allowed on each page are included in your gallery, pagination will appear below the images.
Show Title and Caption:
If an image title or caption has been added, they will appear below the image in the gallery. If you would like to disable these text elements then you can do so using this option.
Show Pagination
When more images than are allowed on each page are included in your gallery, pagination will appear below the images. If you would like to remove pagination, you can disable this setting.
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.
Gallery 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.

Layout
By default, galleries are displayed as a grid of images. You can also choose to display your gallery in the form of an image slider.
Thumbnail Orientation
You can choose to have your galleries images formatted as portrait or landscape. If you are switching modes, you may need to regenerate your thumbnails.
Zoom Icon Color
When hovering over an item within the gallery module, an overlay icon appears. You can adjust the color that is used from this icon using the color picker in this setting.
Hover Overlay Color
When hovering over an item within the gallery module, an overlay color fades in on top of the image and below the portfolio』s title text and icon. By default, a semi-transparent white color is used. If you would like to use a different color, you can adjust the color using the color picker in this setting
Hover Icon Picker
Here you can choose a custom icon to be displayed when a visitor hovers over gallery items within the module.
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.
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.
Caption Font
You can change the font of your caption 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.
Caption Font Size
Here you can adjust the size of your caption 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.
Caption 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 caption text, choose your desired color from the color picker using this option.
Caption Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your caption 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.
Caption Line Height
Line height affects the space between each line of your caption 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.
Gallery 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.

The Divi Fullwidth Portfolio Module

The Divi Fullwidth Portfolio Module

The Divi Fullwidth Portfolio Module
How to add, configure and customize the Divi fullwidth portfolio module.

The Fullwidth Portfolio module works just like the normal Portfolio module, except that it displays your project in a beautiful Fullwdth fashion. It also comes with some unique new layouts: Grid & Carousel. The module works by displays a list of your most recent Projects, and can be used by designers and artists that want to display a gallery of their most recent work.

View A Live Demo Of This Module
How To Add A Fullwidth Portfolio Module To Your Page
Before you can add a fullwidth portfolio 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 fullwidth portfolio 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 portfolio」 and then click enter to automatically find and add the fullwidth portfolio 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 Portfolio Module to a Portfolio Page
For this example, I』m going to show you how to showcase a portfolio on a portfolio page that spans the full width of the page.

Let』s get started.
Use the visual builder to add a Fullwidth Section under the header of the page. Then add a Fullwidth Portfolio Module to the row.

Update the Fullwidth Portfolio Settings as follows:
Content Options
Posts Number: 8
Show Pagination: NO
Design Options
Layout: Grid
Zoom Icon Color: #000000
Hover Overlay Color: #ffffff
Title Font: Default, Bold, Uppercase
Title Font Size: 14px
Title Letter Spacing: 1px
Meta Font Size: 12px
Meta Letter Spacing: 1px

That』s it!
Fullwidth Portfolio 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.

Portfolio Title
Enter a title displayed above the portfolio, or leave it blank to not use a title.
Include Categories
Choose which categories you would like to display. Projects from categories that are not selected will not appear in the list of projects.
Posts Number
Control how many projects are displayed. Leave blank or use 0 to not limit the amount.
Show Title
Choose whether or not the title of each project is displayed when you hover over the project item.
Show Date
Choose whether or not the publish date of each project is displayed when you hover over the project item.
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.
Fullwidth Portfolio 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.

Layout
Choose which layout you would like to use. 「Grid」 will display all of your items in a multi-column and multi-row layout. The Carousel will display your items in a single row of tiled images that slide to reveal additional items in the list.
Zoom Icon Color
When hovering over an item within the portfolio module, an overlay icon appears. You can adjust the color that is used from this icon using the color picker in this setting.
Hover Overlay Color
When hovering over an item within the portfolio module, an overlay color fades in on top of the image and below the portfolio』s title text and icon. By default, a semi-transparent white color is used. If you would like to use a different color, you can adjust the color using the color picker in this setting
Hover Icon Picker
Here you can choose a custom icon to be displayed when a visitor hovers over portfolio items within the module.
Text Color
Here you can choose whether your text should be light or 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.
Meta Font
You can change the font of your meta 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.
Meta Font Size
Here you can adjust the size of your meta 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.
Meta 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 meta text, choose your desired color from the color picker using this option.
Meta Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your meta 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.
Meta Line Height
Line height affects the space between each line of your meta 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.
Fullwidth Portfolio 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.
Automatic Carousel
If the carousel layout option is chosen and you would like the carousel to slide automatically without the visitor having to click the next button, enable this option and then adjust the rotation speed below if desired.
Automatic Carousel Speed
Here you can designate how fast the carousel rotates, if 『Automatic Carousel Rotation』 option is enabled above. The higher the number, the longer the pause between each rotation. (Ex. 1000 = 1 sec)
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 Fullwidth Menu Module

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.