Ability to stack widgets side by side without columns - Inline Block

[ianforest]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
The ability to stack widgets side by side in a single row without columns would be fantastic.

Describe the solution you'd like
Just drag and drop them into a row, simple!

Describe alternatives you've considered
Oxygen page builder has this as well as others.

Additional context
None.

[bainternet]

@ianforest

Can you explain how this is different than using columns? which are basically Elementor's version of a row.

[ianforest]

Sure thing, the first 45 seconds of this video explain it perfectly...

https://www.youtube.com/watch?v=LpJgevZfcdQ

See how widgets can be laid out horizontally as well as vertically without the need for columns.

You could then place 2 or more buttons side by side for example or create a nice CTA like they do in the video above.

[black-eye]

+1
This is definitely needed. Another usecase, besides the buttons, is a header, where you need to place items side by side, e.g. menu, search icon and shopping basket.

[bentalgad]

+1 This is a must!

[bentalgad]

One example where this is needed.

In this example i build a sample header with logo, title, menu links and a button.

Now i want my title to be the same distance from the logo at any screen size but you can see how it is changed because i have to put each one of them in it's own column and the column must have responsive width (percentages).

*Sorry for this bumpy screenshot :)

[maxwellhibbert]

Inline block elements. I've wanted this since first using elementor. Big +1

[williamwa]

+1 for this feature!

Currently I use following custom CSS code to do it:

selector{
    display: inline-block;
}

But if you can add this as an option like "Display: Default(block)/inline/inline-block" etc. that will be awesome!

Thanks!

[kkeennaa]

Yes!

[bentalgad]

Still missing this must have feature! (2.2.1 / 2.1.7 pro)

[ddenev]

In fact Oxygen is using Flexbox by default and not inline-block (inline-block has the whitespace problem that flexbox doesn't).

Similarly to what @williamwa suggested this can easily be achieved by adding "display: flex" to the parent and then manipulating the flexbox via CSS in the child elements (if needed). I use this regularly when I need the flexibilty (pun intended). Microthemer helps here a lot.

I highly doubt that Elementor will go that way as this means a big paradigm shift for the current approach (column-based layout), hence a lot of rework.

Ideally, having both (column-based and flexbox) as part of Elementor would be the killer.

[mylimoproject]

+1

[bkjproductions]

I was surprised to discover that widgets have to be full-width, if I am understanding this correctly. I just want to put two buttons side-by-side, and they will have different widths, so I can't put them in columns. I wonder is there a way to make the columns be width-auto, if the button can't handle being inline? Or is there another widget that is auto-width buttons? I was thinking about maybe using a menu, but then I have to play around with visibility of the menu on mobile to keep from having an extra hamburger menu. That is to say, a menu is really a list of buttons that are inline, so I don't think that it would be a huge paradigm shift. Or heck, maybe just create a different kind of button that is inline?

[phidomo]

@drank how can I get "display: flex" working for a column?

.container-horizontal {
display: flex;
}

Then Edit Column > Advanced > CSS Classes = container-horizontal

When I add two buttons in the column the widgets are still aligned vertically.

[ddenev]

@phidomo

when you add class to Edit Column > Advanced > CSS Classes, the actual class name is added to the column div element, while you need to set the "display: flex" on the immediate parent of the actual widgets you want to align - this might be some "wrapper" within the column div - inspect the code and find the actual element.

[tomas-eklund]

+1

This is an absolute must. Please don't implement any more "fluff" (animated headlines and similar click-bait comes to mind) before getting the basics right.

[bentalgad]

Still missing this must have feature! (2.2.7)

[plxrisa]

+1

[bentalgad]

Still missing this must have feature! (2.3.0)

[tomas-eklund]

I just re-read my own comment and I'm sorry for sounding like a whiner. You Pojome guys are doing an amazing job with Elementor and I realize that prioritization is difficult. I don't mean to be ungrateful. I know that the "flashy fluff" is what sells and drives more customers to try Elementor. But considering the strong current user base, and the competition starting to catch up, I would actually be more concerned with keeping users than attracting new ones.

I have invested heavily in Elementor this last year and have implemented it on a lot of sites we've built for clients. And it's a good thing I'm a coder because it would be impossible to create anything but a extremely simple Elementor site without a lot of coding. Sometimes using Elementor actually drives me to write more complex custom code, because of limitations such as this one. It's seriously a major headache.

You just can't build a sensible corporate web site layout without being able to stack widgets horizontally.

[miguel-cravidao]

Yes, Elementor team has done a great job to create this user base, and awesome widgets are popping up from marketplaces. Although it's hard when you have a visual builder, and you can't control fundamental behaviours. As you said, sometimes we have to code more to achieve the same results as before.

We need highly professional control over HTML elements. I agree on prioritising and maintain the current customer base. This feature and other similar ones are decisive for that.

I want to stick with Elementor.

[bentalgad]

This new plugin add's this ability and some other (like absolute positioning which is also very important):

https://pafe.piotnet.com/

Here is a video of the inline block part: https://www.youtube.com/watch?v=3I8fdtj5cJM

Of course still - this should be built-in in Elementor core function, and it's really not realistic to add another plugin just for this basic functionality! (This plugin add's 2 css files and 3 scripts to your site...)

[maxwellhibbert]

@bentalgad I also found this plugin recently thanks to a reply on another of the many Elementor issues I'm tracking here (in the hopes Elementor will become a viable option one day). This plugin solves so many of those issues, it's really well done.. and you're right, these features should all be core for sure, but at this point I don't care 😄 And if you combine scripts, the added weight of the plugin shouldn't be much different compared to the Elementor team building these features in.

