How To Add Responsive Columns To WordPress

October 25, 2019 - By 
How to add multi columns to WordPress

Understanding how to add custom fields to posts in WordPress, like columns, is something useful to improve the overall user experience. However, adding responsive columns to blog posts is something that WordPress users have struggled with for a long time. It is because there was never a built-in way with WordPress. In this WordPress tutorial, you will learn

add columns to posts in WordPress

# Add the default two-columns table

WordPress’ users always had to install a new plugin to add columns and they did not always work so well. With the new WordPress Gutenberg editor, we finally have a native solution to create a mobile responsive table in WordPress. What we can do now is first to add the new column Gutenberg block.

STEP 1 – Click on “Add block” button

Adding a block is really easy. All you need to do is to open the post you want, then click on this “Add block” button in the left sidebar. Now if you check out my Most Used section, you will see the Columns box showing up there.

STEP 2 – Select the Columns box under Most Used section

If you did not see the columns box in the Most Used section yet, you can also find it in the Layout Elements section.

STEP 2 – Select the Columns box under Layout Elements section

Alternatively, you can simply search for it to make it show up in the block selector. Just type the name “Columns” on the block search bar. Once you click on it, you will immediately have a two-columns layout added to your post.

STEP 2 – Just type the name “Columns” on the block search bar to find the Columns box

Now, what this is doing is adding two blocks side-by-side. Then, you can fill each block with whatever you like and click on the Update button. Below we see some demo content right now, “This is ssome text” and “And this is some text“.

STEP 3 – Add some content to the two-columns table

# Add a multi-column table

Now, if you want to change the above layout to have three, four, five, or even six columns, you need first to select the column block. You can select this by hovering the mouse over the icon with the six dots on the left side and click on it. Once you do that, WordPress will switch from “Document” to “Block” settings in the sidebar.

STEP 4 – Hover the mouse over the icon with the six dots on the left side and click on it

If you are not aware of where to select the columns, it can be really frustrating as you try to click around and figure out how to select the columns. You will also find that there is a way to adjust the number of columns. You can do that easily in the Advanced section, where there is just an option for CSS classes, which you probably will not need.

STEP 5 – Use the Block sidebar to change the columns number and CSS style

Of course, you can add more text in each one of these blocks (i.e. columns) since they are paragraph blocks by default. Most importantly, you just need to know that if you want to switch a paragraph block to another type of block, you have to first highlight and delete all of the text. Second, you will see the “Add block” button. Thus, you have the ability to add any type of block you want (e.g. shortcodes, tables, headings, lists).

STEP 6 – Easily switch a paragraph block to another type of block

For instance, you could add an image. There are the same options you normally see when uploading an image to WordPress. You can insert an image just by clicking on “Media Library” or “Insert from URL” options.

STEP 7 – You can add an image from “Media Library” or “Insert from URL”

The column block is really versatile. You can create some pretty cool layouts. Now, you are seeing the inserted image to the third column, but you could do that to any other column, instead. Then, click on Update the post.

STEP 8 – Insert an image or anything else on any of these blocks

Let’s see how the three-columns table displays on the front-end of WordPress in the mode Preview. The use of the Gutenberg editor to make columns is the much easier and more intuitive solution than we have ever had before.

STEP 9 – Get a well-designed and mobile responsive table easily

Joel Little Tiger
Follow us
Latest posts by Joel Little Tiger (see all)
Keep Your Marketing Up To Date

SIGNUP NOW! 

You can't just stuff keywords everywhere. Keyword Research is about building a list of keywords you want to rank for. It involves spying the ones your competitors are already ranking for plus finding the words and phrases your target audience is using when they are entering queries into a search engine.

Your audience' queries then go through an machine learning-based interpretation model, incorporated into the Google's RankBrain algorithm, which will return on SERPs those websites whose keyword-optimized content matches the actual searcher's intent.

WordTracker

Leave a Reply

Your email address will not be published. Required fields are marked *

Find a domain starting at $0.88

powered by Namecheap

BLOG CATEGORIES