Divi Hosting By SiteGround Overview

Divi Hosting By SiteGround Overview

Divi Hosting By SiteGround Overview
We partnered with SiteGround to bring Divi users fast Divi Hosting that works perfectly out of the box! Plus Divi and WordPress come pre-installed and configured with your license key. Skip the setup process and jump right into the builder! Divi Hosting from SiteGround is configured to meet all of Divi』s requirements and is supported by a team of WordPress professionals.

If you are looking for an easy way to set up a fast Divi website, then we suggest using SiteGround as your hosting provider. We partnered with SiteGround to create an optimized Divi Hosting package and includes automatic Divi installation, license key generation and product activation. Divi Hosting by SiteGround meets all of Divi』s requirements out of the box and is supported by leading WordPress professionals. That』s why we choose to recommend them to our customers!
How To Set Up Your Website Using Divi Hosting By SiteGround
Setting up your first Divi website with Divi Hosting is a breeze. To get started, go here and click big orange button.

This will ask you to log in to your Elegant Themes account if you are not logged in, and then you will be redirected to SiteGround. Here you will be shown various hosting options that SiteGround offers. Choose the hosting plan that best suits your needs and proceed to the checkout process.

Once you have completed the check out process, you can log in to your new SiteGround account using the email address and password created during signup. When you log in to your SiteGround account, click the 「Websites」 tab to find your new Divi website.

Click the 「WordPress Kit」 button to quickly access SiteGround』s WordPress related tools, including the WordPress Admin link. Click 「WordPress Admin」 to log in to your new website where you will find Divi has already been installed and activated.Now you can jump right in to building your website.

Everything You Need To Know About SiteGround Hosting
Everything you need to know about using your new SiteGround hosting account can be found in SiteGround』s extensive knowledge base. Still need more help? Don』t worry, SiteGround』s support team is always available to assist you with any of your hosting needs.
Need Hosting Assistance? SiteGround Is Here To Help
If you need help with anything related to your new Divi Hosting account, SiteGround is where support questions should be directed. You can access their support center here. SiteGround is a leading WordPress host powered by passionate WordPress professionals, and they are the best in the business when comes to helping you with any of your WordPress needs.
Need Help With Divi? Elegant Themes Has Your Back!
Getting Divi help is easy. Just click the pink chat icon to launch our support portal where you can chat with someone on our support team. We are available 24/7 and we are happy to help you with anything!

Using The Divi Theme Options

Using The Divi Theme Options

Using The Divi Theme Options
Divi comes with theme options that are used to set up various parts of your site.

Divi comes fully loaded with its own custom theme options. This is where you can control things like your logo, navigation settings, and so much more. These options can be accessed in the WordPress Dashboard menu under Divi > Theme Options.

General Settings

