divi 归档 - 第 5 页共 9 页

The Divi Fullwidth Header Module

The Divi Fullwidth Header Module
How to add, configure and customize the Divi fullwidth header module.

The fullwidth header module makes it easy to add beautiful, colorful headers to the top of your pages (or anywhere on your page, if you so chose). These modules can only be placed within full width sections.

View A Live Demo Of This Module
How To Add A Fullwidth Header Module To Your Page
Before you can add a fullwidth header 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 header 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 header」 and then click enter to automatically find and add the fullwidth header 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 Header to an About Page
For this example I』m going to show you how to use the Fullwidth Header Module to add a header with customized text and a background image.

All Fullwidth Modules are only available when using Fullwidth sections. Using the Visual Builder, insert a new Fullwidth Section. Then add a Person Module to the section.

Update the Fullwidth Header Settings as follows:
Content Options
Title: About Us
Subheading Text: We do things differently…
Background Image URL: [insert a 1920 x 800 image]
Background Overlay Color: rgba(0,0,0,0.2)
Design Options
Text & Logo Orientation: Center
Show Scroll Down Button: YES
Icon: [select icon]
Scroll Down Icon Color: #fcbf00
Scroll Down Icon Size: 50px
Text Color: Light
Title Text Color: #fcbf00
Title Font: Open Sans, Bold, Uppercase
Title Font Size: 60px (desktop), 40px (tablet), 30px (phone)
Subhead Font Size: 25px
Advanced Options (Custom CSS)
Main Element:
padding: 100px 0;

That』s it!

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

Title
Enter your page title here.
Subheading Text
If you would like to use a subhead, add it here. Your subhead will appear below your title in a small font.
Button #1 Text
Enter the text for the Button.
Button #2 Text
Enter the text for the Button.
Content
Here you can define the content that will be placed below the header and title text.
Button #1 URL
Enter the URL for the Button.
Button #2 URL
Enter the URL for the Button.
Logo Image URL
Upload your desired image, or type in the URL to the image you would like to display.
Header Image URL
Upload your desired image, or type in the URL to the image you would like to display.
Background Image URL
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.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Overlay Color
Choose a background overlay color, which will be placed on top of the background image. Semi-transparent backhround overlay images can create cool effects when placed above background images.
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 Header Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Text & Logo Orientation
This controls the how your text is aligned within the module.
Make Fullscreen
Here you can choose whether the header is expanded to fullscreen size.
Use Parallax effect
If enabled, your background images will have a fixed position as your scroll, creating a fun parallax-like effect.
Parallax method
Define the method, used for the parallax effect.
Show Scroll Down Button
Here you can choose whether the scroll down button is shown.
Icon
Choose an icon to display for the scroll down button.
Scroll Down Icon Color
By default, the scroll down icon inherits the color of your header text (white or gray). You can change this color by adjusting the color in this option using the color picker.
Scroll Down Icon Size
Use this setting to increase or decrease the size of the scroll down icon that appears at the bottom of your header.
Image Vertical Alignment
This controls the orientation of the image within the module.
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 Vertical Alignment
This setting determines the vertical alignment of your content. Your content can either be vertically centered, or aligned to the bottom.
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.
Content Font
You can change the font of your content 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.
Content Font Size
Here you can adjust the size of your content 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.
Content 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 content text, choose your desired color from the color picker using this option.
Content Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your content 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.
Content Line Height
Line height affects the space between each line of your content 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.
Subhead Font
You can change the font of your subhead 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.
Subhead Font Size
Here you can adjust the size of your subhead 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.
Subhead 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 subhead text, choose your desired color from the color picker using this option.
Subhead Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your subhead 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.
Subhead Line Height
Line height affects the space between each line of your subhead 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.
Text Max Width
Use this setting to reduce the max width of the text within the header module. For example, a value 50% will ensure that the text is never more than 50% of the width of the overall header module.
Use Custom Styles for Button
Enabling this option will reveal various button customization settings that you can use to change the appearance of your module』s button.
Button Text Size
This setting can be used to increase or decrease the size of the text within the button. The button will scale as the text size is increased and decreased.
Button Text Color
By default, buttons assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom text color to the button in this module. Select your custom color using the color picker to change the button』s color.
Button Background Color
By default, buttons have a transparent background color. This can be changed by selected your desired background color from the color picker.
Button Border Width
All Divi buttons have a 2px border by default. This border can be increased or decreased in size using this setting. Borders can be removed by inputting a value of 0.
Button Border Color
By default, button borders assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom border color to the button in this module. Select your custom color using the color picker to change the button』s border color.
Button Border Radius
Border radius affects how rounded the corners of your buttons are. By default, buttons in Divi has a small border radius that rounds the corners by 3 pixels. You can decrease this to 0 to create a square button or increase it significantly to create buttons with circular edges.
Button Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Font
You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Add Button Icon
Disabled this setting will remove icons from your button. By default, all Divi buttons display an arrow icon on hover.
Button Icon
If icons are enabled, you can use this setting to pick which icon to use in your button. Divi has various icons to choose from.
Button Icon Color
Adjusting this setting will change the color of the icon that appears in your button. By default, the icon color is the same as your buttons』 text color, but this setting allows you to adjust the color independently.
Button Icon Placement
You can choose to have your button icon display on the left or the right side of your button.
Only Show Icon On Hover for Button
By default, button icons are only displayed on hover. If you would like the icon to always appear, disable this setting.
Button Hover Text Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Background Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Radius
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Button Hover Letter Spacing
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Fullwidth Header 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.

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.

