For the past few weeks, I've been sharing some quick and dirty tutorials on how to use the new Gutenberg interface for WordPress: how to create posts and pages , how to add lists and how-tos, and how to format your blocks. On November 19th, WordPress will be forcing everyone currently using the “old” WYSIWYG (What You See Is What You Get) Classic Editor to switch to Gutenberg.
You can see more Gutenberg tutorials here.
Gutenberg is going to feel very different but, you should probably learn to use it because it's not going away. Today, I'm showing you how to use layout elements in your post in Gutenberg.
How To Use Layout Elements In Your Post Using Gutenberg for WordPress
Be sure to take a moment and install the Gutenberg plug-in editor. Here's how to format blocks in your posts in Gutenberg for WordPress.
How To Edit Or Create A Button Using The Gutenberg Editor
Log in to your WordPress blog.
Click on “Posts” in your WordPress dashboard.
Click on “Add New”. You should see the Gutenberg Editor.
Write your blog post’s title in the box labeled “Add Title”.
Write your post in the box labeled “Add Text or Type / To Add Content” in your Gutenberg Editor.
Now you can opt to create or edit your post using the Gutenberg Editor.
To edit/create your blog post using the Gutenberg Editor, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.
Big Fat Tip: You can also create new blocks by clicking on the
“+” in the upper left hand corner. There's also some “Undo” and “Redo” arrows there. Plus, an icon of an “i” with tons of information including: a word count, number of headings, number of paragraphs, number of blocks, and a breakdown of your title and headers.
Use the search bar to look for the Layout Elements option or scroll down and click on the arrow next to the Layout Elements option. This will open up icons representing all of the options available to you for this option.
Under the Layout Elements menu, click on the icon that looks like a rounded rectangle (Button). When you add this, it will create a block with options to create a button embedded in your post.
Within the block, you can add the text you want directly on your button (it's the dark gray button – just type in your text) and add a link for the button. There is also a toolbar that allows you to change the alignment and font style.
In the sidebar on the right, you'll be able to change the button's color and the color of your font. You can also change the style of the button (rounded, outline, squared) under the “Styles” dropdown menu.
How To Create Columns Within Your Post
To create a blog post using Columns within your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.
Use the search bar to look for the Layout Elements option or scroll down and click on the arrow next to the Layout Elements option. This will open up icons representing all of the options available to you for this option.
Under the Layout Elements menu, click on the icon that looks like a row of three columns (Columns). When you add this, you'll be able to create columns within a post. You'll also be able to add other blocks within the columns by clicking on the “+” within the columns that appear.
Click within the column to add text. The right sidebar allows you to change text settings and color settings.
How To Add Media and Text Within Your Post
To add Media and Text within your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.
Use the search bar to look for the Layout Elements option or scroll down and click on the arrow next to the Layout Elements option. This will open up icons representing all of the options available to you for this option.
Under the Layout Elements menu, click on the icon that looks like a rectangle block with lines next to it (Media & Text). When you add this, you'll be able to incorporate media and text blocks within your post.
Within the Media Block, you can upload or add media from your Media Library. Use the toolbar to change the alignment of the media and text blocks.
The sidebar on the right will allow you to change the settings/look of the media and text block in mobile (under “Media & Text Settings”). You can also change the color settings.
Within the Content Block, you can add a title and text. Use the toolbar to change font styles, text/title alignment, add shortcodes, and add links.
The sidebar on the right will allow you to change the text settings and color settings.
How To Create A “Read More” Link Within Your Post
To create a blog post using the “Read More” feature, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.
Use the search bar to look for the Layout Elements option or scroll down and click on the arrow next to the Layout Elements option. This will open up icons representing all of the options available to you for this option.
Under the Layout Elements menu, click on the icon that looks like a horizontal line with dashed lines below (More). When you add this, you'll be able to incorporate a “Read More” link within your post.
In the right sidebar, you can opt to “Hide the teaser before the ‘More' tag” by switching the toggle on.
How To Add A Page Break Within Your Post
To add a Page Break within your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.
Use the search bar to look for the Layout Elements option or scroll down and click on the arrow next to the Layout Elements option. This will open up icons representing all of the options available to you for this option.
Under the Layout Elements menu, click on the icon that looks like a piece of paper with dashes through it (Page Break). When you add this, you'll be able to incorporate a Page Break within your post.
How To Add A Separator Within Your Post
To create a bit of code within it's own block in your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.
Use the search bar to look for the Layout Elements option or scroll down and click on the arrow next to the Layout Elements option. This will open up icons representing all of the options available to you for this option.
Under the Layout Elements menu, click on the icon that looks like a line (Separator). When you add this, you'll be able to incorporate a Separator within your post.
Make changes to the separator's look under “Styling” in the right sidebar (short line, wide line, and dots).
How To Add A Spacer Within Your Post
To create a spacer within your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.
Use the search bar to look for the Layout Elements option or scroll down and click on the arrow next to the Layout Elements option. This will open up icons representing all of the options available to you for this option.
Under the Layout Elements menu, click on the icon that looks like a double-sided arrow (Spacer). When you add this, you'll be able to incorporate a Spacer within your post.
Make changes to the spacer's “Height in pixels” under “Spacer Settings” in the right sidebar.
Leave a Reply