How To Use The NEW Elementor Container | Flexbox CSS

How To Use The NEW Elementor Container | Flexbox CSS

WPTuts

2 года назад

70,072 Просмотров

As Elementor gets closer to releasing the new Container Widget and opens up more design options with the Flexbox, here's your getting started guide.

The new Elementor Container is going to fundamentally change the way in which we design with this WordPress page builder.

To ease the transition, my beginner's guide to getting started with the Container widget should help those transition blues.

If you want to see how to speed up the process, you can also watch my recent guide to using the Converter tool for Elementor to automatically convert your existing designs to the new Elementor Container.

Container Convertor: https://www.youtube.com/watch?v=mOWk5_xtFn8
First Look at Flexbox: https://www.youtube.com/watch?v=Zvlbt46K_uk

✅ ELEMENTOR PRO: https://jo.my/1s0t2s2

Take your WordPress website and skills to the next level!

► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.

► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: https://jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: https://jo.my/etafyp (WPTUTS for 20% off - Exclusive)

► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: https://jo.my/1feeng8
✅ SiteGround: https://jo.my/sgwptuts

► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: https://jo.my/1s0t2s2
✅ Brizy Pro: https://bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: http://bit.ly/2HiiDcE

► WORDPRESS THEMES ◄
✅ GeneratePress Premium: http://bit.ly/2Ydn1SE
✅ OCEANWP: http://bit.ly/2fRHBr0
✅ DIVI Theme: http://bit.ly/2G8JMiA
✅ Astra Pro: http://bit.ly/2zruoKn

► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: http://bit.ly/2G0G1vB
✅ CSSHERO: http://bit.ly/2qbrRl6

► WORDPRESS PLUGINS ◄

✅ SEOPress Pro: https://jo.my/seopress

► SUBSCRIBE ◄
http://bit.ly/2rX7rhu

► LETS CONNECT: ◄
👉 Twitter: https://twitter.com/WPTutz
👉 Facebook Group: https://wptuts.co.uk/facebook

SUPPORT: Our website offers additional information and perks. Please check it out! http://wptuts.co.uk

Тэги:

#WPTuts #elementor_container #elementor_container_element #elementor_container_tutorial #elementor_flex_container #elementor_container_widget #elementor_flexbox_container
Ссылки и html тэги не поддерживаются


Комментарии:

Bambang Utoyo
Bambang Utoyo - 07.07.2023 15:37

The next tutorial could you please explain us about the Video box widget and video widget ? Thanks

Ответить
Bambang Utoyo
Bambang Utoyo - 07.07.2023 15:34

Thank You, it's best tutorial

Ответить
Bernard Ebuehi
Bernard Ebuehi - 10.06.2023 02:11

how do i close the gap between two containers

Ответить
Armen Agaronian
Armen Agaronian - 29.05.2023 19:10

no experiments tab on elementor settings

Ответить
ajmalexper9
ajmalexper9 - 18.05.2023 13:34

Incredible Tutorial , Well explained , Thanks for your helpfully channel

Ответить
Jip Asveld
Jip Asveld - 11.05.2023 12:35

Thanks Paul, very useful explanation. Now that containers are out of beta I am planning to use them.

I do have one question remaining after this video: if I want to add design elements to existing websites that I have made earlier (so with sections), but do not have the time (yet) to turn all older sections into containers, would it still be okay to turn on container mode and add the new design elements as container "next to" the section elements on the same pages? Or is it better to only use container mode on websites where I build the complete layout based on containers?

Ответить
Atul Roy
Atul Roy - 04.05.2023 11:44

NIce video, Paul.

Ответить
Your Friend
Your Friend - 26.04.2023 23:35

Thank you very much. You explained it very easily

Ответить
Melissa Crossland
Melissa Crossland - 26.04.2023 05:04

How come they removed the option to stretch a section/container? Is there still a way to do this?

Ответить
Just Go See
Just Go See - 29.03.2023 20:33

I rarely watch videos to figure anything out but this was extremely helpful to grasp and understanding. I'm confident this will make my life much easier. Well done and thank you!