Logo
This is where you can upload your own logo file to appear in the header of every page of your website.
Fixed Navigation Bar
The fixed navigation bar refers to the navigation bar as it becomes fixed at the top of your screen when scrolling down the page. The menu bar will also shrink slightly upon scrolling to provide more readable screen space. By default the navigation bar is enabled.
Enable Divi Gallery
The WordPress media uploader contains a Create Gallery feature which allows you to add simple image galleries to your pages or posts. Enable this option if you want to replace the default WordPress gallery style with the Divi gallery style.
Color Pickers Default Palette
This is where you can change the default color palette for all color pickers within the Divi Builder and Visual Builder. You can set all the colors needed for customizing your theme here so that these same colors will be available throughout the building process.
Grab the first post image
By default thumbnail images are created using custom fields. However, if you would rather use the images that are already in your post for your thumbnail (and bypass using custom fields) you can activate this option. Once activated, thumbnail images will be generated automatically using the first image in your post. The image must be hosted on your own server.
Blog Style Mode
By default the theme truncates your posts on index/homepages automatically to create post previews. If you would rather show your posts in full on index pages like a traditional blog then you can activate this feature.
Shop Page & Category Page Layout for WooCommerce
If you will be using WooCommerce integration, you can define which layout you want your shop to use on product and product category pages.
Google API Key
The Maps module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key here. Learn more about how to create your Google API Key here.
Enqueue Google Maps Script
Disable this option to remove the Google Maps API script from your Divi Builder Pages. This may improve compatibility with third party plugins that also enqueue this script.
Please Note: Modules that rely on the Google Maps API in order to function properly, such as the Maps and Fullwidth Maps Modules, will still be available but will not function while this option is disabled (unless you manually add Google Maps API script).
Social Media Icons
Divi places your social media links inside of your footer. Here you can control which social media icons you wish to display and where you would like them to link to.
Number of Products displayed on WooCommerce archive pages
Here you can designate how many WooCommerce products are displayed on the archive page. This option works independently from the Settings > Reading options in wp-admin.
Numbers of posts per page
Define how many posts you would like to be displayed when a user visits a Category Page, an Archive Page, Search Results Page, or Tag Page.
Date Format
This option allows you to change how your dates are displayed. For more information please refer to the WordPress codex here: http://codex.wordpress.org/Formatting_Date_and_Time
Use excerpts when defined
This will enable the use of excerpts in posts or pages.
Responsive shortcodes
This option enables shortcodes to respond to various screen sizes
Google Fonts subsets
This will enable Google Fonts for Non-English languages.
Back To Top Button
This gives you the option to display a Back To Top Button (at the bottom right of your page) while scrolling.
Smooth Scrolling
This will enable the smooth scrolling with mouse wheel. Smooth Scrolling is also especially useful when using anchor links to link to specific areas of the page.
Custom CSS
This is where you can enter any custom css to customize your site. For extensive CSS modifications we recommend that you always use a child theme.
Navigation > Pages

Exclude pages from the Navigation Bar
All of your existing pages will appear in this window. Every new page will appear in your navigation by default. You can uncheck any page here if you wish to not display a specific page or pages.
Show Dropdown Menus
If you would like to remove the dropdown menus from the page』s navigation bar, disable this feature.
Display Home Link
By default the theme creates a Home link that, when clicked, leads back to your blog』s homepage. If, however, you are using a static homepage and have already created a page called Home to use, this will result in a duplicate link. In this case you should disable this feature to remove the link.
Sort Pages Links
Choose how page links should be sorted here.
Order Page Links by Ascending/Descending
Further, specify in which order your sorted page links should appear.
Number of dropdown tiers shown
This options allows you to control how many tiers your page』s dropdown menu has. Increasing the number allows for additional menu items to be shown.
Navigation > Categories

Exclude Categories from the Navigation Bar
All of your existing categories will appear in this window. Every new category will appear in your navigation by default. You can uncheck any category page here if you wish to not display a specific category or categories.
Show Dropdown Menus
If you would like to remove the dropdown menus from the categories navigation bar disable this feature.
Hide Empty Categories
If a category has been made but is not being used by any posts, you can choose whether or not to display it in your navigation. By default empty categories are hidden.
Number of Dropdown Tiers Shown
This options allows you to control how many tiers your page』s dropdown menu has. Increasing the number allows for additional menu items to be shown.
Sort Category Links
Choose how category links should be sorted here.
Order Category Links by Ascending/Descending
Further specify in which order your sorted category links should appear.
Navigation > General

Disable top tier dropdown menu links
In some cases users will want to create parent categories or links as placeholders to hold a list of child links or categories. In this case it is not desirable to have the parent links lead anywhere, but instead merely serve an organizational function. Enabling this options will remove the links from all parent pages/categories so that they don』t lead anywhere when clicked.
Alternative scroll-to-anchor method
Sometimes when using the CSS ID of a section to link directly to it from another page, the page』s final scroll position can be inaccurate. Enable this option to use an alternative method for scrolling to anchors which can be more accurate than the default method in some cases.
Layout Settings
Single Post Layout

