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.

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.

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.

*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:

General instructions:

  1. Open the exercise in your browser and read the task and the content on the left side of the screen. 
  2. You will be editing the content on the right side of the screen.
  3. In order to do that, right click on the exercise page that you opened and go to ‘Inspect’.
  4. Go to ‘Sources’ in the top bar and if you cannot see an empty CSS sheet where you can type the code, press Ctrl + P and start typing ‘styl’ in the search bar. Then press enter to open the CSS sheet.
  5. Follow the notes on the left and start typing your CSS code to see the changes online!
  6. Important! Do not refresh the page while you are editing the code, as these changes are in preview mode only and you can see them immediately, as soon as you write a line of functioning code.
  7. Use the custom classes in the notes on the left side of the screen, as well as ‘Elements’ on the top bar of the ‘Inspect’ to target and style the classes and elements. For example, you can enable the small icon on the top left of the ‘Inspect’ window (‘Select an element in the page to inspect it’) to find the default class name of the element you want to edit, while you are in the ‘Elements’ tab.

Tips:

  1. If the code is not showing any changes, try adding the !important tag at the end of the line before closing it (before the “;” symbol) and see if it works then.
  2. Don’t forget there are usually more ways to achieve the same result. Be creative!
  3. If you get stuck, write your email address in the form on the left side of the screen and you will get the solution (CSS code) in your email.

Sources:

  1. You can find a lot of tutorials on my youtube channel. 
  2. Watch the tutorial on how to solve these exercises here.

Please check your email and stay tuned for updates on the course.

We will notify you shortly when it’s available for presale.