Advanced Elementor Container Tutorial: A Full Width Layout

Подписаться 214 тыс.

Просмотров 22 тыс.

50% 1

In this video we are building some advanced Elementor layouts with the container. I did this to show you what is possible, so hopefully it inspires someone.
My Elementor Pro Mastery Course: livingwithpixels.com/elemento... (discount code: LWPYT)
My container basics video: • Elementor Flexbox Cont...
Get Elementor here: livingwithpixels.com/elementor
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/links/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.

Хобби

Опубликовано:

21 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

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

@whatamiwitnessing1003 28 дней назад

Try using position absolute to overlap your content, will save you a headache trying to work with negative margins on your overlapping content.

@CaterStudios 28 дней назад

Absolutely positioned content are not responsive even when you make them in different breakpoints. Negative margins stays the same in almost the same layout you left it from the previous breakpoint, while the absolute position don’t give chance for that.

@johndoe-lr9if 28 дней назад

I'd take negative margins over position absolute any day...

@bensonderskov 27 дней назад

100% agree that position absolute is the best way.

@ElementoryMyDearWatson 28 дней назад

Love the way you are always pushing Elementor beyond the basics. Very inventive. Well done and many thanks for sharing it with us.

@marcoolinho 27 дней назад

Thank you for sharing. These are tricks of the trade of the "no code designer". It is a great video, very practical. Keep them coming please.

@yester21 28 дней назад

good job Rino. I think you have a really good understanding of Elementor and containers, and you use them very effectively (even without coding!). a lot to learn from you.

@robertcushman9273 26 дней назад

Absolutely fantastic video! Your tutorial on creating advanced container layouts is both insightful and impressive. The way you explained the process step-by-step made it easy to follow along, even though it's an advanced topic. The practical examples with Porsche and the two sides were particularly helpful in visualizing the concepts. Plus, the mention of potential page speed impacts and the focus on desktop usability provided valuable context. Great job, and I'm looking forward to more advanced tutorials!

@LordJHouse 28 дней назад

This is great, thanks for breaking down how achieve this hero layout. Incidentally, I'm focused on the automotive industry, thus this video is right up my alley.

@michalbartosz4878 26 дней назад

Beautifully crafted! Thanks a lot mate

@justaguynamedleo 27 дней назад

I'm guessing you just gave me the starting point i was missing for a project. Great job Rino 😁

@nathandigital 28 дней назад

Good job...This is amazing tutorial you ever created!

@Jimsoda 28 дней назад

Great use of Elementor. Have learned so much from you.

@stefanocasafranca924 10 дней назад

Man!!! Please continue doing these Advanced Tutorials. It is so easy to understand it from you

@Bostiful 28 дней назад

Awesome. Been strugling myself aswell. Will save this video for a coffe break!

@juschenten 23 дня назад

Dear Rino, thank you very much for this highly interesting and inspiring video. I think the German automotive industry will also be highly delighted with your examples 😉. Best regards from Stuttgart, the hometown of Porsche.

@uifry 22 дня назад

Amazing !!

@marcdumont7723 28 дней назад

Rino, regarding container heights - Have you played around with the custom height setting (the pencil icon) and then used "calc(100vh - 40px)"? I've used 40px as an example, but you could set the height to the height of the bottom container box. I find it works well when working with navigation bar heights etc too. Would love to hear your thoughts.

@rinodeboer 28 дней назад

That’s also a solution. Sounds like the result will be the same. Thanks for your input 🙏🏻

@marcdumont7723 28 дней назад

@@rinodeboer You are welcome man. Thanks again for the great content! Really liking the more technical Elementor stuff! Cheers 🙂

@ElementoryMyDearWatson 28 дней назад

Very good suggestion

@hikmatullahparwaniii34 20 дней назад

great learn alot from you

@hazharmaroufi 28 дней назад

This is from his course, really great tutorial ⭐⭐⭐⭐⭐

@3mediastudiodesign 27 дней назад

sbam !!! another milestone

@gauchodiaz 27 дней назад

Hi Rino! Great tutorial as always. Could make a video showing which browser extensions you use for your everyday work? I've been experimenting with some myself, but I love to see what others use to boost their workspace and I think it might be an interesting topic for a video.

@david05 26 дней назад

Hi. Instead of vh for the height, I recommend you to use dvh (dynamic viewport) so it actually could creates that full-height experience on mobile with AND without the browser UI. More importantly, if the "side" containers are important enough to be shown above the fall, they should also be displayed on mobile. It's easy to put them above and under the main container by switching the parent container's direction (the full-height experience would remain).

@miladkeihani 28 дней назад

perfect

@zafit02 28 дней назад

Awesome tutorial, a few months ago, I said you were wrong to keep using Elementor. Now I have to admit you were right. I still use it, and it's the one I like the most for creating web pages, but it urgently needs a class manager

@rinodeboer 25 дней назад

Respect man, it takes balls to say that. And yes, absolutely. It urgently needs a class manager.

@moralitosrodrigo 28 дней назад

Hello Rino, I love your videos, I'm learning a lot, both WordPress and English, I'm new to this, and I would like to know how you get clients, what is the best strategy you recommend. Greetings from Ecuador

@ortizvlasich 28 дней назад

Hi Rino, Have you tried dvh instead of vh?

@TheStrategist314 28 дней назад

Thank you. I am curious how you do pictures. I could use a tutorial as how you find amazing pictures or do you make them yourself?

@rodlivz 28 дней назад

@Igor-gm4tp 14 дней назад

What is the tool you use to measure the width and height as in time 6:33?

@kimjohnson313 5 дней назад

WOW ... good to see you. I thought you retired! LOL

@rinodeboer 4 дня назад

Oh no, I have not. I am just changing up my channel content.

@thewebstylist 28 дней назад

So awesome! And thanks for tips on containers and columns Curious if you sell this layout and all of your best designs Rino?

@rinodeboer 25 дней назад

I am not selling any of my designs yet. But I will think about it 🙏🏻

@Shortisenough 28 дней назад

😍😍😍

@mkbusiness3561 21 день назад

can i build my website design and added design in elementor wordpress????/

@burlondesign 28 дней назад

How about the responsiveness of the section?

@unodetailing 28 дней назад

Question: Why your Elementor bar looks like that? Thats a new version or old version? Mine looks diferent.

@frankstone 28 дней назад

Please create more designs like this but make them mobile friendly. What if you also sell these designs as a .json file for us to purchase.

@kaanenveraydn5586 22 дня назад

Hoe toevallig ik zocht dit ook recent voor een klant maar kwam ik er met custom html en css uit

@babakshahkaram 22 дня назад

i dont know how the header not pushing down the upper container? and how it is not counts in height percentage?

@rinodeboer 21 день назад

Because the header is an transparent overlay header that also has a negative margin, so the content gets pulled under it basically. I have some (older) transparent header videos on my channel.

@babakshahkaram 21 день назад

@@rinodeboer interesting. Thanks a lot 👍

@johndoe-lr9if 28 дней назад

div, div div div... display flex, align self center...