How to create text with columns with CSS and Elementor

In this blog post, learn how to create text with columns using CSS and Elementor!

Check out the video below or continue reading to grab the code.

It is very simple to create two, three or more columns using a text editor widget in Elementor. You can control the width of the column gap, the number of columns and much more. Let’s see how to do this.

Download Elementor Pro here.

Insert your text using a Text Editor widget

Drag and drop your text editor widget in Elementor to add some copy. Now, go ahead and type your text.

Insert the CSS code in the Advanced > Custom CSS panel or use a plugin

If you are using Elementor Pro, you can type the CSS code in the Advanced > Custom CSS panel. In case you are using a FREE Elementor version, you can install a plugin to insert the code, such as Simple Custom CSS and JS plugin and place your code there.

For Elementor Pro version, use the ‘selector’ and then apply the following code (note that here you don’t have to use the dot ‘.’ before ‘selector’:

selector{
   column-count: 2;
   column-gap: 60px;
}

For all the Elementor FREE users out there, you first need to assign a class to your text in the ‘Advanced > CSS classes’ field. Then, go to the Custom CSS plugin mentioned above (Simple Custom CSS and JS plugin) and style your class there. For example, if you named your class ‘text-with-columns’, you would use the following code in the plugin (don’t forget the dot ‘.’ before calling out the class in the plugin!):

.text-with-columns{
   column-count: 2;
   column-gap: 60px;
}

You can then change the number of columns as you need, as well as the column gap and you’re good to go!

Download Elementor Pro here.

*This post may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale, with no extra cost to you. That way you are supporting my blog and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

Share this post:

Leave a Comment

Related posts: