Divi 文档

Divi Rows & Row Options

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

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

The Content Settings
Background Color
Background images can be applied to an entire row. By default, rows have a transparent background color.
Background Image
Background images can be applied to the an entire row.
Background Video MP4
Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.
Background Video Webm
Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.
Background Video Width
After your videos have been uploaded, you must input the width of your video here. It must be equal to the actual width of the video, otherwise the background position will be incorrect.
Background Video Height
After your videos have been uploaded, you must input the height of your video here. It must be equal to the actual height of the video, otherwise the background position will be incorrect.
Pause Video
If you would like videos to be paused when clicked, enable this option.
Column Background Color
For each column in a row, you can assign a unique background color.
Column Background Image
For each column in a row, you can assign a unique background image.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

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

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

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

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

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

Using The Divi Role Editor

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

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

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

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

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

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

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

Using Divi』s Right Click Controls

Using Divi』s Right Click Controls
Divi』s right click controls give you quick access to some new and commonly-used features.

Quick Access To Divi Builder Functions
Whenever you right click on something with the Divi Builder or Visual Builder enabled, whether it be a Module, Row or Section, you will get a list of different actions that can be performed. These actions include: Undo, Redo, Save to Library, Disable, Lock, and Copy & Paste. You may be familiar with many of these functions already as they』re fairly common. Which is why we』ve added them to the Right Click controls for your convenience! This way you don』t have to dig into the module settings to access commonly-used features. Some of the functions, however, are unique to Right Click, and are only available when right clicking. These include: Copy, Paste, and Lock.

Undo & Redo
Any action you take within the Divi Builder can be undone, and any undo can also be re-done. Undo & Redo controls (which are also available using the editing history button found in the main page controls that hover at the bottom of the enabled visual builder interface) can also be accessed when right clicking.
Save To Library
The option to save an element to the Divi Library has been added to Divi』s right click controls for convenience. Using this feature you can save items to the library without having to open up the relevant settings box.
Disable
Any Module, Row or Section can be disabled. Once an item is disabled, it will appear to fade into the background. This reduced opacity is meant to indicate that the element is disabled but still allow you to see and edit it while the Divi Builder is activated. When this action has been saved and the visual builder has been exited the disabled element will disappear altogether.
Disabling is a great way to remove things from view without actually deleting them in the builder. They can then be re-enabled in the future.

Lock
Locking is a function that is only available via Divi』s right click controls. Once an item has been locked, it cannot be moved, edited or deleted until it has been unlocked. Only users with the Administrator role have the ability to lock and unlock items. This means you can assign your clients a lesser role, such as Editor, and they won』t be able to edit any item that has been locked. This is a great way to control what your clients can and cannot edit. Often times you might want to lock everything except for text modules, for example, which would allow your client to edit their content, but would not allow them to adjust the settings of more advanced modules.

Copy & Paste
With Divi』s right-click controls you can copy any module, row, or section from one area and then paste it into another area. You can even copy and paste just the style of an element and copy it onto another element of the same type. For example, if you have four blurbs in a row you could style one the way you want and then simply copy and paste that blurb』s style onto the others. These copy and paste features will save you loads of time and boring repetition!

How To Create A New Project In Divi

How To Create A New Project In Divi
Divi separates portfolio items into a separate custom post type called Projects.

Divi makes building a project fun and easy. A 『Projects』 menu item has been added right inside of your Admin Panel so you can create projects as if you were creating a Post or Page. You also have the option to use the basic project structure, or to use the builder to create truly amazing project layouts.

Creating Your Project

Title
Start off by defining your project title.
Page Layout
You can choose from three project page layouts—this can be unique to each project if desired. The three layouts include a left sidebar, a right sidebar, or a full width option.
Categories
Project categories are separate from post categories so that you can have full control over what appears inside of your portfolios. Within the Project Builder you can add a new category or choose from existing ones.
Tag
Use project tags to define the Skills that were used on the project. These will display on the the project page in a Skills list. Each skill, or tag, can be clicked on to view all projects that include that skill.
Featured Image
Select a featured image by choosing/installing an image via the WordPress Media Library. This will be the image that gets displayed as a thumbnail in your portfolio.
The thumbnail will be based off of the aspect ratio of your featured image, so we recommend that all of your project featured images are the same aspect ratio if you are using a grid layout.
Content: Basic
The basic project layout will place your featured image at the top of the page above any content that you place in the text editor.
In the example below you can see that we have the title of our project with our project categorie(s) just to the right. Below that our featured image displays full width above the content that we entered. The tags that were defined show up as skills and the post date appears below that.

Content: Extended
If you want to create extended project posts, you can click the 『Use page Builder』 button at the top of the Project Builder and you will be presented with the Divi Builder.

