A Complete Beginner’s Guide to WordPress Full Site Editing

Sedang Trending 3 bulan yang lalu

Do you want to study really to usage Full Site Editing successful WordPress?

Introduced successful WordPress 5.9, Full Site Editing has changed really users tin build their websites utilizing WordPress. It’s designed to beryllium elastic and easy to usage for beginners.

In this article, we will show you really to usage nan WordPress Full Site Editor. By nan extremity of this guide, you tin easy create a great-looking website pinch WordPress successful nary time.

Beginner's Guide to WordPress Full Site Editing

What Is Full Site Editing (FSE) successful WordPress?

WordPress Full Site Editing (FSE) is fundamentally a continuation of nan Gutenberg project. It’s a characteristic that uses nan artifact contented editor interface for WordPress.org’s built-in website and taxable customization tools.

This intends you tin usage nan artifact contented editor not conscionable for creating your page aliases post contented but besides for a header, footer, sidebar, and more.

The WordPress Full Site Editor

The extremity of Full Site Editing is to simplify website building successful WordPress. While WordPress is beautiful user-friendly, it wasn’t ever nan easiest to usage for beginners.

For starters, nan erstwhile Classic Editor is rather barebones. When you create a caller page, you can’t spot what it looks for illustration correct away. Instead, you person to move backmost and distant betwixt nan preview page and nan editing interface to spot nan page’s quality connected nan beforehand end.

Classic editor station example

Some group besides find nan WordPress Theme Customizer limiting arsenic it doesn’t person a drag-and-drop functionality.

In different words, you can’t move and edit elements astir precisely really you want to. That’s why galore group instal a WordPress page builder plugin to get much elasticity successful their design.

Travel taxable successful nan customizer

The Gutenberg task intends to lick these problems by introducing newer, much user-friendly website-building tools, including Full Site Editing.

With FSE, beginners tin create their WordPress websites utilizing an easy drag-and-drop artifact editor and spot a unrecorded preview arsenic they make changes.

What You Should Know Before Using WordPress Full Site Editing

Before utilizing nan WordPress Full Site Editor, you should cognize that this characteristic is only disposable for WordPress artifact taxable users.

If you usage a non-block (classic) theme, past you won’t person entree to nan Full Site Editor. Instead, you’ll person to usage nan WordPress taxable customizer aliases a supported page builder to make customizations.

If you want to spot immoderate artifact taxable inspiration, past spell up and cheque retired our guideline to nan best WordPress Full Site Editing themes.

Another point to retrieve is that WordPress Full Site Editing useful nan aforesaid measurement arsenic nan Gutenberg artifact contented editor. With that successful mind, we urge reference our guideline connected how to usage nan WordPress artifact editor.

In this guide, we will attraction connected really to usage WordPress Full Site Editing features to edit your web page design, content, and layout. You tin usage these speedy links to skip to a circumstantial topic:

How to Access WordPress Full Site Editing Features

To entree nan WordPress Full Site Editor, you request to spell to your WordPress dashboard and caput to Appearance » Editor.

Selecting nan Full-Site Editor from nan WordPress admin panel

After that, you will onshore connected nan WordPress Full Site Editor.

Here’s what nan interface looks like:

The WordPress Full Site Editor

On nan near side, you will find a sheet pinch nan main settings. Meanwhile, nan correct broadside has a preview of what your website looks like. You tin click connected that broadside if you want to edit your website correct away.

There are 5 main settings: Navigation, Styles, Pages, Templates, and Patterns. Let’s spell done each of them 1 by one.

The first mounting astatine nan apical is Navigation, which allows you to edit your artifact theme’s navigation menu. Go up and click connected it.

Selecting Navigation successful WordPress Full Site Editing

There are respective things you tin do connected this page.

When you click connected nan three-dot fastener adjacent to ‘Navigation,’ you tin Rename, Duplicate, aliases Delete nan menu.

Clicking nan three-dot fastener adjacent to Navigation successful WordPress Full Site Editing

You tin besides rearrange aliases region nan page(s) listed successful nan menu.

To do this, click nan three-dot fastener adjacent to 1 of nan pages. You’ll spot options to Move up, Move down, and Remove nan page. If you want to edit that circumstantial page, past you tin prime nan ‘Go to …’ button.

