• Based in Richmond, VA
web design world logo
Get Started
Course Content
01 – Website Setup & WordPress Basics
This module teaches the foundational steps required to build a fully functional WordPress website from scratch. You will learn how to choose and register a domain name, set up reliable hosting, configure SSL, create email accounts, and install WordPress using both 1-click and manual methods. The lessons guide you through the WordPress dashboard, essential settings, and the key differences between posts and pages. You’ll also learn how to install and configure critical plugins for SEO, security, and backups, as well as how to select and activate the right theme for your website’s goals. By the end of this module, you will understand how to create pages, build navigation menus, and implement basic security practices to keep your site safe. This section provides the technical foundation needed to confidently build and manage your WordPress website.
0/12
What You Need to Build a Website (Domains, Hosting, WordPress)
How to Choose and Register a Domain Name
Setting Up Hosting (cPanel, SSL, Email Accounts)
Installing WordPress (1-Click Install + Manual Install)
WordPress Dashboard Overview
General Settings (Permalinks, Reading, Writing, Timezone)
Installing Essential Plugins (SEO, Security, Backups)
Choosing and Installing a Theme
Understanding Posts vs Pages
Creating Your First Page
Creating a Navigation Menu
WordPress Security Basics
02 – Elementor Page Building
This module shows you how to design professional, visually engaging website pages using Elementor’s drag-and-drop page builder. You will learn how to install Elementor, navigate the editor, and use sections, columns, and widgets to create clean, modern layouts. The lessons cover global colors and typography, designing hero sections, using containers with Flexbox, and building fully responsive pages for desktop, tablet, and mobile. You’ll also learn how to add images, videos, icons, galleries, buttons, forms, and calls-to-action that drive user engagement. This module teaches you how to build site-wide elements such as headers, footers, and reusable templates using Elementor’s Theme Builder. By the end, you’ll be able to design polished, conversion-focused website pages—without writing any code.
0/12
Installing Elementor + Elementor Pro (Optional)
Overview of the Elementor Editor
Using Sections, Columns, and Widgets
Global Colors and Global Typography
Designing Hero Sections
How to Use Containers (If Elementor Flexbox is On)
Building Responsive Layouts (Mobile + Tablet)
Creating Buttons, Forms, and Call-to-Actions
Adding Images, Galleries, Icons, and Videos
Building Headers and Footers
Creating Reusable Templates
Using Elementor’s Theme Builder
03 – Business Website Essentials
This module teaches you how to structure, plan, and create the essential pages every high-performing business website needs. You’ll learn how to clearly communicate what your business does, who you help, and why visitors should choose you. The lessons walk you through building an effective Home page, writing a compelling About page, creating a Services page that converts, and designing a Contact page with professional forms. You’ll also learn how to add trust-building elements such as testimonials, logos, and badges, as well as how to set up strategic calls-to-action throughout your site. This module covers blog creation, content planning, and the structure of your first posts, along with important legal pages your site must include. By the end, you’ll know how to create a complete, conversion-optimized business website that supports your goals and builds credibility with your audience.
0/12
Planning Your Website Structure
Writing Clear Business Messaging (What You Do + Who You Help)
Creating an Effective Home Page
How to Write an Impactful About Page
Creating Your Services Page (Layout + Copywriting)
Building a Contact Page With a Form
Adding Trust Elements (Testimonials, Logos, Badges)
Setting Up Calls-to-Action That Convert
Creating a Blog Page
Structuring Your First Blog Posts
Adding Legal Pages (Privacy, Terms, Cookie Policy)
Connecting Social Media Links
04 – Branding & Visual Design
This module teaches you how to create a cohesive, professional visual identity for your website and brand. You’ll learn the fundamentals of branding, including how to choose color palettes, pair fonts, and create a consistent look across every page. The lessons cover layout balance, white space, and visual hierarchy so your designs are clean, modern, and easy to navigate. You’ll also learn how to create a simple logo using DIY tools like Canva, select brand-appropriate images, and use icons and graphics effectively. This module shows you how to build a complete brand style guide and avoid common design mistakes, while ensuring your website remains accessible for all users. By the end, you’ll be able to design a cohesive, visually appealing website that strengthens your brand identity and improves user experience.
0/12
Understanding Branding Basics
Choosing Color Palettes for Your Website
Typography Basics (Fonts, Pairing, Readability)
Creating a Consistent Brand Look
Designing With White Space + Layout Balance
Creating a Logo (DIY Tools like Canva)
Choosing Images That Match Your Brand
Using Icons and Graphics Correctly
Creating a Brand Style Guide
Visual Hierarchy Principles
Design Mistakes to Avoid
Designing for Accessibility
05 – SEO & Website Traffic
This module teaches you how to optimize your website for Google search and attract consistent, high-quality traffic. You’ll learn what SEO is, why it matters, and how to choose the right keywords for your business. The lessons cover on-page SEO essentials such as titles, meta descriptions, alt text, internal linking, and proper blog structure. You’ll also learn how to create local SEO pages, optimize images for speed, and set up Google Analytics and Google Search Console to track your performance. This module shows you how to create content that ranks and attracts customers, as well as how to drive additional traffic through social media. By the end, you’ll understand how to build a search-friendly, high-visibility website that brings in more visitors and potential customers over time.
0/12
What SEO Is & Why It Matters for Small Businesses
Keyword Research for Beginners
How to Choose the Right Keywords for Your Website
On-Page SEO (Titles, Meta Descriptions, Alt Text)
How to Structure Blog Posts for SEO
Internal Linking for Better Rankings
Creating Local SEO Pages (Service Areas, Maps, NAP Info)
Optimizing Images and Speed
Setting Up Google Analytics
Setting Up Google Search Console
Creating Content That Attracts Customers
How to Get Traffic From Social Media
06 – Website Launch & Maintenance
This module teaches you how to successfully launch, manage, and maintain your WordPress website for long-term performance. You’ll learn how to follow a complete pre-launch checklist, test your site across devices, and ensure all links, forms, and layouts work correctly. The lessons cover essential speed optimization techniques such as caching and minification, along with key security practices including firewalls, malware scans, and automatic backups. You’ll also learn how to connect your domain using DNS, monitor site propagation, and use analytics tools to track traffic and performance. This module shows you how to safely update WordPress, themes, and plugins, troubleshoot common errors, maintain mobile responsiveness, and follow a monthly website maintenance routine. By the end, you’ll know how to keep your site fast, secure, and running smoothly long after launch.
0/12
Pre-Launch Checklist (Testing Links + Devices)
Speed Optimization (Caching, Minification)
Security Essentials (Firewalls, Malware Scans)
Setting Up Automatic Backups
Launching Your Website (DNS, Propagation)
Tracking Performance (Analytics + Search Console)
Updating WordPress, Themes, and Plugins Safely
Fixing Common WordPress Errors
Monitoring Uptime & Site Health
How to Add New Pages or Edit Existing Ones
Keeping Your Site Mobile Friendly
Monthly Website Maintenance Checklist
How to Make a Website

