Do you want to add multi-column content to your WordPress posts?
Columns can be used to create Attractive layouts for your publications and pages.
Traditional print media, such as newspapers and magazines, have used a multi-column layout from the earliest days of printing. Their aim was to enable users easier to read a smaller text while using available space economically.
If you have not yet created a website or a blog on WordPress, we invite you to consult How to install a WordPress blog in 7 steps next, How to search, install and activate a WordPress theme on your blog
Single column layouts are more commonly used on the web. However, the grids with multiple columns are still useful for highlighting content and facilitating reading and analysis.
In this tutorial, we'll show you how to easily add multi-column content to your WordPress posts without writing any HTML code.
Adding Multi-Column Content in WordPress - The Easy Solution
Creating multi-column content, also known as grid content in WordPress, is now easy because it's a default feature. The new WordPress Gutenberg block editor proposes a block of columns.
To add a multiple column layout, you need to create a new post or edit one. Once in the edit area, click on the " Add At the top to add a block.
Then you have to select the block Columns "Located under the" Layout elements "tab.
You will see the mouse pointer jump in the left column and a placeholder for the text will appear in the right column.
As you can see in the screenshot above, the block Columns at first appears to be an empty area. If you hover the mouse to the left, you can see the border of the highlighted block.
You will also be able to see the block parameters in the right column of the screen.
By default, the column block adds two columns. You can increase the number of columns you want to add from the block settings on the right. This allows you to add up to six columns on a single row.
Just click on a column and start typing to add content. You can use the Tab key on your keyboard to move to the next column.
Adding multimedia and other content to your columns
In addition to text content, you can also add images and embed videos in WordPress columns.
Column block allows you to add blocks inside each column. Just hover the mouse over a column and you will notice the "Add a new block" inside. You can also add a block by entering the name of the block.
Your selected block will appear in the column. You can go there and add content.
To upload - upload - your media, discover our article on How to upload your bulk media on WordPress
This is what your new column might look like in the WordPress theme default Twenty Nineteen. In this example we are using three columns and the last column contains an image.
If you only want to add an image and text to the side, you can also use the block Media and text Instead of columns. This block is specifically designed to display media such as images and videos next to the text.
Addition of several columns in the classic editor of WordPress
If you haven't upgraded WordPress to Gutenberg and are still using theclassic editoryou need to install a separate plugin to create a grid layout of columns.
Start by installing and activating the plugin Lightweight Grid Columns.
For detailed instructions, follow our step-by-step guide on how to install a plugin in WordPress.
Upon activation, you can create a new message or open an old message to edit. Then click on the " Add columns In the visual editor toolbar.
You will now see a popup window which allows you to add your first column. You can choose how much area your column can cover, on desktops, tablets and mobile devices differently.
Go further by discovering How to create a full width page on WordPress
For example, if you set the 50% desktop grid percentage, your column will cover half of the line.
It has many options to set the width of your column, from 5% to 100% with an 5 interval. You can choose one by clicking on the drop-down menu.
Then, you must add the content of your column in the "Content" area, then click on the "OK" button to insert it in your publication.
The plugin will generate the required shortcode with your content and add it to your post editor.
Discover in this tutorial How to install and configure the WP Super Cache plugin to improve the performance of your blog.
Now that your first column is added, you can repeat the process to add more columns. For the last column, do not forget to check the box 'Last column of the line'.
After that, you will be able to save your preview and preview it. Here's what it looks like on our Twenty Seventeen test website.
If you also want to find WordPress themes that can help you create columns on your pages or publication, here are 3 WordPress themes premium perfect for this task.
1. TheGem
There are a lot of WordPress themes which may claim to offer a OnePage layout, but none can offer the wealth of options and features that TheGem WordPress template has.
All the design elements you associate with a good OnePage website are present in this WordPress theme : a full-screen slider (which can be created using the Revolution Slider plugin delivered with the WordPress theme), a choice of six header styles and the ability to create full-width sections using the Visual Composer plugin included in the package.
In addition, it has a number of customization options for items such as fonts, colors, and icons. It's a rare thing, but there are also details we do not like about TheGem. But basically it's a WordPress theme that will suit you of course, given the number of positive points it has. It is a strong competitor, which would facilitate the creation of a OnePage website.
Download | Demo |โฏWeb hosting
2. Stockholm
Stockholm is a WordPress theme designed to help you create the website of a construction company, civil engineering, or any company related to the world of building renovation. This WordPress template is geared towards professionals who care about quality and detail.
Comes with an options panel and a user-friendly backend, they will allow you to easily manage your content. There are about 20 demos of this template presenting a wide range of activities on which this WordPress theme can be used. And these can also be used as a basis for future customization so that your website has a unique look.
Very responsive, it is displayed perfectly on any type of screen. If during the customization or installation of this template, you encounter difficulties, the complete documentation included in the package can serve as a guide. And if you still can not, support dedicated to this theme WordPress remains at your disposal.
Download | Demo |โฏWeb hosting
3. Jupiter
Jupiter is another very popular WordPress theme. It has 25 demos that cover 6 from our categories - agency, creative, education, food, health and eCommerce - and more will be added to it in future updates. Most of its layouts have a minimalist design, with a pleasant typography.
One of Jupiter's main selling points is its Creative Header Customizer which allows you to quickly and easily customize the headers design of your website. Visual Composer, 3 sliders (Layer, Revolution, and iCarousel), 10 new shortcodes, more than 1800 icons, and 10 custom post types are all included on delivery.
Its page load times are also excellent. This is a superb product, and you will be hard pressed to find so many WordPress themes having its characteristics.
Download | Demo |โฏWeb hosting
Other recommended resources
To go further in optimizing your blog or your website, we also suggest that you consult some links that will immerse you in the world of Gutenberg
- How to prepare your website for Gutenberg
- How do I know if your plugin is compatible with Gutenberg?
- Will Gutenberg improve or break WordPress?
Conclusion
Here ! That's it for this tutorial. We hope this article has helped you learn how to add columns to your WordPress posts and pages. Feel free to share this tutorial with your friends on your social networks.
If you have suggestions or comments, they will be welcome. But if you are a novice, we invite you to consult our resources.
...
Hi, I have this plug-inโฆ. but it does not work well, it happens:
I am creating two columns, one smaller for the photo, another bigger for the text, so the text is only 2 rows, not in the full height of the column, when saving the JUMP text below the photo, rather than stay accano, see that a column disappearsโฆ ..
What do I do? why is this happening, there is another better and simpler plg-in than this here?
Thanks, I would be grateful for the help!
Hello Irina,
Try to enable the default WordPress theme, if everything works fine then the problem is with your current WordPress theme.
Also check that you have made plugin updates.
All I can say is this is Geniale.
It works very well and it answers all my expectations.
thank you numberu (bcp)
Hello,
Thank you very much, it's great
How do I put color in my column?
Mercii
Hello,
you can do this by using a custom CSS code.
Hello,
I was unable to paste text into a column. Is it possible ?
Hello,
how did you proceed?
I have copied some text and tried a paste by CRTL + V, without success. The context menu with the right click does not offer to paste.
I did not find any other solution than to retype everything ...
Sorry for the late response.
Can you ensure that by right clicking on another element on the page the context menu is displayed? If this is the case, then there is probably a JavaScript problem with your hosting.
If you are on Google Chrome, then go to the page in question where you have the problem, then press the "F12" key (a window will open or will be attached to the page) then choose the "Console" tab . Take a screenshot of this tab and I will tell you if there is a problem.
Hello,
Thank you for your reply.
My site being hosted by Free, there may be a javascript problem.
Can you tell me how you forward the screenshot I made?
cordially
We want Mireille but the type of service you ask is unfortunately paying and we invite you to contact our technical team on blogpascher.com
As I installed a restricted version for Free, I think the problem is there.
I will try to install another version ...
I copied some text and tried to paste it into a column in the plugin. Impossible, neither with the keyboard shortcut CTRL + V, nor in the contextual menu of the right click which does not offer this function.
Is there any other solution than retyping everything?
I only have one word to say Awesome! I installed it and after two or three fixes I managed to make columns, thanks!
Thank you Ronnie for this feedback.
hello i installed advanced wp columns.
but when I look on the page I have a white square present at the top left of each column? can you help me. thank you
Hi,
Have you tried using the default wordpress theme to see if the problem persists?
Hello,
We can not really help you if you do not give more details on how you do to have a white square.
Goods.