Adding Custom Fields To The Divi Email Optin Module

Adding Custom Fields To The Divi Email Optin Module
Adding custom fields to the Divi Email Optin module allows you to create custom subscribe forms and collecting additional information from your subscribers.

The Divi Email Optin module supports various email providers. Within each email provider, you can create custom data fields that can store different pieces of information about your email subscribers. This data can then be used to segment your email lists or create email autoresponders. By default, all email providers support the following fields: Name & Email. If you want to collect additional information, you will need to configure new custom fields.
Once a custom column of information has been created for your list within your email provider, a custom field can be added to your email optin module. When a visitor fills out that custom field, the data they input will be saved to your list in the subscriber』s user profile within your email provider』s system.
Adding Custom Fields In Your Email Provider
Each email provider works differently. Before you can add custom fields to your module, you will first need to log in to your email provider account and create the custom fields that you would like to use. Please refer to the following directions for your email provider to learn how to create custom fields. After that, continue down the page for more instructions on how to add those fields to your email optin module.
ActiveCampaign
ActiveCampaign has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Aweber
Aweber has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
CampaignMonitor
CampaignMonitor has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
ConstantContact
Unfortunately ConstantContact does not support custom fields. If you need to use custom fields for your list, we suggest using a different provider that is more capable.
Convertkit
Convertkit has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Emma
Emma has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Feedblitz
Feedblitz doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
GetResponse
GetResponse has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
HubSpot
HubSpot has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
iContact
iContact has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Infusionsoft
Infusionsoft has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
MadMimi
MadMimi has a great tutorial about how to add custom fields to your account. You can learn more here.
MadMimi doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
MailChimp
MailChimp has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
MailerLite
MailerLite has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
MailPoet
MailPoet has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Mailster
Mailster has a great tutorial about how to add custom fields to your account. You can learn more here.
Mailster doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
Ontraport
Ontraport has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
SalesForce
has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
SendinBlue
SendinBlue has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Adding Pre-Defined Custom Fields To The Email Optin Module
Most email providers will send Divi all of your custom field data, and the email optin module will be populated with a list of your available custom fields. Once you have added custom fields as described above, they will become available via the Content > Fields > Use Custom Fields option.

To add a new custom field, click the plus button and then choose your desired field from the Content > Field > Field dropdown menu.

