Add columns, rows and tabs to your WordPress posts and pages

Do you enjoy using WordPress, but sometimes wish you could use more flexible layouts for your posts and pages, making use of columns, rows, and tabs? If this sounds like something you could put to good use on your site in order to create more attractive and interactive content, then the free Shortcodes Ultimate plugin could be just what you are looking for.

Shortcodes Ultimate adds lots of useful elements to your WordPress website which can be inserted into your posts and pages at the touch of a button. In this post we will be taking a look at some of the layout elements that can help you do a lot more with the WordPress post editor, for very little extra effort.

What Are Shortcodes? A Quick Overview

WordPress shortcodes are strings of text that can be added to your posts, pages, and other areas of your website. When the post is published, the shortcode is replaced by a different piece of content.

[su_frame align=”center”]Shortcode Example 01[/su_frame]

This content could include written text; images; HTML and CSS for adding attractive buttons or other formatting and styling options; and even programming code to add new functionality to your website.

[su_frame align=”center”][/su_frame]

Whatever you can add to a WordPress post can be stored on your site for retrieval using a shortcode. This allows you to build a library of useful page elements, and content and code snippets that can be inserted into your posts with ease.

By installing a shortcode plugin, such as Shortcodes Ultimate, you can easily add a library of code snippets and page elements that you can then insert into your posts and pages whenever needed.

This saves you lots of time and enables you to create attractive posts and pages that allow you to break free of the constraints of the WordPress post editor, without writing any code yourself.

Getting Started With Shortcodes Ultimate

Shortcodes Ultimate is a free plugin that is available from the WordPress.org plugin directory. This means it can be installed on your website directly from within your WordPress admin dashboard.

Once the plugin is up and running on your website you can start using it right away. However, it’s worth spending a few minutes viewing the examples of the different shortcodes and page elements, including the layout options that can be added to your posts and pages.

From the <> Shortcodes menu on the admin dashboard sidebar, the Examples page gives you a great overview of all the elements now available to you.

[su_frame align=”center”]

Basic Examples

[/su_frame]

The second and third sections include the shortcodes that can add custom layouts to your posts and pages, including tabs and columns.

If you click on the column layouts examples, you can view the different column layout options on offer.

[su_frame align=”center”]

Column Examples

[/su_frame]

You can also view the code to see how the shortcodes are used to create the custom column layouts. This code can then be copied and pasted into your posts and pages, leaving you to simply replace the placeholder text with your own content.

Adding Columns to Your WordPress Posts and Pages

Once you’ve taken a look at some of the examples of the shortcodes you can now use on your website, you should be ready to start using Shortcodes Ultimate to begin creating more advanced layouts for your posts and pages.

While you can copy and paste the shortcodes from the examples, the Shortcodes Ultimate plugin adds a handy button to the WordPress post editor that allows you to insert the elements into your content.

[su_frame align=”center”]

Insert Shortcode

[/su_frame]

By clicking on the Insert shortcodes button you can then browse through the available shortcodes, before picking one and customizing it to suit your preferences.

[su_frame align=”center”]

Browse the Shortcodes

[/su_frame]

As we are looking at how Shortcodes Ultimate can be used to add columns and other types of layout elements to your WordPress posts, clicking on the Box filter will highlight the layout-related shortcodes.

[su_frame align=”center”]

Layout Shortcodes

[/su_frame]

However, before you can start inserting columns, you must first insert a row. The columns will then be placed inside of the row. By using rows you can add multiple column layouts to a single post – provided the different column layouts are placed inside separate rows.

Clicking on the row button allows you to add some content to the row before the shortcode is inserted into your post. However, this isn’t necessary and you can leave this field blank or delete any existing content before clicking the insert shortcode button.

[su_frame align=”center”]

Insert Row

[/su_frame]

The row shortcode should be added to your post. Now the column shortcodes can be inserted inside of the row shortcodes to create your multi-column layout.

To do so, move your mouse cursor in-between the two shortcodes (where the red line is in the graphic below).

[su_frame align=”center”]

Row Shortcode

[/su_frame]

Then click on the insert shortcode button again and select column from the options. Now you can choose your column layout. There are a range of options for creating the column layout for a row, and you can mix and match the different options.

For example you could choose a combination of three thirds, one fifth and four fifths, or two halves for your layout. However to get started, select one third from the size dropdown list and then click the insert shortcode button.

[su_frame align=”center”]

One Third

[/su_frame]

Now you should be able see the shortcodes and get an idea of how they should be arranged to build your custom layout.

[su_frame align=”center”]

Column and Row Shortcode

[/su_frame]

By either copying and pasting the existing shortcodes, or inserting them via the button, you will be able to build your custom layouts in no time at all.

[su_frame align=”center”]

Custom Column Layout

[/su_frame]

Now you can either enter your text, or insert other shortcodes into the columns, such as buttons, boxes, and other elements.

Adding Other Layout Elements to Your Posts and Pages

As well as columns you can add a number of other layout elements into your posts and pages.

[su_frame align=”center”]

Tab Examples

[/su_frame]

With Shortcodes Ultimate this includes:

  • Horizontal and vertical tabbed areas
  • Spoiler boxes to hide content
  • Accordion boxes
  • Expandable text blocks

This is in addition to all the other great elements your can insert into your content such as Google Maps, lightbox windows, sliders, alert boxes, and more.

If you are having trouble using any of the shortcodes you now have access to, the cheat sheet page on the <> Shortcodes menu gives you examples of how to use each of the elements included with the plugin.

[su_frame align=”center”]

Custom CSS

[/su_frame]

You can even customize the elements by adding you own CSS through the Custom CSS tab on the settings page. This allows you to change things like the fonts, colors, and much more.

Conclusion

By installing this free plugin you can now insert a range of shortcodes to add useful elements to your pages and build custom layouts using columns, rows, tabs, and other features to create the type of posts you need for your website.

If you have any questions about using shortcodes and working with columns and rows, please leave a comment below.

Share on facebook
Share to Facebook
Share on twitter
Tweet this Post
Share on linkedin
Share on LinkedIn
Share on email
Send via Email
Share on facebook
Share on twitter
Share on linkedin
Share on email

The Landing Page Builds service includes:

  • Unlimited page builds for one monthly rate
  • Dedicated account manager
  • Dedicated WordPress developer
  • At least 2 hours of daily dev time
  • Daily progress reports
  • Find out more here

The Content Edits Plan includes:

  • Unlimited content edits
  • White label help desk 
  • Support ticket dashboard
  • 24/7 team of WordPress experts
  • Visual Validator WordPress updates
  • 90 days of off-site backups
  • Daily security scans and malware cleanup
  • Maintenance dashboard
  • Find out more here

The Maintenance Plan includes:

  • Visual Validator WordPress updates
  • 90 days of off-site backups
  • Daily security scans and malware cleanup
  • Maintenance dashboard
  • Find out more here