Ответить
Pedro Miguel Pagán-Rivera
Pedro Miguel Pagán-Rivera - 29.03.2023 20:28

Thank you so much.

Ответить
plantifulalexandra
plantifulalexandra - 11.03.2023 14:16

It all looks way easier, it's just a pain to get into something new after years being used to the old system.

Ответить
Deyo Glines
Deyo Glines - 10.03.2023 21:33

This is super helpful. Quick (maybe dumb) question, when I convert do all the tablet and mobile settings convert also or will I need to go back and redo? I know there might be some tidying up but for the most part it converts all setting, yeah?

Ответить
Subtronik
Subtronik - 04.03.2023 06:45

Elementor is missing a figma style grid layout for alignment, and their help documentation seemed to mock designers for needing this. Luckily the happy addons plugin has one. Have you done any videos on the happy addons plugin?

Ответить
Subtronik
Subtronik - 04.03.2023 06:42

Great video, cheers. I test everything on live sites but lock the site under an 'under construction' plugin page so nobody can see the sites apart from my clients. That way I can test everything on all the major browsers to see if the site is displaying or working properly. I don't think this has any negative impact on SEO, but need to check.

Ответить
Mohamed Bouslouh
Mohamed Bouslouh - 17.02.2023 17:14

Thanks

Ответить
Simon Clay
Simon Clay - 02.02.2023 10:42

Hi @WPTuts, I emailed you a quick video of difficulties I see on the horizon for us with Elementor and flexbox that no one seems to be discussing. Just checking if you received it? It might be a good item to do a video on.

Ответить
Niels Net
Niels Net - 24.01.2023 16:16

Paul... when I'm looking for tutorials and I see your face on the thumbnail I already know that I will have success ! You are my new best friend ! =D

Ответить
𝖆𝖓𝖌𝖊𝖑
𝖆𝖓𝖌𝖊𝖑 - 16.01.2023 04:56

ty, very helpful video.

Ответить
Nicole Nixon
Nicole Nixon - 12.01.2023 13:09

This article will be very beneficial for anyone new to WordPress who wants to start building their own websites. Using ElementsReady might speed up the process and make it simpler for beginners.

Ответить
Zack bingzhi
Zack bingzhi - 29.12.2022 06:21

Hi, why is my container editing interface different from the one on the video?

Ответить
Chukwubuokem Odiaka
Chukwubuokem Odiaka - 28.12.2022 15:29

Can I add a source query a container and use it as an archive?

Ответить
Michael Kwan
Michael Kwan - 22.12.2022 20:06

Very well structured. Thanks Paul

Ответить
V3ry H1gh
V3ry H1gh - 22.12.2022 07:56

what an absolute headache. merely touching a column within these containers will break the entire template.
Implementing bootstrap would make this process so much more easier and actually more stable than attempting to 'experiment' with a feature that is more than likely not recommended for a live site.

Ответить
Jose Ramirez
Jose Ramirez - 10.12.2022 06:24

Paul, thank you for sharing this video, you are really good in explaining complex things, now I have a better understanding about the container feature!!
Thank you my friend!!! 🙏

Ответить
David Javier Rivera Quiroz
David Javier Rivera Quiroz - 05.11.2022 23:47

Desde la República de Panamá, gracias por su trabajo, excelente maestro.

Ответить
julie gubler
julie gubler - 05.11.2022 19:35

So well explained. Easy to follow even though the NEW Elementor Container is even newer than when you created this video. Thanks for explaining this better than Elementor did.

Ответить
Gone By Midnight
Gone By Midnight - 04.11.2022 15:47

now it’s in beta state and labelled stable. Would you use it on a live site now?

Ответить
HighSite | הייסייט - בניית אתרים
HighSite | הייסייט - בניית אתרים - 01.11.2022 15:44

I truly dont get it. Yesterday i activated the flax container on my live site. i worked on it all day. Also added html css js to some factors. So now your saying dont use it on live sites. 😒 now what will happen? My site looks the same? Is it gonna break? And why does elementor feature this if not for publish sites? My god i want to keep what i made with containers but afraid that my website will get destroyed. Does Someone had this issue 🤔??

