Page Blocks: The Simple HTML Content Page Builder
Table of Contents
- What are Page Blocks?
- Screenshots
- Installation
- Example Template
- Dropin Notes
The new Page Blocks Dropin adds a simple HTML editing interface to your post editor screen. With simple features like section reordering, hook controls, design options, and the ability to create unlimited sections, Page Blocks get out of your way so you can dive straight into creating HTML layouts from the WordPress admin panel.
What are Page Blocks?
There are many ways to create web pages and the question on the best way comes down to preference. Most themes, MD included, are moving towards visual based page building and dropping the need for most of code. But what about the ones who still want to code?
Working in a code only environment can be challenging for the website owner who wants to rapidly create new content and stay as close to the post editor as possible, so Page Blocks acts as a bridge to keep you perfectly in-between.
Because it is set up as an HTML builder, you can write the markup you need to structure your pages exactly how you want them to look. Because you are working from within your post editor, you can combine that freedom with the parts that make publishing from the post editor such an elegant experience.
Take your HTML content and wrap it within Blocks that can be dragged around to reorder and already take care of the surrounding markup needed for each row you create. Save yourself from writing repetitive CSS by using the built-in design controls in each Block—just pick your colors—and even write your own Block specific CSS to really take full control over your creations.
Screenshots
The default meta box view with four Page Blocks created.
A Page Block section row expanded with full options and custom CSS box.
An example demo page of Page Blocks with custom HTML. This layout is provided for you to start from if you choose.
Installation
Read the Dropin Installation Guide for general instructions on how to install any MD Dropin, including the Page Blocks Dropin.
Example Template
Get the code snippets and follow instructions to use Page Blocks features to recreate the page template above. Click here to get demo template.
Dropin Notes
- Resources: Page Blocks demo, MD style guide, font icons reference list
- Works best with the WordPress Classic Editor as meta boxes are better supported, but still has full functionality with the new Gutenberg editor.
- To execute shortcodes in the HTML content, you must enable “Enable WordPress formatting” checkbox for that particular Block.