You can then continue on to the Field Options to configure additional settings for your field. Here you can do things like add links to your input labels and re-organize field items.

Adding Manual Custom Fields To The Email Optin Module
Some email providers do not send Divi your custom field data. For these providers, you must configure your fields manually. These providers include: Aweber, Mailster, SendinBlue and MadMimi.
If you are using one of these providers, you will be able to manually select your field type and create your field items after selecting your custom field.

Adding Links To Your Checkboxes
A common use of checkbox custom fields is to record consent for data privacy regulations like the GDPR. In these cases, you may wish to link to your privacy policy or terms of service from a checkbox field item. All checkboxes and radio buttons support custom links. To add a link to a given field item, simply click the link icon and add your link text and link URL:

The Divi Post Slider Module

The Divi Post Slider Module
How to add, configure and customize the Divi post slider module.

View A Live Demo Of This Module
How To Add A Post Slider Module To Your Page
Before you can add a post slider 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 post slider 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 slider」 and then click enter to automatically find and add the post slider 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 Post Slider to a Blog Page to Showcase Recent Posts
For this example I』m going to add a Post Slider to showcase the three most recent posts at the top of a blog page. Each slide will display the post』s featured image as a background image, the post title and post meta, as well as a read more button.

Using the Visual Builder, add a new Standard Section to the top of the blog page with a fullwidth (1 column) row. Then insert the Post Slider Module to your new row.

Under Post Slider Settings, update the following options:
Content Options
Posts Number: 3
Design Options
Header Font: Roboto (Uppercase)
header Font Size: 50px
Header Text Color: #edef5d
Header Letter Spacing: 1px
Body Font Size: 16
Body Letter Spacing: 1px
Body Line Height: 1.4em
Meta Font: Open Sans, Italic, Uppercase
Meta Font Size: 18px
Meta Text Color: #cccccc
Meta Line Height: 2em
Use Custom Styles for Button: YES
button Text Size: 26px
Button Text color: #edef5d
Button Border Width: 0px
Button Icon: >
Only Show Icon On Hover for Button: NO

Save Settings
That』s it!

Post Slider 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 many posts you would like to display in the slider.
Include Categories
Choose which categories you would like to include in the slider.
Order By
Here you can adjust the order in which posts are displayed.
Button Text
Define the text which will be displayed on 「Read More」 button. leave blank for default ( Read More )
Content Display
Showing the full content will not truncate your posts in the slider. Showing the excerpt will only display excerpt text.
Use Post Excerpt If Defined
Disable this option if you want to ignore manually defined excerpts and always generate it automatically.
Automatic Excerpt Length
Define the length of automatically generated excerpts. Leave blank for default ( 270 )
Show Arrows
This setting will turn on and off the navigation arrows.
Show Controls
This setting will turn on and off the circle buttons at the bottom of the slider.
Show Read More Button
This setting will turn on and off the read more button.
Show Post Meta
This setting will turn on and off the meta section.
Show Featured Image
This setting will turn on and off the featured image in the slider.
Image Placement
Select how you would like to display the featured image in slides
Background Color
Use the color picker to choose a background color for this module.
Background Image
Upload your desired image, or type in the URL to the image you would like to use as the background for the slider.
Background Image Position
Choose the CSS positioning of the background image for each slide.
Background Image Size
Choose the CSS background image size used for each slide.
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 Slider 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.

