If you’re about to build a website and thinking on how to do this the most convenient way, I recommend you to use the Elementor page-builder. Especially since it was updated and got some cool features added.
Still, I’m pretty sure that if you are reading this article, you already know about Elementor and very likely you already use some of the Elementor plugins on your site.
I’ll talk for me and my team. TemplateMonster uses Elementor to create its best web templates. It’s a powerful and convenient builder which makes the lives of developers easier.
Let’s take Monstroid 2 as an example. This WordPress theme has proved its quality and reliability to the users who’ve been exploiting it. With the Elementor basis, it’s extremely easy to customize and provides any kind of solution for the design of your dream.
If you are thrilled to know what’s new in Elementor and is it possible it to be even better than it is than keep reading.
Place Widgets Anywhere You Want
The first feature we’re going to talk about is Position: Absolute.
What is it for? This is a new feature now allowing you to design outside of the grid on WordPress. You will be able to grab any element, drag it around and position it at any spot of your page.
- Click on a widget,
- go to advanced,
- choose custom positioning,
- in the “position” option choose “absolute”,
- drag a widget around.
You can do the same with other elements of your page as well.
But there’s an issue. If you want the page to be responsive and look properly on tablets and mobile devices you can’t just leave the page like it is after this feature application. Otherwise, the element floats to some inappropriate spot since it’s not tied to the entire page structure anymore.
Now you have to correct the position for the elements you’ve moved. For this switch a device for which you’re customizing the page. Here you have the vertical and horizontal position to control the offset of the element. The values show the element position on the page. You can see how they’re changing while you are dragging the element around. You can set different values for each device right here.
Make a Stalker out of Your Widget
This feature will be in handy if you want to fix a widget in front of the visitor’s eyes so when someone will be scrolling the page up or down, the widget will be following or “stalking” them. All you need is to grab a widget and stick it to the viewport.
Here we have the same issue as with Position: Absolute. Make sure you’ve adjusted everything to look decent via a tablet or on a mobile screen.
Last Tab Memory
You’ll be happy to know that now Elementor has become even more convenient to work with. From now on it remembers the last tab you’ve been working with and it sends you to the exact place where you’ve stopped last time. You don’t have waste your time trying to memorize and recall where you were the last time. No needless annoying clicks anymore, no “startovers”!
Compact Widgets
Previously in Elementor a widget took all the width of the column. A little button widget takes up the entire space, and you can’t put anything else next to it. Now there is the solution: create more than one column. How exactly?
- Go to “advanced”,
- “custom positioning”,
- go to “width”,
- choose “inline”.
Now you have your column cropped to the exact size the button takes. Duplicate it and you have two buttons. Add the text and voila! You can place as many buttons next to each other as you want now. That easy.
Flex Alignment
Now let us have a look at another feature – a flex alignment: horizontal and vertical. First, let’s find out where to find it:
- go to the column settings,
- click on it and you see a “Layout” tab,
- find “vertical align” and “horizontal align” options.
Choose the one. It works pretty much the same for both horizontal and vertical align. Now you see the six options to align the elements. Let’s learn about each of them one by one using the horizontal align example.
Start
In this case “start” means “left” (the place where your eyes start reading). So the elements will be aligned to the left side of the column.
Center
I think you can guess. That’s right. The elements will be at the center of the column.
End
Here “end” means “right” (by analogy with “start” alignment). The elements will be aligned to the right side of the column.
Space between
These are going to be more tricky.
This option allows you to separate the elements with space between them. So the first and last element in a row will be stuck to the left and right side of the column. Unlike the case which we have with the next option.
Space around
Space is added to both sides of an element: whatever it is in the middle or this is the first or last one in a row. This function provides adding space to both sides of an element.
Space evenly
If you tried out the previous way of alignment you may have noticed that visually the amount of space between the elements exceeds the one on the edges of the column. If you’re not okay with that there’s the last option for your elements alignment: space evenly. It also divides them with space but visually there will be an equal amount of space along the entire length of the column.
Now you know how it works. As for the vertical align I’ll tell you just few words. It works the same way as a horizontal one. Unless instead of “start”, “center” and “end” there are “top”, “middle” and “bottom”.
Hide the Column with the New Hiding Function
As you could have noticed earlier, the latest update aims to give a user more possibilities to make their site even more user-friendly. You can work with the displaying on different devices separately.
From now on you can hide a particular column so it won’t be displayed on a device you don’t want it to. For instance, you have an info-box with an image. And you don’t want the image to be displayed on a mobile screen. But you need the information left. Before you had to hide the whole section. But now you can hide only the particular column, like the image from our example, and leave rest part of a section, like the info itself. Pretty convenient, huh?
How to do that?
- Go to “section”,
- “advanced”,
- “responsive”,
- hide a column.
Notice these settings are not displayed while you are working in the editor. You have to go to the live preview to see the changes.
Create Multiple Columns
The last new feature for today is arranging the text in multiple columns.
- Add some text in the text editor,
- Go to the “style” tab,
- In the “columns” option choose the number of columns.
You can change the space between columns if you want.
The function allows you to create up to 10 columns and, of course, you can set different options for different devices.
So if you haven’t checked the latest Elementor features – update Elementor and check them all out. For more detailed review watch the video and see everything with your own eyes. Have fun!
Read Also
Elementor Button vs. JetElements Button Widget
How to display Progress Bar and Circle Progress with Elementor – Tutorial
How to Add an Attractive Headline with an Image Inside the Text with JetElements
How to Add a Price List to the Page with Elementor
How to Add Contact Form 7 Using JetElements Add-on for Elementor – Tutorial