WordPress has undergone significant changes over the years, introducing new features with each update to simplify website creation. A frequently asked question is about the Full Site Editing (FSE) feature that was launched in WordPress 5.9.
We utilize a custom theme built on the Genesis framework along with a page builder like SeedProd for tailored pages. However, as the Full Site Editor gains popularity, many users are eager to learn how to make the most of this innovative feature for their websites.
Full Site Editing expands the block editor concept to encompass the entire website. This functionality enables you to visually modify not only your content but also your site’s header, footer, and various structural components.
In this article, we will guide you through using the WordPress Full Site Editor. Whether you’re a newcomer to WordPress or an experienced user eager to explore this new feature, this guide will assist you in creating an attractive website with WordPress quickly.
What Is Full Site Editing (FSE) in WordPress?
WordPress Full Site Editing (FSE) is essentially an extension of the Gutenberg project. It provides a feature that utilizes the block content editor interface for the built-in website and theme customization tools of WordPress.org.
This allows you to utilize the block content editor not only for crafting your page or post content but also for designing headers, footers, sidebars, and more.
The purpose of Full Site Editing is to streamline the website creation process in WordPress. Although WordPress is generally user-friendly, it hasn’t always been the most accessible option for beginners.
Previously, the Classic Editor was quite basic. When creating a new page, you couldn’t immediately see how it would appear. Instead, you had to toggle between the preview and the editing interface to view the page’s front-end appearance.
Some users find the WordPress Theme Customizer restrictive since it lacks drag-and-drop capabilities.
In simpler terms, you can’t rearrange and modify elements exactly as you wish. This limitation is why many users opt for a WordPress page builder plugin for greater design flexibility.
The Gutenberg project seeks to address these issues by offering new, more intuitive website-building tools, including Full Site Editing.
With Full Site Editing, beginners can easily build their WordPress websites using a simple drag-and-drop block editor and view live previews as they make adjustments.
Essential Information to Know Before Utilizing WordPress Full Site Editing
Before you start using the WordPress Full Site Editor, it’s important to note that this feature is exclusively available for users of WordPress block themes.
If you are using a non-block (classic) theme, you will not have access to the Full Site Editor. Instead, you’ll need to utilize the WordPress theme customizer or a compatible page builder for your customizations.
For inspiration on block themes, check out our guide featuring the best WordPress themes for Full Site Editing.
Keep in mind that WordPress Full Site Editing operates similarly to the Gutenberg block content editor. Therefore, we suggest reading our guide on how to effectively use the WordPress block editor.
In this guide, we will concentrate on utilizing the features of WordPress Full Site Editing to enhance your website’s design, content, and layout. You can use these quick links to navigate to specific topics:
- Accessing WordPress Full Site Editing Features
- Editing Your Navigation Menu with Full Site Editing
- Changing Your Website’s Global Styles with Full Site Editing
- Customizing WordPress Pages with Full Site Editing
- Editing WordPress Templates with Full Site Editing
- Modifying WordPress Patterns with Full Site Editing
- Tips for Maximizing Your Experience with WordPress Full Site Editing
- Understanding the Limitations of WordPress Full Site Editing
How to Access Features of WordPress Full Site Editing
To access the WordPress Full Site Editor, navigate to your WordPress dashboard and selectAppearance » Editor.
You will then be directed to the WordPress Full Site Editor.
Here’s a glimpse of the interface:
On the left, you’ll see a panel with the primary settings, while the right side displays a preview of your website. You can click on the preview to start editing your site immediately.
There are five main settings: Navigation, Styles, Pages, Templates, and Patterns. Let’s explore each of them in detail.
How to Modify Your Navigation Menu Using Full Site Editing
The first setting at the top is Navigation, which enables you to customize your block theme’s navigation menu. Click on it to get started.
There are various actions you can perform on this page.
By clicking the three-dot icon next to ‘Navigation,’ you can Rename, Duplicate, or Delete the menu.
You can also rearrange or remove the pages listed in the menu.
To start, click the three-dot icon next to one of the pages. You will see options to Move Up, Move Down, or Remove the page. If you wish to edit that specific page, select the ‘Go to …’ button.
You can also personalize the design and links of the menu.
To do this, simply click the pencil icon labeled ‘Edit’ to access the block editor.
The editing interface for the navigation menu will now appear, similar to the standard Gutenberg editor.
Managing Menu Items: Adding, Editing, Removing, and Rearranging
Before proceeding, keep in mind that the position of your website’s navigation menu varies based on your theme. It can be located at the top, on the side, or may be hidden and only visible when a specific button is clicked.
To add a new page link, click the ‘+’ add block button within the menu. Then, simply enter the name of the page, post title, or external URL you want to include in the navigation menu and select it.
If the page you want to link to hasn’t been created yet, you can still add a link to the navigation menu.
Just enter the name of the draft page in the search bar and click ‘Create draft page.’ WordPress will then generate a page with that name for you to edit later.
To modify the link, name, and tab settings of a page, select the page and click the link icon in the block toolbar.
After that, click the pencil icon to proceed.
You can now edit the page link and set it to open in a new tab.
Once you have made your changes, simply click ‘Save.’
Additionally, you can add new items to your navigation menu, not just page links.
Click the ‘+’ button to add a block, and you will see various navigation block options available, such as the Site Logo or Site Tagline.
You might need to scroll down to locate these blocks, or you can select ‘Browse all’ to view the complete list of available blocks.
At some point, you may wish to rearrange the elements in your menu.
To do this, select a block and use the arrow icons to move it left or right.
If you need to remove a page link or any other menu item, select the element you wish to delete.
Next, click the three-dot menu in the block toolbar and select ‘Delete.’
For further information, check out our tutorial on removing a block in WordPress.
How to Create a Submenu
If your website has numerous pages, such as when operating an online store, consider creating a dropdown submenu. This will keep your navigation menu organized and free from excessive links.
To create a submenu, start by clicking the ‘+’ add block button and choosing the ‘Submenu’ block.
Then, select a page or URL to serve as the parent menu for your submenu.
For example, if you have a blog, you might use your blog page as the parent menu. The submenu can then include links to the individual category pages of your blog posts.
In this case, we will choose ‘Blog’ as the parent menu.
After that, click the ‘+’ add block button again.
This button should be located just below the parent menu.
Now, you can enter the name of the page link you wish to add and select it. You can repeat this process to include as many submenu links as necessary.
Once you have finished setting up your navigation menu, remember to save your changes by clicking the ‘Save’ button located in the top right corner.
How to Modify Your Website’s Global Styles Using Full Site Editing
The next option under Navigation is Styles. This feature allows you to customize the design of your entire website.
When you access the Styles page, you’ll find various predefined style options featuring different colors, typography, and layout selections. Keep in mind that these options may vary between different block themes.
You can also click the eye icon next to ‘Styles,’ which represents the Style Book.
This allows you to view the typography of the style options and see how text blocks will appear with this style, including headings, paragraphs, lists, and more.
Similar to the previous section, the pencil icon on this page will direct you to the editing interface.
In this interface, you’ll primarily use the right-hand panel to adjust typography, colors, background images, shadows, and layouts to suit your preferences. You can also customize the appearance of specific blocks across your entire website.
Typically, you will see your homepage displayed in the editor. However, any changes you make here will also apply to other pages on your site.
Editing Your Website’s Typography
To modify your website’s fonts, go to the Styles sidebar on the right and select ‘Typography.’
You will now see several text elements that you can edit: Text, Links, Headings, Captions, and Buttons.
The settings in the Text element control the appearance of fonts throughout your entire site. Any changes made to this element will apply to all text blocks on your website.
However, you can click on the Links, Headings, Captions, or Buttons elements to customize the style of these specific blocks, allowing them to differ from the standard text.
For example, if you want your headings to feature a distinct font compared to the paragraph text for better visibility, you can adjust the settings in the Headings element.
In general, you can adjust each element’s Font, Size, Appearance, and Line Height.
The available font options depend on the theme you are using. Additionally, the Appearance setting allows you to choose between regular, bold, or italic styles of the font.
Some elements may have unique settings, so it’s important to explore each one individually.
For instance, the Headings element provides options for customizing letter spacing and case.
Customizing Your Website’s Color Palette
Next, let’s set the color scheme for your website. To do this, simply click on ‘Colors’ in the Styles panel. You will see two sections: Palette and Color.
Select your desired colors from the ‘Palette’ section.
In the Solid tab of the Palette, you’ll find sections for Theme, Default, and Custom colors.
The Theme section contains colors that allow you to personalize the color palette for your entire website.
The Default colors can be used to adjust blocks that have color settings. Keep in mind that some themes may not support this feature, so it might not appear in your editor.
Custom colors are additional colors that you can introduce to the theme. This option is available if the Theme or Default colors do not meet your needs.
To create a new Custom color, simply click the ‘+ Add color’ button and utilize the color picker tool.
To modify a Theme, Default, or Custom color, select a color and use the color picker tool to choose a different one.
Be aware that any blocks using these colors will also change accordingly.
Now, let’s move to the ‘Gradient’ tab. This tab functions similarly to the Solid tab, but offers color options in gradient form, blending two or more colors.
The Theme options feature several gradient choices based on the theme’s solid colors, while the Default settings provide color gradients that you can apply to customize blocks.
Duotone colors are image filters that you can apply to blocks containing images. While you can view the available duotones, editing them is not possible in this section.
You also have the option to create custom gradients if necessary.
To create a gradient, simply click the ‘+ Add color’ button. You can then choose between Linear or Radial gradient types and adjust the gradient direction by modifying the Angle.
Feel free to add more colors to your gradient by clicking on a point in the slider. A color picker will appear, allowing you to select your desired color.
Returning to the Colors tab, you can adjust the specific color settings for your Text, Background, Link, Captions, Button, and Heading.
To change an element’s color, click on it and choose either a Solid or Gradient color. You can also access the color picker from the preview section.
Adding a Background Image
If you prefer to use a background image instead of a background color in your block theme, click on the ‘Background’ option in the main Styles menu.
From this menu, you can select an existing image from your media library or upload a new, high-resolution image.
Adjusting Drop Shadow Effects
In the Full Site Editor, you can customize the shadow effects applied to various blocks, including the call-to-action button.
To modify a shadow effect, simply select one of the options located below ‘Default.’
You can adjust the shadow’s color, whether it is outset or inset, its position, blur, and spread settings.
Customizing Your Website’s Layout
The final option in the Styles tab is Layout, where you can adjust the spacing between elements on your web page.
At the top of the Layout panel, you’ll find settings to change the Content and Wide width of your page. The Content width sets the default width for individual blocks when their alignment is set to None in the block toolbar.
Conversely, the Wide width determines the default width for blocks when they are aligned to Wide width.
Below these options is Padding, which manages the outer spacing around your web page content.
Using the provided sliders, you can adjust the padding for the top, bottom, left, and right sides. For more precise control over padding size, click on the slider icon to enter a specific pixel value, as shown in the screenshot below.
At the bottom, you’ll find the Block Spacing settings. This feature controls the spacing between individual blocks, ensuring they are neither too close nor too far apart. You can adjust this just like you would modify the Padding.
Don’t forget to click the ‘Save’ button located in the top right corner to confirm your changes.
Modifying the Appearance of a Specific Block
To customize the appearance of a specific block across your entire website, click on the ‘Blocks’ option in the main menu of the Styles panel.
Here, you can choose from the various default WordPress blocks available.
The Style settings for each block will vary.
For instance, if you select the Paragraph block, you can adjust its font, line height, letter spacing, and more. Some blocks also allow you to modify their height and width.
Incorporating Custom CSS
If you wish to add custom CSS to your block theme, you can do this within this setting.
Simply click on the three-dot menu in the main menu of Styles, then select ‘Additional CSS.’
From this point, you can enter your CSS code into the designated box.
For example:
How to Personalize WordPress Pages Using Full Site Editing
We have discussed Navigation and Styles so far. Now, let’s focus on Pages. In this section, you will find a list of your current pages. We will delve deeper into how to edit them later.
You can also create a new page directly within the Full Site Editor.
To do this, simply click the ‘Add New Page’ button. After that, enter a name for your new page and click ‘Create draft.’
From there, you can begin customizing your page.
To edit an existing page, select the page you wish to modify, such as ‘Privacy Policy.’
Editing pages in the Full Site Editor is very similar to using the block editor.
For additional information, we have several guides available for you. You can start with these:
- How to Create a Custom Page Using the Full Site Editor (For Block-Based Themes Only)
- How to Create a Landing Page in WordPress Using the Block Editor (No Plugins Needed)
- How to Create a Separate Page for Blog Posts in WordPress
How to Edit WordPress Templates Using Full Site Editing
On the Templates page of the WordPress Full Site Editor, you will find a list of templates provided by your theme.
In WordPress Full Site Editing, Templates are pre-designed structures that you can use to create specific types of pages on your website.
Many WordPress block themes include a Single Post template, which determines the layout for blog post pages. This means that every blog post on your site will follow this specific template.
This feature is particularly useful if your WordPress blog has multiple pages that share the same layout.
If you need to update the same element across those pages without editing each one separately, you can simply adjust the template. The changes will then automatically reflect on all pages that use that template.
To create a custom template, click the ‘Add New Template’ button.
Next, choose which page the new template will be applied to.
Alternatively, you can scroll down and select ‘Custom template’ at the bottom.
At this point, you will see an editing interface with a blank page where you can start adding blocks. For a detailed example, refer to our guide on creating a custom homepage template using the block editor.
To modify an existing template, simply click on it.
Now, you can edit the page template just like you would with other elements in the block editor. You can add new blocks and customize the settings for both the blocks and the page.
If you’re editing a page or post with the block editor and want to change its template without entering Full Site Editing mode, you can do so easily.
Just navigate to the page or post and open the Page or Post Settings sidebar. Look for the ‘Template’ section under ‘Summary’ and click on it.
You can select a different page template from the dropdown menu or click ‘Edit template’ to directly access the template editor. Alternatively, you can click the ‘Add template’ button to create a new custom template from scratch.
How to Customize WordPress Patterns Using Full Site Editing
In WordPress Full Site Editing, Patterns are pre-designed sets of blocks that can be easily inserted into any page or post. When you create a pattern, it gets added to your block directory, allowing you to use it across your website effortlessly.
Patterns are particularly helpful when you want to maintain a consistent set of blocks across multiple pages or posts. Many users have utilized them to create custom call-to-action banners or image galleries within their blog posts.
Additionally, you can choose to make these patterns ‘synced.’ This means that if a pattern is used in several posts or pages, any changes you make will automatically update all instances of that pattern.
In the Patterns section of the WordPress Full Site Editor, you will find a variety of design patterns.
The menus with a folder icon display a selection of default patterns provided by your selected theme. These patterns are fixed and cannot be modified.
Below this, you will see ‘Template Parts,’ which are unique patterns that play a role in your website’s layout rather than its content. Examples include the header, footer, and comment section of your site. All of these elements can be customized.
To create a new pattern, click the ‘+ Create pattern’ button in the left sidebar and select whether to make a new pattern or a template part.
If you’re unsure which option to choose, a pattern is akin to a reusable block that you can insert into your page or post content. In contrast, a template part functions as a collection of blocks that are integral to your template layout, such as a header, footer, or sidebar.
A template part will automatically sync, meaning any changes made to it will be reflected throughout your website. Consider elements like the header or footer.
Conversely, a pattern can either be synced or unsynced.
First, give your template part or pattern a name and decide if you want it to be synced. Once you’ve completed this, click ‘Create,’ and you will be taken to the editing interface.
For additional details on creating and utilizing patterns, refer to our beginner’s guide on using WordPress block patterns.
While editing a page or template, you might also want to modify a block pattern or template part. This can be done directly in the editor without needing to access the Patterns menu.
Simply hover over the pattern or template part, then click ‘Edit.’ You will be directed to the Full Site Editor for that specific element.
Tips for Maximizing Your Experience with WordPress Full Site Editing
Now that you understand the fundamentals of Full Site Editing, let’s explore some tips and tricks to enhance your experience.
Utilize the Command Search Bar
The command search bar allows you to quickly navigate to specific sections of your website or execute actions to modify your web design.
This feature is particularly useful if you want to locate a specific setting in the Full Site Editor without sifting through various buttons and menus.
If you’re in the main menu of the Full Site Editor, click the magnifying glass icon to access the search feature.
You can also press Ctrl/Command+K on your keyboard while in the editing interface.
Simply type in what you want to search for or accomplish. For example, you can add a new post or page without going back to the WordPress dashboard.
Managing Blocks Using List View
While editing a page, template, or pattern, you might add so many blocks that it becomes difficult to keep track of them all.
The List View feature is useful in this situation. It allows you to see every block added to the page, template, or pattern, including those nested within other blocks.
To enable the List View feature, simply click the three-line icon located at the top left of the editor’s menu bar. This will display all the blocks used in that page, post, template, or pattern.
If you need to adjust a specific block within a group, row, column, or similar structure, just select that block from the List View. The block will be highlighted, and the toolbar will appear.
Refer to the screenshot above for an example. In this case, we want to edit the featured image block, but clicking on it selects the query loop block instead.
The List View feature allows you to see all the blocks within the query loop block, making it easier to select the specific block you want to edit.
Learn Keyboard Shortcuts
To speed up your website editing process, consider mastering keyboard shortcuts. These shortcuts enable you to navigate various buttons and settings using your keyboard, eliminating the need to constantly move your mouse.
The keyboard shortcuts available in the block content editor are also applicable in Full Site Editing. For more details, check out our comprehensive list of WordPress keyboard shortcuts.
Develop a Child Block Theme
One challenge of using a WordPress theme is that any customizations made to the core theme files may be lost during updates. This is where a child block theme becomes beneficial.
A child block theme inherits the styles and functionalities of its parent block theme, allowing you to make changes without modifying the core theme files. This ensures that you can update your parent theme in the future without losing your customizations.
If you have previously created child themes for classic themes, keep in mind that the process for creating a child block theme is somewhat different.
Block themes utilize a theme.json file to manage theme details and CSS for website styling, eliminating the need to alter the parent theme’s PHP files in a child block theme.
Fortunately, creating a child block theme is simpler than it appears. The most straightforward method we’ve discovered is by using the Create Block Theme plugin.
The Create Block Theme plugin not only simplifies the process of creating a child block theme for your existing theme, but it also serves as an excellent tool for building your own block theme from the ground up.
This approach gives you full control over your website’s design and functionality without depending on a pre-designed theme.
For additional guidance on creating child themes in WordPress, please refer to our comprehensive guide on how to create a child theme.
Understanding the Limitations of WordPress Full Site Editing
WordPress Full Site Editing has certainly made it easier for newcomers to customize their websites, but this feature does come with some limitations.
Firstly, a block theme is required to utilize this feature. While there are several new block themes available, they are still fewer in number compared to traditional WordPress themes. If you are using WooCommerce, your theme options may be even more restricted.
Some WordPress users express frustration that block themes do not support widgets. While blocks provide greater flexibility in placement, many users appreciate the straightforwardness of drag-and-drop widgets in specific areas.
Additionally, changing themes can be cumbersome, as it requires reconfiguring the theme and ensuring compatibility with your existing WordPress plugins.
Moreover, much of your site’s customization depends on the features provided by your WordPress theme, which can restrict your creative options when designing your website.
Exploring Alternatives to Full Site Editing
If you’re seeking an alternative to WordPress Full Site Editing, consider SeedProd. This robust page builder plugin and theme creator offers over 300 mobile-responsive templates, allowing you to build any type of website.
The user-friendly drag-and-drop builder includes more than 90 content blocks for various elements. Additionally, there are numerous pre-designed sections, such as calls to action, optimized for conversions, eliminating the need to create these components from the ground up.
For further details, you can check out our SeedProd review and our guide on creating a custom WordPress theme.
We trust that this beginner’s guide has equipped you with the knowledge to effectively utilize WordPress Full Site Editing (FSE). Additionally, you might find our article on common issues with the WordPress block editor and our comprehensive guide to WordPress SEO helpful.
If you enjoyed this article, consider subscribing to our YouTube Channel for insightful WordPress video tutorials. You can also connect with us on Twitter and Facebook.
