Editing an existing page
To edit and existing page you can select its name in a „Show all Pages section” or click „Edit this Page” icon when you in a page-view mode. Page will switch to a Block Editor Gutenberg where you can edit your content. We’ll get back to Gutenberg editor later in this guide.
Adding new page
To add new sub-page click on a „+” icon and select „Page”. The Gutenberg editor will appear with blank content and 3 predefined blocks (top menu, page header and footer)
0:11
Add page title. This title will be used to identify your subpage in WordPress CMS.
0:28
Select cover for header of your subpage. You can select color or image. Image can be color-coordinated to your brand colors and can be displayed as parallax scroll pseudo-animation. Here, you have to write your page title which will be displayed in header area
Gutenberg Editor
Introduction
Gutenberg introduces a brand new editing experience for media rich pages and posts. Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.
Basics
Editor window is divided into two parts:
– Main view – contains content of your subpage, post or reusable block
– Right side – contains options which are dynamically changed depending on which block is selected.
0:04
Page title used in WordPress internal naming.
0:05
Predefined block „Top-navigation-bar”.
It contains navigation menu and logo. It’s displayed on every page of your website. You can edit it in „Reusable blocks section” (We’ll get back to it later in this guide.)
0:11
This is your page/post header. You can customize it in option on the right side of page.
0:55
This is your page/post content area. You can insert here new block with text, images, etc. On the right side (in options panel) you can select additional settings for selected blocks.
1:03
This floating buttons provide additional options for blocks. You can format your text, change color, etc.
1:12
Predefined block „Footer”.
It contains bottom navigation menu contact details and social icons. It’s displayed on every page of your website. You can edit it in „Reusable blocks section” (We’ll get back to it later in this guide.)
Adding Blocks
Place your txt cursor where you want to add block and click „+”. You can also select the block after which you want to add a new one and select „Insert After” from block toolbar. When you select „+” icon a list will open on the left containing all blocks you can use for you content:
Building layouts
Blocks can be nested so you can design a column based layouts. Also, you can easily drag&drop and switch order of blocks:
Duplicate blocks and block hierarchy
You can easily duplicate blocks using block toolbar.
Additional, you can view block hierarchy to see nested blocks easily:
Selecting parent block in hierarchy
You can select parent block in hierarchy using block toolbar:
Changes history
If something goes wrong when you edit your content, you can always revert your page/post to earlier version: