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.
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.
Here you can enable full width layout and paddings.
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.
These options let you set background and text color accordingly.
Add custom class names, separated by space.
Hide block on different devices.
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.
This option helps to quickly change the current layout, if you need less or more columns in the row.
This option enables or disables column gaps. It's useful if you insert images for example and don't need indents between them.
It's useful, if you added a background color to columns.
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.
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 are similar to Container settings. You can enter bottom margin and paddings.
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.
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.
You can merge two adjacent columns. Find a "butterfly" button at the bottom of each column gap.
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.