divi 归档 - 第 4 页共 9 页

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.

The Divi Map Module

The Divi Map Module
How to add, configure and customize the Divi map module.

The maps modules makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location. The maps modules also comes in a Full Width format, so be sure to check that out as well!

View A Live Demo Of This Module
Google Maps API Key
An API key is required in order to use the Maps Module. To obtain an API key, log into the Google Developers Console, which will guide you through the process, and activate the Google Maps JavaScript API and any related services automatically. The first thing you will be asked to do is create a new project.

Next you will be asked to name your project. You can name the project anything you like. In this example, I simply called it 「Maps.」 You can also input your website』s domain name (add an * in front of it if you allow access from both www.domain.com and domain.com) to make sure to other website』s are allowed to your your API key.

After you have created an named your project, you will be presented with an API Key that you can use.

After you have obtained an API key, you must copy/paste it into the theme options panel by navigating to: Divi>>Theme Options>>General Settings>>Google Maps API Key
How To Add A Map Module To Your Page
Before you can add a map 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 map 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 「map」 and then click enter to automatically find and add the map 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: Add a Map Module to a Contact Page
A map module is a great way to showcase your company location on your contact page. And the ability to add multiple pins to your map to showcase different company locations and information is a helpful and engaging feature.
For this example, I』m going to add a Map Module to showcase the company location and information by adding a custom pin to the map.

Important: Make sure a valid Google API Key has been entered inside the Divi Theme Options panel. The Map Module will not work without it.
Using the Visual Builder, add a Standard Section to the bottom of the contact page. Then insert the Map module to your new section. In the Content tab of the Map Settings, enter your company address under the Map Center Address option. The Map Center Address is for the map center point.

Then click + Add New Item to create your first pin. Update the following:
Title: [enter the title of your location]
Content: [enter the content for your pin (ex. address and phone number)]
Map Pin Address: [enter the address for this specific location]

Save Settings
That』s it. Now you have a dynamic map module at the bottom of the contact page with a clickable pin that displays company information.

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

+ Add New Item
This is where you add new pins (or locations) to your Map Module. Clicking 「add new item」 will open a completely new list of design settings (including Content, Design, Advanced) for your new pin. See below for individual pin settings.
After you add your first pin, you will see a gray bar appear with the title of your pin shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the pin.
Google API Key
The Maps module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key inside the Divi Theme Options panel. Learn more about how to create your Google API Key here.
Map Center Address
Enter an address for the map center point, and the address will be geocoded and displayed on the map below. This is useful if you have multiple pins, and you want to have the map zoomed in to a specific, more focused location. You can simply type in an address in a standard format, such as 「1235 Sunny Road, Some City, State, 88343.」
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.
Map 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.

Mouse Wheel Zoom
Here you can choose whether the zoom level will be controlled by the mouse wheel or not. Often times it』s better to disable this option so that visitors are not disrupted as they scroll down the page and get their mouse wheel stuck inside the map』s iframe. This is especially true for fullwidth map modules.
Draggable Zoom
Here you can choose whether or not the map will be draggable on mobile devices.
Use Grayscale Filter
Enabling this option will turn your map into a grayscale image.
Map 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.
Individual Map Pin Options

Title
While creating a new pin, you can assign a Title. This title will appear in the box when hovering over the pin on the map.
Content
While creating a new pin, you can assign a block of content text. This text will appear in the box when hovering over the pin on the map.
Map Pin Address
This is the specific location on the map where your new pin will appear. You can enter the address in a standard format.

How To Use Divi Blog Post Formats

How To Use Divi Blog Post Formats
Divi comes with post format support for video, audio, links and quotes.

Divi Supports All The Major Post Formats
When you write a blog post to be included in one of our Blog Modules, you can create one of 6 different post formats. Article, Video, Audio, Quote, Gallery and Link. Each of these formats structures your post differently, putting more focus on the type of content that the format represents.

When you write a blog post, you will notice a box to the right of your text editor called 「Format.」 Within this box are the 6 format options. Choosing 「Standard」 will result in a normally-formatted blog post, while each other option has a unique design associated with the format type.

Using The Video Post Format
Selecting the Video post format will place a video at the top of your post. It will also replace the standard Thumbnail image on index pages with a video embed. After you have selected the 「Video」 post format from within the Format options box, the next thing you need to do is add a video to your post.The theme will automatically use the first video in your post as your format video. To add a video to your post, simply input the youtube our vimeo URL within the post editor, or use the 「Add Media 」 button to upload and embed your own video file.