Remove Inner Shadow
This will remove the CSS inner shadow that it applied to all slides by default.
Use Background Overlay
When enabled, a custom overlay color will be added above your background image and behind your slider content.
Background Overlay Color
Use the color picker to choose a color for the background overlay.
Use Text Overlay
When enabled, a background color is added behind the slider text to make it more readable atop background images.
Text Overlay Border Radius
Border radius affects how rounded the corners of the text overlay box are. By default, the corners have a slightly rounded edge of 3 pixels. You can reduce this value to 0 to create a rectangular box or increase the value to make the corners even more rounded.
Use Parallax Effect
Enabling this option will give your background images a fixed position as you scroll.
Parallax Method
Here you can define the method used for the parallax effect – CSS or True Parallax.
Arrows Custom Color
When hovering over a slider module, arrows appear that allow the visitor the navigate through each slide. By default, these arrows inherit the slide』s main text color. However, you can define a custom color for these arrows using this setting.
Dot Nav Custom Color
Within each slider, dot navigation elements appear below the slider content. These items allow the user to navigate through the slider. You can define a custom color to be used for these elements using the color picker in this setting.
Text Color
Here you can choose whether your text is light or dark. If you have a slide with a dark background, then choose light text. If you
have a light background, then use dark text.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
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.
Top Padding
This setting controls the inner space between top of the module and the text content within the module. If you would like to increase or decrease this space, input your desired value here. For example, to reduce the space and the overall size of the slider, you could enter a value of 100px. Alternatively, you could enter a percentage value, such as 10%, to make the height more dynamic.
Bottom Padding
This setting controls the inner space between bottom of the module and the text content within the module. If you would like to increase or decrease this space, input your desired value here. For example, to reduce the space and the overall size of the slider, you could enter a value of 100px. Alternatively, you could enter a percentage value, such as 10%, to make the height more dynamic.
Use Custom Styles for Button
Enabling this option will reveal various button customization settings that you can use to change the appearance of your module』s button.
Button Text Size
This setting can be used to increase or decrease the size of the text within the button. The button will scale as the text size is increased and decreased.
Button Text Color
By default, buttons assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom text color to the button in this module. Select your custom color using the color picker to change the button』s color.
Button Background Color
By default, buttons have a transparent background color. This can be changed by selected your desired background color from the color picker.
Button Border Width
All Divi buttons have a 2px border by default. This border can be increased or decreased in size using this setting. Borders can be removed by inputting a value of 0.
Button Border Color
By default, button borders assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom border color to the button in this module. Select your custom color using the color picker to change the button』s border color.
Button Border Radius
Border radius affects how rounded the corners of your buttons are. By default, buttons in Divi has a small border radius that rounds the corners by 3 pixels. You can decrease this to 0 to create a square button or increase it significantly to create buttons with circular edges.
Button Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Font
You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Add Button Icon
Disabled this setting will remove icons from your button. By default, all Divi buttons display an arrow icon on hover.
Button Icon
If icons are enabled, you can use this setting to pick which icon to use in your button. Divi has various icons to choose from.
Button Icon Color
Adjusting this setting will change the color of the icon that appears in your button. By default, the icon color is the same as your buttons』 text color, but this setting allows you to adjust the color independently.
Button Icon Placement
You can choose to have your button icon display on the left or the right side of your button.
Only Show Icon On Hover for Button
By default, button icons are only displayed on hover. If you would like the icon to always appear, disable this setting.
Button Hover Text Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Background Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Radius
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Button Hover Letter Spacing
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Post Slider 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 Animation
If you would like the slider 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 Animation Speed (in ms)
Here you can designate how fast the slider fades between each slide, if 『Automatic Animation』 option is enabled above. The higher the number the longer the pause between each rotation.
Continue Automatic Slide on Hover
Turning this on will allow automatic sliding to continue on mouse hover.
Hide Content On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will hide the slider』s text content on mobile.
Hide CTA On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will hide the slider』s call to action buttons on mobile.
Show Image / Video On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will show slide images and videos on mobile (they are disabled by default).
Disable On
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 Search Module

The Divi Search Module
How to add, configure and customize the Divi search module.

