One of the great things about the latest WordPress web designs I recommend is that you can edit the design of your website using the same basic techniques that you use to edit a page or a blog post. However, that can also be a source of confusion. Let me make it as clear as possible.
When you are logged into your website as administrator and visit any page, you will see two different edit buttons at the top of the page, “Edit Site” and “Edit Page.” Confession: I often click on the wrong one, winding up in the Site Editor (editing the design) when I really wanted to edit the content of the page.
Note: If instead of an Edit site menu option you see one that says Configure, you have an older WordPress theme that doesn’t support the Site Editor and provides more limited design options.
I suspect many new website owners click Edit Site by mistake and wonder “what happened to the content of my page?”
Because the Site Editor is meant for editing design elements that remain the same even when the content of pages, blog posts, and events change, it displays only placeholders for the page title and page content. However, this is the view where you can edit the header, menu, and footer of the website. I’ll go into more detail about that later.
Most of the time, if you want to change your home page, you will want to click on Edit Page to edit the content of the page, not the design that wraps around it.
The point of this blog post is to explain when to use each of these two editor modes.
Since this is a long post, here is a quick table of contents:
- Every theme contains multiple templates
- Most of your content should be in pages and other documents
- Block editor basics and inserting blocks
- Toolbar and sidebar controls for block options
- The Navigation block (menus)
- Layout blocks for templates
- Using the Document Overview to understand hierarchies
- Summary and other resources
Every theme contains multiple templates
In this case, the website has a Front Page template that is different from the Page template for other pages and from the Post template for blog posts. A block-based theme defines several standard templates, but you can also create your own. For example, you might have a standard page template with a sidebar and an alternate one with no sidebar.
Most templates will include a Header and a Footer, plus content that fits in between. For a Page, Post, or RSVP Event template, those inside blocks will include a Title block and a Content block, and they may include other placeholders like Featured Image and Post Date.
For a blog listing, or any other template that provides a listing of other content, the Content block is replaced by a Query Loop block that controls how many posts should be displayed and how they should be arranged. The search results page should also include a Query Loop block.
In addition, every site includes Page: 404 template, where 404 is the web error code for “page not found.” Instead of showing an ugly error, you can redirect the web visitor to a page that invites them to search for the content they were looking for. In this case, I’ve further customized it to also include a listing of upcoming events.
The Site Editor and related site design options for fonts, colors, and page width can also be accessed from the WordPress dashboard — the Editor item under Appearance. The Themes screen is where you would go to switch to a different theme of predesigned templates, each with their own customization options.
Most of your content should go in pages, posts, and events (not templates)
Having the power to change the design of your website is great, but once you’ve settled on a design, you should stick with it until there is a good reason to change it. The design tools are meant to let you establish a consistent design for all your content so everything fits together.
Most of the time, you want to work with the “regular” WordPress editor for editing the content of your pages and other content. That’s where you would edit the main title, paragraphs, headings, and images of your post.
Let’s revisit the Club Awesome home page. In this example, a featured image for the page has also been specified as one of the page properties in the editor sidebar. If you look at the Front Page design template shown above, the gray block above the title is a placeholder for the featured image.
Specifying a featured image is a way of highlighting a single image that will be given special treatment in your layout, as opposed to images within the body of the page or post content. Featured images are also commonly used in blog listings and event listings for visual interest.
Other than the featured image, most of the content of your page will be determined by the text you type and the media you insert into the main content editing area.
Block editor basics for both content and design
What the content and design editors have in common is the organizing principle of content “blocks,” which is why the modern WordPress editor is sometimes called the “block editor” (a.k.a. “Gutenberg,” a reference to the open source software effort to keep improving the editor).
When you create a new page, the editor displays a prompt to enter a page title, followed by a first blank line with “Type / to choose a block” shown as a placeholder.
If you don’t choose a block, and just start typing, the editor will default to inserting paragraph blocks. For variety and organization, you will probably want to insert headings, images, and image galleries. You might also want to include container blocks, for example: Group (assign common properties like background color to multiple blocks) or Columns (arrange content in 2 or more columns).
The page design templates you work with in the Site Editor tend to make more elaborate use of container blocks to create page layouts. There are several blocks like Content, Title, and Featured Image that are intended for use in templates, not page or post content. But templates can also include less abstracted content blocks like the Image block.
In both cases, the process of inserting and customizing blocks is the same.
There are several ways of inserting blocks:
If you type the “/” character at the beginning of a blank line, followed by a search term, the editor will display matching blocks. In this example, I start typing “image” and get the Image block and several variations like the Gallery block.
Another method is to click the “+” button at the end of a blank line or in between any two blocks. Clicking on the button pops up a search dialog box you can use to locate the content block you want.
There is one more + button at the top left of the page that you can use to open up a longer list of options. This version also allows you to insert Patterns (pre-built layouts with placeholder content) and Media (your images as well as images from open source libraries).
Add Before / Add After
Although I showed above an option for hovering your mouse between any two blocks to get the “+” button, often I find it easier to use the Add Before and Add After options displayed when you click the three-dots menu at the end of the toolbar for any block. This just opens up a blank line for you to type a paragraph or text or insert another block.
Block toolbar and sidebar
Each block will have a toolbar and sidebar that allow you to adjust properties specific to that block.
An Image block toolbar contains controls for alignment, link, caption, and a button for replacing the image.
The sidebar provides many options altering the image’s size and proportions. If the sidebar is not displayed, you may have to click the button in the upper right corner of the screen that controls whether it is shown or hidden.
Some block sidebars are organized into two tabs, one for basic settings and a second for additional styling options. Click on the half-filled circle to display the styling options. In the case of the image block, the styling options are where you would set a margin around the image, add a border, or specify a border radius (rounding of the corners).
The humble Paragraph block has its own settings, which are a little simpler. The toolbar lets you select text that should be aligned left, right, or center, marked bold or italic, or contain links. The sidebar will let you change the font size, or apply a color or background color.
The Navigation block
If you are basically happy with the out-of-the-box design of your website, you may not need to work with the Site Editor very often. However, you will probably use it to edit the Navigation block — the menu of links visitors use to find their way around your website. When you add a new page that you want to include on the menu, editing the Navigation block is how you do it.
Although it’s possible to have use multiple Navigation blocks for different lists of links, typically you will have one primary Navigation block menu at the top of the page.
Open the Site Editor and click on the Navigation block within the header. You may have to click twice, once to signal that you are editing the Header component (explained later) and a second time to select the Navigation block.
Confession time again: I often click one time too many times and wind up selecting the individual menu item block within the Navigation block.
In this example, I’ve selected the Page Link block for the home page, but I can navigate up a level to the Navigation block by clicking on the compass icon at the start of the toolbar.
What you’re aiming for is this view, where the menu item and submenu blocks are visible in the sidebar, with a + sign for adding more at the end of the list:
The sidebar shows the menu items arranged vertically, even though my top-of-the-page menu is horizontal, but it makes it easier to see the order of menu items and any hierarchy. You can drag and drop items up and down the list or into submenus a lot easier within the sidebar as opposed to within the editor window.
When you click on the + button at the bottom of the Navigation block sidebar, the suggested blocks include the Page Link block (link to a published page of your site) the Custom Link block (link to any web address). Other elements that you can insert include a Search block and and Social Media Icons.
New items will be added to the end of the list, but you can drag-and-drop to move them up or down the list. You can also turn any menu item into a submenu, so that other menu items can be indented beneath it.
For more, see the WordPress documentation.
Layout blocks for design templates
Above, I mentioned container blocks, or layout blocks, as being particularly significant for the design templates you edit in the Site Editor. Some of the most important ones include:
- Group – a generic container block for applying properties such as margin, border, padding (the space between the border of the content and the content itself), content width, content alignment, and background color. In a template, the Content block is often placed inside a Group with a maximum width to prevent it from paragraphs from stretching comically wide when viewed on a large screen.
- Columns – organize content into two or more columns, where the amount of horizontal space allotted to each column can be customized.. Within a page template, columns might be used to define a main content area and a sidebar.
- Row – arrange blocks, horizontally, with control over whether they should be spaced evenly apart or aligned to the right or left of the page.
- Grid – define a grid of rows and columns, with the option of having blocks placed within the grid take up multiple rows or columns, as in a “masonry layout” (example below from the documentation)
Experienced web developers will recognize these options as mapping to Cascading Style Sheet options like CSS Grid and CSS Flex (used for the row and columns blocks), but the editor makes these layout tools available without the need to write CSS code. It is still possible to add custom CSS if you have those skills.
These can all be used within the body of your post, too, but they tend to be used in more complex arrangements within a template.
In addition, regions of the page can be defined as reusable components, known as Template Parts, like Header and Footer. For example, WordPress themes typically use the same Header and Footer for most templates. However, it’s also possible to have a different header component that is used, for example, only on the Front Page template.
Use Document Overview to see hierarchies
The nesting of blocks within blocks can get quite complicated. To visualize these arrangements better, click the Document Overview icon at the top left of the Site Editor window:
From these top-level components, you can click the right arrows within the document overview to see the nesting relationships. Here is what that looks like for the Club Awesome website, with the arrangement of Site Logo, Site Title, Navigation, and Site Tagline within the Header, Columns to contain the Title and Content blocks, with a narrower right hand column for the sidebar content.
Here is a zoomed-in view that makes it easier to see the nesting of blocks within blocks, including the contents of the Navigation block (labeled “top”).
Summary and other resources
If you learn better from a video tutorial, I have two from my video course that cover the same basic material as this blog post:
Edit Your Home Page, Add a Blog Post
Add Pages, Change the Design
While my tutorials have the advantage of being specific to Toastmasters, here are some others you might want to explore:
- Learn WordPress course on using and customizing block themes
- Explore the Learn WordPress site for more tutorials.
- Documentation of the Styles options in the Site Editor how to specify default fonts, colors, and layouts, or add custom CSS code.
- Jamie Marsland recreates 10 Famous Websites in 30 Minutes – great for inspiration. In some cases, he uses plugins to create effects that can be accomplished with core WordPress today (but weren’t available when he recorded the demo). See also his tips on fancy layouts using negative margins.
- Guide to the Query Loop block for blog listings. The RSVPMaker events plugin used for meeting agendas and other club events provides an RSVPMaker Query Loop block with similar options, except that it displays events in their calendar order.
Final Note on “Page Builder” Plugins Like Elementor
Final note: what about page builders like Elementor, Divi, and BeaverBuilder? This is a question I occasionally get from experienced web developers, as opposed to Toastmasters who are just learning WordPress.
These plugins, often bundled with specific themes, became popular because for a long time WordPress didn’t have its own design system. Some web still prefer them, but I never learned to love them the way those people did.
Therefore, I can’t provide support for Elementor the way I can for the Site Editor. I make the free version of Elementor available on Toastmost, because it’s been requested by several clubs, but I don’t recommend it. Whenever I take over a site that was created using Elementor or another page builder, the first thing I do is rip it out if I have the option.
In my opinion, page builders add another, unnecessary level of complexity on top of WordPress. Because many Toastmasters club and district webmasters are new to WordPress, I think that even if you know your way around Elementor, your successor will probably find it easier to come up to speed on WordPress basics and the Site Editor than to learn WordPress and then learn Elementor on top of that.
Besides, the core WordPress team has been putting a lot of work into performance enhancements for block themes, and you miss out on the benefit of that work if you use something else.
To the extent that page builders evolve to work with the Site Editor, giving users a head start, I’m all in favor of that. The standard WordPress methods are arguably still playing catch up with some page builder features. But I don’t recommend them as a substitute for learning core WordPress.