Using The Audio Post Format
Selecting the Audio post format will display an audio player on your post. It will also replace the standard Thumbnail image on index pages with your audio player. The audio player will play the first audio file that you embed into your post. To add an audio file to your post, use the 「Add Media」 button to upload your audio file. There is no to embed the audio file. Once you upload a file, the theme will automatically use it for the post you are currently editing. The audio file must be uploaded while editing the post.

Using The Quote Post Format
The Quote post format will display a stylized quote at the top of your post. The quote will also replaced the standard Thumbnail image on all index pages. Once selected, the Audio post format will use the first Blockquote in your post as the quote content.Block quotes can be added easily from within the post editor. Simply highlight your text, and then press the blockquote button to turn it into a quote.

Using The Gallery Post Format
The gallery post format will display a gallery of images at the top of your post. It will also replace the standard Thumbnail image on all index pages with an image slider. Once selected, the Gallery post format will use the first gallery that you added to your post.Galleries can be added to your post using the WordPress Media Editor. Simply click the 「Add Media」 button to create a gallery and add it to your post.

Using The Link Post Format
The Link post format will create a stylized link and add it to the top of your post. This is great for sharing short bits of information with your readers. Once selected, the link post format will use the first link in your post as the main link URL. The link will be placed at the top of your post, and it will also replace the standard Thumbnail image on all index pages.To add a link to your post, you can use the 「link」 button in the WordPress post editor.

Using The Divi Role Editor

Using The Divi Role Editor
Limit what certain WordPress user roles can do within the Divi Builder.

Control What Users Can Do Within The Divi Builder
The Divi Role Editor gives you control over what each different WordPress User Role can do within the Divi Builder. For each role, you can disable certain actions within the Divi Builder, which will limit how the builder can be used for users of that role. This is the perfect way for WordPress freelancers and smaller web design agencies to hand off websites to their clients, while at the same time limiting what the client can do within Divi. By limiting more advanced features, you can make the Divi Builder easier for them to understand, while at the same time preventing them from accessing features than may be used to ruin your beautiful designs!
Here is a great example. Let』s say you just finished building a new website for your client, and you have taken full advantage of Divi』s Advanced Design Settings and Custom CSS, and even integrated third party plugins using the Code Module. Everything looks perfect, and your own style guide has informed your every decision. You want to hand off the website to your client so that they can keep their 「About Us」 page up to date, but you don』t want to allow them to do anything crazy. This is the perfect opportunity to use the Divi Role Editor. Simply assign your client』s User to a specific role such as 「Editor.」 Then, using the Divi Role Editor, adjust the capabilities of that Role. You can do things like: disable the Divi Library, disable access to global modules, disable access to Advanced Design Settings and Custom CSS tabs. You might even remove their ability to delete and move modules, and only allow them to edit existing modules. Finally, you could also control what types of settings they are allowed to edit inside the General Settings tab! When you are done, the client has only the tools they need to edit their content.
High Level Theme Privileges
Here you can adjust the highest level theme settings, which will limit access to the main Divi menu items (such as the Divi Theme Options and Theme Customizer).

Builder Interface
Here you can limit high level actions within the builder, such as the ability to edit, delete or move items within the builder. A common implementation of these settings may be to enable the editing of items, but disable the ability to move or delete items within the builder. You can also disable access to the Divi Builder altogether.

Library Settings
Here you can control user』s access to the Divi Library. You can also disallow users from editing GLobal Modules. Since changes made to global modules often have far-reaching implications, it』s sometimes safer not to allow your clients to edit them at all.

Settings Tabs
Settings tabs refer to the three categories of options available within the settings box of every modules, row and section. These settings tabs are: General Settings, Advanced Design Settings, and Custom CSS. Generally speaking, everything you need to build an awesome Divi website can be found in the General Settings, but if you want to get a little more advanced then you can move on to the Design Setting and Custom CSS tabs. Often times it』s a good idea to disable these latter tabs for your clients.

Settings Types
In addition to being able to disable entire settings tabs, you can also control the types of settings available within those tabs. This gives you even more fined tuned control over what your clients can edit. For example, you might want to only allow your clients to control the Text content of modules, but stop them from adjusting colors and layout options.

