Shortcodes and Layout Helper

If you have explored Quick plugins overview page, you noticed some info about "wpSpade Shortcodes - Wakiro" plugin. Basically, using WordPress shortcodes is simple until we have to work with grids. It's really confusing, if you need to add many columns, insert images and write text between opening and closing shortcode tags etc. So, Layout Helper was developed in order to solve this problem.

Layout Helper

Create a new post or page and click "Layout Helper" that's near "Add media" button.

Container is the main wrapper for Rows, Columns and Column items. It's a basis of any content block. Now you need to add your first Container. Press a big rounded button that's below "No Containers found" message.

Let's check Container settings.

Container settings

Here you can enable full width layout and paddings.

Align to content

This option is available only, if you turn on "Full width" and "Paddings" option. It lets you align the block content to the main website content, so left and right paddings are disabled here. In the sketchy layout below you can enter bottom margin and paddings or leave as default.

Background color and Text color

These options let you set background and text color accordingly.

Custom class

Add custom class names, separated by space.

Hide on

Hide block on different devices.

Row settings

Row is a wrapper for Columns and Column items. Row always holds at least 1 Column. Adding row means automatically inserted Columns and 1 Column item inside. Press 3 columns layout icon (for example) to add the row with a pre-built layout.

Now it's the time to review Row settings. Press "Edit Row settings" icon.

Layout

This option helps to quickly change the current layout, if you need less or more columns in the row.

Gaps

This option enables or disables column gaps. It's useful if you insert images for example and don't need indents between them.

Equal height

It's useful, if you added a background color to columns.

Vertically center the content

You can also align items vertically inside all columns per row. This option is available for changes when "Equal height" option is enabled.

"Custom class" and "Hide on" options are the same as in the Container settings review.

Column settings

Every column has separate settings. Press "Edit Column settings" icon to open a popup window with settings. There are the same options that you can find in the Container settings, but quite less. Naturally, these apply to columns only.

Item settings

Item settings are similar to Container settings. You can enter bottom margin and paddings.

Adding content

Press rounded "+" button to insert your content. You will see a familiar visual/text editor which works the same as native. You can enter text, insert images, apply formatting and add any shortcodes.

You can insert more items to every column. Just press "+" icon.

Colum resizing

You are able to resize each column to get any layout, you need. Move cursor to the narrow indent between columns. Then drag and release.

Merging columns

You can merge two adjacent columns. Find a "butterfly" button at the bottom of each column gap.

Sorting

You can drag and drop any type of builder blocks. Containers and Rows can be only dragged by Y-axis, Columns - within one row by X-axis only. Column items can be moved to any column with no limits. Grab the block header and drag it to the desired position.