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.
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!
Online course
Ready to Learn CSS?
A step-by-step basic online course for beginners and non-coders with 50+ practical exercises to get you started with CSS.
- No HTML
- Interactive
- For non-coders
*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.
