*NOTE!* ------------------------------ *Aug 11, 2020* - The training file has been updated! Inside the Custom CSS panel, you can now find the CSS code for the future version of Elementor (3.0+) as well as the CSS code combo that is backward compatible and future proof. Use whatever suits your needs!
Hi bro, I did all the steps and everything worked fine for me until I updated Elementor and Elementor Pro, only the images and titles are seen when hovering over with the mouse, otherwise everything is blank. Do you know what it could be?
@@humbertogregorio8092 Mate, you replied to the pinned comment of my own, did you read it? Most likely you have "Optimized DOM Output" enabled in Elementor but you didn't enable the CSS code that works for E3.0+ too, that's why you can't see the column's initial photos. Now, if you ask me where to find the CSS code I might say that you didn't watch the video or skipped the most important part. So, all the CSS code can be found under the Page Settings, Custom CSS panel. Cancel out the default CSS and uncomment either of two other versions of code. My suggestion is to keep the "ELEMENTOR 2+ & ELEMENTOR 3+" version. Here's the screenshot: imgur.com/a/zsuQwYc So, all the code is here, the training file too, I do not plan to fool anyone. Hope it helps!
Great video. Love how you are very thorough in setting up for responsiveness and making sure everything works. You should have definitely have more subscribers since I don't see anyone else with your content. Thanks for sharing your knowledge!!!
Nice vid! The last step, where you change the design for every column in mobile view: you can just style the first column, then copy the column style and paste it to the other 3 columns :)
Take love from Bangladesh! These are really great tuts that I should give a round of applause each time I watch them. 👌 Thanks for your efforts on doing these hard works!
Just found your channel, been watching and liking every video so far! You have a great design style, fantastic tutorial communication with step by step and reasons why etc. New subscriber! Thanks for sharing.
Thanks! I wish I had more time to do it and kinda follow the pace of at least 1 video per week but quite often I'm stuck with the regular job, I'm also trying to maintain "Steroids for Elementor" add-on and spend some time with my family too... So, there's no scheduled video release, not yet.
I love this on desktop but have yet to find it as appealing on mobile. I'd be great if the text is shown when in the viewport scrolling down or something like that...
You are doing a fine job, Oooh Boi! As a potential topic for a future tut, can you look into an elegant solution for the vertical menus in Elementor? I am not a developer, but from what I can tell, there are hacks around this, but the current Elementor does not have a good vertical menu solution. Am I missing something? If not, then this would be an interesting video to watch. Thank you!
Multilevel vertical menus are rarely used - unless used with off-canvas, and there's a good reason for that. I think that Elementor developers are not willing to do any improvements when it comes to the vertical menu either way. But you never know, maybe that vertical menu thing is the next trend in the web design.
Just amazed at the cool things you are doing with Elementor. Tried this and did not work till I saw you comments on 3.+ which corrected it perfectly. Is it also possible to have any elements in the column (like the title) stay visible always? I assume adding another class and excluding it from the CSS but I have no idea on how to actually do that.
Thanks for the feedback! I don't think it's good idea to keep the text (any type of text widget) always visible because the column width affects the number of characters per row. Or otherwise, the text box is as wide as the column allows it to be.
Thanks for great tutorial. I tried but like shown 5:39, the text dose not hide even same CSS code in page setting as indicated.. I tried many time but not work. Please let me know how to fix it. Thanks in advance!
Seems that link to Download this tutorial Training does not work anymore. Isn't? Could you be so kind to update the link to CSS code for the Liquid Accordion? Thank you!
Hello Mr. Oooh Boy, are you going to update the liquid accordion css to the new elementor 3.19 versions? For now I am keeping 3.18 versions, from 3.19 it goes back to producing blank page with images only appearing on hover. And there is no DOM output select option anymore, it seems they have integrated it .... Thank you!!!
Thank you so much for making this code available! It works perfectly - but I do have a question. Is it possible to start the images out with a word of text that then disappears when the section expands and shows the text block that was initially invisible? I wanted to add a "label" to the left side of each pic, but would like for it to disappear when expanded. Thanks again!
Hello, my sites with your wonderful liquid accordion ar not workingin. The inserted images in image overlay don't show, they appear only on hover. Can you help? Thank you!
Thank you very much for your tutorial, sir! But I've got one problem. Why is it necessary to use overflow:hidden? I understand that when we use it the effect gets much smoother. But I want to know how overflow:hidden causes that smoothness. I have a CSS background to some extent. Again, thank you very much for these amazing tutorials, sir.
Well, in general, overflow:hidden on the wrapping element makes the content to be rendered within that very element boundaries only. It's like a small stage setup. Otherwise, all the calculations with respect to the containing elements must be done on the much bigger scale. Does it help?
Hello, Im trying to do this with Elementor 3.6.1, the hello theme and Wordpress version 5.9.1. W I tried to get the training files, but the link is not working for me.. hen I add the first line of code .liquid-column .elementor-widget-wrap { opacity: 0; } All of my columns disappear, not just the content inside.. Then I add this code and the column shows up on mouseover and the fading hover effect happens, but the column does not grow, then disappears again on mouse out.. .liquidColumn:hover .elementor-widget-wrap { transition: opacity 0.4s ease 0.2s; opacity: 1; } .liquid-column { height: 500px; overflow: hidden; flex: 1; transition: flex 0.3s ease; } .liquid-column:hover { flex: 3; } What am I doing wrong? Id love to use this and Im happy to buy you coffee..
Yes, the DOM "improvement" was out one minor version down... but anyhow, the training file includes 3 versions of the CSS code; DOM optimized, DOM not optimized and the one that rules them both. Simply uncomment the one that suits your needs. Hope it helps!
Great work! one question, everything works but when i hover over one column, all 4 of the columns content appears. What did i do wrong? Thank you in advance
I really tried: I did my best. But it still doesn't work in my website... When I go to the front-end everything disappear (I use Chorme). I used your commented code in "Tutorial Training File(s)", (last one, for Elementor3+) without comments... and I read all the comments below, looking for an answer to my trouble. Oh, yes: I disabled Optimizied DOM Output: nothing. Now I'm really curious to know what I have to do; maybe the theme? I use Neve.
Hi Oooh Boi, another really great video from you and the effect looks awesome. Unfortunately it looks a little different on my page. When I hover over the different columns they change the size immediately and not so smooth like in your video. Did I miss something somewhere? Maybe a little extra line of css? I tried all 3 different css that you mentioned but it still stays the same. I use Elementor 3.x and I have all your Add-Ons running. Thanks in advance :-)
It looks like the column doesn't get animated for some reason, or otherwise no CSS transition gets applied to it. Maybe the class is wrong. Did you try to disable "Optimized DOM Output" just to be sure that it's not the problem of E3.0 "reduced" DOM output?
@@OoohBoi Hi, I just disabled the "Optimizied DOM Output" but it has not effect that I expected. I think a have my site online in a few weeks and I can show you the effect then. Thanks for your effort.
Thank you very much for the great tutorials!! have one noob question though, how do i access the training files? I've downloaded the .json file but have no idea what to do with it :(
Question #1. Can the accordion be made with its sides at an angle. Like for example an LG TV WebOS menu accordion? There is one way to get close to that look but it involves transforming-rotating whole section by some degree with css and then rotate pictures back to zero degree, but that leaves ugly top and bottom which need to be hidden with other elements and the whole thing scales, looks and feels wrong. So, any way to target just the accordion sides and edit the angle degree? Question #2 Can the sides be any other shape? For example, zig-zag, curvy, circular?
Sloped edges can be done two ways; clip-path or mask-image. Mask-image is more powerful coz of the polygon-free shaping. Transformations can be useful as long as they don't include z-axis translation due to the fact it screws up the z-index. Liquid Accordion "slides" must be overflow hidden, so I guess that mask-image is the most appropriate method for what you're up to. Just give it a shot and see what happens. At least that's what I'd go for. Pozdrav!
I knew someone's gonna ask that! There is a way but all of the section columns - including the section itself, should use fixed height which doesn't play well when it comes to responsiveness. Why? Well, for instance, the text usually takes the new line when there's not enough horizontal space. But if you limit the space vertically (by setting up the fixed height of the column), your text will no longer be visible. Makes sense?
Hi, not sure if you know this but 5 days ago TH-cam decided to stop sending email notifications (to us followers) when you post videos. This means that you have a higher risk of your followers missing out on the videos which means you miss out on the likes & shares and increasing the number of people that follow you.
Well to be honest, I do not receive any YT notices on user comments for over a month. It looks like YT relocated resources for something more profitable in the time of COVID. Can't claim for sure but there's obviously something going on in the background and I doubt anyone can do something about. Let's hope for best.
Well, as far as I can tell, it's definitely "lighter" than using the widget to achieve the same effect! I mean here you are dealing with a few lines of CSS code only, no extra wrappers or whatsoever...
Hi sorry to bring you back here. Am still a noob in elementor. I followed the tutorial but when i use the (elementor-widget-wrap{opacity:0; ) everything becomes white including the overlay image.i thought maybe i jumped a step but then,I imported the test file and preview it without editing your settings and everything was still white. Don't know if i should delete elementor and reinstall
hey man, thanks for this tutorial is there any way I can connect it to the main page to show the recent 5 blog posts, which changes dynamically one blog is updated?
Did you download the file? The CSS code says: @media(min-width: 768px) { /* no need to include everything */ } ...which means it's already "disabled" for mobile devices.
hi! thanks for the tutorial in this awesome effect, i did everything and works great but when i charge the web in chrome the effect does not show, do you know what it could be, thanks in advance
Take a look at the Custom CSS code, you'll find the code being commented for Elementor 3.0 and above. Uncomment that code and comment the active one. Elementor 3.0 brought some changes to the DOM, that'S why initially you can't see the background images.
Thanks, however ... *narrow* means not wide enough or not quite loose. I can't find any connection between being narrow and '0 minimum height'. Was that the typo?
@@OoohBoi thks. In terms of section height. Section '0 min height' still gives certain height and i wanted to make the section even less. Let say i have text in section with 0 height. the section has still too much space on top and bottom of text. ..
I really like the video! But when I am trying to write my own css at the page settings it doesn't work. When I started with your code, elementor does not recognize opacity. Also the files that I downloaded for the tutorial training is a mac file and I cannot open that (windows user). Is there a way that I can copy the css code somewhere?
It sounds like you're having problems with the Browser. Elementor relies on the Browser and works inside the Browser so you can't blame Elementor. Try Firefox. As for the training file being archived on Mac - there's no difference in the zipped file, regardless the OS, zip is cross-system friendly, just like PDF.
Thanks Frank, I already posted my request for an affiliate but don't have it yet. Not sure whether it's still in the process, or maybe denied, however, at this moment I can only say thanks for taking care! I appreciate it!
*NOTE!* ------------------------------
*Aug 11, 2020* - The training file has been updated! Inside the Custom CSS panel, you can now find the CSS code for the future version of Elementor (3.0+) as well as the CSS code combo that is backward compatible and future proof. Use whatever suits your needs!
Hi bro, I did all the steps and everything worked fine for me until I updated Elementor and Elementor Pro, only the images and titles are seen when hovering over with the mouse, otherwise everything is blank. Do you know what it could be?
@@ddms932 Same here. All blank until hover.
The columns are white, no content visible until hover. The training file has no custom css.
@@humbertogregorio8092 Mate, you replied to the pinned comment of my own, did you read it? Most likely you have "Optimized DOM Output" enabled in Elementor but you didn't enable the CSS code that works for E3.0+ too, that's why you can't see the column's initial photos.
Now, if you ask me where to find the CSS code I might say that you didn't watch the video or skipped the most important part. So, all the CSS code can be found under the Page Settings, Custom CSS panel. Cancel out the default CSS and uncomment either of two other versions of code. My suggestion is to keep the "ELEMENTOR 2+ & ELEMENTOR 3+" version. Here's the screenshot: imgur.com/a/zsuQwYc So, all the code is here, the training file too, I do not plan to fool anyone. Hope it helps!
@@OoohBoi Thx a lot! It workes with deactivated "Optimzed DOM Output".
sir you are the best elementor tutor out here this is just incredible
Thank you very much!
Thanks for teaching us a good lesson. Lots of love from India.
Great video. Love how you are very thorough in setting up for responsiveness and making sure everything works. You should have definitely have more subscribers since I don't see anyone else with your content. Thanks for sharing your knowledge!!!
Glad it was helpful and thanks for the feedback! Stay tuned!
You're a genius! Another amazing tutorial - that's why I LOVE this channel! Keep up the great work! 👍😊
Thank you! Will give my best.
Nice vid! The last step, where you change the design for every column in mobile view: you can just style the first column, then copy the column style and paste it to the other 3 columns :)
If I did that all the photos would be identical to the column I copied the settings from 🥴
Take love from Bangladesh!
These are really great tuts that I should give a round of applause each time I watch them. 👌
Thanks for your efforts on doing these hard works!
Glad you like them, thanks for watching!
subscribers: +1
Awesome content and an accent that makes me smile every time I listen to you.
Thank you.
Welcome aboard!
Again when I'm trouble, Oooh Boi already has the solution! Thank you mate! amazing!
Happy to help!
You are an excellent teacher and love and respect from Bangladesh 🇧🇩
Thanks buddy, a big HUG to Bangladesh!
Everybody: Woah!! Oooh Boi...
Oooh Boi: Very Simple.
Just found your channel, been watching and liking every video so far! You have a great design style, fantastic tutorial communication with step by step and reasons why etc. New subscriber! Thanks for sharing.
Welcome aboard buddy!
Great tutorial, thorough and easy to follow along. Thanks!
Glad you enjoyed it!
Excellent tutorial as always. Can't wait to try this accordion out.
Have fun, write back if stuck or need and assistance!
Thanks Oooh Boy, great as usual!
Glad to read if you enjoyed it!
One of the best out there. Thumbs Up
Excellent knowledge once again. Thank you for sharing 👍
My pleasure, glad if you found it useful!
Thanks for all that you do. You are exceptional.
I appreciate that!
Ooh boi that was some good stuff!
You’ve got a new sub.
Welcome to the club!
Very nice tutorial. Thanks!
You welcome, thanks for watching!
Thank you so much. Appreciate your content!
My pleasure!
That is so awesome. You are Awesome. Thank you dude!
Happy to help!
This is awesome... You really Made expert... 🙏🏼 Love and Peace
Thanks buddy!
Great video.
Nice, thank you for your passion
My pleasure!
This is Awesome. How do you release new videos? Can't wait. Good job 👍
Thanks! I wish I had more time to do it and kinda follow the pace of at least 1 video per week but quite often I'm stuck with the regular job, I'm also trying to maintain "Steroids for Elementor" add-on and spend some time with my family too... So, there's no scheduled video release, not yet.
@@OoohBoi oh wow. I totally understand. Thank you nevertheless
Superb Tutorials!
So great, thanks for sharing this. :)
Glad you enjoyed it!
Nice
One of the most useful one thanks 👍👍👍,it could be better if you the remove background noise too
OK, fair enough! Thanks for watching!
Great vedio, it work in column but when i have treid in container it doesnt work, can you tell me what shoud i dow, thank youu
I watched 3 ads to see video! insane
I know it can be frustrating, sorry!
Beatiful! Great tutorial.
Glad you liked it!
amazing as always. thanks alot.
Thanks for watching buddy!
Can you make a video on wordpress speed optimization.
The video was amazing as always ✌️☺️
Uh, the latest WP (5.5) should be really fast as I can tell...
Tks Boi, you are the man!
No problemo, glad you enjoyed!
Great video . Thank you
Glad you enjoyed it!
Tahnks
Awesome as always!
Thank you! Cheers!
your video is great man but i have a problem no content is showing upon hover only overlay changes plz help me.
I love this on desktop but have yet to find it as appealing on mobile. I'd be great if the text is shown when in the viewport scrolling down or something like that...
I'm sure you'll be able to come up with something!
You are doing a fine job, Oooh Boi! As a potential topic for a future tut, can you look into an elegant solution for the vertical menus in Elementor? I am not a developer, but from what I can tell, there are hacks around this, but the current Elementor does not have a good vertical menu solution. Am I missing something? If not, then this would be an interesting video to watch. Thank you!
Multilevel vertical menus are rarely used - unless used with off-canvas, and there's a good reason for that. I think that Elementor developers are not willing to do any improvements when it comes to the vertical menu either way. But you never know, maybe that vertical menu thing is the next trend in the web design.
My only question is, can we make one of the panel active (open) before hover?
Can we make a carousel of this tutorial by using your glider option?
great video, thanks!
Glad you liked it!
Genius! Thank you
You're welcome!
Just amazed at the cool things you are doing with Elementor. Tried this and did not work till I saw you comments on 3.+ which corrected it perfectly. Is it also possible to have any elements in the column (like the title) stay visible always? I assume adding another class and excluding it from the CSS but I have no idea on how to actually do that.
Thanks for the feedback! I don't think it's good idea to keep the text (any type of text widget) always visible because the column width affects the number of characters per row. Or otherwise, the text box is as wide as the column allows it to be.
thanks
No problem, thank you for watching!
Thanks for great tutorial. I tried but like shown 5:39, the text dose not hide even same CSS code in page setting as indicated.. I tried many time but not work. Please let me know how to fix it. Thanks in advance!
amazing
Seems that link to Download this tutorial Training does not work anymore. Isn't? Could you be so kind to update the link to CSS code for the Liquid Accordion? Thank you!
Hello Mr. Oooh Boy, are you going to update the liquid accordion css to the new elementor 3.19 versions? For now I am keeping 3.18 versions, from 3.19 it goes back to producing blank page with images only appearing on hover. And there is no DOM output select option anymore, it seems they have integrated it .... Thank you!!!
Thank you so much for making this code available! It works perfectly - but I do have a question. Is it possible to start the images out with a word of text that then disappears when the section expands and shows the text block that was initially invisible? I wanted to add a "label" to the left side of each pic, but would like for it to disappear when expanded. Thanks again!
Would like to see more cool stuff for mobile design
Sure!
I have a question, how can I keep a portion of text visible? As the title, and make all visible when hover
Hello, my sites with your wonderful liquid accordion ar not workingin. The inserted images in image overlay don't show, they appear only on hover. Can you help? Thank you!
image disappears on page and is only appearing while hovering. Help !
Thank you very much for your tutorial, sir! But I've got one problem. Why is it necessary to use overflow:hidden? I understand that when we use it the effect gets much smoother. But I want to know how overflow:hidden causes that smoothness. I have a CSS background to some extent. Again, thank you very much for these amazing tutorials, sir.
Well, in general, overflow:hidden on the wrapping element makes the content to be rendered within that very element boundaries only. It's like a small stage setup. Otherwise, all the calculations with respect to the containing elements must be done on the much bigger scale. Does it help?
Awesome!
Glad you think so!
Hello, Im trying to do this with Elementor 3.6.1, the hello theme and Wordpress version 5.9.1. W
I tried to get the training files, but the link is not working for me..
hen I add the first line of code
.liquid-column .elementor-widget-wrap {
opacity: 0;
}
All of my columns disappear, not just the content inside..
Then I add this code and the column shows up on mouseover and the fading hover effect happens, but the column does not grow, then disappears again on mouse out..
.liquidColumn:hover .elementor-widget-wrap {
transition: opacity 0.4s ease 0.2s;
opacity: 1;
}
.liquid-column {
height: 500px;
overflow: hidden;
flex: 1;
transition: flex 0.3s ease;
}
.liquid-column:hover {
flex: 3;
}
What am I doing wrong? Id love to use this and Im happy to buy you coffee..
Great content
Really Nice...
Thank you! 🙂
you are soo cool boss
Hi, do you have revised code that works in latest version of Elementor?
Genius!
now with the elementor3.1 DOM improvment that wouldnt work
switch elementor-widget-wrap with elementor element and it will be fine
Yes, the DOM "improvement" was out one minor version down... but anyhow, the training file includes 3 versions of the CSS code; DOM optimized, DOM not optimized and the one that rules them both. Simply uncomment the one that suits your needs. Hope it helps!
@@OoohBoi yea i seen now
you might want to redirect to a page that inside it users can download the file cuz some browser block the autodownload...
Thank you for this fix!
How would I use this witha title showing prior to hovering over it?
For some reason my accordion isnt flexing... I also get a warning "unqualified attribute selectors are known to be slow"
Did you try to switch the Browser? Firefox maybe? Just be sure it's up to date!
@@OoohBoi Will do ! thanks for the reply!
Hey, buddy. Do you still have the css code on the internet so we can use it?
Great work! one question, everything works but when i hover over one column, all 4 of the columns content appears. What did i do wrong? Thank you in advance
Great video Boi!!!
Is there a way to put a different link in the entire wraper of each column?
Sure, just enable Teleporter (it's a part of Steroids for Elementor add-on) and turn the column into the link.
I really tried: I did my best. But it still doesn't work in my website...
When I go to the front-end everything disappear (I use Chorme).
I used your commented code in "Tutorial Training File(s)", (last one, for Elementor3+) without comments... and I read all the comments below, looking for an answer to my trouble. Oh, yes: I disabled Optimizied DOM Output: nothing.
Now I'm really curious to know what I have to do; maybe the theme? I use Neve.
That's strange. But I guess the only thing that is left is to switch to "Hello Elementor" and see whether Neve is causing it.
@@OoohBoi Got It.. i will try soon.
Amazing Oooh Boi 👏🏻👏🏻
Thanks 😆
Your tutorials are great! The background noise of the beep sounds, dial tone, and other old computer sounds seems to detract from the content.
Thanks for watching, I'll try to shut the people down a bit...
This is just too cool, is it possible that when there is a mouse over event the image changes when it expands?
I'm afraid that's not the option, howevr, it would be cool.
Hi Oooh Boi, another really great video from you and the effect looks awesome. Unfortunately it looks a little different on my page. When I hover over the different columns they change the size immediately and not so smooth like in your video. Did I miss something somewhere? Maybe a little extra line of css? I tried all 3 different css that you mentioned but it still stays the same. I use Elementor 3.x and I have all your Add-Ons running. Thanks in advance :-)
It looks like the column doesn't get animated for some reason, or otherwise no CSS transition gets applied to it. Maybe the class is wrong. Did you try to disable "Optimized DOM Output" just to be sure that it's not the problem of E3.0 "reduced" DOM output?
@@OoohBoi Hi, I just disabled the "Optimizied DOM Output" but it has not effect that I expected. I think a have my site online in a few weeks and I can show you the effect then. Thanks for your effort.
Notification squad!
Thank you very much for the great tutorials!! have one noob question though, how do i access the training files? I've downloaded the .json file but have no idea what to do with it :(
I guess this might be helpful: www.wpcrafter.com/how-to-elementor-import-export-templates/
Lit🔥
Question #1. Can the accordion be made with its sides at an angle. Like for example an LG TV WebOS menu accordion?
There is one way to get close to that look but it involves transforming-rotating whole section by some degree with css and then rotate pictures back to zero degree, but that leaves ugly top and bottom which need to be hidden with other elements and the whole thing scales, looks and feels wrong. So, any way to target just the accordion sides and edit the angle degree?
Question #2 Can the sides be any other shape? For example, zig-zag, curvy, circular?
Sloped edges can be done two ways; clip-path or mask-image. Mask-image is more powerful coz of the polygon-free shaping. Transformations can be useful as long as they don't include z-axis translation due to the fact it screws up the z-index.
Liquid Accordion "slides" must be overflow hidden, so I guess that mask-image is the most appropriate method for what you're up to. Just give it a shot and see what happens. At least that's what I'd go for. Pozdrav!
Great as usual! Curious. Is there any option to make Vertical Liquid Accordion, like this? To be able to expand same way columns but vertically.
I knew someone's gonna ask that! There is a way but all of the section columns - including the section itself, should use fixed height which doesn't play well when it comes to responsiveness. Why? Well, for instance, the text usually takes the new line when there's not enough horizontal space. But if you limit the space vertically (by setting up the fixed height of the column), your text will no longer be visible. Makes sense?
@@OoohBoi if you could make a video on this, i would really be thankful!!!
Hi, not sure if you know this but 5 days ago TH-cam decided to stop sending email notifications (to us followers) when you post videos. This means that you have a higher risk of your followers missing out on the videos which means you miss out on the likes & shares and increasing the number of people that follow you.
Well to be honest, I do not receive any YT notices on user comments for over a month. It looks like YT relocated resources for something more profitable in the time of COVID. Can't claim for sure but there's obviously something going on in the background and I doubt anyone can do something about. Let's hope for best.
great again, help me a lot, thx, i'll pay you a coffee asap :)
Any time!
Can we do the same thing in the column direction ? I have tried but I am stuck in it
I don't think I understand... what should be a Column direction?
Looks really great. I wonder if doing it this way saves on resources and calls - do you know if it has a positive impact or not on page speed etc?
Well, as far as I can tell, it's definitely "lighter" than using the widget to achieve the same effect! I mean here you are dealing with a few lines of CSS code only, no extra wrappers or whatsoever...
@@OoohBoi Perfect!
Hi sorry to bring you back here. Am still a noob in elementor. I followed the tutorial but when i use the (elementor-widget-wrap{opacity:0; ) everything becomes white including the overlay image.i thought maybe i jumped a step but then,I imported the test file and preview it without editing your settings and everything was still white. Don't know if i should delete elementor and reinstall
Did you try to uncomment the different CSS code? The one that should be used when the "Optimized DOM Output" is enabled...
@@OoohBoiOh thank you. Everything is working well now.
This is really nice! But it doesn't run as smoothly in Safari. Is there a work-around?
It worked back in the day ... did they mess up something again?
@@OoohBoi the mouse over effect is very "hard"... not "ease in" as in Firefox and Chrome
Hi. Nice tutorial! The training file download isn't working anymore..
I just checked, it DOES work!
@@OoohBoi Bro the link don't work plz help
hey man, thanks for this tutorial is there any way I can connect it to the main page to show the recent 5 blog posts, which changes dynamically one blog is updated?
It ain't gonna work dynamically coz you can't create Columns in dynamic fashion, right?
Another Great tutorial, is there a way to disable the hover effect on mobile?
Did you download the file? The CSS code says:
@media(min-width: 768px) {
/* no need to include everything */
}
...which means it's already "disabled" for mobile devices.
@@OoohBoi Yes, but you added the black overlay via elementor. any way to disable that on mobile?
hi! thanks for the tutorial in this awesome effect, i did everything and works great but when i charge the web in chrome the effect does not show, do you know what it could be, thanks in advance
That's strange. It shows up on my end, I have no idea what might be wrong at yours... is your Chrome browser up to date?
Doesn't work on my sites. Imported the training file, but the background overlay isn't visible, the page is empty until I hover over a column.
Okay, solved it by myself. Simply had to uncomment the Elementor 3.x parts. Ouch! ;-)
Take a look at the Custom CSS code, you'll find the code being commented for Elementor 3.0 and above. Uncomment that code and comment the active one. Elementor 3.0 brought some changes to the DOM, that'S why initially you can't see the background images.
Is it possible to always keep one expanded (the last one that was hovered over)? I want it to be accessible to everyone.
As I recall, you can only mimic the hover event programmatically, by using the JavaScript. So I guess it's impossible by the pure CSS...
Hi Oooh Boi, amazing. Short simple question, how to reduce height of a section narrower then the Elementor '0 minimum height' ? thks alot.
Thanks, however ... *narrow* means not wide enough or not quite loose. I can't find any connection between being narrow and '0 minimum height'. Was that the typo?
@@OoohBoi thks. In terms of section height. Section '0 min height' still gives certain height and i wanted to make the section even less. Let say i have text in section with 0 height. the section has still too much space on top and bottom of text. ..
@@elisha770 How about:
.special-section { /* or selector */
height: 0 !important;
max-height: 0 !important;
min-height: 0 !important;
}
@@OoohBoi ok. I will try and lyk. Thks so much for all your help. 😎
I really like the video! But when I am trying to write my own css at the page settings it doesn't work. When I started with your code, elementor does not recognize opacity.
Also the files that I downloaded for the tutorial training is a mac file and I cannot open that (windows user). Is there a way that I can copy the css code somewhere?
It sounds like you're having problems with the Browser. Elementor relies on the Browser and works inside the Browser so you can't blame Elementor. Try Firefox. As for the training file being archived on Mac - there's no difference in the zipped file, regardless the OS, zip is cross-system friendly, just like PDF.
Which is the CSS code with flexbox?
...ok, i found it with !important CSS code
we can also download liquid accordion
Sure, the link is in the description text!
Please put your E-Pro affiliate ID above somewhere. Going to buy anyway and don't mind you getting 50% for your efforts...
Thanks Frank, I already posted my request for an affiliate but don't have it yet. Not sure whether it's still in the process, or maybe denied, however, at this moment I can only say thanks for taking care! I appreciate it!
Can't find the training file
Maybe the download link was only temporarily unavailable...
Is it possible to do it with dynamic contents, like post loops? I've tried, the content opacity looks fine but the flex columns doesn't works :(
Theoretically yes. But in that case, each of your dynamic elements must create the column as its own wrapper.