Choose Which Items to display in the post info section
Here you can choose which items appear in the post info section on single post pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Show Comments on posts
You can disable this option if you want to remove the comments and comment form from single post pages.
Place Thumbs on Posts
By default thumbnails are placed at the beginning of your post on single post pages. If you would like to remove this initial thumbnail image to avoid repetition simply disable this option.
Single Page Layout

Place Thumbs on Pages
By default thumbnails are not placed on pages (they are only used on posts). However, if you want to use thumbnails on posts you can! Just enable this option.
Show Comments on Pages
By default comments are not placed on pages, however, if you would like to allow people to comment on your pages simply enable this option.
Layout General Settings

Post Info Section
Here you can choose which items appear in the postinfo section on pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Show Thumbs on Index pages
Enable this option to show thumbnails on Index Pages.
Ad Management

Enable Single Post 468×60 banner
Enabling this option will display a 468×60 banner ad on the bottom of your post pages below the single post content. If enabled you must fill in the banner image and destination url below.
Input 468×60 advertisement banner image
Here you can provide 468×60 banner image url.
Input 468×60 advertisement destination url
Here you can provide 468×60 banner destination url.
Input 468×60 adsense code
Place your adsense code here.
SEO > Index Page SEO

Enable canonical URL』s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL』s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine』s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treaded individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Enable meta descriptions
Check this box if you want to display meta descriptions on category/archive pages. The description is based off the category description you choose when creating/editing your category in wp-admin.
Choose title autogeneration method
Here you can choose how your titles on index pages are generated. You can change which order your blog name and index title are displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and index page name when using autogenerated post titles. Common values are | or –
SEO > Single Post Page SEO

Enable custom titles
By default the theme creates post titles based on the title of your post and your blog name. If you would like to make your meta title different than your actual post title you can define a custom title for each post using custom fields. This option must be enabled for custom titles to work, and you must choose a custom field name for your title below.
Enable custom description
If you would like to add a meta description to your post you can do so using custom fields. This option must be enabled for descriptions to be displayed on post pages. You can add your meta description using custom fields based off the custom field name you define below.
Enable custom keywords
If you would like to add meta keywords to your post you can do so using custom fields. This option must be enabled for keywords to be displayed on post pages. You can add your meta keywords using custom fields based off the custom field name you define below.
Enable canonical URL』s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL』s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine』s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Custom field Name to be used for title
When you define your title using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom title you would like to use.
Custom field Name to be used for description
When you define your meta description using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom description you would like to use.
Custom field Name to be used for keywords
When you define your keywords using custom fields you should use this value for the custom field Name. The Value of your custom field should be the meta keywords you would like to use, separated by commas.
If custom titles are disabled, choose autogeneration method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
SEO > Homepage SEO

Enable custom title
By default the theme uses a combination of your blog name and your blog description, as defined when you created your blog, to create your homepage titles. However if you want to create a custom title then simply enable this option and fill in the custom title field below.
Enable meta description
By default the theme uses your blog description, as defined when you created your blog, to fill in the meta description field. If you would like to use a different description then enable this option and fill in the custom description field below.
Enable meta keywords
By default the theme does not add keywords to your header. Most search engines don』t use keywords to rank your site anymore, but some people define them anyway just in case. If you want to add meta keywords to your header then enable this option and fill in the custom keywords field below.
Enable canonical URL』s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URLs all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine』s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Homepage custom title (if enabled)
If you have enabled custom titles you can add your custom title here. Whatever you type here will be placed between the tags in header.php.
Homepage meta description (if enabled)
If you have enabled meta descriptions you can add your custom description here.
Homepage meta keywords (if enabled)
If you have enabled meta keywords you can add your custom keywords here. Keywords should be separated by commas. For example: wordpress,themes,templates,elegant.
If custom titles are disabled, choose autogeneration method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
Integration