Using the search module, you can place a search form anywhere on your site. This search form will allow your visitors to search through all of your website』s content, including all pages and blog posts. This gives you the functionality of the WordPress search widget along with the flexibility of the Divi Builder. Not only can you control the search forms location on the page, you can also customize its design.
View A Live Demo Of This Module
How To Add A Search Module To Your Page
Before you can add a search 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 search 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 「search」 and then click enter to automatically find and add the search 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 Custom Search Module to a Fullwidth Blog Page
For this example, I』m going to show you how to add a Search Module to be a main call to action at the top of a blog page. This allows users to easily search the content of your blog without any clutter.
This page has a fullwidth header at the top with the search module directly below it. Under the search module is a Blog Module using the grid layout.

Using the Visual Builder, add a new standard section to the blog page with a fullwidth (1 column) row. Then insert the Search Module into the row.
Update the Search Module Settings as follows:
Content Options
Placeholder Text: Search our blog…
Hide Button: YES
Design Options
Input Field Background Color: #f8f8f8
Placeholder Color: #888888
Input Font Size: 16px
Input Text Color: #888888
Input Line Height: 1em
Custom Padding: 20px Top, 20px Bottom

Save Settings
Now go back to edit the width of the row containing your search module. Under the Design tab of the Row Settings, give the row a custom width of 300px. This will keep the search module compact and centered on the page.

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

Placeholder Text
Type the text you want to use as placeholder for the search field.
Hide Button
Turning this on will hide the Search button.
Exclude Pages
Turning this on will exclude Pages from search results.
Exclude Posts
Turning this on will exclude Posts from search results.
Exclude Categories
Choose which categories you would like to exclude from the search results.
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.
Search 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.

Input Field Background Color
Here you can change the background color of the search bar.
Placeholder Color
Before the search field is used, placeholder text exists inside of the field. If you have adjusted the field background color, you may also want to adjust the placeholder text color to ensure that it is readable.
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.
Input Font
You can change the font of your input 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.
Input Font Size
Here you can adjust the size of your input 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.
Input 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 input text, choose your desired color from the color picker using this option.
Input Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your input 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.
Input Line Height
Line height affects the space between each line of your input 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.
Button and Border Color
This will change the search button』s background and border color.
Button Font
You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Button Font Size
Here you can adjust the size of your button 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.
Button 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 button text, choose your desired color from the color picker using this option.
Button Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Line Height
Line height affects the space between each line of your button 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.
Max Width
By default, search bar max width is set to 100%. This means that the search bar will be displayed at its natural width unless the width of the search bar exceeds the width of the parent column, in which case the search bar will be limited to 100% of the width of the column. If you would like to further restrict the max width of the search bar, you can do so by entering your desired max width value here. For example, a value of 50% would limit the width of the search bar to 50% of the width of the parent column.
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.
Search 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 Fullwidth Map Module

The Divi Fullwidth Map Module
How to add, configure and customize the Divi fullwidth 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 Normal 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 Fullwidth Map Module To Your Page
Before you can add a fullwidth 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 Enable Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Locate the fullwidth 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 「fullwidth map」 and then click enter to automatically find and add the fullwidth 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 Fullwidth Map Module to a Contact Page
A fullwidth 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 Fullwidth 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 Fullwidth Section to the bottom of the contact page. Then insert the Fullwidth Map module to your new section. In the Content tab of the Fullwidth 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 fullwidth map module at the bottom of the contact page with a clickable pin that displays company information.

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

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

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.

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

The Divi Email Optin Module

The Divi Email Optin Module
How to add, configure and customize the Divi email optin module.

Growing your mailing list is easy using Divi』s Email Optin module. The email optin module now supports 20 of the most popular email marketing providers.

View A Live Demo Of This Module
How To Add An Email Optin Module To Your Page
Before you can add a email optin 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 email optin 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 「email optin」 and then click enter to automatically find and add the email optin 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.
Configuring Email Accounts
Before you can use the email optin module, you will first need to connect it to an email provider. These providers can be added and managed within the module settings. Once you add a new email provider, it will appear in the module settings whenever you edit an email optin module on your website.

