Duration of the online course: 3 hours and 57 minutes
New
Build modern WordPress sites faster with Full Site Editing. Learn Gutenberg templates, global styles, headers/footers and patterns in this free course.
In this free course, learn about
Build a real website with WordPress Full Site Editing (FSE) and the Gutenberg Site Editor
Understand FSE vs classic themes and how Global Styles replace the old Customizer
Create core pages, set basic WordPress settings, and manage site structure in the Site Editor
Edit templates (Home, Index, Single, Archives, Search, Category) and use the Post Content block
Create and manage reusable Template Parts (header/footer) and make them responsive
Configure global typography, colors, and block styles; set primary color via Global Styles
Use Theme blocks (Navigation, Site Logo, Template Part) vs default/content blocks effectively
Design a Home page: hero with background image, featured video, services, CTA, testimonials, appointment
Build repeatable multi-column sections using Group/Columns blocks, duplication, and spacing controls
Handle alignment/CSS details like right-aligned image classes and custom selectors
Style WPForms (e.g., submit button) with custom classes/CSS to match global button styles
Use WordPress Patterns to rapidly assemble pages (e.g., About) without starting from Figma
Create a custom blog archive, including dynamic post lists (Query Loop) and a right sidebar layout
Customize single post layout and key archive templates for a consistent, site-wide design system
Course Description
Upgrade the way you build WordPress websites by learning Full Site Editing with Gutenberg, the modern approach to designing an entire site directly inside WordPress. Instead of relying on the old Customizer workflow, you will work with the Site Editor to shape your global design system, create templates, and manage reusable parts like headers and footers. This course is ideal if you want more control over layout and styling without jumping between multiple tools, and if you want a clearer, more scalable way to maintain consistent branding across pages.
Through a practical, real project, you will set up essential pages and configuration, then move into the core of FSE: global typography, color palettes, and block styling that can be applied across the whole site. You will learn how to build a professional header and footer using Template Parts, and how to make them responsive so your navigation, icons, and call-to-action elements stay clean on mobile and tablet. The focus is not just on placing blocks, but on understanding which editor areas control site-wide structure versus page-specific content, so you can make changes confidently without breaking other layouts.
As you progress, you will design key sections commonly found on modern homepages, such as hero areas, featured media, service grids, testimonials, and call-to-action blocks, using smart patterns and reusable structures that speed up production. You will also see how to handle practical styling needs with custom classes and targeted CSS, including form button styling to match the site design. By the end, you will be comfortable building and customizing templates for dynamic content like blog archives, single posts, search results, and category pages, including layouts with sidebars. You will walk away able to create a cohesive WordPress theme experience using Gutenberg FSE, making your workflow faster, your sites easier to maintain, and your designs more consistent across every page.
Course content
Video class: 1. Full site editing FSE Gutenberg WordPress Tutorial with Real Project02m
Exercise: What is the main benefit of WordPress Full Site Editing (FSE) with Gutenberg?
Video class: 2. Create Necessary Pages and Basic settings05m
Video class: 3. Difference between Full site editing (FSE) and the previous Version of WordPress theme03m
Exercise: In a Full Site Editing (FSE) WordPress theme, what replaces the old Customizer-based approach for changing site-wide design settings like colors and typography?
Video class: 4. Understanding the Full Site Editing FSE Gutenberg editor06m
Exercise: In WordPress Full Site Editing, which Editor section lets you manage and create theme templates like Single Post, Index, and Home?
Video class: 5. Configure the Global Typography, Colors and Blocks07m
Exercise: Where do you edit and apply the theme’s primary color in WordPress Full Site Editing global styles?
Video class: 6. Create A Header using Gutenberg FSE Features14m
Exercise: Which method is used to edit the site header as a reusable Template Part in WordPress Full Site Editing?
Video class: 7. Create a Footer area using the Gutenberg Full Site Editing FSE Features15m
Exercise: When customizing the footer navigation links in a WordPress Full Site Editing footer, what should you change to make the menu display as a vertical list?
Video class: 8. How to Make Header and Footer responsive using the Gutenberg Full Site Editor10m
Exercise: How was the header fixed on tablet/mobile so the social icons and buttons row doesn’t break the layout?
Video class: 9. Create and understand the Single Page template in Gutenberg05m
Exercise: Which block must be included in a page template to ensure the page content displays on the front end?
Video class: 10. Discussion about the Default Blocks and Theme Builder Blocks inside the Gutenberg Editor05m
Exercise: In Full Site Editing themes, which block category contains items like Navigation, Site Logo, and Template Part for building global site structure?
Video class: 11. Home - Create a Hero Area using the Gutenberg Editor with default 2022 WordPress theme14m
Exercise: Which Gutenberg block is recommended for creating a full-width hero section with a background image on the Home page?
Video class: 12. Create Featured Video area using the Gutenberg Block editor12m
Exercise: When an image block is aligned to the right, which class is typically added to the block that may require updating your CSS selector?
Video class: 13. Services section area using Gutenberg Block Editor06m
Exercise: How is the services-style section built so it can be quickly repeated across three columns?
Video class: 14. Another Service Section Part 2 using Gutenberg Editor07m
Exercise: When building the section layout, which block is used first to add a background image and make the area full width?
Video class: 15. Call to Action section using Gutenberg Block and 2022 WordPress theme05m
Exercise: When duplicating an existing section to create a similar one, which key typography change is made to match the new design?
Video class: 16. Testimonial section using the Gutenberg Editor and 2022 WordPress theme09m
Exercise: When adjusting spacing in a Gutenberg section, what values were set for the top and bottom padding to fix the missing padding issue?
Video class: 17. Create an Appointment Section using Gutenberg19m
Exercise: When the editor doesn’t offer a “Section” block, which block is used to create the new “Make an Appointment” section container?
Video class: 18. How to style WP Form Submit Button using Custom CSS and custom class03m
Exercise: How can you style a WPForms submit button to match your site’s default button style in Full Site Editing?
Video class: 19. How to use WordPress Patterns07m
Exercise: How can you quickly build an About page layout in WordPress Full Site Editing without designing it in Figma?
Video class: 20. How to use WordPress Patterns09m
Exercise: What is the best way to reuse the same page header on multiple pages in WordPress Full Site Editing?
Video class: 21. Custom Blog Archive using Gutenberg FSE Block Editor - Part 112m
Exercise: When a static homepage is set in WordPress, which template should be edited to design the blog archive page in Full Site Editing?
Video class: 22. Custom Blog Archive using Gutenberg FSE Block Editor - Part 207m
Exercise: Which block is used to build a dynamic list of posts on the blog archive page?
Video class: 23. Custom Blog Archive with Sidebar area using Gutenberg FSE Block Editor Part 317m
Exercise: In Full Site Editing, where should you place the Columns block to create a blog layout with a right sidebar?
Video class: 24. Create a Custom Single Post page using Gutenberg08m
Exercise: What was the main layout change applied to improve the single post template design?
Video class: 25. Custom Search result page using Gutenberg Full site Editing08m
Exercise: Which template should you edit to customize the search results page in WordPress Full Site Editing?
Video class: 26. Custom Category Archive page using Gutenberg Editor04m
Exercise: Which template should you edit in the Site Editor to customize how category pages (e.g., /category/travel/) display?
Video class: 27. Contact Page using WPForms and Pattern Template04m
