Design & Develop a WordPress Website

Using Figma & the Divi Builder

2 day course – 9:00am – 4:00pm

What you will need

  • Computer
  • Internet Connection
  • Adobe Photoshop & Illustrator
  • Figma
  • Google account
  • Australian Business Number (Optional)
  • Password Saving App (Optional)

Plan ahead

  • Create some basic content for a 4 page website ie: Home, Services, Portfolio, Contact
  • Setup a free Figma account and install the Figma app
  • Setup a free Google Account
  • Apply for an ABN
  • Find a Password Saving App, such as 1 Password or LastPass
  • Download FileZilla – a free FTP app

Day 1


Basic housekeeping

  • Be kind & respectful
  • This will move fast as we’ve got a lot to get through, but use the raise hand feature, or speak up if you have a question, all questions are good questions
  • Please let me know if something doesn’t make sense, it’s really important you understand each step
  • If I’m going too fast, tell me to slow down!
  • Take notes! I suggest having a Google doc open in another brower for notes 
  • If you have technical issues, I’ll do my best to fix on the spot but you may have to wait until I get everyone else to a stage where they can work and then I can attend to any technical issues


    Lesson 1 - The Divi Builder
    • 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


      Lesson 2 - Website content

      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


      • 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:
      • 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
          Lesson 3 - Figma Intro

          Responsive Layouts

          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


          Lesson 4 - Formatting images for web
          • 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
          Lesson 5 - Designing in Figma
          • 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!


          Day 2


          Welcome back!

          • Today we will be working with the more technical side of Website Development
            • It may be a lot to take in, but don’t panic!
            • If you have technical issues, they are usually pretty minor and can be resolved easily.
            • I am always here to answer questions the next time you do this on your own, so don’t feel like you have to remember everything
            • This class resource will stay here, so you can always refer back to it for specific steps etc.
            • Recording – I can record certain sections and have available for all students, as long as everyone agrees
          • Please ensure you save your passwords during lesson 6 & 7
            • You will be creating multiple passwords, so don’t get them confused
            • If you have a password app that’s great! It should create and save secure passwords for you
            • If you don’t, use the random document I created to ensure you’re creating strong, secure passwords


            Lesson 6 - Domain & Hosting
            • Visit Web Central
            • Register a domain name – preferably a (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!


              Lesson 7 - Server & WordPress setup
              • 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
              Lesson 8 - Building in Divi

              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



                • 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



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



                • 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



                • 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


                • Add SEO
                • Do first time configuration
                Additional Resources

                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!



                Suite 1/220 The Entrance Road Erina NSW 2250

                Copyright© 2023 The Web Hut, a subsidiary of Firefish Creative Pty Ltd | Privacy Policy | Terms & Conditions