After completing this assignment:
- Students should be proficient using both the traditional “Backend Builder” accessed through the Divi dashboard… Divi refers to the Divi Dashboard as the backend… as well as the “Visual Builder“ (the front-end interface).
- The basics: Using Divi, students should understand and be able to:
- Create any feasible page layout using sections, rows and modules.
- Implement any Divi Module.
- Customize a theme using the Divi Theme Options. Especially:
- Change the Logo
- Add a Favicon (https://www.elegantthemes.com/blog/resources/how-to-add-a-favicon-to-your-wordpress-website-in-3-ways)
- Understanding Favicons in WordPress.
- Design considerations: It has to look good when reduced to 32×32 pixels.
- How to create your Favicon image (512×512 pixels).
- How to add a Favicon to your WordPress site.
- Set a static home page.
- Create and position a menu with links to static pages, post pages, and non-WordPress pages.
- Display relevant posts (category /tag) on a page or in the sidebar.
- Use the Divi Library.
- Integrate ImageEngine and analyze the results.
- Advanced topics:
- Students should be encouraged to be expressive and “think outside the box.” https://www.elegantthemes.com/blog/divi-resources/how-to-stagger-divi-columns-and-modules-for-unique-broken-grid-designs would be a good in-class project to guide students through as you discuss the techniques used in the project. https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-4-corner-fixed-navigation-with-divi would also be interesting. You’ll find dozens more at https://www.elegantthemes.com/blog/category/divi-resources and sites such as https://premium.wpmudev.org/blog/free-animation-plugins/. I’ve found it useful to let students pick one they would like to go through in class. We can then all figure out how it works together. Students like the unscripted aspect of it.
- Students must be comfortable adding custom CSS to a Divi site, page, section, row or module. Students may want to use https://divi.space/divi-tutorials/5-ways-to-add-css-to-divi/ as a guide. “Webinar Recap – Controlling Typography with CSS for Divi” (https://divi.space/category/divi-tutorials/) might be a good case study to present. Students can find other interesting examples that use CSS at https://www.divithemeexamples.com/category/divi-css-examples/.
Here’s some screen shots of the general process:
After you click import it will shot up in Saved Layouts when you select Load from Library, when creating a new divi page layout