Asley Arviola – Inventive Horizons

WordPress has a powerful new editor that has been out for almost a year now. As they have been making changes we have been using it more often for new WordPress posts and quicker and easier blogging. Jump in with me as we look at the many ways you can use Gutenburg editor for your next post!

To get started there are a few things you should know about our typical setup.

We use Divi Builder by Elegant Themes
We use Easy Affiliate Links even when the links are not affiliate links
This document is an effort by several people
- Asley Arviola
- Nathan Johns
- Bryan Arandia
- Spencer Heckathorn

Basics
How to Make Paragraphs

If your setup is similar to ours you will want to make sure you are in the default editor. At the top it will say either “Use The Divi Builder” or “Return to Default Editor.” You are going to select “Return to Default Editor. Before we get started thought I’m going to breakdown some of the basics of the Gutenberg editor.

However, if you are working on a WordPress site that is not using Divi Theme or Divi Builder your should see this once you get to the new post screen.

[pic of new post on site without Divi]

Follow along in this guide and I will show you the basics of Gutenberg and give you a preview (see button 11 on the next screen) after we make each set of changes.

1. Basics of Gutenberg

I’m going to start by showing you the most basic elements of Gutenberg on WordPress. You will need to know these so you can navigate the post and work with all the other things I’m about to teach you. Come back to this section as a reference when needed.

WordPress Logo: Takes you back to the Posts area to view your site’s complete post list. Basically this is how you exit the Gutenberg editor but before you do you might want to check out numbers 11-13.
‘Add block’ button. This is going to insert the block of your choice wherever the cursor is located. This can be useful if you are trying to put a block in between 2 other blocks or are otherwise not having an easy time getting the block you want.
Undo button, this works as ctrl+Z works inside word does. If you are not familiar with this shortcut it will undo the last action you have done giving you an easy way to “back up”.
Redo button, sometimes you might use undo to look at how something looks or to make sure you did what you were intending to do. If this is the case you may now wish to redo what you have now undone (say that three times fast). If this is the case this button will allow you to go back to your original state.
Information button aka ‘Content Structure’, this button is very useful if you are trying to hit a word count or need to navigate a large document. The resulting popup from clicking the ‘i’ will give you this information along with a document outline that allows you to quickly and easily click to different points in the post to help during the creation phase of making your post.
‘Block Navigation’ is just like it sounds. Quick and easy way to click between the current block you are on and the next block in the pages list.
‘Tools’ to be completely honest I have not had a need for this one as of yet. But it allows you to select several blocks as elements to move around on the page by grouping them together. What I do is left-click drag my mouse to select several elements then select the block option “group” and then move them around. Click here to read about this in detail.
Post Title. This is where you put the title for your post. It will automatically be H1 item on the page and be used for the ‘URL Slug’
Main page block area. This is a single block and the default ‘Paragraph’ block which you can read about below.
‘Document’ settings area. I have intentionally left this with little detail as it is covered in detail later on, but the basics of the settings you will change before publishing are found here.
Preview, click this button to preview the post, and see what it will look like before you make it public.
Publish, make your post public to the world!
‘Save Draft’, this is missing in my picture because there needs to be some content before it will show up, and the option here can change and sometimes will say ‘Save as Pending’, or if you have already published the post then it will say ‘Switch to Draft’. I will cover this in more detail, but it is important to know before you click on #1 from this list (WordPress logo), close the tab, close the browser, or click the back button. Make sure you click on the “Save Draft” and keep doing it often. This will save you literal hours of work and likely add years to your life as you will have less frustration in your WordPress experience.

2. How to Make Paragraphs: Most Basic Element

Start by selecting the a paragraph block to insert it.

You can also simply start typing and the paragraph block will automatically be selected.

Type or paste the content you need into the block. Once you have a few lines we can start with the next part on formatting. Which will allow you to make your post look good and simpler to read.

3. How to Format Your Post: Look and Layout Options

Once you have typed in some content you can start to change the layout, look, and feel of the text to match your needs. Here we start with the alignment just like in a word document you can select to align left (default), align center (your text will be aligned to the center of the block on the page), align right (your text will align to the right of the block on the page).

Now that you know a little about the alignment options we can look at how to Bold and Italicize the selected text. Start by selecting the text you wish to change and then for BOLD text select bold shown in the picture as #1 and also indicated in Gutenberg by the letter ‘B’.

In the same fashion, ITALICS text is shown in the picture as #2 and indicated in Gutenberg by the letter ‘I’. Select the text you would like to change then click the ‘I’ to change that text to italics.

To find more controls click this button.

1. Default unjustified paragraph.
2. Justified paragraph.

