Sometimes a piece of well written content and one or two images can be enough to produce an effective post in WordPress that does a good job of engaging your audience and bringing in new readers, clients, or customers.
However, if you want to go beyond the standard post format of images and text, there is a lot you can do in WordPress to make your content easier to read, better organised, and more attractive.
In today’s post we will be looking at how you can use page elements such as tabs, accordions, columns, and other items to help support your written content in order to better serve your readers and get your point across.
Tabs: Reduce Clutter with Improved Content Organisation
Adding horizontal or vertical tabs to your posts and pages is a great way to display lots of content without forcing your readers to scroll up and down the page to find what they are looking for.
Tabs also work as an effective organisational aid, making it easy to divide your content up into manageable groups in order to avoid overwhelming visitors with a big chunk of information.
Many websites, including ecommerce stores, make great use of tabs to allow their visitors to switch between different sets of information, such as product overview, detailed specifications, and product reviews, all on the same page, without the user having to scroll up or down and search around the page.
For WordPress users, there are plenty of options in the form of free plugins for adding tabbed areas to your posts and pages.
Easy Responsive Tabs
Easy Responsive Tabs is the free plugin of choice for adding tabs to your posts and pages.
Once installed on your site the plugin adds a new icon to the post editor which when clicked allows you to insert the shortcode into your post, with the layout you want.
As you can from the above image, you get a good set of options for adding the tabbed area to your posts. The options include setting the number of tabs, their alignment, and picking the colours of the tabs.
Once you’ve customised the tabs, the plugin will insert the shortcode into your post, allowing you to add the content for each of the tabs.
Then it’s just a case of entering the content and hitting the preview button to see how your post will look to your visitors.
There are plenty of WordPress plugins for adding tabbed areas to your content, but Easy Responsive Tabs is a great choice that is simple to use and will look good on any site.
If you want to reduce page clutter then using tabs is an intuitive way to do so that your readers should already be familiar with from the other websites and software applications they use.
Accordions: Allow Readers to Reveal Content as Required
Accordions might seem very similar to tabs but they can be used to great effect for a range of different purposes.
As accordions can be used to hide content, which can then be displayed to the visitors at their own discretion, they are ideal for allowing readers to only focus on the content they are currently interested in viewing, and hiding everything else.
The following types of content can be greatly enhanced by adding accordions to your WordPress posts and pages:
- FAQs: the question is displayed, and the answer is hidden unless the reader wants to know that particular answer
- Quizzes: the answer is hidden until the reader is ready to view it
- Spoilers: avoid ruining the plots of movies or books by hiding key information from the reader unless they explicitly want to view it
- Hide irrelevant content from readers when covering a topic from multiple perspectives
The last option is a particularly powerful use for accordions. One example of them being used in this way out in the wild is a page on the WP Beginner blog where the accordions have been used to hide additional information from the reader which might not be relevant to them.
In this case, it also has the added benefit of displaying the affiliate links higher up the page, helping to increase the click through rate.
If you want to add technical information to your posts and pages that your casual readers might not be interested in, but a minority of other readers will find useful, then accordions are the perfect way to organise this content for two distinct types of reader.
Olevmedia Shortcodes
When it comes to adding accordions to your WordPress posts and pages, a great plugin to consider is Olevmedia Shortcodes, thanks to its ease of use and attractive design.
Once installed on your site, the plugin adds a button to the post editor from where the different page elements can be configured and then inserted.
After selecting accordions from the options, it’s just a case of specifying the number of them you would like to add to your post and then inserting the shortcode.
The next step is simply to enter the content for the accordions, including the title and the hidden text. Once you are happy you can preview the post to see how it will look to your readers.
The accordions look really nice and wouldn’t look out of place on the most professional of websites. The animation as the content is hidden or revealed is very smooth which also helps.
With this option you can add many useful page elements including tabs to your content, but when it comes to embedding accordions, it’s an excellent choice.
If you are looking for a more robust option for adding accordions, tabs, and toggles to your posts and pages then the free Whistles plugin from Justin Tadlock is well worth considering. Whistles takes what seems like a slightly more complicated approach; however the end result is greatly improved, with reusable content that can be added to tabs or accordions throughout your site.
One benefit of using Whistles is that each piece of content that will be placed inside an accordion or tabbed area is created using the post editor. This gives you lots of more flexibility when creating that content, allowing you to insert images, other shortcodes, and more.
If you want to get even more creative with accordions and use them to show and hide images, then the premium Accordion Slider available at Code Canyon might be just what you are looking for.
Columns: Vertically Divide Up the WordPress Post Area
One area where you may find WordPress lacking if you have moved from creating web page layouts with a visual editor such as Adobe Dreamweaver is the provision for adding columns to your posts and pages.
While you can still use HTML to divide your content area up into columns, this approach is not without its problems.
Thankfully there are some great plugins which make it very easy to add column-based layouts to your posts and pages to give you the look you want.
Advanced WP Columns
One such option is Advanced WP Columns and while the other solutions for adding columns to your posts and pages use shortcodes, this option takes a different approach.
Once installed on your site, the plugin adds a button to the post editor which allows you to start building your column-based layouts.
Through the editor you can select the number of columns, adjust the widths of the columns and the margins, and then add your content. With Advanced WP Columns you still get access to all the formatting options of the post editor when adding your content to the columns.
The column layout and its content are both then added to the post editor. If you want to edit the column layout, you can simply click on the icon and carry on from where you left off.
If you switch to the text view on the post editor at any point, you can inspect the underlying HTML and CSS that is used to create the column layout. This can be tweaked to further customise its appearance if you wish. Switching back and forth between the text and visual views doesn’t cause any problems with no formatting or code being stripped as can sometimes occur when creating layouts like this manually in WordPress.
Although there is nothing wrong with using shortcodes, if you don’t want to run the risk of your layouts being ruined should the shortcode plugin no longer work on your site, then Advanced WP Columns is one way around this issue.
If you are happy to go down the shortcode route, then a perhaps simpler option is to use the popular and free WP Easy Columns plugin. This plugin simply adds a few shortcodes to the post editor which you can then populate with content. WP Easy Columns includes a great selection of column combinations for building totally custom layouts on your site.
When using shortcodes to create column-based layouts, then the format will look something like the above example, depending on your plugin of choice.
Other Useful Page Elements
Other useful page elements you can add to your posts and pages in WordPress, simply by entering a shortcode can include:
- Buttons
- Pricing Tables
- Alert Boxes
- Icons
- Tables
- Notes
- Plus much more
By choosing a suitable plugin, you can add many shortcodes to your site that when typed out in a post or page, insert an element of your choice in its place.
Some free short plugins for WordPress you might like to consider for adding a range of page elements to your site with ease include:
- Shortcodes Ultimate (pictured above)
- Easy Bootstrap Shortcode
- WordPress Shortcodes
- Symple Shortcodes
Just take a look at the screenshots of the plugins on their respective pages, to get an idea of the type of elements they can add to your pages and how they will look in order to help you decide which one is the right match for you. You can even install multiple plugins to cover all the options, without any conflict in most cases.
Conclusion
As you can see, your WordPress posts and pages no longer need consist of just a wall of text, broken up with the occasional image.
By using the above tools to add a range of page elements to your site, you can start creating content that not only looks different from a regular WordPress post, but is also easier to read, better organised, and more helpful to your visitors.
If you have any questions, or you would like to share your experiences of adding non-standard WordPress elements to your posts and pages, please leave a comment below.
