Get Started With Elementor Containers | Part 1
Вставка
- Опубліковано 11 чер 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 - Навчання та стиль
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!
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!
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.
It was a professional and detailed explanation. Your videos are very understandable. Really thanks Ferdy.
Thanks Ferdy. Excellent tutorial as always. You saved me a fortune of time trying to figure it out alone. So very grateful.
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!
UA-cam os rushing with people who don't know how to deliver the solution and you are the whole solution in this rush ❤😢 thanks
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!!
Love listening to your tutorials. The Great Ferdy Korpershoek Humble personality. Awesome ❤
Thank you for your kind words ❤️
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.
its really helpful ferdy, thank you for your efforts
Brilliant tutorial Ferdy! Thanks for sharing your knowledge.
Hi Ferdy, thank you for this tutorial, please keep going deeper with Container building...thank you!
This is a great overview! Still relevant at a year old. Thank you Ferdy.
I learn a lot from your tutorials ...........You are inspiration for me love from Pakistan
Excellent tutorial! I always learn something new in your videos. Great job!
I'm in Elementor a lot and really enjoy your style and details. Well done!
My congratulations, amazing video, with correct analysis and explanation of the movements you do.
this was a very good tutorial learned alot of things
kindly make more detailed tutorial on elementor in depth
love from Pakistan
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
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.
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 😀
Great one tnx! And love the joke about Reno, living with pixels, you are both my number one Elementor heroes!!!
Fantastic tutorial, made the process super clear.
Hey Ferdy, I started to make website on my own 10 years ago with UA-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! 💪💪
Danke schön Ferdy, du bist echt klasse : )
Really enjoyed the tutorial. It's deeeepa.
Thank you!!!! Being a newbie with Elementor this really helped!
You are soo funny. Thanks for brightening up my day. Oh and I learned something about Containers as well.
brilliant! you are so talented and such a good teacher, i love it, thank you
I like the way you teach specially the speed and details which will be applicable to developers like me.
Brother, you are the greatest. I Thank God for you.
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! 😊
Best elementor content on UA-cam! Cheers bro! 👊🏻
SOOO helpful! Thank you so much!!
Duidelijke tutorial over het toepassen van de nieuwe flex container ! Ik kijk al uit naar de volgende...👍
Great tutorial, thank you!
thank you Ferdy, I really learnt a lot from your videos
New to flex box and you explained it superbly. Just sucscribed
Great tutorial @Ferdy, you are the man!
Great course. Thank you so much 🎉
Super helpful! Thank you!
Really great tutorial as always
that was great Ferdy, very well explained.
Fantastic thanks for the help. God bless!
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🤣
Weer een mooie tutorial. Mooi, simpel uitgelegd.
Ben benieuwd naar de volgende ;)
this guy is the best
An amazing tutorial indeed!!
Thanks a lot for the tutorial.
Such a GR8 Tutorial!
Excellent video
Awesome! you helped me a lot! Keep it up Ferdy
Can't wait for part 2!!!
amazing, love it Ferdy!
great content very useful
You are the best fredy 💯💯💪💪💪
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?
very helpful tutorial ! The container is a new thing and I am struggling to use it! Thank you.
Justify Beiber...🤦🏼♂ 😂 (that was actually pretty funny, I have to admit)
awesome work ferdy
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.
9:31 you are a genius 👏
Amazing!
Thank youuuu!!
great job again!
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.
Zeer duidelijk uitleg bedankt Freddy 🎉
Graag gedaan 😊
Thnx Ferdy!
Thanks!
always good my man
Merci bcp, je recommande.
Amazing . Thank you. Can I use starter templates and elementor blocks along with the containers.
Great video!. Just a quick question do you have any videos on adding custom buttons to woo commerce product pages?
Bravo🎉
Flex box always amazing
wow, that's awesome.
It’s amazing. Can you please upload Flatsome e-commerce tutorial as soon as possible please
Thanks
"Is like I'm living with pexels" 😂😂 @rino must hear this 😅
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
lost in the first 20 seconds lol. fail. I admire what you are doing.
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 😁
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?
So is the traditional header, we create it alone and apply it to page(s) or the entire site, over?
and for the other model sections you can use parallax effect to that original effect
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
oh good you taught me how to pay for elementor pro good job 🤣
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
I hope you can make a tutorial about making different creative Hero sections with the new elementor using parallax and other effects.
Thanks for the grat video. When working on the first container, couldn't you just have set the background transparency way down?
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! 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
MERCI
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?
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?
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?
Awesome tutorial. May I know what the names of the extension your using?
Great ! (y)