Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ianforest opened this issue Jul 5, 2018 · 50 comments

Comments

Projects
None yet
@ianforest
Copy link

commented Jul 5, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Jul 5, 2018

@ianforest

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

@ianforest

This comment has been minimized.

Copy link
Author

commented Jul 5, 2018

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

This comment has been minimized.

Copy link

commented Jul 7, 2018

+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

This comment has been minimized.

Copy link

commented Jul 7, 2018

+1 This is a must!

@bentalgad

This comment has been minimized.

Copy link

commented Jul 7, 2018

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).

2018-07-08 00 56 41
*Sorry for this bumpy screenshot :)

@maxwellhibbert

This comment has been minimized.

Copy link

commented Jul 9, 2018

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

@arielk arielk changed the title Ability to stack widgets side by side without columns Ability to stack widgets side by side without columns - Inline Block Jul 16, 2018

@williamwa

This comment has been minimized.

Copy link

commented Jul 28, 2018

+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

This comment has been minimized.

Copy link

commented Sep 5, 2018

Yes!

@bentalgad

This comment has been minimized.

Copy link

commented Sep 5, 2018

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

@drank

This comment has been minimized.

Copy link

commented Sep 5, 2018

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

This comment has been minimized.

Copy link

commented Sep 6, 2018

+1

@bkjproductions

This comment has been minimized.

Copy link

commented Sep 21, 2018

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

This comment has been minimized.

Copy link

commented Oct 13, 2018

@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.

@drank

This comment has been minimized.

Copy link

commented Oct 21, 2018

@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

This comment has been minimized.

Copy link

commented Nov 6, 2018

+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

This comment has been minimized.

Copy link

commented Nov 6, 2018

Still missing this must have feature! (2.2.7)

@plxrisa

This comment has been minimized.

Copy link

commented Nov 13, 2018

+1

@bentalgad

This comment has been minimized.

Copy link

commented Nov 13, 2018

Still missing this must have feature! (2.3.0)

@tomas-eklund

This comment has been minimized.

Copy link

commented Nov 13, 2018

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

This comment has been minimized.

Copy link

commented Nov 30, 2018

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 comment has been minimized.

Copy link

commented Dec 6, 2018

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

This comment has been minimized.

Copy link

commented Dec 6, 2018

@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

This comment has been minimized.

Copy link

commented Dec 6, 2018

@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

This comment has been minimized.

Copy link

commented Dec 6, 2018

@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

This comment has been minimized.

Copy link

commented Dec 6, 2018

@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

This comment has been minimized.

Copy link

commented Dec 6, 2018

@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

This comment has been minimized.

Copy link

commented Dec 6, 2018

<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

This comment has been minimized.

Copy link

commented Dec 6, 2018

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

@quinnfive

This comment has been minimized.

Copy link

commented Dec 7, 2018

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

@faizan47

This comment has been minimized.

Copy link

commented Dec 9, 2018

Flexbox +1

@bbdstar

This comment has been minimized.

Copy link

commented Dec 12, 2018

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

@srcek

This comment has been minimized.

Copy link

commented Dec 12, 2018

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

This comment has been minimized.

Copy link

commented Dec 22, 2018

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

SqvC3v

@drank

This comment has been minimized.

Copy link

commented Dec 23, 2018

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

The one above doesn't work.

Thank you.

@omskiteboarding

This comment has been minimized.

Copy link

commented Dec 23, 2018

@CursiveQ

This comment has been minimized.

Copy link

commented Dec 23, 2018

@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

@drank

This comment has been minimized.

Copy link

commented Dec 27, 2018

@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

This comment has been minimized.

Copy link

commented Dec 27, 2018

Is this plugin publicly available without the JupiterX theme?

Yes

@hufer

This comment has been minimized.

Copy link

commented Dec 29, 2018

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

@drank

This comment has been minimized.

Copy link

commented Dec 29, 2018

@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

This comment has been minimized.

Copy link

commented Dec 29, 2018

@renansantos

This comment has been minimized.

Copy link

commented Feb 1, 2019

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

@eblosch

This comment has been minimized.

Copy link

commented Feb 5, 2019

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

FirstName LastName

vs.

FirstName
LastName

@bentalgad

This comment has been minimized.

Copy link

commented Feb 6, 2019

@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

This comment has been minimized.

Copy link

commented Feb 8, 2019

+1

@bentalgad

This comment has been minimized.

Copy link

commented Feb 8, 2019

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...

@arielk arielk added this to the 2.5.0 milestone Feb 11, 2019

@yaaashaaar

This comment has been minimized.

Copy link

commented Feb 15, 2019

+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

This comment has been minimized.

Copy link

commented Feb 16, 2019

+1

@jlove73071

This comment has been minimized.

Copy link

commented Feb 27, 2019

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 comment has been minimized.

Copy link
Collaborator

commented Mar 4, 2019

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

Feel free to update!

@shilo-ey shilo-ey closed this Mar 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.