With this plugin installed, about the only problem I have now is global/preset styles and colors. If the Elementor team can somehow solve that issue, so a site bigger than a single page can be maintained in a reasonable way, then I'll be all in.

[bentalgad]

@maxwellhibbert i don't care about weight, http requests are very heavy on the page load time, and Elementor itself already does a lot of those... Also just buying, updating and so another plugin is a really annoying especially when you use it on more then one or two sites (Which i guess is the case for most of the Elementor users).

[maxwellhibbert]

@bentalgad I meant overall page weight, not specifically file-size. If you combine assets then there are no extra requests made.
I agree that it sucks that the functionality is added by a paid 3rd party plugin. But the Elementor team pretty much only focus on the "bling" features that bring in the most $$, and I don't see them adding these sorts of extras anytime soon.

[bentalgad]

@maxwellhibbert this is an nice and entertaining comment, but i really do think the elementor team is better then that. they need to make money and we also need them to, but they also spend a lot of time making the core features better and better each and every version, and i do hope they add this basic ability soon :)

[maxwellhibbert]

@bentalgad well, the only reason I say that is because of my experience so far with the plugin and watching it develop over the last year or so. Front-end devs have been asking for these features for a long time now. Don't get me wrong, I really like Elementor and I want to use it for more projects, that's why I'm always banging my drum around here :)

[tomas-eklund]

<mode type="whining" reason="sheer frustration">

I'm with @maxwellhibbert on this. I do not have the same faith in the Elementor developers as @bentalgad, although I'd really like to be more optimistic. At some point I'm sure they will get it right, but I don't currently feel confident that Elementor will be the page builder that get's there first. And in the meantime we all have to resort to all kinds of workarounds, creating a maintenance mess that we'll have to clean up some day.

Sure, they need to make money and maybe they need to push out new "blingy" features, like they just did the other day, but oh my! It is sincerely frustrating to be active here on the Elementor Github issue tracker trying to push Elementor forward!

Reasonably well researched minor bug reports are dismissed in a second because the developers thinks they know better (and/or want to keep the bug tracker clean without too much effort). Obvious and serious issues like this very one are not even understood. I'm glad you guys are banging your drums, because I sure feel like I'm banging my head against a brick wall sometimes.

Thanks for the tip about the Piotnet Addons for Elementor. I will check it out right away! I'm sure thankful for the community bringing some light in all this darkness!

</mode>

[TamarynT]

I hope this can be added without loss of current features because that would be AMAZING. +30 from me

[quinnfive]

Yes! FLEXBOX is amazing and wish Elementor was using it. +1

[ghost]

Flexbox +1

[bbdstar]

+1. I would love this functionality as well. I'd love to be able to stack a cart icon next to a menu.

[srcek]

Ability to create custom blocks/skins for Posts, Archive Posts, Slides, Call to Action, Flipbox etc. would be amazing. Something like templates but with dynamic features. Flexbox and CSS Grid based block/skins editing interface would open infinite design possibilities.

[omskiteboarding]

Plugin "Raven" for Elementor - https://artbees.net/

[ddenev]

@omskiteboarding, could you please provide a proper link to the plugin you mentioned?

The one above doesn't work.

Thank you.

[omskiteboarding]

raven-v1.0.1.zip

[CursiveQ]

@drank @omskiteboarding

It's part of JupiterX's custom Elementor extending plugin called Raven. It uses FlexBox to to organize either horizontally or vertically.

Raven by Artbees

[ddenev]

@omskiteboarding @CursiveQ

Thank you for the info and links!

Is this plugin publicly available without the JupiterX theme? I wouldn't want to switch my theme and to use a plugin (the zip file above) that I won't get support for.

[omskiteboarding]

Is this plugin publicly available without the JupiterX theme?

Yes

[hufer]

https://pafe.piotnet.com/#display-inline-block Display Inline Block in Piotnet Addons For Elementor can do it for you

[ddenev]

@omskiteboarding

Is this plugin publicly available without the JupiterX theme?

Yes

Could you please give a link? I searched the Artbees website, Google and all the links above but could not find how to download the plugin without the theme.

[omskiteboarding]

#4960 (comment)

[renansantos]

Revolution for Elementor enables flex columns
https://wordpress.org/plugins/revolution-for-elementor/

[eblosch]

Another use case (if you're looking for one)... displaying custom fields:

FirstName LastName

vs.

FirstName
LastName

[bentalgad]

@eblosch i think the most appropriate solution for that use case is the beaver "insert" approach which let's you insert multiple src's. i have feature request for this: #5966 please add your thumbs there :)

[fxaviers]

+1

[bentalgad]

Wow, we need this basic function so much, i still can't understand how this so basic function isn't added in the first place...

[bugfloyd]

+1
With the lack of the ability to re-order columns in a section with more than 2 columns on responsive view, It is a most have for responsive design.
relevant: https://github.com/elementor/elementor/issues/5745

[zrk4444]

+1

[jlove73071]

Is there another way to get multiple pods fields to display inline? I have a column of feet and inches..
And I'd like to display 12 feet, 2 inches. all on one line or as part of a sentence. Any way to do that? If it were just 1 piece of information it'd work just fine, but since there are 2 fields, I'm having issues

[shilo-ey]

This feature has been added in Elementor v2.5.0
https://elementor.com/blog/introducing-flexible-layout/

Feel free to update!