405-455-4328 [email protected]
 | 
Select Page
Divi Builder

Divi Builder

USING DIVI

Follow the instructions below to install and configure your new theme.

The Basics

Divi is a unique theme in our collection. Differing from every other Elegant Theme, Divi is built on a page builder platform that we designed and developed from the ground up. Using Divi’s drag and drop builder you can create beautiful layouts with ease and control over every part of your site.

The builder uses three main building blocks: Sections, Rows, and Modules. Using these things in unison allows you to create a countless amount of page layouts. The basic hierarchy of these elements is as follows:

Sections

The most basic and largest building blocks used in designing layouts with Divi are Sections. These are used to create the top-level areas in your website.There are two types of sections: Regular, and Full Width. Regular Sections are made up of column rows and Full Width Sections are made up of full width modules. See more about rows and modules below.

Rows

Rows sit inside of Sections and you can place any number of rows in a section. There are many different Row Types to choose from. Once you define a Row Type, you can then place modules into the selected column structure. There is no limit to the number of modules you can place within a column.

Modules

Modules are the visual elements that make up your website. Every modules that Divi has can fit into any column width and they are all full responsive.

Gettings Started

Upon creating a new page, you will see the standard WordPress Pages window. When you are using Divi, you will see a [Use page Builder] button in blue. Clicking this will enable the Divi Builder and you will be Presented with with the Builder Start screen.

NOTE: If you have existing page content, it will all be placed into a full width Text Module by default. If you would like to separate out the content into respective modules, you will need to manually place it into individual modules.

Builder Layouts Options

Save Layout

At any time you can save a layout. This option is great for using a layout for another page, section of a page, or even another website built with Divi. See Saving and Loading Custom Layouts.

Load Layout

You can also load a layout at any time. When loading a layout you have the option to select from an array of premade Divi Layouts or any layouts that you have saved/imported.. See Using Premade Layouts and Saving and Loading Custom Layouts.

Clear Layout

If at anytime you feel the need to start from scratch, just click the Clear Layout button. Sometimes you just need a fresh start.

What you see below these three buttons is a Regular Section with a Row inside of it prompting you to insert a column layout. If you would like to start with a Full Width Section, select the ‘Add Fullwidth Section’ option from the bottom of the screen.

Sections Options

Every time you add a section you will need to define its properties. By clicking the section menu icon at the top of the blue side panel you will be taken to the Section Settings.

Background Image – If defined, this image will be used as the background for this Section. To remove a background image, simply delete the URL from the settings field.

Section background images span the width of the browser so we recommend that your background images are at least 1080px wide.

Background Color – If you would simply like to use a solid color background for your section, use the color picker to define a background color.

Background Video MP4 – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the MP4 video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video WEBM – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM versions here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the WEBM video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video Width – In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.

Background Video Height – In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.

Inner Shadow – Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.

Parallax Effect – Enabling this option will give your background images a fixed position as you scroll. Keep in mind that when this setting is enabled, your images will scale to the browser height.

NOTE: if you enable the parallax effect, we recommend that your images are at least the size of a standard screen size since your images will take on the width or height of the browser window (i.e. 1280px by 768px)

Adding and Defining a Row

After saving your section settings you will need to insert a row and define the row type. By clicking ‘Insert Columns’ you will be able to choose from a selection of row types.

Adding a Module

Once you have selected a row type, you will be prompted to insert modules into that row. In the example below, we added a two column row.

Every Time you want to insert a module, you will need click ‘Insert Module’ and select one from the Divi module list. Once you have selected a module you will be brought to that modules specific options modal. See ‘The Modules; Section’ on our Readme Page.

Expanding Your Layout

In the example below, we have filled the two columns with an image module and a text module.

You now have successfully defined a Section, with a Row, with Modules in a two column row type. You can access any of the elements’ options by clicking its menu icon or deleting it by clicking the X icon. To expand your layout you can either choose to add a section to the page, a row to an existing section, or a module to an existing column.