Ответить
R Leeds
R Leeds - 28.10.2022 04:16

Amazing video, thank you so much. Could you show me two things if possible - 1) how to create a masonry layout with say 9 blocks of text. 2) how to set the text to read sideways. One of your layouts would have looked good if the text was sideways. eg at 1820

Ответить
Vikram Thakker
Vikram Thakker - 19.10.2022 23:19

Elementor is widely popular for its intuitive UI of sections, inner sections and columns.
Containers pose a big learning curve.

Ответить
rany bolek
rany bolek - 13.10.2022 00:38

Hi, do you still do not recommend using these on live production projects?

Ответить
James Griffith
James Griffith - 07.09.2022 20:46

Is it safe to use Elementor Flexbox Container now to build "live" websites in September 2022? And how much quicker does the web pages load using Flexbox Container rather than the traditional way of creating pages with Elementor? Thanks

Ответить
Alvarez
Alvarez - 31.08.2022 06:03

Thank you !!!!!!!!!!!!!

Ответить
Miguel Mondragon
Miguel Mondragon - 27.08.2022 01:40

how make desktop 4 columns ,tablet 2, mobile 1 - similar to css grid with elementor and flex, for complete control

Ответить
jrm Atlanta
jrm Atlanta - 11.08.2022 21:17

Hi Paul, when you added a container then added a background full width I noticed there is still a white dotted box inside the container. If there is no columns or inner sections in the new container, what is this white dotted box?

Ответить
Skopelos
Skopelos - 04.08.2022 02:00

Thanks so much, Paul for yet another great explainer video! I was a bit hesitant to start implementing it - but now I feel much more confident!

Ответить
Shahzad ka jawab
Shahzad ka jawab - 02.08.2022 19:52

I did not find this container widget in my elementor pro. You are using DEV. Is it different from pro?

Ответить
sid ra
sid ra - 06.07.2022 16:29

you are great man

Ответить
Ryan
Ryan - 03.07.2022 01:28

I had been extremely frustrated with the section layout in elementor for years and I was about to say screw it and build a website in Flask, but then I noticed the flex-box experiment pop up in the elementor settings. I started using it, and I'll never go back. This has completely changed my outlook on elementor, and I'll happily say that I'm going to stick with wordpress and elementor until I outgrow the platform.

Ответить
BGC Khinkali
BGC Khinkali - 09.06.2022 13:22

Paul, in your video you say don't use this on a live site - is this still the case June 2022 - thanks for making these videos they really help me to make better websites Al

Ответить
Todd Blackmon
Todd Blackmon - 03.06.2022 23:11

Paul, I know you said do not use this on a production site but would you feel comfortable using this brand new site?

Ответить
Darren G
Darren G - 30.05.2022 12:31

Great video Paul! Do you know when this is released fully?

Ответить
Dseo Dorota Hojda
Dseo Dorota Hojda - 24.05.2022 19:04

Thanx :) it's great video.

Ответить
kanal525
kanal525 - 19.05.2022 11:10

Okay guys, what is the point of this if we can't use it on a live website? Why would I use it? Maybe I am missing something...if the sheer quantity of code was the problem with the old way, and you introduce flexbox container but can't use it, what's the point of it? Why introduce something that cant be used on a live website.

Ответить
Sergey C
Sergey C - 15.05.2022 04:43

Thanks for the great explanation. I still wonder if I can use it on a website I am about to make. You know... I will give it a try in a real project. Hope I won't regret.

Ответить
Claudio Vagnoni (RealCoach)
Claudio Vagnoni (RealCoach) - 04.05.2022 09:50

***I did not understand everything. Shouldn't I activate the Elementor DEV on a live environment?

Ответить
JJ
JJ - 13.04.2022 17:50

Such a great tutorial, as always. Would love to see a continuation of videos like this one, using Flexbox to further demonstrate how to create more complex layouts and even nested layouts - would be incredibly helpful if you'd consider doing so.

Ответить
Motion in Mind
Motion in Mind - 13.04.2022 09:36

Fantastic, thank you!

Ответить