Creating a Brand Style Guide

How to document your brand’s colors, fonts, images, messaging, and design rules so every page stays visually consistent.

Estimated time: 40–60 minutes • Level: Beginner

What You’ll Learn

  • What a brand style guide is and why your website needs one.
  • The essential components: colors, typography, icons, spacing, imagery.
  • How to organize rules in a clear, reusable format.
  • How to document brand voice, messaging, and tone.
  • How to apply the guide across WordPress + Elementor consistently.

What Is a Brand Style Guide?

A brand style guide is a single reference document containing all design rules and visual elements that define your brand. It ensures consistency across your website, marketing materials, social media, and anything new you build later.

A good style guide answers:

  • What colors do we use?
  • Which fonts and text sizes are allowed?
  • What type of images should we choose?
  • How should we format spacing, buttons, icons, and layout?
  • What is our brand voice and writing style?

Core Sections of a Brand Style Guide

  1. Brand Identity Overview

    Describe the foundational elements of your brand.

    • Brand purpose: Why you exist.
    • Target audience: Quick description of who you serve.
    • Brand personality: 3–5 adjectives (e.g., friendly, modern, bold).
    • Brand message: 1–2 sentences summarizing what you deliver.

  2. Color Palette

    Document exact color hex codes and rules for using them.

    • Primary color: CTAs, buttons, links, highlights.
    • Secondary color: Supporting accent or section highlights.
    • Neutral palette: Backgrounds, borders, text.
    • Usage rules: Show examples of where each color is applied.
    • Contrast requirements: Accessible combinations for text.

  3. Typography

    Define your type hierarchy for headings, body text, and UI elements.

    • Font families: Primary + secondary fonts.
    • Heading scale: H1–H6 sizes, weights, spacing.
    • Body text: Size (16–18px), line height, paragraph spacing.
    • Usage examples: Headline + subheadline + paragraph example blocks.

  4. Imagery & Photography Style

    Explain how to choose and edit images to maintain consistency.

    • Lighting style (warm, cool, neutral).
    • Editing style (saturation, contrast, clarity).
    • Composition (rule of thirds, negative space, framing).
    • Aspect ratios for heroes, blog images, cards.
    • Examples of on-brand and off-brand photos.

  5. Icons and Graphics

    Document the rules for icon usage and visual consistency.

    • Icon style: stroke or fill.
    • Stroke weight (e.g., 1.5px) and corner radius.
    • Icon sizes (e.g., 16, 20, 24, 32px).
    • Color rules (inherit currentColor).
    • Where icons should and shouldn’t be used.

  6. Layout & Spacing System

    Define your structural layout patterns and spacing rules.

    • Section padding (e.g., 40–60px).
    • Column padding (e.g., 24–40px).
    • Component spacing scale (8, 16, 24, 40, 60px).
    • Grid width (content max width: 1100–1200px).
    • Alignment guidelines: left-align for long text.

  7. Buttons & UI Components

    Document design tokens and UI rules.

    • Primary button (shape, color, hover state).
    • Secondary button.
    • Form field styling: border radius, padding, focus state.
    • Checkmarks, badges, alerts.

  8. Brand Voice & Writing Style

    Your website’s messaging should follow the same tone everywhere.

    • 3–5 adjectives describing your tone (e.g., encouraging, expert, conversational).
    • Grammar rules: contractions, sentence length.
    • Formatting rules: bullets, headings, CTA wording.
    • Examples of on-brand vs off-brand writing.

  9. Logo Usage Rules

    Ensure your logo always appears clean and readable.

    • Safe space around the logo.
    • Minimum display size.
    • Approved variations (full color, white, black).
    • Background rules to maintain contrast.

  10. Real-World Examples

    Show your brand rules in action.

    • Homepage layout example.
    • Service card example.
    • Hero section example.