The integrate tab is great for adding third party code to certain areas of the theme. Code can be added to your websites head and body, as well as before and after each post. For example, if you need to add a tracking code to your website (such as google analytics), but are unsure which PHP file to edit in order to add the code to the of your website, you can simply input this code into the 「body」 field of the Integration tab.
For more information on getting the most out of the Integration Tab, see our blog post on
Ways To Use The Integration Tab In Our ePanel Theme Options.
Enable header code
Disabling this option will remove the header code below from your blog. This allows you to remove the code while saving it for later use.
Enable body code
Disabling this option will remove the body code below from your blog. This allows you to remove the code while saving it for later use.
Enable single top code
Disabling this option will remove the single top code below from your blog. This allows you to remove the code while saving it for later use.
Enable single bottom code
Disabling this option will remove the single bottom code below from your blog. This allows you to remove the code while saving it for later use.
Add code to the of your blog
Any code you place here will appear in the head section of every page of your blog. This is useful when you need to add javascript or css to all pages.
Add code to the (good for tracking codes such as google analytics)
Any code you place here will appear in body section of all pages of your blog. This is useful if you need to input a tracking pixel for a state counter such as Google Analytics.
Add code to the top of your posts
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.
Add code to the bottom of your posts, before the comments
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.
Updates

Before you can receive product updates, you must first authenticate your Elegant Themes subscription. To do this, you need to enter both your Elegant Themes Username and your Elegant Themes API Key. Your username is the same username you use when logging in to ElegantThemes.com
Import / Export

You can easily export or import your Divi Theme Settings by clicking the 「Import / Export」 icon to open the portability options. To export a file, select the Export tab, enter your export file name, and click the 「Export Theme Options」 button. A .json file will be saved to your computer to be saved as a backup, used for new client builds, or shared with your peers. To import a Theme Options file, simply select the Import tab, choose your .json file, and click the 「Import Divi Theme Options」 button. There is also a convenient option to backup your current Theme Options before importing.
Restore Defaults

Simply click the 「Restore to Defaults」 icon to restore the default settings for the Divi Theme Options.

The Extra Ads Module

The Extra Ads Module

The Extra Ads Module
The ad block can be used to place advertisements within your category feed.

Module Overview

As you might have guessed, the Ads Module allows you to display ads in your category layouts. You can upload ad images and define where they should be linked and/or you can insert custom HTML Ad Code.
View A Live Demo Of This Module
The Module Options

General Settings
Header Text
This allows you to display a text heading above the module on the frontend.
Show Top Border
This enables the module』s top border.
Border Color
This defines the color of the module』s top border.
Admin Label
This will change the label of the module in the builder for easy identification.
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.
Module Item Settings
You can add multiple advertisements to an Ads Module.
Admin Label
This will change the label of the module in the builder for easy identification.
Image URL
Place a valid image url here, or choose/upload an image via the WordPress Media Library.
Link URL
Place a valid web URL in this field to create a link with the image you selected. Leaving this field blank will simply leave your ad image as a static element.
Start On New Line
Make this ad item start on a new line.
Ad HTML
Use this field to insert custom HTML Ad code instead of defining an image and link URL.

Using Header & Navigation Options

Using Header & Navigation Options

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

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

Header and Navigation Settings
Header Format

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

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

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

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

The Divi Social Media Module

The Divi Social Media Module

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

The social media module lets you create icon-based links that point to your online social profiles, such as Facebook, Twitter and Google+. These icons are integrated into the theme, in the clean style of Divi using our Elegant Icons, which make them preferable to use over third party plugins. You can add links to multiple social profiles within each module, and you can add the module anywhere on the page.
View A Live Demo Of This Module
How To Add A Social Media Module To Your Page
Before you can add a social media module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

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 social media module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「social media」 and then click enter to automatically find and add the social media module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding Matching Social Media Icons to a Contact Page
A website』s contact page is the perfect spot to showcase your online social profiles. This provides more avenues for users to stay connected and promote your blog or business. For this example, I』m going to show you how to add social media icons to match the current design of a contact page.

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

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

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

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

