Introduction to WordPress Part 3: Full Site Editing

Introduction

Welcome to Part 3 of my WordPress tutorial series, where we unlock the power of Full Site Editing (FSE) to design entire websites using the Gutenberg block editor. If you’ve mastered creating posts and pages with Gutenberg (see Part 2), you’re already halfway there—FSE uses the same editor to build headers, footers, and page templates for a professional, lightweight site. This beginner-friendly guide assumes you’ve installed WordPress (see Part 1) and know Gutenberg basics. Through real-world scenarios for our auto repair website, we’ll create site-wide designs, from a sleek header to a custom homepage. By the end, you’ll design websites like a pro, all without coding. Let’s get started!

About the Author

I’m David Mkandhla, a self-taught webmaster and no-code website designer. My expertise includes:

• Setting up cPanel servers and WordPress systems.
• Installing and securing WordPress, managing users, and optimizing performance.
• Designing websites with Gutenberg and FSE for speed and style.
• Creating SEO-optimized content and streamlining site management.

Having transitioned from HTML/CSS to WordPress’s no-code tools, I’m passionate about simplifying website design for beginners like me, who once found WordPress intimidating.

What is Full Site Editing?

Full Site Editing (FSE) is WordPress’s no-code approach to designing entire websites using the Gutenberg block editor. Introduced with block themes (e.g., Twenty Twenty-Five), FSE lets you create templates (e.g., homepage, single post) and patterns (e.g., headers, footers) with the same blocks you used for posts and pages in Part 2. It’s not a new editor—it’s Gutenberg applied to site-wide design, replacing traditional theme customization.

Role in WordPress

FSE lets you:

• Design site-wide elements (headers, footers, sidebars).
• Create page templates (e.g., homepage, blog archive).
• Manage global styles (fonts, colors, spacing) for consistency.
• Use patterns to reuse designs across your site.

It’s the same Gutenberg editor, just saving blocks as templates or patterns instead of post content.

Key Features

• Site Editor: A dashboard interface to edit templates and patterns.
• Templates: Block-based layouts for pages (e.g., homepage, single post).
• Patterns: Reusable block combinations (e.g., hero section, footer).
• Global Styles: Site-wide settings for fonts, colors, and spacing.
• Block Navigation: Tools to manage complex template structures.

Benefits

• No-Code: Design professional sites without coding.
• Unified: Uses the same Gutenberg skills as content creation.
• Lightweight: Built into WordPress, no heavy page builders.
• Flexible: Customize every part of your site with blocks.
• Responsive: Templates adapt for mobile devices.

Principles

FSE’s modularity extends Gutenberg’s block system:

• Blocks build templates and patterns, just like posts.
• Consistency comes from global styles and synced patterns.
• Scalability allows easy updates across your site.

FSE empowers you to control your site’s design with the same simplicity as formatting a blog post.

FSE in WordPress

FSE fits into the WordPress ecosystem after you:

1. Install WordPress on a cPanel server (Part 1).
2. Choose a block theme (e.g., Ollie, Twenty Twenty-Five) that supports FSE.
3. Optionally add plugins (e.g., Yoast SEO, LiteSpeed Cache).
4. Master Gutenberg for content creation (Part 2).

With a block theme, FSE replaces traditional theme customization (e.g., Appearance > Customize), letting you design your site directly in the Site Editor using Gutenberg blocks.

Use Case Scenarios: Practical Applications of FSE

Let’s design our auto repair website with FSE, creating site-wide elements and templates using the same Gutenberg editor from Part 2. Each scenario teaches FSE tasks, from headers to global styles, with click-by-click steps.

Creating a Header

Goal: Build a header pattern with a logo, navigation, and call-to-action button.

Steps:

1. Open the Site Editor:
   • From the WordPress dashboard, go to Appearance > Editor.
   • This opens the Site Editor, showing your theme’s homepage preview.
2. Edit the Header:
   • Click Edit Site (or the pencil icon), then select Patterns (sidebar).
   • Choose Header (or “General > Header” if multiple options exist).
   • Click the existing header to edit its blocks.
3. Add a Logo:
   • Click + (Block Inserter), select Site Logo, and upload your auto repair logo.
   • Set Width to 150px in Block Settings.
4. Add a Navigation Block:
   • Click +, select Navigation, and choose your primary menu (e.g., “Main Menu” with Home, About, Services, Contact).
   • Set Alignment to “Right” in Block Settings.
5. Add a Button:
   • Click +, select Buttons, and type “Book Now”.
   • Link to the Contact Us page (click Link icon, search “Contact Us”).
   • Set Background Color to red (#FF0000).
6. Style the Header:
   • Select the Header block (parent), set Background Color to dark gray (#333333).
   • Set Padding to 20px in Block Settings.
7. Save:
   • Click Save (top-right), confirm changes, and preview the site to see the header on all pages.
8. Check Mobile:
   • Click Preview > Mobile. Ensure the navigation collapses into a hamburger menu and the button is centered.
   • Adjust Logo Width to 120px for mobile if needed.

Principle: The header is a pattern built with Gutenberg blocks, saved for site-wide use, just like formatting a post in Part 2.

Creating a Footer

Goal: Design a footer with links, contact info, and social icons.

Steps:

1. Access the Footer:
   • In the Site Editor, go to Patterns > Footer.
   • Click the existing footer to edit.
2. Add a Columns Block:
   • Click +, select Columns, and choose 50/50 layout.
   • Left Column:
     • Add a Navigation block with links (e.g., About, Services, Contact).
   • Right Column:
     • Add a Paragraph: “Call us: (123) 456-7890 | Email: info@autorepair.com”.
     • Add a Social Icons block, link to your social profiles (e.g., Facebook, Twitter).
3. Style the Footer:
   • Select the Footer block, set Background Color to black (#000000).
   • Set Text Color to white (#FFFFFF) for all blocks inside.
   • Add Padding (20px).
4. Save and Test:
   • Click Save, preview the site to confirm the footer appears on all pages.
   • Check mobile to ensure columns stack and text is readable (adjust Font Size to 14px if needed).

Principle: Footers are Gutenberg patterns, using familiar blocks like Columns and Navigation, applied site-wide.

Building a Homepage Template

Goal: Create a custom homepage template with a hero section, services, and testimonials.

Steps:

1. Open Template Editor:
   • In the Site Editor, go to Templates > Home.
   • Click Edit to modify the homepage template.
2. Add a Hero Section:
   • Click +, select Cover, upload a car repair image, set Minimum Height to 400px.
   • Inside the Cover:
     • Add a Heading: “Top Auto Repair Services” (36px, white, centered).
     • Add a Button: “Get a Quote” (red, linked to Contact Us).
   • Set Content Position to “Center Center”.
3. Add a Services Section:
   • Below the Cover, add a Group block, set Alignment to Wide Width (~1200px).
   • Add a Heading (H2, “Our Services”, 28px).
   • Add a Columns block (three columns):
     • Each column: Image (e.g., engine, brakes, tires), Paragraph (e.g., “Engine Repairs”).
   • Set Group Background to light gray (#F5F5F5).
4. Add a Testimonials Section:
   • Add a Group block, add a Heading (H2, “What Our Customers Say”).
   • Add a Quote block: “Best service! – John Doe” (blue text, #0000FF).
5. Save and Test:
   • Click Save, preview the homepage.
   • Check mobile to ensure sections stack and fonts are legible (e.g., H2 at 24px).

Principle: Templates are collections of Gutenberg blocks, combining patterns like hero and services sections, customized for specific pages.

Managing Synced Patterns

Goal: Save a hero section as a synced pattern for site-wide use.

Steps:

1. Create a Pattern:
   • In the Site Editor, go to Patterns > Create Pattern.
   • Add a Cover block (car image, 350px height).
   • Add Heading (“Welcome to Auto Repair”, 36px), Button (“Contact Us”, red).
   • Select the Cover, click the three-dot menu, choose Create Pattern.
   • Name it “Hero Pattern”, check Synced, and save.
2. Use the Pattern:
   • Go to Templates > Single Post, add the “Hero Pattern” from Patterns > My Patterns.
   • Preview to confirm it appears consistently.
3. Edit Synced Pattern:
   • Go to Patterns > My Patterns, edit “Hero Pattern” (e.g., change button text to “Book Now”).
   • Save; changes update everywhere the pattern is used.
4. Check Mobile:
   • Preview on mobile to ensure the pattern scales properly.

Principle: Synced patterns are reusable Gutenberg block designs, ensuring consistency across your site, built the same way as post content.

Applying Global Styles

Goal: Set site-wide fonts, colors, and spacing.

Steps:

1. Access Global Styles:
   • In the Site Editor, click Styles (paintbrush icon, sidebar).
   • Select Typography, Colors, or Layout.
2. Set Typography:
   • Choose a Font Family (e.g., Inter) for headings and body text.
   • Set H2 Font Size to 28px, Paragraph to 16px.
3. Set Colors:
   • Define a Primary Color (e.g., red, #FF0000) for buttons.
   • Set Background Color (e.g., white, #FFFFFF) for the site.
4. Set Layout:
   • Set Padding to 20px for all blocks.
   • Set Content Width to 1200px.
5. Save and Test:
   • Click Save, preview the site to confirm styles apply (e.g., red buttons, consistent fonts).
   • Check mobile for readability.

Principle: Global styles apply Gutenberg formatting site-wide, streamlining design consistency.

Best Practices

• SEO:
  • Use Navigation blocks for clear site menus.
  • Add Alt Text to images in patterns.
• Accessibility:
  • Ensure color contrast (e.g., white text on dark backgrounds).
  • Use logical block hierarchy (e.g., Header > Navigation).
• Responsiveness:
  • Preview templates on mobile to check stacking and spacing.
  • Adjust Font Sizes for mobile (e.g., H2 at 24px).
• Workflow:
  • Use Block Navigation (top toolbar) to manage complex templates.
  • Save frequently to avoid losing changes.

Next Steps

You’re now equipped to design entire websites with FSE! Practice by:

• Creating a Blog Archive template with a Query Loop block.
• Adding a Contact Page template with a form block (requires a plugin like WPForms).
• Exploring block themes at wordpress.org/themes.

For more, visit learn.wordpress.org or revisit Part 2: Mastering Content Creation with Gutenberg for content creation tips. Stay tuned for future tutorials on plugins, SEO, and more!