HOW TO EDIT YOUR WORDPRESS WEBSITE WITH THE DIVI THEME

Build Your Website Visually

The Divi Theme a incredibly intuitive front-end website editor like nothing you have seen before. It will change the way you build your website forever.

Real Time Design

When you make a change to your page, everything is updated instantly right before your eyes. Design instantly!

Customize Everything

Each element is fully customizable. Adjust fonts, colors, sizing and spacing and even apply custom CSS.

Organize With Ease

Add a new row, choose between various column types and everything fits together perfectly automatically.

46 Content Elements

Divi comes with 46 different content elements. Mix, match and build just about anything you can imagine.

Little To No Loading

The Divi Builder is insanely fast. It requires no pages refreshes and almost zero loading of any kind.

Just Click & Type

No need to open up a settings panel to add text content. Just click onto your page and start typing!

Responsive Editing

Enjoy live responsive previews and apply custom changes to specific mobile breakpoints.

Global Elements

Sync global items across multiple pages. Update them once and they get updated everywhere. Great for footers!

Import & Export

Save layouts to your library for later use. Import, export, share and download layouts from the web.

Premade Layouts

Jump-start your design process by using one of the 20+ pre-made layouts that ship with the builder.

LEARN HOW TO USE YOUR WEBSITE EDITOR

Getting Started With The Divi Builder

CLICK HERE for instructions

What Is The Visual Builder?

The Divi Builder comes in two forms: The standard “Back-end Builder” and the front-end “Visual Builder.” Both interfaces allow you to build exactly the same types of websites with the same content elements and design settings. The only difference is the interface. The Back-end Builder lives inside of the WordPress Dashboard and it can be accessed along with all of the other standard WordPress settings. It sits inside the WordPress UI and replaces the standard WordPress post editor. It’s great for making quick changes while you are inside the dashboard, but it’s also confined by the dashboard and is rendered as a block-based representation of your website. This tutorial will be focusing only on the visual builder.

docs image

The all new Visual Builder, on the other hand, allows you to build your pages on the front-end of your website! It’s an amazing experience and allows for much faster design. When you add content or adjust design settings inside the visual builder, your changes appear instantly. You can click onto the page and just start typing. You can highlight text and adjust its font and style. You can add new content, build your page and watch everything happen right before your eyes.

using-visual-builder-2-2

Enabling The Visual Builder

While you are logged in to your WordPress dashboard, you can navigate to any page on the front-end of your website and click the “Enable Visual Builder” button in the WordPress admin bar to launch the visual builder.

If you are editing your page on the back-end, you can switch to the visual builder by clicking the “Enable Visual Builder” button that sits at the top of the back-end Divi Builder interface (note, you must first enable the Divi Builder before the visual builder button will appear).

docs image

The Visual Builder Basics

Divi’s power lies in the Visual Builder, a drag and drop page builder that allows you to build just about any type of website by combining and arranging content elements.

The builder uses three main building blocks: Sections, Rows and Modules. Using these in unison allows you to create a countless array of page layouts. Sections are the largest building blocks, and they house groups of rows. Rows sit inside of sections and are used to house modules. Modules are placed inside of rows. This is the structure of every Divi website.

Sections

The most basic and largest building blocks used in designing layouts with Divi are sections. These are used to create large groups of content, and they are the first thing you add to your page. There are three types of sections: Regular, Specialty and Full Width. Regular sections are made up of rows of columns while Full Width Sections are made up of full width modules that expand the entire width of the screen. Specialty sections allow for more advanced sidebar layouts. For more information about using sections, head over to our in-depth sections tutorial.

Rows

Rows sit inside of sections and you can place any number of rows inside a section. There are many different column types to choose from. Once you define a column structure for your row, you can then place modules into a desired column. There is no limit to the number of modules you can place within a column. For more information about using rows, head over to our in-depth rows tutorial.

Modules

Modules are the content elements that make up your website. Every module that Divi has can fit into any column width and they are all fully responsive.

Building Your First Page

The three basic building blocks (Sections, Rows and Modules) are used to build your page.

docs image

Adding Your First Section

Before you can add anything to your page, you will first need to add a section. Sections can be added by clicking the blue (+) button. When you hover over a section that already exists on the page, a blue (+) button will appear below it. When clicked, a new section will be added below the section you are currently hovered over.

If you are starting a brand new page, then your first section will be added automatically.

docs image

Adding Your First Row

After you have added your first section you can start adding rows of columns inside of it. A section can house any number of rows, and you can mix and match rows of varying column types to create a variety of layouts.

To add a row, click the green (+) button inside of any empty section, or click the green (+) button that appears when hovering over any current row to add a new row below it. Once you have clicked the green (+) button you will be greeted with a list of column types. Choose your desired column and then you are ready to add your first module.

docs image

Adding Your First Module

Modules can be added inside of rows, and each row can house any number of modules. Modules are the content elements of your page, and Divi comes with over 40 different elements that you can use to build with. You can use basic modules such as Text, Images and Buttons, or more advanced modules like Sliders, Portfolio Galleries and eCommerce Shops. We have individual tutorials for every single Divi module, so if you want to learn more about the types of modules that Divi provides then be sure to head back to the main document page and browse through the “Modules” section.