Module Use
Finally, you can also disable the use of entire modules. When a module is disabled for a user, they will be unable to edit modules of that type or add new modules of that type to the page. For example, you may want to disable every mode except for the Text and Image modules if you really want to keep things streamlined for your clients.

The Divi Social Media Module

The Divi Social Media Module
How to add, configure and customize the Divi social follow module.

The social media module lets you create icon-based links that point to your online social profiles, such as Facebook, Twitter and Google+. These icons are integrated into the theme, in the clean style of Divi using our Elegant Icons, which make them preferable to use over third party plugins. You can add links to multiple social profiles within each module, and you can add the module anywhere on the page.
View A Live Demo Of This Module
How To Add A Social Media Module To Your Page
Before you can add a social media 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.

Locate the social media 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 「social media」 and then click enter to automatically find and add the social media 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 Matching Social Media Icons to a Contact Page
A website』s contact page is the perfect spot to showcase your online social profiles. This provides more avenues for users to stay connected and promote your blog or business. For this example, I』m going to show you how to add social media icons to match the current design of a contact page.

Using the visual builder, add a new Regular Section with a one column fullwidth row. Insert a Social Media Module to your column.
In the Content tab of the Social Media Follow Settings, click the 「add new item」 button to add a new social network to your module. Under the specific Social Network Settings, update the following:
Content Options
Social Network: Facebook
Account URL: [enter the URL of your facebook account]
Design Options
Icon Color: #d94b6a (matching color)

Next, duplicate that Social Network to add four more networks (Twitter, Google+, LinkedIn, and Instagram). Because you duplicated the network, the custom icon color carried over so all you need to do is update each Network and Account URL.

Now you have Social Media icons that match the design of the contact page.

Social Media 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.

Add New Item
This is where you add new networks to your module. Clicking 「add new item」 will open a completely new window of options specific to your new network (under Content, Design, and Advanced tabs). See below for individual social media network settings.
After you add your first network, you will see a gray bar appear with the title of your network shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the network.
Link Shape
Here you can choose the shape of your social network icons to either rounded rectangle or circle.
Url Opens
Choose to open your network url in a new tab or in the same window.
Follow Button
Here you can choose whether or not to include the follow button next to the icon.
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.
Social Media 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.

For this module, the Design options consist of only one item – Text Color.
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.
Social Media 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.

Social Network
Here you can choose the social network you are wanting to display.
Account URL
This is where you enter the URL for this social network link. If you chose Facebook as your network, this is where you would put the URL of your Facebook page.
Individual Social Media Design Options

Icon Color
Divi conveniently has the standard colors for each social network set by default. Here you can easily change this icon color to whatever you want.
Individual Social Media Advanced Options

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.

The Divi Filterable Portfolio Module

The Divi Filterable Portfolio Module
How to add, configure and customize the Divi filterable portfolio module.

The Filterable Portfolio allows you to display your most recent projects in either a Grid or Standard fashion. The filterable portfolio looks just like the normal portfolio module, except that it loads new projects using an Ajax request, and it includes options to filter the project list by categories. When a particular category is selected, the list of projects is instantly regenerated with a new list of projects from the selected category.

View A Live Demo Of This Module
How To Add A Filterable Portfolio Module To Your Page
Before you can add a filterable 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 Enable Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Locate the filterable 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 「filterable portfolio」 and then click enter to automatically find and add the filterable 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 Filterable Portfolio Module to a Portfolio Page
For this example, I』m going to show you how to add a Filterable Portfolio Module to a portfolio page.

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 column) row under the header of the page. Then add a Filterable Portfolio Module to the row.

Update the Filterable Portfolio Settings as follows:
Content Options
Posts Number: 8
Design Options
Layout: Grid
Zoom Icon Color: #ffffff
Hover Overlay Color: rgba(224,153,0,0.58)
Title Font: Default, Bold, Uppercase
Title Font Size: 14px
Title Letter Spacing: 1px
Filter Font: Default, Bold, Uppercase
Filter Font Size: 14px
Filter Letter Spacing: 1px
Meta Font Size: 12px
Meta Letter Spacing: 1px
Advanced Options (Custom CSS)
Active Portfolio Filter:
color: #e09900;
Portfolio Title:
text-align: center;
Portfolio Post Meta:
text-align: center;
Pagination Active Page:
color: #e09900 !important;

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

