Genesis Columns Advanced (only if your theme uses the Genesis framework) adds shortcodes to easily create up to 42 different columned layouts.
No configuration needed.
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.
- For more documentation, visit https://www.nickdiego.com/plugins/genesis-columns-advanced/.
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.
- In the example below, we are clearing the left-aligned image and keeping its associated text next to it, then using the [ clearfix ] shortcode to push the next image and text to a new line. While in editing mode (screenshot below), 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.