Setting up Divi

Standard Changes

Appearance | Themes

  • Install and Activate Divi, from file
  • Remove all but one other Theme; leave one "just in case"

Divi | Theme Options

  • Under "Updates" tab, insert Username and API Key (from Elegant Themes account)

Note: after a little while, Divi may detect that there is an Update waiting. That is, if the file used to install the theme was not the latest, then updates should be automatically detected. This is a good thing, and the update can (generally) be taken/applied.

Appearance | Widgets

  • Move (drag and drop) all default widgets from Sidebar and Footer #1 to Inactive Widgets

Posts

  • Move 'Hello World" post to Trash

Pages

  • Move "Sample Page" to Trash
  • Create and Publish Home Page; if there is a design ready use the basics of it; otherwise, just put any temporary content

Settings | Reading

  • Change "Your homepage displays" to be "A static page (select below)", selecting the Home page created. Note, that if no pages exist, then this whole section is not shown at all!

Settings | Permalinks

  • Change settngs to "Post name"

Appearance | Menu

  1. Enter a "Menu Name" as "Primary" and click on "Create Menu"

    Note: in Divi, there is a notion of "Primary Menu" (main navigation) and "Secondary Menu" (off by default, but, when shown, is at top edge of screen with elements like email and phone number.

  2. Under "Menu Settings" click on "Auto add pages" to "Automatically add new top-level pages to this menu"

    Note: this is a convenience if the next pages that will be added are intended to go into the top level navigation. If not, do not set this. Also, remember to turn this off later if there are pages to be added that are not to be added to the navigation. If such a page is inadvertently added, then it can be easily removed by returning to this menu.

  3. Under "Menu Settings" click on "Display location" "Primary Menu"
  4. Under Pages (on the left) click on "Home - Front Page" and click on "Add to Menu"
  5. Click on Save Menu

    Note: It is a good idea to "check your work" at this point. One should visit the site to see that there is a home page displayed, and there is a navigation bar with one page (Home).

Divi | Theme Customizer

Some common steps to clean things up that are defaults out of the box from Divi.

Footer | Bottom Bar

Enter something in "Edit Footer Credits"; something typical might be a copyright statement or a development credit. If the box "Disable Footer Credits" is checked, then the box to enter those credits goes away (and you may not remember where it is when you come back!). Click "Publish" to save the change.

Footer | Footer Elements

Uncheck "Show Social Icons"
Click "Publish" to save the change.

Note: The current project may call for showing social icons. It is rare that we have them positioned in the footer as they are displayed by default, but it is possible. Further, it is quite likely that we do not want all of the social icons that are displayed, by default. The list is contolled under "Divi Theme Options".

Header | Header Elements

Uncheck "Show Search Icon"
Click "Publish" to save the change.

Note: if one types something in the "Phone Number" or "Email" boxes on this configuration page then the Secondary Menu bar activates. Subtle.

Additional Considerations

With the steps outline above we have a "Basic Divi Set Up". The changes described in this section are common changes and will be made for nearly every project. However, these changes are project-specific. That is, we can expect to make changes in these areas but the design will dictate exactly what those changes will be.

Divi | Theme Options

  • On the line for "Logo", click to Upload the image file with the site's logo. Save Changes.
  • The "Color Pickers Default Palette" is very useful. The project design will call for some common colors to be used throughout the site. Putting those common colors in the palette here will make it possible to use those colors with a click of a button when configuring fonts later.

Divi | Theme Customizer

Header & Navigation | Header Format

In this area we can choose to use a "Veritical Navigation" which is useful at times.

Header & Navigation | Primary Menu Bar

In this area we will certainly be changing the "Menu Height" and "Logo Max Height". We will probably also be changing "Text Color", "Active Link Color", and more.

Note: The relationship between Primary Menu's height settings and the Fixed Navigation Settings height settings. By default, Divi will adjust (i.e. shrink) the height of the navigation when one scrolls lower on the page. If that is not desired (and is typically the case for us), the height (and other) settings for Primary Menu Bar and Fixed Navigation Settings must match.

General Settings | Typography

In this area we will certainly be changing values that will effect the entire site: "Body Text Size" and "Default Theme Font". The "Header Text Size" will also change. This size is set for a "Heading 1" (h1) and the other headings are set to cascade down from that value. This is not ideal, but there it is.