Select Page
Web Design II
Class 11: Divi Theme

Topics

    • Divi Theme
    • Class 11 Divi Child Site (divi setup) Lab

Explore the unknown.

Divi Theme

Divi by Elegant Themes:

Divi is a robust wordpress theme that allows web designers to work on the front-end with Divi Builder and results in visually pleasing and functional designs. This a is a high-end industry standard theme and therefore is somewhat expensive. They are allowing Cecil to use the theme for this course offline. If you decide you want to use make your site live you will need to purchase a license for yourself.

You may visit the elegant theme site here.

You may download the theme in blackboard under this class here.

Theme Options
Divi installs a special section in the Dashboard that will allow you to set some global settings and defaults such as logo, color pallete, google fonts, etc.
Divi Customizer
This works the same as other themes where you may set settings on the visual page.

Divi Builder

The divi theme comes with the visual Divi Builder. This allows you to work directly in the page and is very responsive. It works by adding sections, rows (and columns), and modules.

You can see an example below.

Sections
Sections are large areas that may contain multiple rows. It is similar to something from newspaper. You divide your content into main areas that will be stacked on top of each other.
You add sections by clicking on the blue “+” symbol.
Rows
Rows span across the page left to right horizontally and are broken up by columns. You may choose how many columns you wish to break it up into.
You add rows by clicking on the green “+” symbol.
Modules
Modules are the actual content in each of the columns. Divi has a variety of modules to select from with tons of settings to adjust them.
You add rows by clicking on the gray “+” symbol.
Final Result
The final result is what you see in real-time.
Settings
Each section, row, and module have settings you may adjust by pressing the icon.

Divi Process:

Broad to specific.

  • Complete Local by Flywheel install
  • Create a new site
  • Install & activate Divi Theme
  • Install & activate other plug-ins
  • Set general WordPress defaults
  • Set Divi settings via Divi Theme Options and then the Divi Customizer
  • Create web pages with Divi Builder (sections, rows, modules)
  • Export site

Class 11 Divi Child Site (divi setup) Lab

Divi Child Site (divi setup) Lab

In this next lab series you will develop a child theme site utilizing the Divi theme. This week you will setup the bones of the site. A new site will be created, Divi will be installed, and setting will be adjusted.

You will be graded on the following:
  • Lab Requirements
    • Techniques and processes covered in the instructional material is followed and implemented.
  • Creativity & Craftsmanship
    • Excellent design choices, novel & appealing, and solid clean caliber work.
Resources:
Assignment Video Tutorials
You may watch these tutorial videos below to help you complete your assignment.
Assignment Lab Materials
The Divi theme will be available for download on Blackboard.

Lab Tutorial Slideshow

This tutorial will cover Divi installation and basic application.

Lab Introduction
Divi Child Site (divi setup) Lab
PlayPlay
Introduction

We will start a new lab series, Divi Child Site. Divi is a premium paid Wordpress theme that is robust, highly customizeable, and a professional standard. In fact this site is made with it! On top of this theme we will build a child theme which allows you to add your own code without disturbing the original theme for ultimate customization. In this lab we will install Divi, adjust settings, and create pages.

Click on the > to start

There are no lab materials this week

Create Local Site
Create Local Site
Divi Child Site (divi setup) Lab
PlayPlay
Instructions
  1. You should already have Local by Flywheel installed since it was required for the last assignments. Be sure you have the latest version installed. We need to start a new site to apply the Divi theme to.
  2. In Local press the (Add Site) button.
  3. Choose a name for the site, YourLastNameDiviSite.
  4. Accept the defaults.
  5. Use vcp for the wordpress username and wordpress password. This way I am able to access it for review later.
  6. Click Add Site. Your PC will have a popup asking for permissions. Just allow.
Site Created in Local
Local by Flywheel
Divi Theme
Divi Theme
Divi Child Site (divi setup) Lab
PlayPlay
Divi Theme
Instructions
  1. Divi is a premium theme and is not available in the Wordpress Add Theme section like most other themes. You have to purchase it from Elegant Themes and then upload it your site. In our case you will download it from the course on Blackboard under this class section.
  2. You may use this theme on your computer locally but you may NOT use it on a live site. If you decide you wish to use the Divi theme for an online site you will need to purchase your own license.
  3. Once you download the zip file log into your site using Local. in the Dashboard navigate to Appearance>Themes. Click on Add New. You will then be in the area to search for a new theme. Instead of searching click on Upload Theme. Click Choose File and navigate to the Divi zip folder to install it. Then choose to activate it.
  4. The Divi theme is now installed.
