• Worksheet plus 6 video tutorials:
  • Choosing colour schemes
  • Divi theme “ePanel” overview
  • Customization via wysiwyg “on-the-fly” quick panel (website colours, fonts, navigation menu location, static vs posts home page)
  • Customizing the navigation menu bar (via ePanel and WordPress menu)
  • Adding header image (slider) with or without tagline text and button and resizing header image within WordPress media library
  • Post vs pages and inserting a photo (uploading to media library)

You can watch the videos on this page, or if you want to see them in a larger screen format, you can choose to watch them on YouTube instead.

I have set up a Website in a Week (WIAW) playlist, so you can click here to watch them on autoplay on YouTube.

 Elegant Themes Divi Theme ePanel overview

Customization quick panel (colours, fonts, static vs posts home page)

WIAW Navigation menu via ePanel and WP Menus

You can download the pdf of the worksheet# 3 here.

Module 3 includes worksheet as outlined below and  video tutorials:

• Choosing colour schemes
• Divi theme “ePanel” overview
• Customization via wysiwyg “on-the-fly” quick panel (website colours, fonts, navigation menu location, static vs posts home page)
• Customizing the navigation menu bar (via ePanel and WordPress menu)
• Adding header image (slider) with or without tagline text and button and resizing header image within WordPress media library
• Post vs pages and inserting a photo (uploading to media library)

What’s covered in this section:

• Branding colour inspiration and hex colour code indicator
• Overview of Divi theme
  • General settings tab (logo, social icons, email/optin link to Mailchimp or Awebwer)
  • Navigation tab (I prefer to customize navigation menu in WordPress instead of ePanel editor because it’s more intuitive)

• Exploring and customizing your website
  • Posts vs pages
  • Uploading images to your media library and adding to a post
  • Adding images to the “slider” in the header (top) of your page, including tagline and button link
  • Cropping images right within WordPress media library
  • Draft, publish and pre-schedule or back-date a post
  • Customizing fonts, colours and home page layout
  • “behind the scenes” real life example demonstrating Divi layout builder for the WIAW course pages
  • adding a video to a text section or blog post (hint: it’s actually a “text” section and you need to get the “embed” code from YouTube or Vimeo
  • On-the-fly changes to your website with the Customize sidebar menu

Actions:

• Choose your branding colours using Design Seeds (or use your existing branding colours)
• Explore the Divi theme “live previews” so you can see different options available in the pre-made layouts
  • Make note of any specific layouts or features you like so you can easily remember them to add and customize layouts on your own website
• Explore the different sections and features of the Divi theme
• View Elegant Themes’ own tutorial videos for any layouts, modules or element features you plan to use
• Explore the ePanel and begin to customize your website:
  • Customize navigation menu bar
  • Change fonts, colours and other elements in the “customize on-the-fly” sidebar editor
  • Upload your logo in ePanel
  • Add pages such as About, Services, Products, Contact, etc and rearrange them in the navigation menu
• Use the pre-made layouts or create your own page design from scratch

Tools, resources and links:

Elegant Themes Divi theme

Elegant themes Divi theme “live demos” – shows examples of different pre-made layouts and elements you can use in your website

http://www.elegantthemes.com/gallery/divi/

Elegant themes Divi tutorial videos – (you must be logged in to access this section) > Divi Theme > Readme then choose your topic… or just click the link

http://www.elegantthemes.com/gallery/divi/readme.html

Branding and colour inspiration

Fun colour selection for branding with Design Seeds swatches

http://design-seeds.com/

Colour scheme picker

http://www.sessions.edu/color-calculator