Next, click Use Visual Builder to jump into Divi』s Visual Builder mode.
In this mode, you have just as much creative freedom as you do when making any other page with the Divi Builder. See The Builder Overview.

NOTE: If you choose to use the builder, you are starting from a blank canvas. So all of the elements from the basic project layout is removed (i.e. Title, Categories, Featured Image, Skills, and Date). However, you will still want to fill out this information for your project thumbnails in your portfolios.

The Divi Pricing Tables Module

The Divi Pricing Tables Module
How to add, configure and customize the Divi pricing table module.

It』s easier than ever to create pricing tables for your online products. Create as many tables as you want, and control the pricing and features of each. You can even feature a particular plan to increase conversions. Even if your module includes more than one pricing table, it will be treated as one module, and can be placed into any column size.
View A Live Demo Of This Module
How To Add A Pricing Tables Module To Your Page
Before you can add a pricing tables 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 pricing tables 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 「pricing tables」 and then click enter to automatically find and add the pricing tables 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 Pricing Table to your Product Landing Page
When promoting your products on a landing page, pricing tables can effective showcase your different product pricing options.
In this example, I』m going to add a Pricing Table Module to display three pricing plans (or tables) with one of the those plans standing out as a featured plan in order to increase conversions.

First, add a new regular section to the page where the pricing tables should be displayed. Add a fullwidth (1 column) row to the section and insert a Pricing Tables Module inside the row.

In the Pricing Tables Settings, under the Content tab, click + Add New Item to add your first table.

Update the Pricing Table Settings as follows:
Content Options
Title: Personal
Currency: $
Per: yr
Price: 69
Button Text: Sign Up
Content:
Access to All Themes
Perpetual Theme Updates
Premium Technical Support
-Access to All Plugins
-Layered Photoshop Files
-No Yearly Fees
Button URL: [enter URL for the button]
Background: #ffffff
Design Options
Price Text Color: #3e51b5
Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background Color: #3e51b5
Button Border Width: 0px
Save Settings

Now duplicate the pricing table you just created two times so that you have a total of three pricing tables.

For the middle pricing table, update the following options:
Content tab
Title: Developer
Price: 89
Content:
Access to All Themes
Perpetual Theme Updates
Premium Technical Support
Access to All Plugins
Layered Photoshop Files
-No Yearly Fees
Button URL: [enter URL for the button]
Design tab
Price Text Color: #0091ca
Button Background Color: #0091ca
For the third pricing table, update the settings as follows:
Content tab
Title: Lifetime
Price: 249
Button Text: Sign Up
Content:
Access to All Themes
Perpetual Theme Updates
Premium Technical Support
Access to All Plugins
Layered Photoshop Files
No Yearly Fees
Button URL: [enter URL for the button]
Save Settings
Now go back to the Pricing Tables Settings and update the following:
Content Options
Featured Table Header Background Color: #0091ca
Design Options
Bullet Color: #3e51b5
Featured Table Bullet Color: #0091ca

Save Settings
Now go back and edit the section settings to give the section a background color of #3e51b5.
That』s it. Now you have a pricing table with three options with the middle option set as a featured item that stands out from the rest.

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

+ Add New Item
This is where you add new pricing tables to your module. Clicking 「+ add new item」 will open a completely new list of design options specific to that pricing table. See below for individual Price Table Settings.
After you add your first tab, you will see a gray bar appear with the title of your pricing table shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the table.
Show Bullet
By default, items within pricing tables are displayed as bulleted lists. If you would like to remove the bullets from the list of features, you can disable this option.
Featured Table Background Color
Each pricing table can be 「featured.」 Featured tables are highlighted in the row, making them stand out against the other options. Using this setting you can change the background color for featured tables only.
Table Header Background Color
Above each pricing table is a header area that includes your table』s title and sub title. You can control the background color of this area independently of the main table background color by selecting your desired color from the color picker.
Featured Table Header Background Color
Each pricing table can be 「featured.」 Featured tables are highlighted in the row, making them stand out against the other options. Using this setting you can change the header background color for featured tables only.
Background Color
By default, pricing tables have a white background color. If you would like to use a different color for your pricing table background, you can define your custom color here using the color picker.
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.
Pricing Tables 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.

