EXPANDING CONTAINERS - Elementor Wordpress Tutorial Flex Container
Vložit
- čas přidán 30. 07. 2024
- EDIT to the EDIT: If you've had issues with the code, note that the Notion file (CSS section of this effect) has been updated. If you're still experiencing any issues, please email me 🤓
EDIT: The code for this effect has stopped working for some reason (thanks Elementor for all your unsolicited updates:))))) ...anyways, I'm trying to figure out what the hell....in the meantime, don't use it 🥹
Yet another cool effect to use on hero sections or sections on websites. Simple and elegant!
CODE: www.notion.so/CODE-Expandable...
Timestamps:
00:00 Intro
01:31 Demo
17:40 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
A cool effect for a cool looking hero section (or just section) Let me know if you found this helpful!
It's so great when you find someone so talented and they share their knowledge. Thank you very much for the video, I have learned a lot.
Love your content S2
Thanks 🙏 if there’s anything specific you would like to see on the channel, let me know. I’ll do my best to make it 😉
Hey there Andrea. Your content is AWESOME!!!
I'm new to the world of web-dev, kinda.. Been a couple years now on and off, but just landed a
job in which I'm responsible for all aspects of the company's online/digital footprints..
I've already gleaned a ton of cool tips/tricks from your videos.
Thank you for your good, hard work.
P.S.... Although cute, lol, the pronunciation of the word "duplicate" is pronounced a bit differently than how you go about saying it, lol.
The "du" portion of the word is pronounced just the same way you'd say the word "do."
Like, "let's "DO" it!"
So, the word "duplicate" is pronounced "do" plicate..
;)
Great video
i have an issue the heading is not going away after the container is not active also, can you give me solution on this, i've tried chnging the html tags as well and even the opacity in the css as well nothing seems working.
Wow, thank u. it works fine! Now if I want to open this vertically. How does that work? like a accordion
You're welcome! nice! hmmm, not sure I fully understand what you mean, so basically they're stacked and when scrolling the containers get revealed? if you have a link to an example, I would love to see it....
Oh how I wish I could figure out how to make this mobile friendly! I love this block section! I added vertical headers for the containers that are closed so you can still identify what they are as a user but then when you expand the vertical header disappears and is replaced with the horizontal header. Basically just reversing the .panel.active p CSS class and assigning the vertical header to the h4 tag and then adding this to custom CSS like so
.panel h4 {
position: absolute;
opacity: 1;
}
.panel.active h4 {
opacity: 0;
transition: all 0.2s ease-in 0.3s;
}
If anyone has a solution to make it mobile friendly lmk! Would love to incorporate this in a section. For now I'll keep it as a draft template. Thanks for the awesome content!
I don't recommend trying to make this mobile friendly. Keep the containers open on mobile especially if you have important info contained ;) Just my advice....I will probably make a mobile version of it as a template but not right not
thank you,
your ownsome
Thank you 😊
Nice video, can you please make a video on, in loop carousel the element should expand like this video. Is it possible?
Thank you 😊 I might do something like that at some point, I’m sure it’s possible
Very informative videos you make can please do custom media quiere for whole website because i m struggling with my client website doing it responsive
Thank you 🙏 do you mean general media queries or specific to this video?
Hello, your channel is great and you explain very well! I've already subscribed to the channel to follow the updates... I only had one question, if I want to keep the function "active" with mouse hover, instead of click, is it possible? Thank you so much!
Hey, Cesar! thank you so much! yes, you can replace 'click' with 'mouseover' (in the script) but I don't really recommend it as it is not very user friendly. It all depends on the design of your containers..smaller containers would behave less clunky..maybe. You might also want to play around with the css transitions in that case
@@andreaegli Oh, I think I expressed myself badly, but I ended up finding part of the solution using "mouseenter" and "mouseleave" in the js, however, my attempt is to do something similar with these new sections of the Prime Video website, as soon as you move the mouse over it expands, changes the image and slides the other images (panels) to the side... But as a no-code designer, it's not working out very well, I'm still fighting lol
@@cesarandrade9021 😀
Luv your/this style! For mobile (I always put mobile styling first)8 think having the same look w the tabs at the top (vertical instead of horizontal) would be awesome
#YOUROCK100 🎉
Thank you so much😃 yup, that's an option!
I also thought about this. Would I need to change the css or how could I achieve it?
Please make video on 1)transparent header with sticky on scroll, 2) when we scroll change headr color
Hi I love your content! Is there any way to make no tabs active until I click on one? Like as in, they just sit in an 'inactive' smushed state, until I pick one to click on?
Edit: I see you sort of mentioned it in the video, but you didn't actually say how to actually get the containers to open after staying inactive if that makes sense.
Thank you so much!!! Yup, remove the active class from the first tab. You will need to adjust the width of the other tabs, depending on the look you're going for. Let me know if you need any more help.
@@andreaegli Thank you so much!!!! Last question, is there any way to make them 'reset' when you click on them, IE: return to their default, 'inactive state'?
@@jacksonseagraves6071 :) not with this code
@@andreaegli Thank you!
Hi Andrea. Thank you for enlightening me with beautiful design and ideas. That is exactly what i'm looking for. I've sent you an e-mail as i have some issues. 😍
Hey Corina! I've received your emails but there's nothing in for me to look at...no link no explanation...
Hi Andrea. That is strange. Both mails where with the link to my page. I tried to make this tutorial work, but due to some strange reasons with the containers it's not working. I will try it out again and let you know. Thank you very much for everything you're doing for us and for giving me and others a lot of inspiration. @@andreaegli 💕
Can you make a video about how to add a "Skip to content" button for accessibility?
That's a great idea, thanks for the suggestion, Greg! I can and I will feel free to send in more suggestions
@@andreaegli Ok challenge taken, how about a tutorial about adding dark mode, another video about using clamp for fonts and margins, also I would love a full video from A to Z of your web design process, BTW these tutorials around Elementor. Thanks!!
Can you do our redesign series keep it up you got great content
I will in the future but this month I'm starting a new series soon where we build landing pages/websites from the ground up, from figma to elementor
everything updated a lot the code doesn't work at all for me
I've replied to your email
Hi Andrea, I love the content, are you interested in collaborating maybe?
Hey! Thank you. Always open to collaborations. Shoot me an email with whatever you have in mind, let’s see if we’re a fit 😉
this was very helpful. Thanks a lot. I just want to ask > I add the css code to the main css code editor of the page and worked perfectly, instead of adding it to each column, but I am still working on the site. Do you see anyway could affect the main structure? It shouldn't right?
You are very welcome! ah, it's absolutely fine. It's more convenient in my opinion to add the code snippet on the page where it is required if it does one thing only unless the same effect takes place on all or some pages in which case i usually add it to the custom code section of elementor. Some people do it your way, some do it my way and both are absolutely ok. Personal preference ;)
@@andreaegli cool. Thanks again!