I was helping a colleague with a WordPress website built through Elementor and I ran into a small design questio: how do we make widgets display on the same line?
We had a relatively simple design to display: the page title with a black background with rounded corners followed by three right-pointing arrows each with the same background, just a bit shorter.
I found it silly to have to use a whole “inner section” widget and than play with the margin just to accomplish this simple task.
So I started digging into the “advanced” control tab. I kept overlooking the “custom positioning” option in the “advanced” tab of the widget. It turns out that this should actually be called the “custom positioning and widget width” option, since there are a few options there of how wide the container of the widget should be.
The one that interests us is “auto”. This sets the container of the widget to be no wider than that which it contains, rather than the default, which is that the widget is as wide as it’s container.
In our case the title widget was 100% wide by default, so if the widget’s container’s parent was 4 inches, then also the widget’s container will be that wide. When we set the width to be “auto”, than if the length of the title is 0.4 inches, than that’s how wide the container will be too.
Once our container’s width doesn’t cover the entire width of it’s parent container, it will be displayed inline with other containers who’s collective width is less than or equals 100% of the container’s parent.
Now we just repeat the process with the right pointing arrows. Also, make sure that the vertical align is set to “middle”, since this widget is shorter than the title.
Now just copy and paste the style for the other two widgets and you’re set!