To add a new email provider, first select your email provider from the Select Provider list. Next, click the Add button to link the module to your email account.
View Documentation For Supported Email Providers
Configuring Spam Protection Accounts
The email optin module gives you the option to utilize a 3rd-party service for spam protection. Spam protection providers can be added and managed within the module settings. Once you add a new spam protection provider, it will appear in the module settings whenever you edit an email optin or contact form module on your website.

To add a new spam protection provider, first select your provider from the Select Provider list and then click the Add button. Now you should see some new fields appear for api keys, secrets, etc (it varies by provider). You can find the keys/secrets in your account on your spam provider』s website.
View Documentation For Supported Spam Protection Providers
Use Case Example: Adding An Email Optin to the Bottom of a Blog Post
A common place to add an email optin form is just below your post content.For this quick example, I』m going to show you just how easy it is insert and style a Email Optin Module below a blog post using the Visual Builder.

Using the Visual Builder, add Standard Section with a one-half one-half (2 column) row under the section containing the post content.
Since this example is going to be an e-book offer with the optin, add an Image Module to the left column and upload an image of the book. Set the image alignment to 「Center」 and set the image max width to 300px.

Then add the Email Optin Module to the right column.

Update the Email Optin Settings as follows:
Content Options
Title: 「New Subscribers Get A FREE Copy of My E-Book」Button Text: 「Subscribe」Content: 「A Gripping Story that Will Leave You on the Edge of Your Seat.」Service Provider: [select service provider]Select List or Feed Title
Design Options
Form Field Background Color: #f1f1f1Focus Background color: #ffffffUse Focus Border Color: YESFocus Border Color: #02b875Text Color: DarkText Orientation: CenterHeader Font: PT SansHeader Font Size: 35pxHead Line Height: 1.3emBody Font Size: 18pxCustom Padding: 20px Right, 20px LeftUse Custom Styles for Button: YESButton Text Size: 26pxButton Text Color: #ffffffButton Background Color: #02b875Button Border Width: 2Button Border Color: #02b875Button Letter Spacing: 1pxAdd Button Icon: YesButton Icon: [add icon]

That』s it. If you want to take your email opt-ins to the next level you can get Bloom, Divi』s email opt-in and lead generation plugin specially built to help you grow your email list.
Email Optin Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Title
Insert the title of your signup form here.
Button Text
Specify the signup button text here.
Content
This field is where you can enter the SignUp Module content.
Email Account
Service Provider
Here you can choose which mailing list provider you are using. See the section on this page titled 「Configuring Email Accounts」 above for more details.
Spam Protection
Service Provider
Here you can choose which spam protection provider you are using. See the section on this page titled 「Configuring Spam Protection Accounts」 above for more details.
Use Background Color
If enabled, a background color will be applied to the module. If a background color has been enabled, additional padding is added inside the module to separate the text content from the visible edge of the module. If a background color is not enabled, the background of the module becomes transparent and the additional padding is removed.
Background Color
You can make your Signup tile any color you wish by using the color selector. Select the same color as its section background to create the appearance of a full width or borderless effect.
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.
Email Optin 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.

