How to Add, Edit, and Customize Elementor Columns
Elementor WordPress plugin is one of the most popular page builders for a reason. The secret behind Elementor’s success is in its ease of use and intuitive, user-friendly interface. In the first place, Elementor is a visual, live page editor. This means you will be able to instantly see what your website will look like after you apply changes – you don’t have to switch to a special preview mode. Secondly, Elementor offers drag-and-drop functionality that allows you to select and position elements from the menu with one click. Also, Elementor doesn’t require coding knowledge since you can add and immediately change elements following your needs. With all this in mind, it’s obvious that anyone can build a responsive Elementor WordPress website. In other words, no matter how you want to organize your content, you can do it fast and easily with this page builder. But if you specifically want to organize your content into differently styled Elementor columns, this article is for you.
Elementor Columns
When you want to create separate sections dedicated to your business story, services, or to your brand members, Elementor columns will help you do it with ease. Columns can be manipulated via the options in the Elementor Panel on the left. Also, you can create columns by right-clicking the Column handle and choosing from the context menu that pops up.
Before everything else, we need to create a row. Click on the + sign as shown in the picture below.
Now, select the desired structure, based on your design direction and content type. This time we will go with two columns.
The selected structure will instantly appear and you can start adding widgets right away. You can either drag desired widget from the menu or click + to add content to your column. From text sections and images to specific widgets – you can add anything you want to your column.
But, before you start adding your content/widgets to your columns, you can adjust the row and its columns to match your needs. As you may notice, the row is marked with blue color after we hover over it.
To modify our row, we will right-click the row and click the Edit section afterward.
The Edit Section field offers 3 tabs for row customization. You can set the layout type, style it or use Advanced options for fine-tuning.
Let’s start with Layout options. Here, you can set the column structure based on different types of proportions. This will allow you to organize your row based on your design requirements following your personal preferences.
Now, let’s edit the column. When you hover over the column, the sign that allows you to continue editing will appear (as shown in the picture below).
Right-click the field we’ve just mentioned and click Edit Column.
Once again we see three customization tabs (Layout, Style, and Advanced options). Firstly, we need to set our column layout.
Start by setting your Column Width. This option allows you to modify your columns in case you’re not happy with the row dimensions you’ve previously set. Next, you can set your Column content’s vertical alignment. You can choose from Top, Middle, Bottom, Space Between, Space Around, and Space Evenly options. This will place your content to the predefined place in one column section. Also, you can use the Horizontal Align option that lets you horizontally align the inline widgets in the same row. Here you can choose different inline positioning including Start, Center, End, Space Between, Space Around, and Space Evenly. In addition to this, there is a Widget space option where you can set the space between the widgets you plan to add. Lastly, you can set the HTML Tag for your column.
Now is the time to style your column. Before everything else, choose the background type – classic, gradient, or slideshow background. Classic background layout allows you to set a background color or image. On the other hand, a gradient background allows you to set a color gradient background. As its name suggests, a slideshow background lets you create a slideshow type of background. Moreover, you can set the background overlay, blend mode or play with CSS Filters – choose between Blur, Brightness, Contrast, and Saturation.
When the column background is set, you can style the column border. Firstly, set a border type and border-radius. Secondly, add a box shadow if your design requires it.
Since typography can make a real difference, don’t forget to set Typography colors for your column section.
As you know, the margin controls how much space is outside the border of the element you are editing. On the other side, the padding controls how much space is inside the border and the content of the element you are editing. Both of these options can be set in the Advanced options tab. Although this field includes many other advanced options, we recommend you to pay attention to the Responsive field. Here you can show or hide columns on desktop, tablet, or mobile which can affect the user experience in many ways.
Let’s Wrap It Up
Adding Elementor columns is practical for many reasons. It allows you to organize your content with more flexibility and to easily customize its elements. Thanks to Elementor’s intuitive features, you don’t need any previous knowledge to create Elementor columns within minutes. We hope this article will help you do it even faster!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