Clicking nan three-dot fastener adjacent to a page nexus successful Navigation wrong WordPress Full Site Editing

Another point you tin do is customize nan paper creation and links.

To do that, conscionable click nan pencil ‘Edit’ icon to unfastened nan artifact editor.

Clicking nan pencil edit fastener for Navigation successful WordPress Full Site Editing

Now, nan editing interface for nan navigation paper will appear, which looks for illustration nan regular artifact editor.

Adding, Editing, Removing, and Rearranging Menu Elements

Before we continue, statement that nan location of your website navigation menu will dangle connected your theme. It whitethorn beryllium astatine nan top, connected nan side, aliases hidden, appearing only erstwhile you click a definite button.

To adhd a caller page link, you tin click nan ‘+’ adhd artifact fastener wrong nan menu. Now, simply type successful nan sanction of nan page, station title, aliases outer URL you want to insert into nan navigation paper and prime it.

Adding a caller page nexus successful a navigation paper utilizing nan WordPress Full Site Editor

If nan page you want to nexus to has not been created yet, past you tin still adhd a nexus to nan navigation menu.

Just type successful nan sanction of nan draught page successful nan hunt barroom and click ‘Create draught page.’ WordPress will past make a page utilizing that sanction that you tin edit later.

Creating a draught page successful nan WordPress Full Site Editor for nan navigation menu

If you want to edit nan page’s link, name, and tab settings, simply prime nan page and click nan nexus icon successful nan artifact toolbar.

Once you’ve done that, prime nan pencil button.

Editing a page nexus from nan artifact toolbar successful WordPress Full Site Editing

Now, you’ll beryllium capable to alteration nan page’s nexus and make nan nexus unfastened successful a caller tab.

Once done, conscionable deed ‘Save.’

Editing a page nexus and clicking Save for nan navigation paper successful WordPress Full Site Editing

You tin besides adhd caller navigation paper elements present too page links.

All you request to do is click nan ‘+’ adhd artifact button. After that, you will find immoderate navigation artifact options that are disposable for you to use, for illustration nan Site Logo aliases Site Tagline.

Sometimes, you whitethorn person to scroll down to find these blocks. You tin besides take ‘Browse all’ to spot nan complete database of nan artifact choices.

Adding different paper elements too a page nexus successful WordPress Full Site Editing

At 1 point, you whitethorn besides want to rearrange nan paper elements.

To do that, prime a artifact and take 1 of nan arrow icons to move nan artifact to nan near aliases right.

Moving paper blocks to nan near successful WordPress Full Site Editing

Now, if you want to region a page nexus aliases different paper elements, you tin prime nan constituent you want to delete.

Then, click nan three-dot paper connected nan artifact toolbar and take ‘Delete.’

Deleting a artifact from nan navigation paper successful WordPress Full Site Editing

Creating a Submenu

If you person a batch of web pages, for illustration if you tally an online store, past you whitethorn want to create a dropdown submenu. This way, your navigation paper won’t beryllium cluttered pinch galore links and will look overmuch much organized.

The first measurement to creating a submenu is clicking nan ‘+’ adhd artifact fastener and selecting nan ‘Submenu’ block.

Selecting nan Submenu artifact successful Navigation wrong WordPress Full Site Editing

Next, you will prime a page aliases URL that functions arsenic nan submenu’s genitor menu.

For instance, if you tally a blog, past you whitethorn usage your blog page arsenic nan genitor menu. Within nan submenu, location will beryllium links to nan individual class pages of your blog content.

In this example, we will prime ‘Blog.’

Selecting nan Blog page arsenic nan submenu's genitor paper successful WordPress Full Site Editing

After you’ve done that, simply click nan ‘+’ adhd artifact button.

It should beryllium beneath nan genitor menu.

Adding a page nexus artifact arsenic a submenu successful nan WordPress Full Site Editor

At this point, you tin type successful nan sanction of nan page nexus you want to insert and prime that. Feel free to repetition this measurement to adhd arsenic galore submenu links arsenic needed.

Once you are done pinch nan navigation menu, don’t hide to prevention your changes by clicking nan ‘Save’ fastener successful nan apical correct corner.

Clicking Save to make nan paper changes charismatic successful WordPress Full Site Editor

How to Change Your Website’s Global Styles With FSE

