Columns are a great way to organize and display the content. Their structure enhances the user experience by improving readability, prioritizing information, and presenting material in attractive ways. Fortunately, creating columns in WordPress has become easier and easier over the years.
Types of Content for Columns
Instead of using one wide line length, break up the text into narrower columns. This is especially helpful on wide web pages without sidebars. Usually, separating the text into 2-3 columns does the trick.
Column one appears on the left and runs continuously until the code for column two is inserted. Cupcake ipsum dolor sit amet fruitcake icing dessert muffin. Oat cake soufflé dragée tart cotton candy donut topping tootsie roll. Danish dessert icing lemon drops pastry cotton candy bear claw. Macaroon halvah dragée candy brownie chocolate cake.
Column two appears on the right and runs continuously until the code for the next content item is inserted. Cupcake ipsum dolor sit amet fruitcake icing dessert muffin. Oat cake soufflé dragée tart cotton candy donut topping tootsie roll. Danish dessert icing lemon drops pastry cotton candy bear claw. Macaroon halvah dragée candy brownie chocolate cake.
Columns and rows are effective for displaying products and services in WordPress and other websites. E-commerce sites really benefit from this type of layout. Art and photo portfolios can be presented in this way as well.
Icons, logos, social media links, and buttons are also perfect candidates for columns.
I’ll use the following social media section as an example for each of the 4 basic ways to create columns in WordPress without using a plugin.
Visual vs. Code Editor
In WordPress, you always have the option of using the code editor, rather than the visual editor. With the Classic Editor, there is a Visual tab and a Text tab. The Text tab is actually the HTML code option.
With the new Gutenberg Editor, each piece of content uses a block that can be edited as HTML. Simply select the block, click on the 3 vertical dots, and select “Edit as HTML“. Alternatively, you can input into the Custom HTML block.
1. The Old, Unresponsive Way: Tables
Tables are very commonly used in society as a method of structuring and presenting information. In the early days of web design, tables were THE way to construct entire web layouts. CSS was not well-supported across browsers, so it made sense to use tables. They consist of columns and rows of equal or varying widths and heights. Cells can span multiple columns and rows, and they can be grouped together.
Here is the code to construct our sample social media section using tables:
<table style="width:100%">
<tr>
<td style="text-align:center"><a href="https://www.facebook.com/ASKDesign"><span class="social social-facebook" style="font-size: 3.6rem"></span></a></td>
<td style="text-align:center"><a href="https://twitter.com/ASKDesign2/"><span class="social social-twitter" style="font-size: 3.6rem"></span></a></td>
<td style="text-align:center"><a href="https://www.youtube.com/user/askdesign2/"><span class="social social-youtube" style="font-size: 3.6rem"></span></a></td>
</tr>
</table>Tables are still appropriate for displaying tabular data on the web. That function has always been what tables do best. However, they are no longer considered best practice in constructing web pages. The primary reasons are:
- Although there is flexibility in how to structure a table, the cells are static. Their size is not mobile-responsive.
- Screen readers (used by the visually-impaired) have a difficult time interpreting table code.
- Tables require more complex code than CSS and HTML combinations.
2. Custom HTML and Inline Styling
Inline styles can contain any CSS property and can be applied to any individual HTML tag. In the style sheet cascade, they take priority over any other style because they are closest to the element. Thus, they can override existing styles in a CSS file.
Because inline styles mix presentation with content, it is not possible to change them for mobile-responsive media queries. The media queries reside in a CSS file, whereas inline styles do not. The advantages of using a stylesheet are lost with inline styles. For these reasons, use them only when necessary!
Here is the code to construct our sample social media section using html and local styling:
<div style="text-align:center; width:33%; float: left;"><a href="https://www.facebook.com/ASKDesign"><span class="social social-facebook" style="font-size: 3.6rem"></span></a></div>
<div style="text-align:center; width:33%; float: left;"><a href="https://twitter.com/ASKDesign2/"><span class="social social-twitter" style="font-size: 3.6rem"></span></a></div>
<div style="text-align:center; width:33%; float: left;"><a href="https://www.youtube.com/user/askdesign2/"><span class="social social-youtube" style="font-size: 3.6rem"></span></a></div>3. Genesis Columns Classes with other CSS
Some WordPress themes, like Genesis, provide columns classes. This is a step up from inline styling. Since these classes are in the stylesheet, mobile-responsive adjustments can be made. Plus, the code is more neat and tidy.
Here is the code to construct our sample social media section using Genesis columns classes:
<div class="one-third first has-text-align-center"><a href="https://www.facebook.com/ASKDesign"><span class="social social-facebook" style="font-size: 3.6rem"></span></a></div>
<div class="one-third has-text-align-center"><a href="https://twitter.com/ASKDesign2/"><span class="social social-twitter" style="font-size: 3.6rem"></span></a></div>
<div class="one-third has-text-align-center"><a href="https://www.youtube.com/user/askdesign2/"><span class="social social-youtube" style="font-size: 3.6rem"></span></a></div>4. Gutenberg Columns Block
Gutenberg is the new WordPress default editor. It is based on content blocks that can be moved easily from one area of the page to another. One of those blocks is “Columns“.
Here are the steps and code to construct our sample social media section using the Gutenberg Columns block:
- Add new block. If the Columns block doesn’t show up in the first set of options, you can either
(a) search for it – the columns option will appear
or
(b) click “Browse All” – search for it here or scroll to the design section to find it - Select “Columns“
- Select the variation named “33/33/33“
- Add a new Custom HTML block to each column
- Insert the code as follows:
Column 1
<a href="https://www.facebook.com/ASKDesign"><span class="social social-facebook" style="font-size: 3.6rem"></span></a>Column 2
<a href="https://twitter.com/ASKDesign2/"><span class="social social-twitter" style="font-size: 3.6rem"></span></a>Column 3
<a href="https://www.youtube.com/user/askdesign2/"><span class="social social-youtube" style="font-size: 3.6rem"></span></a>Related Posts
How Can I Change the Typeface in WordPress?
Migration and Cloning Tools for WordPress Sites
SEO for WordPress Content Creators
Why and How You Create WordPress Child Themes
How to Disable Gutenberg in WordPress 5
Leave a Reply