Adding Full Width Sections

Below each section you have the option to ‘Add Section/Add Fullwidth Section’. Full width sections are unique in that they do not have rows. Because of this, only full width modules will work inside of this type of section. Full width sections are visually defined by a purple side panel and can be placed anywhere in your layout. In the Example below, we have added a full with section, with a full width Slider to our design.

Modifying and Rearranging Your Layout

Editing your layout is very easy using the drag and drop builder features. If you want to move a section above or below another, simple drag and drop it in the desired location. Same goes for rows and modules. You can even move rows to different sections and modules to different columns. The only limitation to this is that you cannot drag Full Width Modules into regular sections and you cannot drag regular modules into Full Width Sections.

NOTE: You cannot modify an existing row’s column structure, but you can create another row with the desired columns and drag existing modules into your new row.

In the example below, you can see that moved our full width section to the top of our layout and added a regular section with a three column row in between our existing sections. We even added a divider module above our text for vertical alignment.

Save and Publish!

Once you have finished building your layout, be use to click the Update/Publish button in your WordPress Dashboard. You will love the results.

Switching Back to Default Editor

If you Switch back to using the default page editor you will will be warned that all of the content you built with the builder will be lost and your previous contents made with the default editor will be restored. As a failsafe, WordPress versions all of your previously published updates and you can also save your layout before reverted if you ever want to restore a layout. See Saving and Loading Layouts

Start Working

We are ready to Start Working on your projects right away
to develop the materials that you want.

RUNNING UPDATES

RUNNING UPDATES

UPDATING YOUR SITE

This video will teach you how to manage updates in WordPress.

This tutorial on ‘Running Updates’ covers:

  • Single site install ‘Updates’
  • When an update is available
  • Running a backup
  • Automatic minor version updates

Keeping WordPress up-to-date is not only a great way to gain access to all of the latest WordPress features, it is also an essential part of maintaining a secure website.

A banner appears in the WordPress Dashboard when updates are available.
A banner appears in the WordPress Dashboard when updates are available.

If you are a part of a WordPress MultiSite network, ‘Updates’ are the responsibility of the ‘Network Administrator’. A multisite is represented by a key icon next to the site title located at the top of the WordPress dashboard.

When a WordPress update is available, an update banner will appear in the dashboard. You can click on the banner to take you to the available updates or click the ‘Updates’ link in the ‘Dashboard’ menu.

Before running updates it is a good idea to back up your site. There are a lot of free and paid pluginsavailable for backing up your site and even third-party services that will run automatic backups for you. For more information on backing up your site you can visit the WordPress repository and the ‘Updating WordPress Codex‘ page.

Back up your site before running an update.
Back up your site before running an update.

Once your site is backed up, and you’re prepared to update your site, click on the ‘Update Now’ button. When your update is done you will be automatically directed back to the WordPress dashboard letting you know that your site is ready for use. Be sure to test your site to make sure everything is working as it should.

SETTINGS

SETTINGS

SETTINGS

Introduction to using and managing WordPress ‘Settings’.

This ‘Settings’ tutorial covers:

  • The difference between feature settings and the ‘Settings’ menu
  • Available ‘General Settings’
  • Adjusting default ‘Writing’ settings
  • Controlling what content shows on your home page
  • Managing comments
  • Setting default image sizes
  • Custom ‘Permalink’ structure

The ‘Settings’ menu is used to configure your WordPress install, from the ‘Title’ and ‘Tagline’ to how permalinks are structured. The ‘Settings’ options change the way search engines, site users and you interact with and manage the content on your site.

The ‘General’ tab under settings lets you configure some of the most basic settings in WordPress–your ‘Site Title’ and ‘Tagline’, the WordPress and site URL, The site admin email address, if the site should have open registration and how dates and times appear on your site.

'General Settings' is used to configure some of the most basic WordPress settings.
‘General Settings’ is used to configure some of the most basic WordPress settings.