To add a module, click the gray (+) button that exists inside of any empty column or click the gray (+) button that exists when hovering over a module on the page to add a new Module below it. Once you have clicked the button, you will be greeted by a list of modules. Pick your desired module and it will be added to your page and the settings panel for the module will appear. Using this settings panel, you can begin configuring your module.

docs image

Configuring And Customizing Sections, Rows And Module

Each section, row and module can be customized in various ways. You can access an element’s settings panel by clicking the gear icon that exists when hovering over any element on the page.

using-visual-builder-8-2

This will launch the settings panel for the specified element. Each settings panel is broken up into three tabs: Content, Design, and Advanced. Each tab is designed to make accessing and adjusting Divi’s large variety of settings quick and easy. The Content tab of course is where you can add content such as images, video, links, and admin labels. The Design tab is where we’ve place all of the built-in design settings for each element. Depending on what you’re editing you can control a wide variety of design settings with a click; including: typography, spacing (padding/margin), button styles, and more. For an in-depth look at the Design tab, take a look at our design settings tutorial. Finally, if you want even more control you can head over to the Advanced tab where you can apply custom CSS, adjust visibility based on device, and (depending on which element you’re editing) do even more fine tuning.

Saving Your Page And Accessing Page Settings

To access general page settings, click the purple dock icon at the bottom of your screen. This will expand the settings bar and provide you with various options. You can open up your page settings by clicking the gear icon. Here you can adjust things like page background color and text color. You will also find the Save and Publish buttons as well as responsive preview toggles.

docs image

Jump-start Your Design With Pre-made Layouts

A great way to jump-start your new page is to start things off with a pre-made layout. Divi ships with over 20 pre-made layouts that cover a variety of common page types, such as “About Us,” “Contact,” “Blog,” “Portfolio,” etc. You can load these up and then swap out the demo content for your own. Your new page will be finished before you know it! To learn more about using pre-made layouts, be sure to take a look at our in-depth pre-made layouts tutorial.

docs image

Saving Your Own Layouts To The Library

In addition to using the pre-made layouts that come with Divi, you can also save your own creations to the Divi Library. When a design is saved as a Divi Layout in the Divi Library, it can be loaded onto new pages. The more you build up your library with your favorite designs, the faster you will be able to create new websites. For an in-depth look at the Divi Library, be sure to check our our dedicated Divi Library tutorial

To save an item to the library, click the library icon that exists when hovering over any element and within the page settings bar. Once an item has been added to the library, it will appear in the “Add From Library” tab when adding new Divi layouts, sections, rows and modules.

docs image

Ok, You Have The Basics Down. Now It’s Time To Dig Deeper!

So by now you have added your first sections, rows and modules to your page. You have adjusted their settings and begun building and customizing your design. You have the basics down, but there is so much more to learn. We have dozens and dozens of tutorials that cover every single aspect of Divi. I encourage you to head back to the main documentation page and read through each and every one. By the time you are finished, you will be a Divi master!

Using The Divi Theme & Module Customizer

CLICK HERE for instructions

Accessing The Theme & Module Customizers

The Theme & Module customizers give you control over just about every single element on your page. Want to adjust the size or spacing of text or an element of your website at the click of a button? The Customizer is where you want to start! To customizer panels can be accessed via the Divi > Theme Customizer and Divi > Module Customizer links in your WordPress Dashboard. The Theme Customizer gives you control over site-wide theme elements, such as your menu & logo size or your body and header text styles. The Module Customizer gives you size & font controls over individual modules. Do you want to reduce the height of all the slider modules on your website? That can be done in just a few seconds via the Module Customizer! Let’s take a closer look.

docs image

Exploring The Theme Customizer

First we will explore the Theme Customizer. There are hundreds of options here, separated into different categories. When you first open up the customizer you will see several panels, such as “Header & Navigation” and “General Settings.” Opening these panels will reveal the options related to those areas of your website. As you adjust the settings within the customizer, you will be given a live preview of their effects. Once you save your changes, the new styles will be reflected on your live website.

docs image

You can do just about anything with the Theme Customizer without ever touching a line of code. For a more detailed look at some of the different customizer options, and some creative ways to use these options together, be sure to watch the instructional video above.

Exploring The Module Customizer

The Module Customizer works just like the Theme Customizer, except it focuses on the customization of individual modules as opposed to general website elements. When you open up the Module Customizer, you will see a separate panel for each of the Divi modules. Opening up these panels will reveal customizer controls that can be used to adjust the spacing and typography of each module on your entire website. For example, if you think that the FullWidth Slider titles are too large, you can simply open up the Fullwidth Slider panel and adjust the Header Size slider. Now whenever you add a new Fullwidth Slider to a page, the customized header size will be reflected. No need to use a Child Theme or adjust the Advanced Module settings for the individual module. The Module Customizer is a collection of global module controls.

docs image

Using The Divi Theme Options

CLICK HERE for instructions
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.

Favicon

Installing an image here will add a favicon image to represent your site in browser address bars and bookmark menus.

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 < title >< /title > 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 < body > 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 < head > 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 < body > (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 ElegnatThemes.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.

Adding A Custom Logo Image In Divi

CLICK HERE for instructions

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.