wp-blockadefolder to your site’s
wp-content/plugins/directory. Activate the plugin from the plugins page of the admin panel.
Building your first Page with Blockade
The Blockade-Enhanced Editor
There are two obvious differences from the standard WordPress editor. One is the Blockade options added to the menu bar, with the show/hide button to preview Blocks as they’ll appear live, and the Blockade menu to select Blocks to insert. The other is the editor’s content. Instead of typing directly into the content area, with Blockade, you add an “Editable Content” Block, then type into that.
To start, click on the dotted box, or choose Editable Content from the Blockade menu to add an editable area. Then click into that block, and start typing as usual.
Drag and Drop Ordering
Adding Some Structure
Blockade contains two types of blocks, Content Blocks (like Editable Content, Images, and Buttons) and Structural Blocks (like Columns, Containers, and Breakout). Structural Blocks (aside from the Spacer block) can contain other Blocks within them. Lets run through the standard types of structure Blockade includes:
- Container Blocks are used to group multiple blocks into a single group. It can be useful in editing to make drag-and-drop easier for sets of blocks that should stay together, and on the front end, it can allow you to add styling to an area containing a set of different blocks.
- Spacer Blocks are a quick way to add vertical rhythm to a page. Just insert the block and set a height. In most cases, however, the preferred method is to set margins and padding on your blocks, rather than adding a non-semantic element to the page.
- Breakout Blocks are used to expand the content area’s width to the full width of the user’s browser. They are useful for Hero images, full-width content, and full-width backgrounds
- Simple Column Blocks provide some of the most common column layouts used in sites. All layouts are designed to be responsive, breaking to a single column at bootstrap’s xs screen sizes (mostly cellphones and tablets in portrait mode).
By combining these blocks with custom background colors and images, you can create a huge number of unique and eye-catching layouts.
Working with Columns
Meet the Control Bar
When you hover over any block, a control bar will appear in the upper right hand corner. This bar contains some of the most common tasks you’ll need to perform with a block. Let’s go through the features of the bar:
- Block Type – It can get confusing telling all your blocks apart, so the type of block is prominently displayed on the left
- Options – Many blocks, such as images and maps, have required settings, but all blocks have several optional settings, such as margin, padding, and class. We’ll go into more detail on these options later.
- Lock Content – Sometimes, when you get your content right, you’ll want to make sure no one accidentally edits it. Locked content cannot be edited until the block is actively unlocked.
- Lock Position – It can also be frustrating to get a block’s position set perfectly, then accidentally move it. Locking a block’s position prevents it from being dragged, until unlocked
- Lock Structure – Sometimes you need to create a set of blocks that work together, then copy the group several times on the page. Locking the structure makes sure that, while you can change any Editable Content in a set of blocks, you can’t add new blocks or change the position of any blocks inside.
- Clone – Once you get a section built, click clone to duplicate it, with all settings, children, and text.
- Delete – If you no longer need a block, delete it, and all its children, in one easy step.
Why all the Locks?
Gimme some Options!
With Great Power…
There are three tabs in the options panel that are common to all Blocks:
- Spacing – This panel lets you set the margin and padding for your Block
- Background – Here you can set a background color or image, in several different styles, such as cover
- Custom – This is the most powerful tab, where you can set custom classes and styles to apply to your block.