Elementor Container Tutorial | No More Sections And Columns 😎
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Soon Elementor will come with an update that lets you create your pages using the container element/widget instead of sections and columns. It is still in beta but in this tutorial, you can learn how to create pages using the Elementor container.
I will show you how to get access to this new update, then I will show you the basics of the container and after that, it is time to create a page with the new container.
Since it is in beta there are a few bugs. I will show you where those bugs are. If you see another one, please let me know in the comments so I can address it to Elementor.
Get Elementor (Pro): ferdykorp.com/elementor
Overview With Timestamps:
00:00 Intro
01:23 How To Get Access To The Elementor Container
02:35 Configure My Favorite Settings
03:26 The Basics Of The Container
09:44 Change The HTML Tag Of The Container
10:44 Container Directions, Aligning and Justify
13:05 Create A Hero Using The Elementor Container
19:11 Create A Container With 3 'Columns'
22:43 Mobile Responsiveness
23:51 Make The Container A Link
24:49 Rebuilt a part of Apple.com
31:40 Import Pre Made Templates - แนวปฏิบัติและการใช้ชีวิต
EXACTLY what I was looking for. Thank you so much for this tutorial, Ferdy. 30 minutes very well spent.
Great video. I am currently learning CSS and this update really shows the flex box characteristics so well. Can't wait for Elementor to release the final version
Another excellent video Ferdy. I always appreciate your honesty and I've learned so much from you!
Very helpful tutorial, you are always on the cutting edge with great , helpful info, and tutorials. looking forwards for your in depth tutorial. thank you very much .
Great video! It forced me to install Elementor Beta Dev - Been playing with containers for the whole day .... Turns out the flexboxes are much easier to deal with... Looking forward for a stable version now.... Thank you, Ferdy! I like your tutorials ... ))))
Thank you so much! The new Container feature has been driving me crazy the past few days, I just couldn't figure out how to make new columns with this new thing. 😂 But now I do thanks to your video. 🙌 Awesome content!
Thank you sir. I was confused as hell for awhile because I can still copy and paste sections and columns but could not create them ... now I finally understand why ... Elementor switched to flexbox layout and it makes more sense now!
Thanks, Ferdy, we love what you do too. Looking forward to the container element :)
Goodie! 👍
Looking forward to that in-depth tutorial of yours when this container thing goes live! 🙂
awesome job Ferdy, really enjoyed this tutorial - inspiring stuff!
Thanks so much Ferdy. Great job dude. I'm not sure if this is an improvement or just over complicating something that wasn't broken. This reminds me of when Dreamweaver went to Floating Boxes or something like that, which was awful, then to Bootstrap which made a lot more sense. Feels like we're going backwards here.
This is definitely a step forward. This is a huge step in the right direction. I see moves Elementor more in line with the box model. We can naturally progress to CSS grid from here.
Agree with you.Its going more complex. Probably Elementor going to lost their customer very soon.
On the contrary, they are embarrasingly lagging behind. Many other pge builders have been using flexbox for quite sometime. It's the future of modern day web design. Not only does it make more sophisticated page layouts much easier to achieve, it also significantly reduces the amount of code needed to achieve them. The current system of sections, columns, inner sections etc, generates significant code bloat, something that even Elementor themselves admit, which can greatly slow down site speed. As a test, create a new blank canvas page, add just an empty section, preview the page and then inspect it and see how much code is required just for a single empty section. The burning question is, just how much longer are we going to have to wait before it's no longer 'an experiment'.
As soon as I heard the Gutenberg joke I liked the vid straight away. Great tutorial man!
Thanks so much ferdy... Looking forward to more..
You would need margin- left and margin-right to be set to auto to center the outermost container. Glad they brought in containers! It should mean far less excess DOM elements.
Awesome, thanks for the clear instructions!
Thank you! Just solved one of my problems in 2 clicks!
Hei, nice tutorial. It's helpful for learning the basics of the new container option. One small notice, because i am watching almost every tutorial i can find on containers, i learned that even if containers are an improvement over sections, in terms of code generated and less DOM, i think you are using way to many containers. Some things can be achieved without making containers inside containers.
Thanks again for this lesson, looking forward to the Alpha version
Thanks a lot Ferdy you are the best
Good one, thanks so much Ferdy
This is awesome! I always liked flex-box!
Really useful tutorial thanks, Ferdy
thank you so much! that was very helpful! ❤🙏
awesome!! thank you for this help video!
Didn't know this. now I want to change my existing website :( cool video....
Thanks Ferdy 🔥
Really useful video.
Explanation:
I am not using the pro version of elementor right now and this technique you just told in video will enable me to design my template where I need content side by side despite I can only add (child container again and again in place of inner section{Pro feature}) , that container always go below previous child container and you also can't add a new (2 columns[after clicking plus symbol ]) container in previously generated new empty container with the free version.
So this technique will enable you to do pro feature work in free version.Thanks again.
Youe Elementor Container Tutorial very good
Thanks for the video Ferdy! I gotta say, I'm indifferent to these new changes. Based your tutorial, there seems to be too many errors/glitches with the update...time will tell.
Great video!
Thank You Fredy 🥰...
Great tutorial
thank you Ferdy ❤
Brilliant, as always :-)
Excellent tutorial. Thank you.
How do we overlap widgets and containers with this new setup?
Hey, great video! What screen recording software are you using? Looks awesome.
Great job. Thanks ;)
this is great new feature, it is opening to new possibility to web creation. In my case, this will best for creating more creative header, mostly for custom width header (elementor header mostly full width), been strugling to create it with elementor
That functionality already existed in kadence block, a Gutenberg extension, even before the new version of WordPress 5.9 came out, because in this latest WordPress update they added a block called row, and it is similar to this functionality of Elementor that they are just launching in beta.
great tutorial
Thx for Help!!!
Thank you so much for this Ferdy. Can you confirm how you measured the image again around 27:07 please?
Thank You
Thanks for the tut. "Learn Gutenberg ... hahaha, as if anyone would want to!" LMFAO
Woww.. Thanks body, great video again.. And now less DOM fast WEBSITE...
Een geweldige uitleg over de nieuwe mogelijkheid.
Is deze container mogelijkheid gebaseerd op CSS-GRID-MODULATIE?
Great video, but correct me if I'm wrong , If I have a primary container and then insert lets say 6 containers into the primary container the "items justify content" for containers with in the container do not work .... is that correct ? or am I doing something wrong ?
I would think to get those 3 Containers to center you could wrap those 3 inside of 1 container and have that container at 100% centered.
Nice content.
Wondering... I've seen the pixel measurement tool on several webdesign videos now, mind providing for its name ? Thanks Sir !
This new container is really cool. Problem is the the bugs I have been facing. In my case, everytime I drag a new element, it comes duplicated. So I deactivated it:(
Can't wait for it. Mine does not have the column drop down menu option yet.
hey would it be possible to create a side header with the new container? i tried following another tutorial but as soon as i apply it to a page it stretches back to full width and is over all the page content. Would it be too much to ask you to do a tutorial for that
thaaaanks i wana ask you something i see all your videos
but one thinks i didnt find it how to setup click to update single section instead of update all page with elementor
means like twitter instegram when you like a post it didnt update all the page to update this section
how we do that
and fore extra information the (container) update from elmentor from 2019 shopify have it hhh
because that every one thught shopify faster then wordpress >>i dont like shopify because the high price
this is good for developers who know CSS, that's a flexbox container
Is there any way to be able to drag text and images around free form anywhere on tablet, phone and dekstop versions?
I'm sitting manually tinkering borders, margins and things that are not mean for positioning of elements.
Is this different from regular vs. Pro? (I don't have Pro)
How to activate container in elementor
Many thanks. Excellent video
Good
Hoi Ferdi, worstel met het maken van een sidebar in Elementor, en een sidebar die ik ook elke breedte kan geven die ik wil. Elementor containerversie btw.
When changes start?
I'm new at this. What's the difference between container and a section? I might have missed that.
And I'm building my first website in the near future, should I use sections or containers or skip elementor and start with Gutenberg? Thanks
Try both and see what fits you best, I am using sections. When the stable version comes out tho, I will switch to container.
how do you resolve making sure buttons stay along one line if there is a different amount of text in icon box? thanks
thans a lot
Great...
Hi! I just try to do something and it looks like impossible... I have a header with 3 things: 1- left menu 2- logo 3- right menu
I can easily place those in a row (I make a container per item to get more flexibility). Now, I just want to add a container that would be just under the left one (number 1) to add social media just under the header in the corner... But as soon as I add a container it just move everything to go in the same row... How can I let the first part unchanged and just add this container under the row and then adjust the position and contain...? Thanks!
Please tell me that you can save the "parent" flex container as global. Is that possible?
Just saw video yesterday and been messing with it. Problem is when I place post widget will not let me exclude any or offset as it will not open
Brother, Please do a full tutorial for the TokenICO plugin.
Hi Fredy
Am having trouble with my site, I designed it using elementor with the Astra theme, but bullet points and numbered list don't on the front end. I was told element causes the issue but I don't want to change the page builder. Do have any suggest fixes for this issue?
What software you use to screen recording?
18:00 Spacers are actually not a good idea, just use padding :) But cool video, thanks!
Not quite as good as it could be, it's just a re-imagining of sections but the columns are hidden. But still a step behind the advanced Wix builder that's literally drag and drop anywhere. But good to see new ideas like this in Elementor.
Let's hope they make it better 😊
some of my pages have gone wacko. people on the elementor FB group are saying we shouldn't be using containers on live site.
i tried turning the container off and my container pages went blank
elementor flexes on elementor
Is the update already out at the stable channel?
I believe its better if we wait for the final update before we use it
How do I stretch the container to the entire width of the screen? Full width content doesnt fulfill this function.
Will Elementor templates still work?
At 10:40 you typed in a link of your website but you forgot the R however it still redirected you to your website with the R (korpers)
How?
how to add migrated navigation menu on header with elementor
When does it come out?
Hello ferdy sir....
It's soo soo confusing... This new update. But I know you taught us this😇.
🤔Is it any better than the first one?
Hey Ankush, it is better! But it needs some refining.
With those new tools we are going to forget to CSS
17:37 sorry Ferdy but you're mistaken. Its not a bug at all. You simply need to set the parent container to align items: center. Adding spacers is bad advice. Please review the flexbox spec.
Yes, thank you. I got the feedback already and felt so stupid. I keep on learning 😊 And yes, adding spacers os bad advice.
can we now use this feature for client? is it safe?
Yes, it is.
I am using Hello Elementor Theme. How can i create Container that is on the same level as the default Hero container?
Is this Elementor's new strategy to load faster and reduce bloat?
How do you freely move containers just moving them around
Using the layer panel
container does not avail for me, what will I have to
❤️❤️❤️❤️
Hi Flexbox 😎
What's the main advantage of using this container-based than the normal?
From my little knowledge it makes the page loads faster because, less codes, let's wait for an expert to validate my comment
Correct. A huge reduction in DOM elements. Much cleaner code. More in line with something like webflow.
Ferdy, please post this video using dutch language. My English isn't good enough to be able to understand everything you say in this video
Pls help, I couldn't find the container
how to measure it?
6:31 bro is just flexing editing skills 💀
Elewebflow :D
Hi Ferdy Thanks much for the video- so helpful!
But then I have this issue; when I try to activate my Elementor developer edition, it's makes my website dashboard crash- showing a fatal error report. What could be the problem and how do I fix?
Hey! You are welcome! Where do you host your website?
@@ferdycom It's a pantheon freehost for practice. Probably that's the reason?
@@ferdycom But then, is the new Elementor developer edition live now?
Yes, that is the problem.
To which version are you referring?
Thanks Ferdy for this very interesting tutorial, as always. With your help, I'm going to save some money. I was decided to switch from the free version of Elementor to the Pro version. When I saw your tutorial, I thought that Elementor has fallen on its head.They had the best tool you could ever dream of and, because of this pride in change at all costs, they made their page builder go several years back.
Until this system becomes the mandatory standard, I'm going to stay with the free version of Elementor while looking at Divi and Joomla to find an alternative that suits me better than this madness pushed by Elementor. This new version seems to me to be as bad as the WordPress Full Site Editing.
This is the new golden standard. Everything becomes much easier, its why Oxygen, Bricks and so on are so popular.
why would you even consider Divi? Just awful. The container feature is EASY to use once you get a bit used to it. It offers a lot of flexibility.
@@pxman1946 I respect your opinion but this standard is not for me. Up until now, I love Elementor but not anymore.
@@jamesdavis8731 You have your choices and I have mine. For me, this container system is the worst of all page builders and I will never use it. I preferred Elementor to Divi but now this is just the opposite.
@@gilcambo9778 Once you explore the container systems, using flex and grid you'll be amazed at how you never used them before - I was at least..
However Guteberg I find intolerable to use.
3 months later and it’s still in beta. Or alpha.
Where is the Stretch to Full Width ???