Build website on Flywheel from Blueprint

Context

Using a blueprint on Flywheel can greatly speed up site design

STEP 01 Create new site

• Access Flywheel
• Create New Site
• Page 1
  • “Who will own this site?” > “My Organization”
  • “Select Plan” > “Loyalty Systems, LLC”
• Page 2
  • ENTER SITE DETAILS
    • Site name should be SHORT. This is for INTERNAL reference only.
    • Temporary domain should be even shorter. Absolute minimum necessary.
  • CREATE WORDPRESS USER
    • Username: [email protected]
    • Password: Justin123@guest
    • ENSURE YOU SAVE THIS TO LASTPASS!!
    • Select newest blueprint
  • Select CREATE SITE
• After site is created, deactivate PRIVACY MODE
  • It may take a few minutes before you can actually access the site.

STEP 02 Set up plugins

• Login to new site
• Use the UPDATES menu to update all existing themes and plugins
• Install all pending plugins
  • Posted as notices at the top of the page
  • These are NOT installed into the Blueprint for a specific reason. By keeping the PRO version on the Blueprint and not the STANDARD, it keeps the blueprint size-light. Once you use the blueprint, it automatically downloads the NEWEST version of the STANDARD and helps keep plugins as up-to-date as possible.
• Activate pro versions (SEE KEYS / CODES)
  • Elementor
  • Envato
  • Gravity Forms
    • Setup reCAPTCHA Settings with the MStoGO Google Account
• Add custom plugins as-needed for this particular site

STEP 03 Create pages

• Pages > Add New
• Using a reference (i.e. old site, customer workorder), build out the names of all intended pages
• Common pages
  • Home
  • Services AND/OR Catalog
  • Blog OR Articles
  • About (Avoid “About Us” to keep it brief)
  • Contact

STEP 04 Create menus

• Appearance > Menus
• Create MAIN — include all primary pages listed above

STEP 05 Set site details

• Appearance > Customize
• Fill out all fields including:
  • Site Identity
    • Site name
    • Tagline
    • Site Logo
    • Favicon
  • Main Menu (should already have been created when you created the pages)

STEP 06 Choose site template

• Elements (Envato) > Template Kits
• Select appropriate template kit for your intended site
• Install Kit(s)

STEP 07 Customize styling

Once in the initial Elementor editor, use the HAMBURGER menu in the upper left to access SITE SETTINGS

• Global Colors
  • If a color palette doesn’t exist, an easy way is to use Adobe Color’s image extraction tool. Drag+drop the company logo and use the primary colors to set your palette.
  • Templates > Theme Builder (There are two, use the first)
  • “Edit with Elementor” if Header already exists OR Add New
    • If ADD NEW, create Header and name it Header. YES, NAME IT “HEADER.”
• Global Fonts
  • All built-in Elementor fonts are Google Fonts
  • If you’re not sure what font to use, search Google Fonts for the font most similar to your company logo.
• Typography (Rules of thumb, but go with what works best)
  • Body – Leave black or dark gray
  • H1, H3, H5 – Global Font 1, Global Color 1
  • H2 , H4, H6 – Global Font 2, Global Color 2
• Button
  • Global Color 1 — If bright, choose dark text, and vice versa

STEP 08 Build Theme Elements

• Templates > Theme Builder (There are two, use the first)
• If you have imported elements from the template, just modify them.
• If you haven’t imported elements, you’ll need to create them from scratch.
• AFTER each element is created:
  PUBLISH > SET RULE > INCLUDE: Entire Site
• Elements you need, at minimum
  • Header
    • Site Logo
    • Main Menu
    • Social Media Tags *
    • Sub Menu *
    • Search Icon/Bar *
  • Footer
    • Site Logo
    • Main Menu
    • Extra Resources
    • Contact Info/Form
  • SubFooter
    • © Copyright YYYY by COMPANY NAME
    • LOGIN / LOGOUT link *
  • Page Title – No matter how well designed a theme might be, it’s often best to design a page title design that is more aesthetic than the built-in function, which often wavers somewhere uncomfortably between the WordPress backend and the template. Better to just control it as use it as an importable page element

STEP 09 Build out each page

Whether copying or up-designing an old site, or using a customer workorder, start building out each page.

* OPTIONAL
Technically speaking, everything is optional based on client’s needs.