Jump to section
Blocks offer an intuitive way to visually build pages and posts.
How to add Blocks
There are two quick and easy ways to add Blocks to your page or post.
Option one – Toolbar “Add Block”
- Click the black + (Add) button on the top left WordPress toolbar (example image to the right)
- Use the Search function or scroll down to view the different types of content Blocks available to insert – from headings & paragraphs through to images and video embeds.
- Click on the Block you wish to insert. It will automatically be added to the bottom of the page.
Option two – On-page “Add Block”
If you want more control over where you are inserting the Block, you can insert them directly into the area you are working on.
- Hover above or below an existing block with your cursor
- A black square + (Add) button will appear (example image to the right)
- Click this and select the Block you wish to insert
- Your Chosen Block will be inserted into this space.
Editing Blocks
List View Functionality
Sometimes, it can be difficult to select the Block you want to edit because there are lots of Block elements in close proximity. It’s easy to select the wrong block, which is frustrating.
To sidetrack this issue, take advantage of the List View available in the top left hand side of the WordPress toolbar (as shown in the example image to the right).
- Click the (List View) button with three horizontal lines.
- View all of the Blocks in your page or post in list view.
- Click on one of the Blocks to instantly edit.
- Click on the List View button again to see nested Blocks within Patterns or Layout Grids (as shown in the example below).
Block Settings
Clicking on the block you want to edit, or using the List View, will bring up Block Options & Settings.
(Example: Paragraph Block – clicking the block reveals the Options & Settings bar)
From here, you can (left to right):
- Change the Block style or type (e.g change a testimonial in a paragraph Block into the Quote Block)
- Drag and drop
- Move the block up or down
- Change the alignment
- Bold text
- Italicise text
- Add links
- The downwards arrow open a list of additional text functions (see in example image to the right)
- The three dots open More Options where you can copy, duplicate, edit, delete or create a Reusable Block (more details in next section – Create Reusable Blocks)