The adjacent mounting beneath Navigation is Styles. This characteristic lets you alteration nan creation of your full website.

Once you are wrong nan Styles page, you will spot immoderate predefined style options, each pinch different colors, typography, and layout choices. Note that these predefined options will look different from 1 artifact taxable to another.

The Styles page successful WordPress Full Site Editor

You tin besides click connected nan oculus icon adjacent to ‘Styles,’ which represents nan Style Book.

With this, you’ll beryllium capable to spot nan style options’ typography and what nan matter blocks will look for illustration utilizing this style, for illustration nan headings, paragraphs, lists, and truthful on.

Choosing nan Style Book characteristic successful WordPress Full Site Editor

Similar to nan erstwhile section, nan pencil fastener connected this page will bring you to nan editing interface.

Here, you will chiefly usage nan right-hand sheet to alteration nan typography, colors, and layout to your nonstop needs.

The Global Styles settings successful WordPress Full Site Editor

Typically, you will spot your homepage successful nan editor. However, nan changes you make present will besides beryllium reflected successful nan different web pages.

Editing Your Website’s Typography

To change your website’s fonts, navigate to nan Styles sidebar connected nan correct and prime ‘Typography.’

Now, you’ll spot respective Text elements you tin edit: Text, Links, Headings, Captions, and Buttons.

What Typography elements are disposable to edit successful WordPress Full Site Editor

The settings successful nan Text constituent find what nan fonts crossed your full tract will look like. That intends if you make changes to this element, they will beryllium reflected successful each nan blocks that usage matter connected your website.

That said, you tin click connected nan Links, Headings, Captions, aliases Buttons constituent to edit nan style of these circumstantial blocks truthful that they look different from nan remainder of nan text.

For instance, if you want your headings to person a different font from nan paragraph artifact to guidelines retired more, past you tin configure nan settings successful nan Headings element.

Generally, you tin modify each element’s Font, Size, Appearance, and Line Height.

The font choices dangle connected nan taxable you are using. Meanwhile, Appearance controls whether you want to usage a regular, bolded, aliases italic type of nan font.

The Text constituent settings successful WordPress Full Site Editor

Some elements whitethorn person circumstantial settings, truthful beryllium judge to research them 1 by one.

For instance, nan Headings constituent has options to customize nan missive spacing and missive case.

The Headings typography constituent settings successful WordPress Full Site Editor

Customizing Your Website’s Color Palette

Let’s move connected to setting nan colour scheme for your website. To do that, simply click connected ‘Colors’ successful nan Styles panel. You’ll spot 2 sections: Palette and Color.

Choose nan colors wrong ‘Palette.’

Selecting Palette successful nan Color options wrong WordPress Full Site Editor

In nan Palette’s Solid tab, you’ll spot nan Theme, Default, and Custom sections.

Theme includes colors that tin beryllium utilized to customize nan colour palette of your full website.

Theme, Default, and Custom colour settings successful nan Styles tab wrong WordPress Full Site Editor

Meanwhile, nan Default colors tin modify blocks pinch colour settings. Note that immoderate themes whitethorn not see this feature, truthful you mightiness not spot this successful your editor.

Lastly, Custom colors are colors that you tin adhd to nan theme. You tin usage this mounting if neither nan Theme aliases Default colour options are suitable for you.

To adhd a caller Custom color, conscionable click nan ‘+ Add color’ fastener and usage nan colour picker tool.

Adding a Custom colour successful WordPress Full Site Editor

If you want to alteration a Theme, Default, aliases Custom color, simply prime a colour and usage nan colour picker instrumentality to move to a different option.

Remember that blocks that usage these colors will besides beryllium affected.

Changing a coagulated colour successful nan Styles settings wrong WordPress Full Site Editor

Let’s move to nan ‘Gradient’ tab. It’s akin to nan Solid tab, but nan colour options are successful nan shape of gradients, which are a operation of 2 aliases much colors.

The Theme options see immoderate gradient options utilizing nan theme’s coagulated colors. On nan different hand, nan Default settings are colour gradients that you tin usage to customize blocks.

Duotone colors are filters you tin adhd to blocks pinch images. You tin only position which duotones are available, but you can’t edit them here.

The Gradient tab successful Styles settings of WordPress Full Site Editor

You tin besides create civilization gradients if needed.

To do that, simply click nan ‘+ Add color’ button. Then, you tin prime nan Linear aliases Radial gradient type and customize nan guidance of nan gradient by changing nan Angle.

Additionally, consciousness free to prime much colors into nan gradient operation by clicking connected a spot successful nan slider. A colour picker will show up for you to take a color.

Creating a civilization gradient colour successful WordPress Full Site Editor

Going backmost to nan Colors tab, you tin customize nan circumstantial colour settings of your Text, Background, Link, Captions, Button, and Heading.

Simply click connected an constituent and prime a Solid aliases Gradient colour to alteration nan element’s color. You tin besides prime nan preview conception to entree nan colour picker.

Changing nan inheritance colour successful WordPress Full Site Editor

Adjusting Your Website’s Layout

The past action successful nan Styles tab is Layout. This is wherever you tin modify nan abstraction betwixt your web page elements.

The Styles tab's Layout settings successful WordPress Full Site Editor

At nan apical of nan Layout panel, you will find settings to alteration your page’s Content and Wide width. The Content width determines nan default width for an individual artifact erstwhile their alignment mounting is None successful nan artifact toolbar.

On nan different hand, nan Wide width decides nan default width for blocks erstwhile they are group to Wide width alignment.

Below that is Padding, which controls nan outer spaces astir your web page content.

Using nan disposable sliders, you tin group nan top, bottom, left, and correct padding. If you want to beryllium much circumstantial pinch nan padding size, past you tin click connected nan slider icon to insert a pixel size, for illustration successful nan screenshot below.

Configuring nan Padding settings successful WordPress Full Site Editor

Toward nan bottom, you will spot nan Block Spacing settings. This action determines nan spaces betwixt individual blocks truthful that they are not excessively adjacent aliases acold from each other. You tin edit this nan aforesaid measurement arsenic you edit nan Padding.

Remember to click nan ‘Save’ fastener astatine nan apical correct area to make your changes official.

Saving nan world Styles changes pinch WordPress Full Site Editing

How to Customize WordPress Pages With FSE

So far, we’ve covered Navigation and Styles. Let’s now move connected to Pages. In this tab, you will spot a database of your existing pages. We will talk much astir editing them later.

The Pages conception successful WordPress Full Site Editor

If you want to negociate aggregate pages astatine once, past you tin click nan ‘Manage each pages’ fastener astatine nan bottom.

This will bring you to nan All Pages conception successful nan WordPress dashboard.

Clicking nan Manage each pages fastener successful WordPress Full Site Editor

You tin besides create a caller page correct successful nan Full Site Editor.

To do that, simply click nan ‘+’ Draft a caller page fastener successful nan near broadside panel. After that, springiness your caller page a sanction and deed ‘Create draft.’

Creating a draught page successful WordPress Full Site Editor

From there, you tin commencement customizing nan page.

To edit an existing page, prime a page that you want to modify. In this case, it’s ‘Page: 404.’

Selecting a page to edit successful nan Pages conception wrong WordPress Full Site Editor

After that, click nan pencil ‘Edit’ button.

You will past spot nan editing interface for that circumstantial page.

Clicking nan pencil fastener connected a page to edit pinch WordPress Full Site Editing

Editing pages utilizing nan Full Site Editor is fundamentally nan aforesaid arsenic utilizing nan artifact editor.

For much accusation astir this, we person respective guides for you to read. You tin commencement pinch these:

  • How to Create a Custom Page Using nan Full-Site Editor (Block-Based Themes Only)
  • How to Create a Landing Page successful WordPress Using nan Block Editor (No Plugin Required)
  • How to Create a Separate Page for Blog Posts successful WordPress

How to Edit WordPress Templates With FSE

On nan Templates page successful nan WordPress Full Site Editor, you’ll spot a database of nan templates provided by your theme.

The Templates page successful WordPress Full Site Editor

In WordPress Full Site Editing, Templates are predefined structures that you tin usage to creation a circumstantial type of page connected your website.

For instance, galore WordPress artifact themes will travel pinch a Single Post template. This page template defines nan layout of a blog station page, which intends that each blog station connected that website will usage that template.

This characteristic tin beryllium adjuvant if you person aggregate pages connected your WordPress blog and galore of them usage nan aforesaid layout.

If you request to alteration nan aforesaid constituent connected those pages but don’t want to edit each 1 individually, past you tin simply modify nan template. Then, nan changes will use to each nan pages utilizing that template.

To edit a template, you tin click connected it. After that, you will spot specifications astir nan circumstantial template, its patterns, and erstwhile it was past modified. We will talk much astir patterns successful nan adjacent section.

Now, conscionable click nan pencil ‘Edit’ button.

Clicking nan Edit fastener connected a template successful WordPress Full Site Editor

Now, you tin edit nan page template for illustration you edit different elements utilizing nan artifact editor. You tin adhd caller blocks and customize nan artifact aliases page settings.

If you want to create a civilization template, prime nan ‘+ Add New Template’ fastener successful nan near panel.

Adding a caller template successful WordPress Full Site Editor

From here, conscionable prime which page nan caller template should use to.

Alternatively, you tin scroll down to nan bottommost and take ‘Custom template.’

Selecting a page template to customize pinch WordPress Full Site Editing

At this stage, you will spot nan editing interface pinch a blank page that you tin commencement adding blocks to. For a step-by-step example, cheque retired our guideline connected how to create a civilization homepage template utilizing nan artifact editor.

To negociate each of nan templates astatine once, you tin spell backmost to nan Templates page and click nan ‘Manage each templates’ button.

Clicking nan Manage each templates fastener successful WordPress Full Site Editor

On this page, you tin position each your template descriptions, adhd a caller template, aliases clear nan customizations you’ve made connected nan template to reconstruct its default settings.

Here’s what it looks like:

Clearing customizations for a template successful WordPress Full Site Editor

If you are editing a page aliases station utilizing nan artifact editor and want to alteration its template without going to Full Site Editing mode, past you tin besides do that.

Simply spell to nan page aliases station and unfastened nan Page aliases Post Settings sidebar. Then, find nan ‘Template’ conception wrong ‘Summary’ and click connected it.

Clicking Edit template connected a page to entree nan WordPress Full Site Editor for Templates

You tin usage nan dropdown paper to alteration nan page template aliases click ‘Edit template’ to entree nan template editor correct away. Alternatively, consciousness free to click nan ‘Add template’ fastener to create a caller civilization template from scratch.

How to Modify WordPress Patterns With FSE

In WordPress Full Site Editing, Patterns are ready-to-use sets of blocks that you tin insert into a page aliases post. When you create a pattern, it will beryllium added to your artifact directory, and you tin easy adhd it to immoderate station aliases page connected your website.

The Block Pattern directory successful WordPress artifact editor

Patterns are useful erstwhile you request to usage nan aforesaid group of blocks for aggregate pages aliases posts. Many group person utilized it to creation civilization call-to-action banners aliases image galleries successful their blog posts.

Plus, you person nan action to make these patterns ‘synced.’ This intends that if a shape is utilized successful aggregate posts aliases pages, past immoderate modifications you make will automatically use to each instances wherever nan shape is used.

On nan Patterns page successful WordPress Full Site Editor, you will spot a postulation of patterns.

The Patterns page successful WordPress Full Site Editor

The menus marked pinch a files icon incorporate a database of default patterns offered by your chosen theme. These are locked and cannot beryllium edited.

Below that, you’ll find ‘Template Parts,’ which are a typical type of shape utilized successful your website building and not needfully a portion of your page content. Examples see your website’s header, footer, remark section, and truthful on. These are each customizable.

To adhd a caller pattern, click nan ‘+ Create pattern’ fastener successful nan near sheet and take betwixt creating a caller shape aliases a template part.

Creating a caller template portion aliases shape successful WordPress Full Site Editor

If you are confused astir which 1 you should pick, past a shape is akin to a reusable block you tin adhd to your page aliases station content. Meanwhile, a template portion is much for illustration a group of blocks that are a portion of your template structure, for illustration a header, footer, aliases sidebar.

A template portion will automatically person a syncing ability, truthful each nan changes made to it will use crossed your website. On nan different hand, a shape tin beryllium synced aliases unsynced.

After that, you must sanction nan template portion aliases shape and take whether to make it synced. Once you’ve done that, simply deed ‘Create,’ and you’ll beryllium redirected to nan editing interface.

Naming a caller shape successful WordPress Full Site Editor

