Select Page
Web Design II
Class 12: Divi Modules

Topics

    • Divi Modules
    • Class 12 Divi Theme Site (page creation) Lab

It’s 12.

Divi Settings

Divi Theme Options:

These are the general default settings of the site built on Divi.

Divi Theme Builder:

This allows you to create templates for pages as a starting point. It also allows you to design global headers, bodies, and footers to populate your site.

Divi Theme Customizer:

This is just Divi’s version of the Customizer that allows you to adjust the site globally through various settings.

Divi Modules:

Divi modules are the content of a Divi theme site. Text, Image, Slider, Blurb, etc. are a variety of the possible options. Even more modules can be purchased in the Divi Marketplace. There are a ton of options. The best way to learn about  them is to explore them and follow the documentation here.

Class 12 Divi Child Site (page creation) Lab

Divi Child Site (page creation) Lab

Divi is a very robust theme. In this lab we will create a page using Divi and its robust layout and module system.

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
You may download the lab materials here: wd2_week12_labMaterials

Lab Tutorial Slideshow

This tutorial will cover Divi page creation.

Lab Introduction
Divi Child Site (page creation) Lab
PlayPlay
Introduction

In the last lab we installed Divi and explored some of its options. In this lab we will create more finished pages.

Click on the > to start

You may use your own images or the ones included in the zip folder below
Divi Child Theme Site (page creation) Lab Materials (

Homepage Creation
Homepage Creation
Divi Child Site (page creation) Lab
PlayPlay
Homepage Creation Setup
Instructions
  1. We need to start Local, log into the site, and create the a page.
  2. Open Local.
  3. Select the site and press Start Site in the most upper-right of the window.
  4. Press the ADMIN button. The browser window will popup. Log into the site (should be vcp and vcp).
  5. In the Dashboard navigate to Pages.
  6. Press Add New.
  7. In the page creation, select Use Divi Builder.
  8. Select Start Building.
  9. Select the single column in the Insert Row popup.
  10. Select Slider from the Insert Module popup.
  11. Just accept the Slider Settings for now.
  12. At the bottom of the page click on the page options. A row of icons will appear. Press the Page Settings button. Enter Homepage in the Title. Accept the results.
  13. Press Publish to save the page
  14. Press Exit Visual Builder.
  15. Press the to navigate back to the Dashboard.
  16. In the Dashboard, press Settings>Reading.
  17. Where Your homepage displays, toggle on A static page (select below). Next to Homepage: Select Homepage (the page we just created).
  18. Press Save Changes.
Menu
Menu
Divi Child Site (page creation) Lab
PlayPlay
Site Created in Local
Instructions
  1. We now have a homepage, the page we created in the last lab, and the default pages. That is a enough to format and preview a menu. Let's quickly make one.
  2. In the Dashboard navigate to Appearance>Menus.
  3. Enter "Main Menu" in the Menu Name field.
  4. Toggle on Primary Menu.
  5. Press Create Menu.
  6. In the Pages panel, select View All. Toggle-select the pages and press Add to Menu.
  7. Press Save Menu
Divi Theme Builder (header)
Divi Theme Builder (header)
Divi Child Site (page creation) Lab
PlayPlay
Global Header
Instructions
  1. Divi has a default header, body, and footer like any theme does. One of the interesting things you can do in Divi is design a global header, body, and footer yourself using its page builder. It is pretty much the same process as building a page you are just creating a small portion of it. Let's try it out.
  2. In the Dashboard navigate to Divi>Theme Builder. We are going to adjust the Default Website Template but you could create multiple templates for different pages here as well.
  3. Click on Add Global Header. Select Build Global Header since we haven't added anything to our library yet.
  4. Divi will ask how to start. Select Start Building.
  5. In the Insert Row popup choose two columns with a very narrow first column.
  6. Select Image from the Insert Module popup. Insert an image as the logo for the site.
  7. Press the Add New Module button. Select Menu from the Insert Module popup. The Main Menu that we created will be selected automatically. Make changes to the module to make it more aesthetically pleasing.
  8. At the bottom of the page click on the page options. A row of icons will appear. Press Save
  9. Press the at the most upper-right corner to exit.
Divi Theme Builder
Divi Theme Builder (footer)
Divi Theme Builder (footer)
Divi Child Site (page creation) Lab
PlayPlay
Site Created in Local
Instructions
  1. The header could be much more robust but you should get an idea of what is possible. Let's create a simple footer to place our social media icons in.
  2. You should still be in the Divi>Theme Builder section. If not just navigate back to it.
  3. Click on Add Global Footer. Select Build Global Footer.
  4. Divi will ask how to start. Select Start Building.
  5. In the Insert Row popup choose two even columns.
  6. Select Contact Form from the Insert Module popup. Format it however you like.
  7. Press the Add New Module button. Select Social Media Follow from the Insert Module popup. Add any social networks you would like. Make changes to the module to make it more aesthetically pleasing.
  8. Make any other changes you would like to the footer. Personally I like to darken the Section background color by adjusting its settings (hover over the section and click on the ).
  9. At the bottom of the page click on the page options. A row of icons will appear. Press Save
  10. Press the at the most upper-right corner to exit.
  11. Press Save Changes in the Divi Theme Builder page to save your header and footer.
Divi Theme Builder
Homepage Fullwidth Slider
Homepage Fullwidth Slider
Divi Child Site (page creation) Lab
PlayPlay
Fullwidth Slider
Instructions
  1. The custom header and footer are complete. Let's get to designing the actual homepage.
  2. In the Dashboard navigate to the Pages.
  3. Hover over the Homepage in the Pagesarea and select Edit With DIvi from the menu that appears below it.
  4. We created a single row, column, and slider module so far. This is currently a regular section that has margins on both sides. I'd rather have a slider that is fullwidth.
  5. Add a new section by pressing hovering over the bottom of the section and pressing the Add New Section button. This time choose the Fullwidth option.
  6. Select Fullwidth Slider from the Insert Module.
  7. Inside the Fullwidth Slider Settings you will see two slides by default. Press the on the first slide. You will be brought to the Slide Settings.
  8. Change the Title, Button, and Body text.
  9. Expand the Background section and select the image option (third icon to right). Click on the Add Background Image button and upload an image.
  10. Apply any other settings you would like the slide. Once completed press the to Save Changes.
  11. Complete the same process on the second slide.
  12. In the Fullwidth Slider Settings select the Advanced tab.
  13. In the Slide Description section type width: 50%;. This will apply CSS to the text and make it more narrow.
  14. When the second slide is formatted press the to Save Changes on the Fullwidth Slider.
  15. Delete the old slider above by hover over the section and pressing the Delete Section button.
Sections, Columns, & Modules
Sections, Columns, & Modules (oh my)
Divi Child Site (page creation) Lab
PlayPlay
Final Homepage
Instructions
  1. We have a start of a page but it is far from complete. It needs more content.
  2. Add a new section by hovering over the bottom of the section and pressing the Add New Section button. This time choose Regular.
  3. Choose two columns with a narrow one on the left from the Insert Row popup.
  4. Select Text from the Insert Module popup. Placeholder text will be placed in the first column.
  5. Press the Add New Module button in the second column and select Text.
  6. Hover over each text module and click on the Module Settings button. Enter the appropriate text and apply settings to format them properly.
  7. Add another section by hovering over the bottom of the section and pressing the Add New Section button. This time choose Regular.
  8. Choose one column from the Insert Row popup.
  9. Select Text from the Insert Module popup. Replace the Body text and format it in the Text Settings.
  10. Press the Add New Row button. Select three even columns from the Insert Row popup.
  11. Select Testimonial from the Insert Module popup.
  12. Apply the Testimonial modules to the other two columns in the row.
  13. Format each testimonial module.
  14. Add another section by hovering over the bottom of the section and pressing the Add New Section button. This time choose Regular.
  15. Choose one column from the Insert Row popup.
  16. Select Text from the Insert Module popup. Replace the Body text and format it in the Text Settings.
  17. Press the Add New Row button. Select three even columns from the Insert Row popup.
  18. Select Gallery from the Insert Module popup.
  19. Upload pictures and format the gallery.
  20. That is a decent amount of content for the homepage. Feel free to experiment.
  21. When you are finished update the page to save your work. Then exit the visual builder.
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 12, then the Class 12: Divi Child Site (page creation) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

You can see how simple to use and yet robust the Divi theme is. There are loads of options that you can customize. You should explore it further to see what you can create.

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 12 Divi Child Site (page creation) Lab on Blackboard