Creating a Layout with Blocks

Introducing the Gutenberg Block Editor

In WordPress 5.0, the classic content editor was replaced with a brand new block editor, known as Gutenberg. Since then, several of our readers have asked us to create a comprehensive tutorial on how to use the Gutenberg block editor in WordPress.

The new WordPress block editor offers a simple way to add different types of content to your posts and pages. The new WordPress Block Editor is a totally new and different way of creating content in WordPress. Gutenberg allows you to completely customize your muPages site to your specifications. How to use the new WordPress Block Editor It is highly recommended that you take the time to learn the new WordPress Block Editor, WordPress Editor: Working With Blocks

The following two tables provide a list of blocks that are available for your use in order to create your muPages site, and customize the appearance to make it your own. The first table introduces all of the default WordPress Blocks that were introduced with the introduction of the Gutenberg Block Editor.

The second table provides additional blocks to further aid in the customization and styling of your muPages site. Through the installing of the Kadence Blocks WordPress plugin, Kadence Blocks provides even more blocks to assist you while you are creating your site.

WordPress blockDescription
AudioEmbed a simple audio player.
ButtonsDrive conversions with beautiful buttons.
CategoriesDisplay a list of all categories.
ClassicUse the classic WordPress editor
CodeDisplay code snippets that respect your spacing and tabs.
ColumnsAdd a block that displays content in multiple columns, then add whatever content blocks you’d like.
CoverAdd an image or video with a text overlay – great for headers.
EmbedEmbed videos, images, tweets, audio, and other content from external sources.
FileAdd a link to a downloadable file.
GalleryDisplay multiple images in a rich gallery.
HeadingIntroduce new sections and organize content to help visitors (and search engines) understand the structure of your content.
ImageInsert an image to make a visual statement.
Latest postDisplay a list of your most recent posts.
ListCreate a bulleted or numbered list.
ParagraphThe building block of all narrative.
Pull quoteGive special visual interest to a quote from your text.
QuoteGive quoted text visual emphasis.
MoreAdds a “Read more” element
SeparatorCreate a break between ideas or sections with a horizontal separator.
ShortcodeInsert additional custom elements with WordPress shortcodes.
SpacerAdd white space between blocks and customize height.
Kadence BlockDescription
Row/LayoutCreate rows with nested blocks either in columns or as a container. Give style to your rows with a background, overlay, padding, etc.
TabsCreate custom vertical or horizontal tabs with advanced styling controls. Each tab content is an empty canvas able to contain any other blocks.
Info BoxCreate a box link containing an icon or image and, optionally, a title, description and learn more text. Style static and hover colors and even show a box shadow.
CountdownIncrease your conversions by adding a sense of urgency to your offering. Pro includes evergreen campaigns as well
PostsDisplay a clean grid of posts anywhere on your site, great for your home page where you want to tease your blog.
Table of ContentsAllow your readers to navigate your content easily with a table of contents block. Includes smooth scroll to anchor
FormOur powerful form block allows you to easily create a contact or marketing form and style it within the block editor.
Advanced GalleryCreate stunning photo galleries, carousels, and sliders! Enable custom links, captions, and more. Plus you can select the image size for performance.
AccordionCreate beautiful accordions! Each pane is able to contain any other block, customize title styles, content background and borders.
TestimonialsCreate confidence in your brand or product by showing off beautiful and unique testimonials. Display add as a carousel or a grid.
Advanced ButtonsCreate an advanced button or a row of buttons. Style each one including hover controls. Plus you can use an icon and display them side by side.
Icon ListAdd beautiful icons to your lists and make them more engaging and attract viewers attention. Over 1500 icons to choose from and unlimited styles.
Space/DividerEasily create a divider and determine the space around it or just create some space in your content. You can even define the height per screen size.
IconChoose from over 1500+ SVG Icons to add into your page and style the size, colors, background, border, etc. You can also add multiple icons side by side.
Advanced HeadingTransform your headings to Advanced Headings and customize the font family (even google fonts), color, size, style and highlight words.