{"id":20527,"date":"2018-12-13T11:45:37","date_gmt":"2018-12-13T09:45:37","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=20527"},"modified":"2023-12-03T14:32:46","modified_gmt":"2023-12-03T12:32:46","slug":"create-a-landing-page-with-the-block-editor-wordpress","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/create-a-landing-page-with-the-block-editor-wordpress\/","title":{"rendered":"How to Create a Landing Page With the Block Editor in WordPress"},"content":{"rendered":"\n

Thanks to the WordPress “block” approach, you have the ability to set up hero sections, call to actions (CTAs), and other important elements of a landing page in WordPress.<\/p>\n\n\n\n\n\n\n\n

\n
\n

To help you take advantage of these features, we’re going to show you exactly how to create a landing page with the block editor<\/a> – step-by-step.<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tLearn how to build a landing \ud83d\udeec page with the #WordPress block editor (aka #Gutenberg) \ud83d\udc68\u200d\ud83c\udf93<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

What is the Gutenberg block editor in WordPress?<\/h2>\n\n\n\n

The block editor is WordPress’s very own content editor that became the default editor as of WordPress 5.0<\/a>, replacing the classic editor that was used for years prior. When it was first being developed, the editor was called “Gutenberg”. However, since it became part of the core, it’s now more commonly referred to as simply the “WordPress editor” or “block editor”.<\/p>\n\n\n\n

If you want to learn more about it, we’ve written a handful of posts about the topic in the past. You can get a basic introduction here<\/a>.<\/p>\n\n\n\n

Or, if you’re already familiar with the block editor, then just keep on reading to learn how to use it to create a landing page…<\/p>\n\n\n

<\/div>\n\n\n\n

A quick tour of the block editor interface<\/h2>\n\n\n\n

Now before we get started with the building process, here is a quick tour featuring the user interface of the block editor.<\/p>\n\n\n\n

To add new blocks, you’ll work in the popup on the left. And once you’ve added a block, you’ll be able to customize important information, like colors, in a sidebar on the right:<\/p>\n\n\n\n

\n
\n
\"Adding<\/figure><\/div><\/div>\n\n\n\n
\n
\"Customizing<\/figure><\/div><\/div>\n<\/div>\n\n\n\n

There are five unique sections to divide up the blocks that you can use:<\/p>\n\n\n\n

    \n
  • Common blocks<\/strong> – contains all the common elements like the paragraph, heading, list, quote, and other basic content elements.<\/li>\n\n\n\n
  • Formatting<\/strong> – good for adding custom code, editing a block with WP editor (classic), or adding a table.<\/li>\n\n\n\n
  • Layout Elements<\/strong> – has elements for improving the overall layout, like columns.<\/li>\n\n\n\n
  • Widgets<\/strong> – lets you add regular WordPress widgets to your designs.<\/li>\n\n\n\n
  • Embeds<\/strong> – helps you embed content from external platforms, like YouTube, Twitter, and lots more.<\/li>\n<\/ul>\n\n\n\n

    You can also add new blocks and functionality via third-party plugins. For instance, with the Otter Blocks plugin, you can get new blocks such as a pricing table, testimonials, Google Maps and more.<\/p>\n\n\n

    <\/div><\/div><\/div><\/div>\n\n