Home » WordPress Tutorials » Basics » How to Access the Gutenberg Full Site Editor

How to Access the Gutenberg Full Site Editor

The Gutenberg full site editor is a very faceted set of tools that allows you to craft a WordPress website that perfectly fits your website preferences and business goals.

The full site editor gives you the opportunity to customize even the smallest details that comprise your pages’ overall layout and functionalities.

See how to access the Gutenberg full site editor in the following paragraphs.

 

How to Access the Gutenberg Full Site Editor

To be able to access the editor, you should first install and activate a WordPress theme that supports the feature.

To do so, via your WordPress admin panel head to Appearance->Themes:

WordPress Gutenberg Themes

 

Once there, you will see a list with all your installed themes:

WordPress Installed Themes Page

 

While on this page, click on the gray Add New button at the top left of the page:

WordPress Add New Theme

 

Clicking the Add New button will open a list of all available WordPress themes that you can use on your website:

WordPress Available Themes

 

From this ample choice, you should filter the themes that feature the full site edit option. To do so, click on Feature Filter at the top of the page:

WordPress Filter Features for Themes

 

This will open a list of features that you can filter out:

WordPress Theme FIlters

 

To prompt WordPress to display only themes that include the full site edit option, in the Features column add a tick to Site Editor:

WordPress Filter Full Site Edit Themes

 

Once you add a tick to Site Editor, click on Apply Filters, so WordPress displays the requested results:

WordPress Apply Themes Filters

 

After you click the Apply Filters button, a list with suggestions will appear. From this list choose a theme that fits your needs and activate it:

WordPress FIltered Themes

 

Now that you have installed and activated a WordPress theme that supports the full site editor feature, it is time to access it.

To access the full site editor, via your WordPress dashboard head to Appearance->Editor (keep in mind that you will see the Editor option only if your activated theme supports the full site editor feature):

WordPress Gutenberg Full Site Edit Button

 

Once you click the button, the full site editor will activate. It should look like this:

WordPress Gutenberg Full Site Editor Page

 

While on this page, notice the Templates and Template Parts menu sections:

WordPress Gutenberg Full Site Edit Template and Template Parts

 

These two options allow you to customize an entire page to your liking (Templates), or a single web page component (Template Parts).

In the following paragraphs, you will read how to use each one of them.

 

Templates (Full Page Edit)

If you click on the first option, Templates, you will see a list of your website pages:

WordPress Gutenberg Full Site Edit Template Edits

 

To be able to edit your pages, simply click on one, so the editor activates. In this demonstration, we will click on Home. Regardless of which page you click on, a new page with options will appear:

WordPress Gutenberg Full Site Edit Template Page Edit

 

Now that the editor is active, you can start editing your page’s layout, so it perfectly fits your design requirements.

To make changes, simply insert blocks in the content area, by clicking on the + button, or clicking on the already inserted ones, so you can access their options.

For more clarity, you can also activate the List view, so you see how blocks are distributed in relation to each other by clicking on the List View icon:

WordPress Gutenberg Full Site Edit List View Icon

 

Once you click the View List icon, a sidebar on the left of the screen will appear:

WordPress Gutenberg Full Site Edit List View Sidebar

 

Use the View List as an orientational tool, so you see which blocks are contained by others and which blocks are placed beneath or above other blocks.

This tool becomes very handy in the event that you work with numerous elements, as it gives you a clear vision of the order you placed the various blocks that comprise your content.

Once you are finished with the edits, you should save your setup by clicking on the blue Save button located at the top right corner of the page:

WordPress Gutenberg Full Site Edit Save Changes

 

Now you have managed to edit a page of your WordPress site via the full site edit feature.

Should you wish to edit only a single element on your web pages, you should use Template Parts. Read more in the next section.

 

Edit a Single Page Element (Template Parts)

If you wish to edit a single component on your web pages via the full site editor, activate it (WordPress dashboard->Appearance->Editor) and then click on Template Parts:

WordPress Gutenberg Full Site Edit Template Parts

 

Clicking on Template Parts will open a new menu with a list of various webpage parts that you can edit  via the full site editor:

WordPress Gutenberg Full Site Edit Template Parts Elements

 

To edit a single part, simply click on it, so the full site editor activates. For this demonstration, we will edit the Header. Once you click on the part you wish to modify, the full site editor will be activated:

WordPress Gutenberg Full Site Edit Part Page

 

Now, similar to the full-page edit options (Templates) you can insert blocks in the content area by clicking one of the three + signs:

WordPress Gutenberg Full Site Edit Insert Blocks

 

You can also edit an already inserted block by clicking it, so its settings appear:

WordPress Gutenberg Full Site Edit Block Settings

 

You can also activate the List View sidebar, so you have more clarity over which elements are present in the template part and how are they connected with each other:

WordPress Gutenberg Full Site Edit List View Icon

 

WordPress Gutenberg Full Site Edit List View Sidebar

 

Now you can start editing and experimenting with various design approaches. Once you have finished editing, you should save the changes. To do so, click on the blue Save button at the top right of the page:

WordPress Gutenberg Full Site Edit Save Changes

 

Conclusion

Activating the full site editor in WordPress is quite a straightforward process that only requires installing a WordPress theme that supports the feature and activating the editor with a few mouse clicks.

Related:

Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?