To change the text-size of the paragraph just go to the text settings from the left, then choose between this two options:
1. You can choose between small, normal, medium, large, and huge.
2. Input a custom text-size.

3. Adding Links in Text

You can also add links, and like mentioned before I use Easy Affiliate Links because it allows for easy click tracking, and can help me understand when a resource is helpful or not.

Mark the text you want to be a link.
Click the link button.
Input the link address (enable the “Open the new tab” if you want to redirect it into other tab when clicked.

To add a hyperlink with tracking

Select the text you want to be a link
Click the blue “link” button it looks like a chain that “links” 😉
Choose the link you want to attach to the selected text and click the blue link box as seen in the picture
Done, the text will turn into different color and look like it is underlined indicating the linking worked

Sometimes the linking doesn’t work the first time if your text didn’t change colors make sure you have the right text selected and repeat the steps to try the linking again.

To insert an in-line image, click this button.

You can choose either to upload a image file or pick an already uploaded file on Media Library.

How to Make Titles

To insert a title just click the “Heading” button.

To change the size of the title, just go to the Heading settings then choose from the six options. Text size descends from left to right.

This is how your Title will looks like with different header sizes.

How to Make Tables

1.Input the desired the number of column.
2. Insert the desired number of rows.
3. Then click this button.

Your tables will look like this with different alignment

To change the table-style, just click this button then choose between the two options.

The default-style table and the stripe-style table looks like this.

You can align elements inside table cells with this threee options showed above.

You can add or delete either a row or a column in a table.

At default, table width expanses as the elements inside it becames larger/longer. You can change this by enabling “Fixed width table cells” option at the table settings, in this way the width will always be equal.

You can also enable/disable the header and footer section of the table by clicking the options above.

You can change the table background using the Color settings. You can choose between four options; subtle light gray, subtle pale green, subtle pale blue and subtle pale pink. In the image above it is set to subtle light gray.

How to Use the Images Feature

You can choose three options on how you like to add an image. You can choose to upload an image file from your computer, choose an already uploaded image on your Media Library or insert an url of an image.

After uploading your image it will looks like this.

You can change your image resolution using the “Image size” setting, where you can see three options; thumbnail, medium and full size. Take note that the images resolution can affect the page’s loading speed. Thumbnail has the smallest byte-size followed by medium then full size. Choosing “thumbnail” for images with short width and height like header logos is the best choice.

You can change the image dimension by moving the blue circles beside the image or manually typing the desired width and height of the image on the red box as shown in the image above.

There are two different image styles you can use, default style and rounded. You can also set the default style to “Default” or “Rounded” for new images to lessen your works.

This is how “Default” and “Rounded” images will looks like.

You can also add an alternative text for your image. Alternative text will show up when your image failed to load.

Just like texts, you can also align images from left, center, and right.

Your aligned images will look like these.
1. Align Left
2. Align Center
3. Align Right.

If you want to replace the image with a new one, you just need to press this button and choose from the three choices; “Open Media Library” where you will look for replacement on the already uploaded images, “Upload” to upload new image from your computer or “Insert from URL” where you will input the link address of an image from the internet.

You can also transform your images into different formats; Gallery, Slideshow, Tiled Gallery, File or into a Group.

You can change the order of the pictures by clicking the arrows inside the green box of the image above.

You can align galleries in three ways; Align left, Align center or Align right.

This is how galleries will look like with different alignment.

Adding a caption on each pictures in a gallery is also an option. It will also add a gradient effect at the bottom of the picture to make the caption more visible.

Customizing the number of columns in your gallery can also add aesthetics. Here you can only make three column gallery. Enabling “Crop images” will fit your images to the boxes.

When you trasform your images into a slideshow it will looks like this.

You can change the transition effects of the slideshow into “Slide” or “Fade”. You can also maximize your page speed by changing your image-size from Full Size to Large, Medium or Thumbnail.

Enabling the Autoplay option will automatically swipe your images from time to time. You can also adjust the time delay from 3 secs (slowest) to 2 secs (medium) or to 1 sec (fastest).

You can always update and edit your slideshow using the button as shown above. You can add more picture or even delete some and add captions to each one of them.

Tiled gallery in the other hand is another way to organize your images.

You can transfrom your images inside a tiled gallery into rounded ones by typing your desired roundness in pixels. For example in the image above the tiled gallery is set to have the maximum roundness which is 20 pixels.

You can style your tiled gallery with four options; Tiled mosaic, Circles, Square tiles, or Tiled columns.

This is how Tiled mosaic style and Circles style will look like.

This is how Square tiles style and Tiled columns style will look like

How to Embed PDF

A plugin was needed to make this doable since WP and DIVI both are not great at it. For now the plugin is called PDF Embedder. I will update if we find a better solution.