The Many Features of the Gutenberg Editor (Block Editor)

Please note that this Training is for anyone who is familiar with WordPress and would like to learn how to use the Gutenberg Editor.

Say Hello to the New Editor. The entire editing experience has been rebuilt for media rich pages and posts. Experience the flexibility that blocks will bring, whether you are building your first site, or write code for a living.

Gutenberg is available as part of WordPress 5.0 and later. The Classic Editor plugin allows users to switch back to the previous editor if needed.

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.

The new block-based editor won’t change the way any of your content looks to your visitors. What it will do is let you insert any type of multimedia in a snap and rearrange to your heart’s content. Each piece of content will be in its own block.

Without being an expert developer, you can build your own custom posts and pages.

Below some Examples of the many Blocks you can Use with Gutenberg

This is a Cover Image

You can easily add a cover image or video with overlays. Choose the overlay colour and the opacity of the overlay.

This is a Heading

You can choose a Heading between H1 (large) all the way to H6 (smaller heading).

This is a Paragraph

You can choose the font size, background colour, text colour, bold, italic, center it, etc…

The Gutenberg Editor/ Block Editor is so easy to work with and it has so many features!

Font size, background colour, text colour and so much more

Need help in choosing a colour? Go to HTML Color Picker >

Add an Image

You can update image dimensions and chosse diferente link settings. Easily insert a caption.

Add a Gallery

Instead of just one image you might choose to display your photos in a gallery. You can choose the number of columns (up to 4), link settings, enter a caption, etc…

Click an image below to view it in a carousel

• 

• 

• 

• 

• 

Add a Video

Tip: to prevent ads from showing on the video, share the YouTube video as custom HTML (rather than copying and pasting the video’s URL).

Add Media and Text

You can choose font size and colour settings for background colour and text colour

Add a Table

Easily add columns and rows to the table.

	Column 1	Column 2	Column 3
Row 1
Row 2

Add Custom HTML

Add custom HTML – in this case we will be adding a Google map:

Add a List

Adding a ‘Bulleted List‘:

• Gallery Styles: tiled mosaic, circles, square tiles or tiled columns
• Gallery Settings: number of columns, link to attachment page, media file, or none.

or we can add as a ‘Structured List‘:

1. Gallery Styles: tiled mosaic, circles, square tiles or tiled columns
2. Gallery Settings: number of columns, link to attachment page, media file, or none.

Add a Separator

---

Add a simple Subscriber Form

Add a MailChimp Form

Add a Contact Form

You can include name, email, telephone, website, message and other fields in your contact form.

---

Easily Add a ‘Buy Now’ Button

If you sell online, you can easily add a ‘Buy Now’/ ‘Add to Cart’ button

---

Details on the Training Course:

Refreshments: Snacks and refreshments will be served.

What to bring: a lap-top and a mouse (a tablet is useless for this type of training). There is WiFi at the venue.

Hands-on: This is a hands-on Event. During this workshop you will create a complete page and/ or a post using the Gutenberg Editor. Duration: 9am – 1pm