WordPress: Mastering Full Site Editing

Learn how to build websites using Full Site Editing, so that you can continue building websites in WordPress while using the latest technological advances.

Introduction

• Learn WordPress full site editing
• What you should know

1. Introduction to Building WordPress Websites

• What is full site editing?
• Navigating the FSE interface
• Setting up your local install
• Importing your website's posts and media

2. Analyzing the Figma Design

• Analyzing the Figma design for the website
• Extracting key design elements from Figma

3. FSE Theme Setup

• Selecting and activating your full site editing theme
• Customizing the theme styles
• Installing your site's fonts
• Setting your site's typography
• Setting your site's colors
• Setting your block's styles in the editor: Part 1
• Setting your block's styles in the editor: Part 2

4. Creating Patterns and Reusable Blocks

• What are patterns?
• Turning Figma sections into patterns
• Creating the header using patterns
• Styling the header in FSE

5. Building the Website Pages

• Creating a page template
• Adding synced patterns to templates
• Creating the homepage
• Building the post blocks
• Creating the footer
• Building the Contact page
• Accessibility in FSE

Conclusion

• Continue your WordPress FSE learning journey