Posts Number
Choose how may posts you would like to display before the list is paginated.
Include Categories
Select which categories you would like to display. Posts in categories that are not selected will not appear in the generated list of posts.
Show Title
Enter a title, if desired, which will be placed above the list of projects.
Show Categories
Choose whether or not you would like to display the category below each post in the post meta area.
Show Pagination
This option enables/disabled pagination. If pagination is disabled, only a single page of projects will be displayed for each category.
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.
Filterable 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 your desired portfolio layout style. 「Fullwidth」 display one post per row, while 「Grid」 will display your projects in a tiled grid with multiple projects per row.
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.
Filter Font
You can change the font of your filter 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.
Filter Font Size
Here you can adjust the size of your filter 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.
Filter 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 filter text, choose your desired color from the color picker using this option.
Filter Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your filter 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.
Filter Line Height
Line height affects the space between each line of your filter 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.
Filterable 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.

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.

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.

Creating Mega Menus In Divi

Creating Mega Menus In Divi
Mega menus are a great way to consolidate your excessive menu items.

Mega menus allow users to see more links all at once without the hassle of scrolling, hovering, and remembering the contents of your menu. A good way to think about Mega Menus is that they are drop down menus within drop down menus. So instead of your normal dropdown menu which shows a submenu when hovering over your main parent links in your navigation bar, a megamenu allows you to have additional parent links and submenus within the dropdown menu.
How To Add A Mega Menu To Your Navigation Bar
Log in to your WordPress dashboard and go to Appearances > Menus.

Create a menu with four parent links with each of the parent links having their own submenu links. In the example below I』m adding three submenu items under each of the four parent menu links.

Create an additional link to serve as your megamenu link. For the example below I』m calling this link 「Features」. Then drag the four parent menu links (each with their submenu links) over under the Features link.

Now in order to make your Megamenu you have to add a special CSS class to the main top tier link called 「Features」. You can do that by clicking the screen options link of the top your page and making sure the CSS class option is checked.

Finally, you need to add a css class to the 「Features」 link you just created. Click the arrow on the right of the 「Features」 menu item to toggle the additional configuration options. Find the text box labeled CSS Classes and enter the class 「mega-menu」.

Now when you reload your page you can see that all those previous menus have been placed in the one giant menu under this one link, the Mega Menu.

The Divi Post Navigation Module

The Divi Post Navigation Module
How to add, configure and customize the Divi post navigation module.

View A Live Demo Of This Module
How To Add A Post Navigation Module To Your Page
Before you can add a post navigation 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.

Locate the post navigation 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 「post navigation」 and then click enter to automatically find and add the post navigation 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 Custom Post Navigation Links to the Bottom of a Blog Post
Having navigation links to next and previous articles at the bottom of your post is a great way to keep your visitors engaging with your content. In this example, I』m going to show you how to use the actual names of the post titles for your navigation links instead of the general 「previous」 and 「next」 link names. I』m also going to show you how to add a border around the links to give them more of a button feel.

Let』s get started.
Use the visual builder to add a Standard Section with a fullwidth (1 column) layout to the bottom of the post. Then add a Post Navigation Module to the row.

Update the Post Navigation Settings as follows:
Content tab
Previous Link Text: %title (this variable inserts the post title)
Next Link Text: %title (this variable inserts the post title)
Design tab
Links Font: PT Sans
Links Font Size: 20px
Links Text Color: #5e95c1
Use Border: YES
Border Color: #5e95c1
Border Width: 1px
Custom Padding: 20px Top, 20px Right, 20px Bottom, 20px Left

That』s it! Now you have post titles for the post navigation links.

Post Navigation 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.

Previous Link Text
Define custom text for the previous link. You can use the %title variable to include the post title. Leave blank for default.
Next Link Text
Define custom text for the next link. You can use the %title variable to include the post title. Leave blank for default.
In The Same Category
Here you can define whether previous and next posts must be within the same taxonomy term as the current post.
Custom Taxonomy Name
Leave this option blank if you』re using this module on a Project or Post. Otherwise type the taxonomy name to make the 『In the Same Category』 option work correctly.
Hide Previous Post Link
Here you can choose whether to hide or show the previous post link.
Hide Next Post Link
Here you can choose whether to hide or show the next post link.
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.
Post Navigation 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.

Links Font
You can change the font of your links 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.
Links Font Size
Here you can adjust the size of your links 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.
Links 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 links text, choose your desired color from the color picker using this option.
Links Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your links 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.
Links Line Height
Line height affects the space between each line of your links 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 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.
Post Navigation 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.