Add New Item
This is where you add new networks to your module. Clicking 「add new item」 will open a completely new window of options specific to your new network (under Content, Design, and Advanced tabs). See below for individual social media network settings.
After you add your first network, you will see a gray bar appear with the title of your network shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the network.
Link Shape
Here you can choose the shape of your social network icons to either rounded rectangle or circle.
Url Opens
Choose to open your network url in a new tab or in the same window.
Follow Button
Here you can choose whether or not to include the follow button next to the icon.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Social Media Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

For this module, the Design options consist of only one item – Text Color.
Text Color
Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.
Social Media Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

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 Social Media Content Options

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

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

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

How To Create One-Page Websites With Divi

How To Create One-Page Websites With Divi

How To Create One-Page Websites With Divi
Divi makes it easy to create beautiful one-page websites.

Divi』s Single Page Sidebar Navigation Makes It Easy
When you create a new page, you can easily enable Divi』s Single Page navigation option, giving your visitors a visual and clickable representation of their progress on the page. You can also use custom anchor links and Section ID』s to create one-page menus for the complete One-Page package.

View A Live Demo Of This Feature
Enabling Single Page Navigation
Enabling Single Page Navigation is easy, and it can be done on a per-page basis. Whenever you create or edit a page, look for the 「Divi Settings」 box to the right of your text editor. Within this box you will see the Dot Navigation option. Select 「On」 from the dropdown menu, and then save the page. You will now notice that a floating navigation bar has been added to the right side of your page. The Dot Navigation bar automatically adds a clickable link to each section on your page. When you add a new section, a new circle link (or dot) will be added automatically to your floating side nav. Users can click the dots to skip to different sections on the page. It also makes it easier to identify where the visitor is on the page, making long-format pages easier to understand and navigate.

Create Custom Menu Links For One-Page Websites
In addition to side navigation, it』s also possible to transform your main header navigation into one-page navigation. If you are creating a one-page website, then you don』t want your menu links to point to separate pages. Instead, these links can point to relevant sections on the same page. When clicked, they can take you to the relevant section on the page using a smooth scrolling effect. This can be accomplished using custom ID』s. Any element on the page that is built with the builder can be assigned an ID. You can assign an ID to a section by clicking on the section settings icon, and looking for the 「CSS ID」 setting. Once an ID has been assigned, you can then link to it from the navigation menu. For example, let』s say you have a section called 「About Us」 and you want it to link to the part of your page that describes your company. Edit the section that contains your About Us content, and enter 「aboutus」 into the 「CSS ID」 field and click 「Save.」 Now that an ID has been assigned, we can point a link to it.

Pointing A Menu Link To An ID
To create a custom menu link, you will need to add a new link to your menu using the 「Appearances > Menus」 tab in your WordPress Dashboard. If you are unfamiliar with the Menus system, check out this great tutorial. Once you have created a new menu and assigned it to the Main Navigation location, you can start adding links to your header. In this case, we will be creating a custom link by clicking the 「Link」 tab on the left hand side of the page. Once clicked, you will be given two fields (URL and Link Text). For the 「Link Text,」 simply enter the text that you would like to show up in your menu (For example, 「About Us」). For the URL, we need to link to the ID that we assigned to our section earlier. In this case, we added the id 「aboutus」 but you can add any ID name that you like. Since we used the ID 「aboutus,」 we can link to that ID by creating a URL pointing to 「/#aboutus」. You can use this same method to create as many custom links as you want. Simply enter a URL of 「/#」 followed by the ID that you want to target.

The Divi Fullwidth Header Module

The Divi Fullwidth Header Module

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

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

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

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

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

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

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

That』s it!

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

