How to make columns in WordPress without plugin

Have you started making a website on WordPress and wanted to insert columns, for comparison between different things. Or to present your website in a better manner. But have difficulties with inserting columns without plugin or have no idea how to do it? Don’t you worry, this article on how to make columns in WordPress without plugin has got you covered.

After reading this article, you will get to know about two different ways of adding columns in WordPress without plugin. The first method would be to do so using code for columns. It is not as difficult as people think it is. You can do it by using <div> with a style attribute of your choice. But if you still feel that it might be difficult for you, then the second method is through Block Editor. WordPress introduced Block Editor back in December of 2018. You can learn more about what Block Editor is and how to use it, here.

Using code to add columns

As opposed to common belief, using codes is not as tough. Indeed, it might be tricky at some points. But most simple tasks are not tough. You can do it by using <div> with a style attribute of your choice.

This image is sourced from Torque, all rights reserved to them.

An example of this type of code, that shall give you three equal columns is as follows.

<div style=”width:30%;padding:0 10pt 0 0;float:left;”>

Column 1

Column 1

</div>

<div style=”width:30%;padding:0 10pt 0 0;float:center;”>

Column 2

Column 2

</div>

<div style=”width:30%;padding:0 10pt 0 0;float:right;”>

Column 3

Column 3

</div>

You can change the space between columns and the size of the columns by altering the padding and width values in the code. If you want to make one column wider than the other, then change the values for that column alone.

To format text using code, click here.

Alternatively, you can use tables to add column too

 

<tr style=”background-color: #e9e9e9; font-weight:bolder;”><td>Title 1 </td>

<td>Title 2</td>

<td>Title 3</td>

<td>Title 4</td>

</tr>

<tr>

<td>Detail One</td>

<td>Detail Two</td>

<td>Detail Three</td>

<td>Detail Four</td>

</tr>

<tr>

<td>Detail One A</td>

<td>Detail Two A</td>

<td>Detail Three A</td>

<td>Detail Four A</td>

</tr>

</tbody>

You can use this code to add tables and then adjust the dimensions as per your requirements.

If you see, as mentioned before. Making columns through code is not a difficult task. Though, you might have a little bit of a learning curve in the beginning.

Inserting columns using Block Editor

In six simple steps, you can insert a column in the block editor.

1. On your dashboard, go to “posts” and click on “add new”
2. Click on the “+” button located at the top-left corner
3. Select the “Columns” Block
4. Choose how many columns you want and their width
5. Select one of the columns and click on “Paragraph” button
6. Add some text!

Just like the method mentioned above, you can adjust the column’s width. For that, you have to select Column, and then find the “Percentage Width” slider on the right side. You can move the slider according to your wish to select the right amount of width for your columns.

Conclusion

Hope this article was easy and helpful for you to create columns in your WordPress website. If you liked this, do not forget to share this article with your colleagues.