Divi Theme Options
Divi Theme Options
Divi Child Site (divi setup) Lab
PlayPlay
Divi Theme Options Page
Instructions
  1. Before you start building any pages it is usually best to explore a theme's options and configure it's settings. Now that the Divi theme is installed you will see a new section (in the left menu panel) in the admin dashboard called Divi.
  2. Navigate to Divi>Theme Options. These are the global settings of the theme. We should make some changes.
  3. Upload a logo image.
  4. Decide on a color pallete (you may use a tool such as Adobe Color). Apply these colors to the Color Pickers Default Palette.
  5. Turn off the various social media icons.
  6. Press Save at the very bottom of the window.
  7. You may explore the other options but that is good enough for now.
Divi Customizer
Divi Customizer
Divi Child Site (divi setup) Lab
PlayPlay
Divi Customizer
Instructions
  1. The other major global settings for the Divi theme exists in the Customizer. Divi's Customize is very robust (almost daunting). You may access it a number of ways such as the traditional ways. Since we are already on the back-end you can also get to Customize by navigating to Divi>Theme Customizer.
  2. In the left panel you will see settings for most aspects of the site. The most important to adjust is the General Settings. Here you can configure the site identity, layout design, typography, and background.
  3. Explore the other sections in the Customize panel. Go through each area and change the settings to see what the options are. Don't worry about it looking exactly like mine. It is more important to just experiment.
Divi Page Creation
Divi Page Creation
Divi Child Site (divi setup) Lab
PlayPlay
Divi Section (blue), Row (green), Module (grey)
Instructions
  1. Now that the major Divi settings have been set let's create a basic page. Divi comes installed with it's own front-end site builder called Visual Builder. It is like a very user friendly robust system that uses sections, rows/columns, and modules. It is somewhat similar to using a WYSIWYG (what you see is what you get) of Bootstrap.
  2. First publish and exit the Customizer (upper left Publish/Update button then the X).
  3. Back in the Dashboard go to Pages. Click on Add New.
  4. In the Add New Page area select Use Divi Builder (you may see a popup to take a tour, just choose to start building).
  5. You will be given three options; BUILD FROM SCRATCH, CHOOSE A PREMADE LAYOUT, and CLONE EXISTING PAGE. Choose BUILD FROM SCRATCH.
  6. Divi will automatically ask what row and columns to create. Choose a single large column (first option).
  7. Divi will automatically ask what module to enter into the column (modules are the type of content). Choose Image.
  8. The module settings window will pop up. Press the gear icon in the empty picture box. Select an image to use and accept it. In the module settings window you can make lots of changes.
Divi Modules
Divi Modules
Divi Child Site (divi setup) Lab
PlayPlay
More modules added (feel free to experiment)
Instructions
  1. Let's add some more to the page.
  2. Hover over the row and press the to add a new row. Choose the four column option. Select the Call To Action Module.
  3. Press the inside each column of the row and add Call To Action to each.
  4. Hover over the section and press the to add a new section. Choose Regular. Choose the two column row then Testimonial. Press the inside the other column of the row and add Text.
  5. In order to differentiate the section, hover over the section and click on the . Change the background color in the settings window.
  6. Feel free to add more sections, rows/columns, and modules.
  7. At the bottom of the page click on the page options. A row of icons will appear. If you select the Layers button you can interact with the elements of your page there. Press the Page Settings button. Enter My First Divi Page in the Title. Accept the results.
  8. While the page options are still expanded, press the Publish button. You can exit the visual builder by pressing Exit Visual Builder at the top of the page.
Final Review and Submission
Final Review and Submission
Custom Theme Site (wordpress setup) Lab
PlayPlay
Instructions
  1. Please feel free to explore Divi and add extra elements. The best way to learn is just to play around with it.
  2. When you are happy with your page you can export it for submission.
  3. In Local right-click on the site name in the list on the left. In the popup choose Export. Don't enter anything in the window. Press Export. In the popup choose where you want to export and export.
  4. Now, log into Blackboard (Here) and click on this course. Inside the course, select Class 11, then the Class 11: Divi Child Site (divi setup) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

In this lab we installed and explored Divi some. Hopefully you got a taste at how capable it is. In the next lab we will explore it further as well as create more finished pages.

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996
 

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Submit Class 11 Divi Child Site (divi setup) Lab on Blackboard