Form Field Background Color
The email optin form contains two input fields for username and password. You can use this setting to adjust the background color of these fields.
Form Field Text Color
The email optin form contains two input fields for username and password. You can use this setting to adjust the text color of these fields. If you have adjusted the form field background color you may also want to adjust the text color to ensure a harmonious color relationship.
Focus Background Color
When an input field is focused with a visitor』s mouse, the colors change to make it clear which field is active. Here you can define the background color of focused fields.
Focus Text Color
When an input field is focused with a visitor』s mouse, the colors change to make it clear which field is active. Here you can define the text color of focused fields.
Use Focus Border Color
If you would like to add a border to input fields when they are focused, you can enable this option.
Focus Border Color
Using this setting you can change the color of the border that appears on focused input fields.
Text Color
If the Background Color is dark, the Text Color should be set to 『Light』. Visa versa, if the Background Color is light, the Text Color should be set to 『Dark』.
Text Orientation
This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
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.
Use Custom Styles for Button
Enabling this option will reveal various button customization settings that you can use to change the appearance of your module』s button.
Button Text Size
This setting can be used to increase or decrease the size of the text within the button. The button will scale as the text size is increased and decreased.
Button Text Color
By default, buttons assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom text color to the button in this module. Select your custom color using the color picker to change the button』s color.
Button Background Color
By default, buttons have a transparent background color. This can be changed by selected your desired background color from the color picker.
Button Border Width
All Divi buttons have a 2px border by default. This border can be increased or decreased in size using this setting. Borders can be removed by inputting a value of 0.
Button Border Color
By default, button borders assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom border color to the button in this module. Select your custom color using the color picker to change the button』s border color.
Button Border Radius
Border radius affects how rounded the corners of your buttons are. By default, buttons in Divi has a small border radius that rounds the corners by 3 pixels. You can decrease this to 0 to create a square button or increase it significantly to create buttons with circular edges.
Button Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Font
You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Add Button Icon
Disabled this setting will remove icons from your button. By default, all Divi buttons display an arrow icon on hover.
Button Icon
If icons are enabled, you can use this setting to pick which icon to use in your button. Divi has various icons to choose from.
Button Icon Color
Adjusting this setting will change the color of the icon that appears in your button. By default, the icon color is the same as your buttons』 text color, but this setting allows you to adjust the color independently.
Button Icon Placement
You can choose to have your button icon display on the left or the right side of your button.
Only Show Icon On Hover for Button
By default, button icons are only displayed on hover. If you would like the icon to always appear, disable this setting.
Button Hover Text Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Background Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Radius
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Button Hover Letter Spacing
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Email Optin 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 Post Title Module

The Divi Post Title Module
How to add, configure and customize the Divi post title module.

The Post Title Module displays the title of your current post, and optionally the post Featured Image and meta data in an elegant fashion. This allows you to create more unique looking posts when building your posts using the Divi Builder.
View A Live Demo Of This Module
How To Add A Post Title Module To Your Page
Before you can add a post title 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 title 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 title」 and then click enter to automatically find and add the post title 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: Styling a Post Title Module for a Blog Post
For this example, I』m going to show you just how easy it is to style a custom post title for a blog post.

The first thing you need to do is go to the 「Edit Post」 page from the WordPress dashboard. In the Divi Post Settings box at the top right, change the page layout to Full Width and hide the Post Title.

Using the Visual Builder, add Regular Section with a fullwidth (1 column) row. Then add the Post Title Module to the row.

Update the Post Title Settings as follows:
Content Options
Show Post Categories: NO
Show Comments Count: NO
Show Featured Image: YES
Featured Image Placement: Title/Meta Background Image
Design Options
Text Orientation: center
Text Color: Light
Use Text Background Color: YES
Text Background Color: rgba(0,0,0,0.35)
Title Font: Roboto (bold)
Title Font Size: 50px
Title Letter Spacing: 2px
title Line Height: 1em
Meta Font: Raleway Light
Meta Font Size: 24px
Meta Font Color: #e0ba67

Save Settings
That』s it. Now you never have to settle for another boring post title again!
Post Title 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.

Show Title
Here you can choose whether or not display the Post Title.
Show Meta
Here you can choose whether or not display the Post Meta.
Show Author
Here you can choose whether or not display the Author Name in Post Meta.
Show Date
Here you can choose whether or not display the Date in Post Meta.
Date Format
Here you can define the Date Format in Post Meta. Default is 『M j, Y』
Show Post Categories
Here you can choose whether or not display the Categories in Post Meta. Note: This option doesn』t work with custom post types.
Show Comments Count
Here you can choose whether or not display the Comments Count in Post Meta.
Show Featured Image
Here you can choose whether or not display the Featured Image.
Featured Image Placement
Here you can choose where to place the Featured Image.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
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 Title 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.