How to Format Your Brand Style Guide

  • PDF Version: Great for sharing with teams or contractors.
  • Web Page Version: Ideal if you update often (use Elementor).
  • Notion or Google Doc: Quick to maintain and link assets.
  • Brand Folder: Store logos, icons, presets, and templates.

Implementing Your Guide in WordPress + Elementor

  1. Set Global Colors: Add your full palette in Site Settings.
  2. Set Global Typography: Apply heading scale + body text rules.
  3. Save Reusable Components: Buttons, cards, icons, forms.
  4. Document Templates: Save page layouts to reuse the same spacing system.
  5. Image Guidelines: Apply consistent crops and overlays for hero sections.

Hands-On: Build Your Style Guide (15–30 minutes)

  1. Create a new blank page in WordPress or Canva.
  2. Add your color palette and hex codes.
  3. Add your font families and heading scale.
  4. Create example image blocks showing on-brand photos.
  5. Add icons and button styling.
  6. Include a sample hero section that reflects your brand’s layout and tone.

Quick Style Guide Checklist

  • Documented color palette with usage rules.
  • Typography scale clearly defined.
  • Image style with examples.
  • Icon style (stroke, weight, color).
  • Button & form styles documented.
  • Spacing & layout system defined.
  • Voice, tone, and messaging rules.
  • Logo usage guidelines included.

Tip: Update your style guide every time you change anything about your brand, and keep it as the single source of truth for all design decisions.
Previous
Next