The ‘Writing’ screen is for controlling how post content should display by default. These settings include emoticon conversion, what ‘Default Post Category’ to use, how a post should be formatted, the ‘Press This’ bookmark and ‘Post via e-mail’ settings.

‘Reading’ is where you can set if a page or a list of posts should display on your home page. It also gives options for how many posts should display on your blogas well as other feeds, if it should show the full post or just a summary and whether or not you want people to discover your site on search engines like Google.

The ‘Discussion’ screen sets how your site manages posts that get shared on other sites and comments. This includes pingback and trackback settings, comment moderation settings, comment notifications and Avatar display options.

Adjust how avatars display for a more interactive user experience.
Adjust how avatars display for a more interactive user experience.

‘Media Settings’ gives options for choosing what sizes to convert images to when uploading them to the media library and if uploaded images should be organized into month and year based folders on your server.

The ‘Permalink’ settings allow you to create a custom URL structure for permalinks and archives. This can improve the aesthetics, usability and forward compatibility of your links displayed in the browser.

TOOLS

TOOLS

TOOLS

This video will introduce you to the ‘Tools’ menu in WordPress.

This ‘Tools’ menu tutorial covers:

  • ‘Press This’–a web browser bookmarking feature
  • Creating a post with ‘Press This’
  • The available ‘Import’ modules
  • How to export some or all of your site’s content

The ‘Tools’ button in the WordPress dashboard gives options for quickly sharing information from your web browser, importing content from other sites (WordPress or otherwise), and exporting the content on your site–as a backup or for moving to another site.

‘Press This’ is a bookmark that you can add to your browser as a quick way of making posts out of content you come across on other sites. When you click on the ‘Press This’ link it creates a post with the title pre-filled for you and a link to the page you are visiting in the body of your post. You can add your own information, edit and change the content and publish the post immediately or just save it as a draft for future use.

'Press This' helps you quickly generate a post from content you want to share from another site.
‘Press This’ helps you quickly generate a post from content you want to share from another site.

The ‘Import’ screen provides a list of tools for importing posts or comments from sites using WordPress and other systems. To help keep WordPress running quickly these tools should be installed as needed. To install one of the import tools, click on the name of the tool you would like to install.

Import content from WordPress sites or other systems.
Import content from WordPress sites or other systems.

The ‘Export’ feature is a tool for exporting the posts or pages on your site individually or to back up your entire database–including posts, pages, comments, custom fields, terms, navigation menus and custom posts. The ‘Download Export File’ button will create an XML file you can save as a content backup or to move the content from your existing site to a new site.

Export 'Posts' or 'Pages' as an XML file
Export ‘Posts’ or ‘Pages’ as an XML file
CHANGING YOUR PASSWORD

CHANGING YOUR PASSWORD

CHANGE PASSWORD

This video will introduce you to updating your password in WordPress with this quality unbranded video tutorial.

This ‘Changing Passwords’ tutorial covers:

  • Locating ‘New Password’
  • Setting a password
  • The strength indicator
  • Updating your profile

Changing passwords is an important piece of website security. Creating and maintaining ‘Strong’ passwords help protect your site from brute force attacks and potential identity theft.

To change your password, under ‘Users’ in the WordPress dashboard click ‘Your Profile’. At the bottom of the ‘Profile’ screen type a new password in the text box next to ‘New Password’ and reenter the password where it says ‘Repeat New Password’.

Type a new password in the text box next to 'New Password' and reenter the password where it says 'Repeat New Password'.
Type a new password in the text box next to ‘New Password’ and reenter the password where it says ‘Repeat New Password’.

The ‘Strength Indicator’ below ‘Repeat New Password’ will analyze your new password and provide a real-time assessment of how strong your new password is.

Once you are satisfied with your new password click the ‘Update Profile’ button and a banner will appear letting you know your profile has updated.

An update banner will appear letting you know your changes were successful.
An update banner will appear letting you know your changes were successful.

Start Working

We are ready to Start Working on your projects right away
to develop the materials that you want.