Center List Items
By default, feature lists are aligned left within the pricing table. If you would like to have them aligned center, then you can enable this option.
Remove Featured Table Drop Shadow
By default, pricing tables have a subtle drop shadow behind each table. If you would like to remove this shadow, then you can enable this option.
Center List Items
Here you can choose to center the items listed in your table.
Bullet Color
By default, bullets within the pricing table list will inherit your theme accent color. If you would like to use a different color, you can define it here using the color picker.
Featured Table Bullet Color
If you would like to use a different color for bullets within featured pricing tables, you can define that color here using the color picker.
Featured Table Header Text Color
This option controls the color of your featured table header text color. If you change the featured table header background color, you may also change this option so that to ensure readability.
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.
Featured Table Body Text Color
This changes the body text color for your featured table. If you change your featured table background color, you may need to change this option to ensure readability.
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.
Featured Table Subheader Text Color
This changes the subheader text color for your featured table. If you change your featured table background color, you may need to change this option to ensure readability.
Subheader Font
You can change the font of your subheader 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.
Subheader Font Size
Here you can adjust the size of your subheader 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.
Subheader 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 subheader text, choose your desired color from the color picker using this option.
Subheader Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your subheader 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.
Subheader Line Height
Line height affects the space between each line of your subheader 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.
Currency & Frequency Font
You can change the font of your currency & frequency 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.
Currency & Frequency Font Size
Here you can adjust the size of your currency & frequency 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.
Currency & Frequency 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 currency & frequency text, choose your desired color from the color picker using this option.
Currency & Frequency Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your currency & frequency 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.
Currency & Frequency Line Height
Line height affects the space between each line of your currency & frequency 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.
Featured Table Price Color
This changes the price color for your featured table. If you change your featured table background color, you may need to change this option to ensure readability.
Price Font
You can change the font of your price 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.
Price Font Size
Here you can adjust the size of your price 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.
Price 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 price text, choose your desired color from the color picker using this option.
Price Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your price 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.
Price Line Height
Line height affects the space between each line of your price 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.
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.
Pricing Tables Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

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

Title
The title you insert here will be used for this pricing option (i.e. Premium).
Subtitle
The Subtitle you insert here will appear below your title (i.e. Most Popular).
Currency
Input your desired currency symbol here.
Per
If your pricing is subscription based, input the subscription cycle here (i.e. Year).
Price
Input the value of the product here.
Button Text
Specify the button text here.
Content
This field is where you can enter the list of features that come or don』t come with your product. Separate each list item on a new line and begin each line with either a + or a – symbol. A + specifies an included feature, whereas a – specifies an excluded feature.
Button URL
At the bottom of each table you can insert a Call To Action button by inserting a valid web URL in this field. Leave this and the
Button Text Field blank if you do not wish to have a button in your pricing table.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Individual Pricing Tables Design Options

Make This Table Featured
Choose to make this pricing table featured or not with this dropdown menu. Featuring a pricing table will make it stand out amongst
the rest.
Excluded Item Color
For items in your list that have been defined as excluded using the – symbol, you can adjust their color using this setting. For example, you may want to change the color to red or reduce their opacity to signify visually that the items are excluded from the current package.
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.
Subheader Font
You can change the font of your subheader 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.
Subheader Font Size
Here you can adjust the size of your subheader 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.
Subheader 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 subheader text, choose your desired color from the color picker using this option.
Subheader Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your subheader 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.
Subheader Line Height
Line height affects the space between each line of your subheader 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.
Currency & Frequency Font
You can change the font of your currency & frequency 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.
Currency & Frequency Font Size
Here you can adjust the size of your currency & frequency 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.
Currency & Frequency 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 currency & frequency text, choose your desired color from the color picker using this option.
Currency & Frequency Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your currency & frequency 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.
Currency & Frequency Line Height
Line height affects the space between each line of your currency & frequency 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.
Price Font
You can change the font of your price 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.
Price Font Size
Here you can adjust the size of your price 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.
Price 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 price text, choose your desired color from the color picker using this option.
Price Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your price 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.
Price Line Height
Line height affects the space between each line of your price 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 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.
Individual Pricing Tables Advanced Options

Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Using Premade Layouts In Divi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

The Divi 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 Post Navigation Module

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

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

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 navigation module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「post navigation」 and then click enter to automatically find and add the post navigation module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding Custom Post Navigation Links to the Bottom of a Blog Post
Having navigation links to next and previous articles at the bottom of your post is a great way to keep your visitors engaging with your content. In this example, I』m going to show you how to use the actual names of the post titles for your navigation links instead of the general 「previous」 and 「next」 link names. I』m also going to show you how to add a border around the links to give them more of a button feel.

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

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

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

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

Previous Link Text
Define custom text for the previous link. You can use the %title variable to include the post title. Leave blank for default.
Next Link Text
Define custom text for the next link. You can use the %title variable to include the post title. Leave blank for default.
In The Same Category
Here you can define whether previous and next posts must be within the same taxonomy term as the current post.
Custom Taxonomy Name
Leave this option blank if you』re using this module on a Project or Post. Otherwise type the taxonomy name to make the 『In the Same Category』 option work correctly.
Hide Previous Post Link
Here you can choose whether to hide or show the previous post link.
Hide Next Post Link
Here you can choose whether to hide or show the next post link.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Post Navigation Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

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

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

How To Use Divi Blog Post Formats

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

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

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

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

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

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

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

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