• A quick intro to The Divi Builder
• A longer look at the Visual Builder
• An example of all the modules
• A demo page showing sections, rows and modules and how to add them

The importance of website content

• It’s just as important as the design and functionality
• It gives your website structure, and viewing websites you design becomes a journey
• Understanding more about content made me a better designer

The Google doc

• Login to your Google account & make a copy of the Copy Deck Template.
• Save into your Google Docs

The Copy Deck

Primary Nagivation

• Menu structure
• Decide on your pages & add them eg: Home, Services, Portfolio & Contact
• Project pages – add in a ‘Project page template’ under the Portfolio page

Standard Elements

• Header
• Footer
• Copyright statement

SEO – Demonstration

• Keyword planner
• Search for keywords
• Select a keyword phrase for each page and add it to the table
• Add focus keyword, SEO title, meta description & image alt text to homepage section

Website Content – this document is a wireframe of your website

• Setup the pages in your copy deck as per your menu structure on page 1
• Add your keywords if you have them, if not, leave it for now

Homepage

• The menu is a window to your website, the homepage advertises the best parts
• Website structure
  • Use dividers, tables and paragraphs to work out the basic structure of each page
  • Review the Divi Modules for an idea of what you can use – headings, subheadings, body content, call to actions, images, portfolios, blogs and more
  • Review the Divi Website List for an idea of headers, footer, call to actions, layouts and content
  • Start to visualise how it will look, but don’t get stuck in the design, focus on the content for now
• The customer journey
  • Think about how the information flows from the menu down as the user scrolls
  • What do you want to tell the user when they come to your site?
  • Research other freelancers & design agencies for content and layout ideas
• Example Websites:
  • The Indigo Project
  • The Bread & Butter Project
  • Studio Paradise
  • CKDS vs Fabric Architecture
  • Made Agency
• Other things to consider:
  • Headings over images need to be short & sweet
  • Column / blurb text needs to be a similar length when sitting beside each other
  • Think about where you can use icons and graphics, but just use placeholders for these elements for now

All other pages

• Once you have devised the content for the homepage, write content for your remaining pages
• You can copy & paste sections from your homepage onto other pages

Responsive Layouts

• What is a responsive layout?
• Create a responsive grid system in Figma
• How we modify this for Divi
• Copy the Divi Desktop 1920 grid to use

Figma intro

• Set fonts & colours
• Creating text
• Creating shapes
• Importing images
• Masking
• Rulers / Guides
• Header & footer
  • Keep it simple
  • Consider your menu style ie: Left, centred, pinned etc
  • Consider dropdowns
• Creating components
  • Figma components vs Divi global sections
  • Create components of header and footer
• Add each page and apply the header & footer as components
• Start to add other items based on the content in your copy deck
  • Headings, subheading, content, call to actions, images, portfolios, blogs etc
• Best practice:
  • Using squares as spacers
  • Turning the grid on and off
  • Using your grid to space things evenly
  • Columns sitting next to each other with similar text length
  • Download the Divi icons to use in your design here

• Folder structure
  • 1 folder for all images: psd, ai etc
  • 1 final image folder for website images only: jpeg, png etc
• Naming conventions
  • Choose a naming convention & stick to it
  • ClientName_Item-v#
  • When developing you may have other versions ie: Firefish_Header1-2.jpg, Firefish_Header1-3.jpg
• Sizes
  • Set up a Photoshop header file: 1920px wide @ 72dpi
  • All images should either be 1920px wide for full width, or 1080px wide for columns
• Exporting files for web from Photoshop
  • Use ‘save for web’
  • keep file sizes under 500kb
• Creating icons in Illustrator
  • Setup 1 Illustrator file for icons & save all icons you create
  • Copy / paste to Figma
  • Export from Figma as a .png when you develop the site

• See examples in Divi
• Use:
  • Sections, rows & modules
  • Stacking for responsive websites
  • Padding / Margins
  • Call to actions
  • Blurbs / Icons
  • Section dividers
  • Buttons
  • Parallax background
  • More modules