Title
Enter your page title here.
Subheading Text
If you would like to use a subhead, add it here. Your subhead will appear below your title in a small font.
Button #1 Text
Enter the text for the Button.
Button #2 Text
Enter the text for the Button.
Content
Here you can define the content that will be placed below the header and title text.
Button #1 URL
Enter the URL for the Button.
Button #2 URL
Enter the URL for the Button.
Logo Image URL
Upload your desired image, or type in the URL to the image you would like to display.
Header Image URL
Upload your desired image, or type in the URL to the image you would like to display.
Background Image URL
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Overlay Color
Choose a background overlay color, which will be placed on top of the background image. Semi-transparent backhround overlay images can create cool effects when placed above background images.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Fullwidth Header Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

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

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 Search Module

The Divi Search Module

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

Using the search module, you can place a search form anywhere on your site. This search form will allow your visitors to search through all of your website』s content, including all pages and blog posts. This gives you the functionality of the WordPress search widget along with the flexibility of the Divi Builder. Not only can you control the search forms location on the page, you can also customize its design.
View A Live Demo Of This Module
How To Add A Search Module To Your Page
Before you can add a search module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

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 search module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「search」 and then click enter to automatically find and add the search module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding a Custom Search Module to a Fullwidth Blog Page
For this example, I』m going to show you how to add a Search Module to be a main call to action at the top of a blog page. This allows users to easily search the content of your blog without any clutter.
This page has a fullwidth header at the top with the search module directly below it. Under the search module is a Blog Module using the grid layout.

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

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

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

Placeholder Text
Type the text you want to use as placeholder for the search field.
Hide Button
Turning this on will hide the Search button.
Exclude Pages
Turning this on will exclude Pages from search results.
Exclude Posts
Turning this on will exclude Posts from search results.
Exclude Categories
Choose which categories you would like to exclude from the search results.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Search Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Input Field Background Color
Here you can change the background color of the search bar.
Placeholder Color
Before the search field is used, placeholder text exists inside of the field. If you have adjusted the field background color, you may also want to adjust the placeholder text color to ensure that it is readable.
Text Color
Here you can choose the value of your text. If you are working with a dark background, then your text should be set to light. If you are working with a light background, then your text should be dark.
Text Orientation
This controls the how your text is aligned within the module.
Input Font
You can change the font of your input text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Input Font Size
Here you can adjust the size of your input text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Input Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your input text, choose your desired color from the color picker using this option.
Input Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your input text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Input Line Height
Line height affects the space between each line of your input text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button and Border Color
This will change the search button』s background and border color.
Button Font
You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Button Font Size
Here you can adjust the size of your button text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your button text, choose your desired color from the color picker using this option.
Button Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Line Height
Line height affects the space between each line of your button text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Max Width
By default, search bar max width is set to 100%. This means that the search bar will be displayed at its natural width unless the width of the search bar exceeds the width of the parent column, in which case the search bar will be limited to 100% of the width of the column. If you would like to further restrict the max width of the search bar, you can do so by entering your desired max width value here. For example, a value of 50% would limit the width of the search bar to 50% of the width of the parent column.
Custom Margin
Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Search Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

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.

Adding A Custom Logo Image In Divi

Adding A Custom Logo Image In Divi

Adding A Custom Logo Image In Divi
It』s easy to upload a custom logo image via Divi』s Theme Options.

The Divi Theme Logo
Your company logo is placed at the top of every page within the Divi Theme Header.

You can define your own logo image from within the Divi Theme Options page in your WordPress Dashboard. To locate the Divi Theme Options, click the Divi > Theme Options link in your WordPress Dashboard.

Within the Theme Options, under the General > General tab, locate the 「Logo」 field. In the field, input the full URL to your logo image. You can use the 「Upload Image」 button below the field to upload your logo image if you haven』t already done so. After installing, copy and paste the URL to the file into the field and click 「Save」 to save your settings.

If you don』t already have a logo image, then you can use the included logo.psd file as a starting point. If you have Photoshop, this file can be opened and the logo』s text can be easily edited using Photoshop』s type tool. If you don』t have Photoshop, then you can use included logo_blank.png file as a blank canvas in a different graphic design program. These files (logo.psd and logo_blank.png) are located within the Theme Package inside the /psd/ folder.

Using Premade Layouts In Divi

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.