Divi Rows & Row Options

Divi Rows & Row Options
Sections are the builder』s largest building blocks, and can be used in various ways.

Rows are the various column layouts that can placed inside of sections. Much like modules, rows have various settings that can be accessed by clicking the settings icon on the top left of the row. In this tutorial we will be going over just a few of the features and how they can be used to create some very unique layouts. Rows settings in particular can be used to greatly increase the variety of layouts built with the Divi Builder since they create the structure that your modules are housed in.

The Content Settings
Background Color
Background images can be applied to an entire row. By default, rows have a transparent background color.
Background Image
Background images can be applied to the an entire row.
Background Video MP4
Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.
Background Video Webm
Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.
Background Video Width
After your videos have been uploaded, you must input the width of your video here. It must be equal to the actual width of the video, otherwise the background position will be incorrect.
Background Video Height
After your videos have been uploaded, you must input the height of your video here. It must be equal to the actual height of the video, otherwise the background position will be incorrect.
Pause Video
If you would like videos to be paused when clicked, enable this option.
Column Background Color
For each column in a row, you can assign a unique background color.
Column Background Image
For each column in a row, you can assign a unique background image.
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.

The Design Settings
Use Parallax Effect
If you would like to use a parallax affect for your row background image, you can enabled here and then choose your desired parallax method.
Column Parallax Effect
Here you can choose whether or not to use parallax effect for the background image of a specific column in your row.
Make This Row Fullwidth
If this option is enabled, the row will extend the full width of the browser window (similar to a full width section). This is a great way to create cool fullwidth column layouts.
Use Custom Width
You can also assign a custom width to a row. For example if you would like to add some variation to the flow of the page and make a certain row larger than the rest, you can input a custom width value here
Use Custom Gutter Width
Gutter width adjusts the distance between columns. There are 4 gutter width sizes, ranging from none to large. Setting the gutter width to 1 will result in no space between columns. When combined with the Fullwidth Row option, this can create effects similar to the FullWidth Portfolio module.
Equalize Column Heights
This is a great option, especially useful when you have applied background colors to individual columns. Enabling this option will force all columns in the row to have the same height value.
Custom Padding
If you would like to adjust the padding of the row, you can do so here.
Custom Margin
If you would like to adjust the margin of the row, you can do so here.
Column Custom Padding
If you would like to adjust the padding of a specific column in your row, you can do so here.
Column Custom Margin
If you would like to adjust the margin of a specific column in your row, you can do so here.

The Advanced Settings
CSS ID
You can assign an CSS ID to the row if you would like to target it in your stylesheet or with anchor links.
CSS CLASS
You can assign an CSS Class to the row if you would like to target it in your stylesheet.
Column CSS ID
You can assign an CSS ID to a specific column in your row if you would like to target it in your stylesheet or with anchor links.
Column CSS CLASS
You can assign an CSS Class to a specific column in your row if you would like to target it in your stylesheet.
Before
Input CSS here to be applied :before the main row div.
Main Element
Input CSS here to be applied to the main row div.
After
Input CSS here to be applied :after the main row div.
Column Before
Input CSS here to be applied :before the specified column div.
Column Main Element
Input CSS here to be applied to the specified column div.
Column After
Input CSS here to be applied :after the specified column div.
Visibility
This option lets you control which devices your row 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.
Let』s Give Some Settings A Test Drive
Now that we have gone over all of the settings, let』s test out a few in combination to show you what』s possible when each setting is used creatively. In this example I will be touching on the Fullwidth Row setting as an introduction. The option to make a row 「Fullwidth」 is one of the most versatile options in the set. This will extend the width of the row to the edge of the browser, similar to a Fullwidth Section. Unlike a Fullwidth Section, however, FullWidth Rows can have column structures and they can house any module! In the example below I have created a 4 column row and added a square image to each column. Next I enabled the 「Make Row Fullwidth」 to extend the row to the edges of the browser window.

Next I reduced the 「Gutter Width」 size to 「1」 to remove the spacing between columns in the row.

Finally I removed the padding above and below the row by changing 「Custom Padding」 top and bottom values to 「0.」

The result is a complete transformation of the row, turning our normal 4 column row of images into a full-width and full-bleed image gallery that looks stunning against the green section below it. This same effect can be created using custom column background colors and text-based modules as well. The possibilities are endless!