Finish writing & designing your website

• Write the content before you design, it will give you more direction and structure
• Try to have at lease the homepage written and designed before our next class
• Refer to the Divi resources when you design, it will give you inspiration!
  • The Divi Builder
  • Divi Modules
  • Divi Website List

• Visit Web Central
• Register a domain name – preferably a .com.au (you will need an ABN)
• Opt in for 1 month free hosting
• Setup your Web Central Account with username / password
  • Use the random document to create a secure password
  • Save your username / password in your App!

• Login to your new cPanel account
  • Install WordPress through cPanel
  • Use the random document to create a secure password
  • Save your username / password in your App!
• Navigate to your website & set a WordPress username / password
  • Use the random document to create a secure password
  • Save your user / password in your App!
• Install & activate the Divi theme
  • Reset permalinks to Post_Name
• Install Plugins
  • ET Updater & add API – I need to do this
  • WordFence
    • Set Preferences
  • Yoast
    • Do first time configuration
• Activate SSL on your server
  • Install Really Simple SSL
• Setup pages & menu
  • Add pages backwards
  • Delete existing sample page
  • Keep Privacy Policy – Fill this out later & add to footer
  • Setup menu
    • Call Primary Menu Primary_Menu
• Setup Divi preferences
  • Theme Options
  • Colours
  • Customiser
• Setup Divi Customiser
  • Fonts
  • Buttons
  • Primary Menu
  • Home page

Divi intro

• Visual Builder vs back end building
• Go to a new page
  • Use the Divi builder >> build from scratch
• Tour the interface
• Adding sections
  • Adding section dividers
• Adding rows
  • Custom sizing
  • Custom gutter width
• Adding columns
  • Equalise column heights
  • Adding background colour to each column, not modules
• Viewing in Desktop, Tablet & Mobile
• Padding vs Margins
  • Changing this in settings or on the fly
• Changing the number of columns in a row
  • Deleting / copying columns through the settings
• Copying sections you’ve already made
  • Drag & drop
• Copying & pasting row & module styles

Spacing

• Margin vs Padding
• Using % & VW / VH
• Adding padding in desktop, tablet & mobile
• Adding spacing to rows rather than modules

Adding modules

• CTA’s
• Blurbs
  • Exporting icons from Figma as .png
• Text
• Headers
• Buttons
• Blog Slider

Fonts

• Formatting fonts
• Viewing in desktop / tablet / mobile
• H1 / H2 / Paragraph

Images

• Adding background images
  • Adding background images to rows rather than modules
• Cover vs actual size
• Positioning (top left / centre etc)
• Sizing – 100% rows

Fullwidth Header Images

• Fullwidth header
• Fullwidth slider
• Creating your own FW header w/ multiply over BG image

Projects

• Adding a Portfolio grid
• Adding projects to connect to your portfolio grid
• Setting the grid to display only certain categories

Contact form

• Use a free contact form plugin, the Divi one doesn’t deliver email well

The Divi Library

• Adding items to the library
  • Pages
  • Sections
  • Rows
  • Modules
• Creating Global Sections
• Adding library items into a page
• Using a whole page as a template
• The Divi library – importing these sections

Header & Footer

• Create header & footer through Theme Builder
• Add Global Header
  • Build Desktop & Mobile Versions
• Add Global Footer
  • Build Desktop & Mobile Versions

SEO

• Add SEO
• Do first time configuration

A few additional resources below
Let me know if you’re interested in me running a class in any of these topics, or suggest more!

• How to FTP
  • FileZilla client tutorial – someone redesign this website for them!
• Manually installing WordPress with cPanel via FTP
• Building a website in a sub folder & transferring it to the main domain
  • Moving directories on your existing server
• Transferring a whole website to a new domain
  • Moving to a new server
• Setting up a google business profile
  • Note, if you don’t have a physical location customers can visit, make sure you setup a service area
• Submitting a new website to Google search console so it’s indexed on Google