Get Started With Elementor Containers | Part 1
ฝัง
- เผยแพร่เมื่อ 30 พ.ค. 2024
- #elementor #elementortutorial #container
We can finally use the Elementor Container builder! That is why it is time for a lot of new Elementor tutorials. In this tutorial, we will take a look at positioning the elements using content width, minimum content height, direction, justify-content, align-items, padding and margin, z-index, and more.
We will also style the menu, nest containers, add a menu button on the tablet and mobile view and create a popup menu like the Tesla.com website.
00:00 Intro
03:24 Create The Header
07:13 Direction, Justify Content, and Align Items
10:39 Padding and Margin
21:30 Nesting Containers
31:46 Make Your Page Responsive
40:20 Create A Popup Menu
46:35 Mobile View - แนวปฏิบัติและการใช้ชีวิต
![[TH] VCT Masters Shanghai Playoffs DAY 1 // 100T vs FUT | FNC vs GEN](http://i.ytimg.com/vi/erQ7pGChzxA/mqdefault.jpg)
Awesome tutorial! I love the things Elementor is doing to create websites more easily, and the way you explain everything is just clear as water, keep up the great work!
Ferdy, I just have no words to thank you! You explain so clear and it is great help for me! Sometimes things looks easy and simple, but if any detail is skipped it is impossible to see the big picture... Again - thank you a lot!
A+ tutorial. Detail oriented yet not boring - a magical combination.
My very first Elementor website I built after watching your tutorials a few years ago. Nice to be back to learner Containers from you.
Being both new to website building and Elementor (particularly containers) this part 1 tutorial has been a succinct education. I am very interested in more understanding of how to move headers and text around the page, if you have time to include in part two or three. Love all the little subtleties you bring to the design!!
I'm in Elementor a lot and really enjoy your style and details. Well done!
This is awesome. I used sections with inner sections to create more customizability but now it will smooth out the process. I give WordPress training to resellers so this will change a lot of my training. Thank you Ferdy.
Ferdy,
You don't have to leave the editor and go to the dashboard to open a new page/template.
Press CTRL + E for the finder, type the name of the template/page and it will open in the editor.
thanks brother
Ferdy, I got around to watching this tutorial after spending a few days struggling with containers. This tutorial is a gold mine of information. You helped me solve a few issues I was losing my mind with.
Thank You!
Brilliant tutorial Ferdy! Thanks for sharing your knowledge.
Thanks Ferdy. Excellent tutorial as always. You saved me a fortune of time trying to figure it out alone. So very grateful.
Hi Ferdy, thank you for this tutorial, please keep going deeper with Container building...thank you!
It was a professional and detailed explanation. Your videos are very understandable. Really thanks Ferdy.
That was excellent Ferdy thank you for sharing. I have just started playing with containers on a localhost and getting to grips with a new way of working 😀
Excellent tutorial! I always learn something new in your videos. Great job!
Great one tnx! And love the joke about Reno, living with pixels, you are both my number one Elementor heroes!!!
This is a great overview! Still relevant at a year old. Thank you Ferdy.
My congratulations, amazing video, with correct analysis and explanation of the movements you do.
Love listening to your tutorials. The Great Ferdy Korpershoek Humble personality. Awesome ❤
Thank you for your kind words ❤️
this was a very good tutorial learned alot of things
kindly make more detailed tutorial on elementor in depth
love from Pakistan
I learn a lot from your tutorials ...........You are inspiration for me love from Pakistan
TH-cam os rushing with people who don't know how to deliver the solution and you are the whole solution in this rush ❤😢 thanks
Hey Ferdy, I started to make website on my own 10 years ago with TH-cam of course! I saw a lot … like a lot of tutorials. Let me say this
You are absolutely the best. It is crystal clear! And like i said, i have seen a lot of them 😅😱
I was hesitate to use container, but this tutorial convinced me! I will start with my own website of course! Thanks again and keep it up man! 💪💪
Fantastic tutorial, made the process super clear.
I am a slow learner Ferday. But this tutorial gave put me on a rocket. You are the best teacher after Harvard's professor David J milan.
brilliant! you are so talented and such a good teacher, i love it, thank you
Thank you!!!! Being a newbie with Elementor this really helped!
Best elementor content on TH-cam! Cheers bro! 👊🏻
its really helpful ferdy, thank you for your efforts
You are soo funny. Thanks for brightening up my day. Oh and I learned something about Containers as well.
Great video Ferdy, thanks for always posting good tutorials that help us a lot.
Do you think it is convenient to use the containers in a production environment?
First time here, I picked up the Dutch accent haha, and I love Tesla too. And work with Elementor, daily. So I subbed! Groetjes uit Middelburg! 😊
Brother, you are the greatest. I Thank God for you.
thank you Ferdy, I really learnt a lot from your videos
I like the way you teach specially the speed and details which will be applicable to developers like me.
Hey Ferdy, you make great videos!
You did make one mistake: you copied the first container with the negativ margin for the further models. This is why your first container doesn't have a full hight anymore. Did you not notice that? 😉
z-index: why give every element of the menu a z-index? Just give it to the container.
Also you asked for developer feedback: I noticed, that you like to use pixels for everything. You shouldn't use them with flexbox containers and responsive webdesign. It makes much more sense to use vh, vw and % but NOT pixels.
cheers.
Duidelijke tutorial over het toepassen van de nieuwe flex container ! Ik kijk al uit naar de volgende...👍
SOOO helpful! Thank you so much!!
Hey, I enjoyed it from start to end. When you said Oh no my secret data I paused! but that was no secret data. haha🤣
Really enjoyed the tutorial. It's deeeepa.
Great tutorial @Ferdy, you are the man!
This is an amazing tutorial, thanks a lot. Helped me a ton! One question: How do you do this zoom-in Effect in your tutorials? It looks so good.
that was great Ferdy, very well explained.
Great course. Thank you so much 🎉
Weer een mooie tutorial. Mooi, simpel uitgelegd.
Ben benieuwd naar de volgende ;)
Super helpful! Thank you!
Fantastic thanks for the help. God bless!
Great tutorial, thank you!
Awesome! you helped me a lot! Keep it up Ferdy
very helpful tutorial ! The container is a new thing and I am struggling to use it! Thank you.
Really great tutorial as always
Excellent video
Can't wait for part 2!!!
amazing, love it Ferdy!
New to flex box and you explained it superbly. Just sucscribed
Thanks a lot for the tutorial.
awesome work ferdy
You are the best fredy 💯💯💪💪💪
Danke schön Ferdy, du bist echt klasse : )
Such a GR8 Tutorial!
Great video!. Just a quick question do you have any videos on adding custom buttons to woo commerce product pages?
great content very useful
An amazing tutorial indeed!!
Amazing . Thank you. Can I use starter templates and elementor blocks along with the containers.
Merci bcp, je recommande.
9:31 you are a genius 👏
Hello Ferdy, thank you for the tutorial. Don't you think it could be more precise to "inspect" the Tesla site using the inspect option of your browser in order to have the exact number of pixels ? Well, it is a learning activity, but it could help eventually the viewers. Keep the good work!
Hi Ferdy, Awesome video, you have changed the way I work! Thank you so much. Can you tell me what command you used to measure the pixels? Shift+Ctrl?? born in South Africa, I am a friend of Elon as well, I just have not driven a Tesla
Thank youuuu!!
Amazing!
Hey Ferdy - I have scroll snap turned on and everything but the site doesn't seem to snap when scrolling like the tesla site. What do I need to do/edit/change?
great job again!
Thanks!
Thnx Ferdy!
Great job Ferdy. This is the first tutorial on this I've seen that makes sense. I was hoping these containers would just go away, but I guess they are here to stay. Do you think this is a step in the right direction, or just a sidestep that may cost Elementor new customers?
I think it is a super big step forward 😁
It’s amazing. Can you please upload Flatsome e-commerce tutorial as soon as possible please
Hi Ferdy! Will you make a video about all the functions, like scroll snap, the height etc... So a detailed Tesla website video
Yes
@@ferdykorpershoek Man I swear you are THE TUTORIAL MAKER... Love the content and cant wait to see the video we are talking about
Thanks for the grat video. When working on the first container, couldn't you just have set the background transparency way down?
I knew, from one of your videos that took me all day to watch yesterday, that you were going to use “Space Between” for the menu! I am so proud of myself for remembering because I often feel like I have information overload and can't remember much. I don't think you had to show how to locate it though so I will be taking note of that. Do you find that you use that a lot?
this guy is the best
Flex box always amazing
and for the other model sections you can use parallax effect to that original effect
I hope you can make a tutorial about making different creative Hero sections with the new elementor using parallax and other effects.
So is the traditional header, we create it alone and apply it to page(s) or the entire site, over?
Thanks
Ferdy I have a question..I have seen your 2 code snippets videos before..
I have questions..
How to display last updated date of post..you have added php code in code snippets and then in WordPress you used content label to get the code. Then you pressed on block..you did "run php" in processes.
My problem is that I cannot see the run php option. How do I find this? Please help me thank you
wow, that's awesome.
HI Ferdy. Always learn something with your tutorials. Today you mentioned Web Inspector Pro which allowed you to see any web page as if on multiple different devices. Could you add a link to that bit of software. Do you recommend it? Thanks
Bravo🎉
Thank you for the tutorial. I am brand new to WordPress and is about to create my first.
I see that you did not save a header template. Is it mainly because of the structure of this site where everything is on the same page?
Just unsure how it works. Say the shopping cart page. I supposed will have a different layout?
always good my man
Justify Beiber...🤦🏼♂ 😂 (that was actually pretty funny, I have to admit)
which extension you use in this tut for getting the width size etc
Zeer duidelijk uitleg bedankt Freddy 🎉
Graag gedaan 😊
Hi Fredy, Good Video. One question. When I am changing from Desktop to Tab mode, I am not getting the same view as you. At 768 x 1024 My Model 3 picture does not get automatically adjusted to the screen size and it gets cut from both side. Though I have selected image type as "Cover" and Width is 100% VH. Any advise?
Hi, what in this situation. I have container in container. Parent container is 100% width, child container is 500px width. How to align child container to the left or right? It is allways in the middle
Wow, great job Ferdy! What keyboard shortcut do you use to measure the page width? 32:55
It's a shortcut to screenshot in Mac OS CMD + Shift + 4
Awesome tutorial. May I know what the names of the extension your using?
Hi Ferdy, I started working with containers but it doesn't run smoothly on different tablets/screens. The design is not how it should be. Could I send you an image to see what I'm doing wrong?
Als je de extension; Font Finder installeert krijg je een mooi overzicht van alle font styling die gebruikt zijn, inclusief line height, weight, spacing, de hele mikmak 😉 Welke extensies heb jij zelf geïnstalleerd in je chrome?