For much accusation astir creating and utilizing patterns, you tin cheque retired our beginner’s guideline connected really to usage WordPress artifact patterns.

When editing a page aliases template, you whitethorn want to set a artifact shape aliases template part, too. You tin do that correct successful nan editor without going to nan Patterns menu.

Simply hover complete nan shape aliases template part. After that, click ‘Edit.’ You will past beryllium redirected to nan Full Site Editor for that element.

Clicking Edit connected a shape aliases template portion erstwhile editing a station aliases page utilizing nan artifact editor

Tips to Make nan Most Out of WordPress Full Site Editing

Now that you are acquainted pinch nan basics of Full Site Editing, let’s talk immoderate tips and tricks to make nan astir retired of it.

Use nan Command Search Bar

With nan bid hunt bar, you tin navigate quickly to a definite portion of your website aliases execute actions to edit your web design.

This characteristic tin beryllium adjuvant if you want to find a circumstantial mounting successful nan Full Site Editor instantly alternatively of going done different buttons and menus.

If you are successful nan main paper of nan Full Site Editor, past you tin click connected nan magnifying solid icon to usage it.

Clicking nan magnifying solid icon successful WordPress Full Site Editor

Alternatively, you tin property Ctrl/Command+K connected your keyboard while successful nan editing interface.

Then, simply type successful what you want to find aliases do. For instance, you tin adhd a caller station aliases page without returning to nan WordPress dashboard.

Using nan Command Search Bar to adhd a caller station aliases page

Manage Blocks With List View

When you are editing a page, template, aliases pattern, you whitethorn find yourself adding truthful galore blocks that it’s difficult to support way of them all.

This is wherever nan List View tin travel successful handy. With this feature, you tin spot each artifact added to nan page, template, aliases pattern, including nan ones nested successful different genitor block.

To activate nan List View feature, each you person to do is deed nan three-line fastener astatine nan apical near broadside of nan editor’s paper bar. You will past spot each nan blocks utilized successful that page, post, template, aliases pattern.

If you want to configure a circumstantial artifact that’s wrong a group, row, column, aliases similar, conscionable click connected that artifact from nan List View. From there, nan artifact will beryllium selected, and nan toolbar will appear.

Activating nan List View connected Full Site Editor

Get Familiar With Keyboard Shortcuts

If you want to get faster astatine editing your website, see learning keyboard shortcuts. With shortcuts, you tin navigate done different buttons and settings utilizing your keyboard alternatively of going backmost and distant by moving your mouse.

The shortcuts utilized successful nan artifact contented editor will besides activity successful Full Site Editing. You tin cheque retired our database of WordPress keyboard shortcuts for much information.

Limitations of WordPress Full Site Editing

WordPress Full Site Editing has decidedly made it easier for caller WordPress users to customize their websites. Still, this characteristic has immoderate shortcomings.

For one, you will request a artifact taxable to usage it. There are galore caller artifact themes available, but location are not arsenic galore arsenic regular WordPress themes. If you usage WooCommerce, past your taxable choices whitethorn beryllium moreover much limited.

Plus, switching themes tin beryllium a hassle, arsenic you will person to group up nan taxable again and cheque if location are compatibility issues pinch your WordPress plugins.

Furthermore, a batch of your customization relies connected nan options offered by your WordPress theme. This tin limit your productivity erstwhile building your site.

How to Use a Full Site Editing Alternative

If you are looking for a WordPress Full Site Editing alternative, past you tin cheque retired SeedProd. It’s a powerful page builder plugin and taxable builder pinch 300+ mobile-friendly templates to create immoderate benignant of website.

The drag-and-drop builder is easy to use, and location are 90+ page blocks disposable for contented elements. There are besides dozens of pre-built sections, for illustration calls to action, that are optimized for conversions, truthful you won’t request to creation these elements from scratch.

SeedProd taxable builder

You tin publication our SeedProd review and our article connected how to create a civilization WordPress theme for much information.

We dream this beginner’s guideline has helped you study really to usage WordPress Full Site Editing (FSE). You whitethorn besides want to cheque retired our database of nan best WordPress page builder plugins and our article connected common WordPress artifact editor problems.

If you liked this article, past please subscribe to our YouTube Channel for WordPress video tutorials. You tin besides find america on Twitter and Facebook.