Use Parallax Effect
If your featured image placement is set to 「title/Meta Background Image」, you can choose whether or not to use parallax effect for the featured image.
Parallax Method
Here you can choose which parallax method to use for the featured image – CSS or True Parallax.
Text Orientation
Here you can choose the orientation for the Title/Meta text.
Text Color
Here you can choose the color for the Title/Meta text.
Use Text Background Color
Here you can choose whether or not use the background color for the Title/Meta tex.
Text Background Color
If background color is enabled, choose your desired background color here.
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.
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 Title 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.

An Overview Of Divi Sections

An Overview Of Divi Sections
Sections are the builder』s largest building blocks, and can be used in various ways.

Sections are the biggest building block in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. In Divi, everything you build starts with a section. This content wrapper has various settings that can be used to do some really awesome things.
How To Add A Section To Your Page
Before you can add a section 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 blue plus button to add a new section to your page. You will be greeted with a popup that allows you to add any of Divi』s three section types. These types include: Standard, Specialty and Fullwidth.

Once the section has been added, you will be greeted with the section』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Section Content Options
Within the content tab you will find all of the section』s content elements. For sections, these content elements are limited to background elements such as background images and videos.

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 Color
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 Video MP4
All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the MP4 video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.
Background Video WEBM
All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the WEBM video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.
Background Video Width
In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.
Background Video Height
In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.
Admin Label
In this dropdown you can add an admin label that will appear in the back end builder as well as the visual builder』s skeleton view.
Section Design Options
Within the design tab you will find all of the section』s styling options, such as sizing and spacing. This is the tab you will use to change how your section looks. Every Divi section type has a long list of design settings that you can use to change just about anything.

Show Inner Shadow
Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.
Use Parallax Effect
If enabled, your background image will stay fixed as your scroll, creating a fun parallax-like effect. You can also choose between two parallax methods: CSS and True Parallax.
Custom Padding
Here you can adjust the padding of the section to specific values, or leave blank to use the default padding.
Section 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 your section. You can also apply custom CSS classes and IDs to the section, which can be used to customize the section within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this section. 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 section. 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 be applied to the section here. 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 section appears on. You can choose to disable your section on tablets, smart phones or desktop computers individually. This is useful if you want to use different sections on different devices, or if you want to simplify the mobile design by eliminating certain sections from the page.
Using Fullwidth Sections
Fullwidth sections give you access to a new set of Fullwidth Modules. These modules act a little differently because they take advantage of the full width of the browser. Fullwidth modules can only be placed within Fullwidth sections.

Once you add a new fullwidth section to your page, you can click the 「Add Modules」 button within the section to add a fullwidth module. Unlike normal section, there is no concept of rows or columns, since the fullwidth modules always takes advantage of 100% of the screen. Fullwidth modules are a great way to add a visual break to the page!

A great example of a fullwidth module is the fullwidth slider. This fullwidth slider works just like a normal slider, except that it expands to 100% width. Displaying a slider at such a scale can be quite stunning, just check our the divi demo for an example.

Using Specialty Sections
Specialty sections were created to allow for more advanced column structures. Unlike normal sections, when you use a specialty section, you can add complex column variations next to full-spanning vertical sidebars, without adding unwanted breaks to the page. These types of layouts are not possible using normal sections.

Once you add a specialty section to the page, you will notice that one area has an 「add module」 button, while the other has an 「insert row」 button. The 「insert module」 area represents your vertical sidebar. You can add as many modules here, in a single row, and they will span the vertical width of the section, adjacent to the column structure you build next to it. Clicking 「insert row」 will allow you to insert additional rows to the left/right of your sidebar. In a way, this can be thought of as adding rows within rows!

The result is the ability to create just about any column structure that you could dream of, and no matter what structure you choose, we have made sure that the combination will look great! Here is an example of a page layout created using specialty sections. As you can see, the effect is a dual-sidebar layout, with two vertical-spanning rows on the left/right of a complex column structure in the middle.