Genesis Columns Advanced adds shortcodes to easily create up to 42 different columned layouts.
More Info
https://wordpress.org/plugins/genesis-columns-advanced/
Initial Configuration
No configuration needed.
Usage
Sometimes you need columns but don’t want to use a table (for example, an invisible layout grid that’s responsive). Genesis has column classes that make table-less columns relatively easy to create using a button in the formatting bar.
- While editing a page/post, make sure you are viewing content in the Visual tab. Click the Insert Columns button and choose the layout you need.
- Most of the options create equal sized columns, but if you need unequal columns, click Advanced Layouts, then choose the layout you want.
- A set of column shortcodes should now appear where your cursor was placed. Immediately after, click again on the Insert Columns button and this time choose Utilities > Clearfix. This clears the floats on the column divs and prevents layout issues for content below them.
- Depending on the layout you choose, it should look similar to this:
- Just replace the text between the shortcodes for each column.
Clearing Floats
Sometimes when you align (float) an element to the left or right, the layout of other elements unintentionally wraps around it and it doesn’t look right. The left or right-aligned element is using a float that needs to be cleared. Fortunately, there’s an easy fix with the [ clearfix ] shortcode.
- While editing a page or post, make sure you are viewing content in the Visual tab. Place your cursor after the floating element (e.g. after an image or its wrapping text). Then click the Insert Columns button and choose Utilities > Clearfix. This will insert the [ clearfix ] shortcode.
- While in editing mode, it won’t actually clear the content to the next line, but on the frontend, your visitors will see the second image and its text right below the first image.
Are you looking for a better webpage layout? Contact us… we’ve got some great solutions.
