Build fully custom Flip Card Boxes with No Template Shortcodes - Elementor Wordpress Tutorial

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

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

50% 1

You can build Flip Boxes with custom HTML - but this is how you build a Flip Box using the Elementor Elements without using the Native FlipCard widget (which is limited) or custom HTML.
CSS Needed:
.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
Build fully custom Flip Card Boxes with No Template Shortcodes - Elementor Wordpress Tutorial
Book your 1-2-1 Consultation: websquadron.co...
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your RU-vid Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

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

4 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@Unhead85 3 месяца назад

Magician🎉 many good wishes and prosperity to you🤗

@rushi5650 8 месяцев назад

Maybe you didn't receive lots of like but your content is really useful. Keep it up. 🎉

@nurullaharslan1092 4 месяца назад

Thank you! I have found the elementor flip box to be problematic. This is a fantastic alternative!

@karolryan Год назад

Great tutorial. This also works in a loop grid / loop template!

@Ctatarelli 6 месяцев назад

Thats exactly what I used it for!

@DeeptarkoChowdhury Месяц назад

Subscribed. What an amazing tutorial. And so well explained.

@Emigrate2Emirates 3 месяца назад

I was dancing to the outro music 🕺🏻

@janwilson6145 Год назад

awesome! great explanation. ❤

@MUHAMMADASHRAFMUNIR 3 месяца назад

Thanks a lot imran Bhai Today I was trying the same hehheh

@luisbarriga8413 6 месяцев назад

Epic! Thank you so much for this!!!

@websquadron 6 месяцев назад

No problem!

@AllesKiten Год назад

Amazing. Thank you!

@lautarozotelo3644 5 месяцев назад

Thanks you my good sir, instant sub,

@websquadron 5 месяцев назад

Welcome!

@lucascampos9057 4 месяца назад

Thank you very much!!!

@websquadron 4 месяца назад

You're welcome!

@albertoazinar1209 8 месяцев назад

Awesome content. easy steps

@theresasouthern8631 7 месяцев назад

They call him Flipper! 🐬

@מורןשלמה Месяц назад

omg, this is suck a great video!! thank you so much! also, if I want the cards to fade in instead of flip, how do I do it?

@jarwa212 4 месяца назад

Thank you! I have a question...how do I make the flip box, flip automatically and only stop when you hover on it?

11 месяцев назад

Genial, gracias!!!

@David-zp8rx Год назад

My man! great videos! Very cool, but is there any way to adjust hover area so it is the entire container? The card only flips when dead center and goes back to front when you move to where button is.

@David-zp8rx Год назад

So figured out the issue I had overlapping container that was somehow messing it all up.. It works great after I adjusted the margin to get it out of the way!! Thanks again this is very useful to quickly display a lot of information without cluttering up the page!

@muneeburrahman8359 Год назад

Salam, Thankyou Brother

@studioalius27 11 месяцев назад

Hello, could you give me some advice why it keeps turning only the queue tab? I followed all the necessary steps. Thanks for your help.

@ashanranasinghe8866 Год назад

Fantastic. Just a quick question. is there a way of having a slide in from bottom effect instead of a flip effect?

@websquadron Год назад

Probably but I don’t have that script at hand

@StreamGuru-xo9kk Год назад

Great Guide ! just a Quick Question Instead Of hover can we set onclick. Thanks

@websquadron Год назад

I’ll need to dig out the JS for that

@StreamGuru-xo9kk Год назад

@@websquadron It would be great !!

@vee-fam 9 месяцев назад

Hi @websquadron, thanks for the great tutorial! Did you find a solution for on click on button rather than hover?

@websquadron 9 месяцев назад

Not yet.

@pixelgap Год назад

That is cool. However, if you have six flipping boxes, it would require a lot of containers. Would that affect page speed? Thank you for the video Imran

@websquadron Год назад

Agreed. I’m not a fan of flip boxes :) So only use sparingly where needed.

@nangnate8306 Год назад

Thanks nice tutorial, can the flipbox widget be used to pull in info to the custom loop using avdanced custom fields? If so how?

@websquadron Год назад

If you built it with containers (which you would through the loop grid) then technically yes.

@sr_leche Год назад

This tutorial was helpful, only one issue, when I try to go mobile the mouse out doesn't work to flip back the card, what can I do? Thanks

@websquadron Год назад

It should do unless there's other JS on the site.

@Webstijn 7 месяцев назад

I have the same issue right now. I can't make my buttons on the backside clickable. How did you fixed it?

@Webstijn 7 месяцев назад

@@websquadron I have the same issue right now. I can't make my buttons on the backside clickable. How did you fixed it?

@nangnate8306 Год назад

nice vid - can this flip container be made into a template and then used within a loop? If so how can the back image be pulled in as the post only allows for the featured image?

@websquadron Год назад

You would have to use an additional Custom field to be pulled through

@AllSetz-NegociosImobiliarios Год назад

Hi man, tks for the video it help me a lot. do you know how i do the container rotate just when click in a button on the front??

@websquadron Год назад

Transform rotate 90 may not work properly

@TheSnideSet Год назад

Unfortunately don't work, i'm trying to trigger the rotate just when i click on a button in the front container. Do you know how i do this?

@JohannesFraundorfer Год назад

Hi man, thanks for the video, it was super easy following you throughout the demo! I implemented it in my Wordpress site but the thing is it just flips my front card and displayes it mirrored (the css classes are defined correctly) Could it maybe be a problem with Elementor itself, because I'm using a German Version where the "container" element doesn't exist (why would anyone take the div container away just for the sake of userfriendliness 😢) and I had to do a work around with the elements that are provided in my Version, but yeah, it seems to work, the flip animation works and everything, it just doesn't display the "back" card. Maybe you have an idea? :D

@websquadron Год назад

You could activate Containers and still use Sections on your site. The German version should still have Containers; have a look in the Experiments.

@theresasouthern8631 7 месяцев назад

@@websquadron My text is mirrored too. Hmmmm... I have the latest Elementor Pro.

@theresasouthern8631 7 месяцев назад

Check the classes again. I found a minor typo in one of mine and that was the issue for me.

@deNysWebDesign Год назад

Would you be able to tell me how to trigger a flip effect on entrance please? so im basically using the flip box to reveal the content with the front having nothing on it and the background is see-through. It would then just stay like that so not react to mouse hover at all. Maybe there is a better way to do it but either way i have been googling till my eyes bleed and i cant find out how to do it. Even a little hint in the right direction would be much appreciated. Thank you!

@websquadron Год назад

Maybe; add this to the CSS; .yourclassname { transition: all 0.3s; } .yourclassname.flip-after-5s { animation: flip 5s; animation-fill-mode: forwards; } @keyframes flip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } } Then add this JS to a HTML Widget above the Flipbox. document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.querySelector('.yourclassname').classList.add('flip-after-5s'); }, 5000); }); This has come from ChatGPT :) May not work, so take a backup first.

@deNysWebDesign Год назад

@@websquadron oh wow thank you so much so replying so fast, I'll give it a try! fingers crossed :)

@studioalius27 11 месяцев назад

why doesn't it work for me even though I followed all the steps?

@websquadron 11 месяцев назад

Not sure

@theresasouthern8631 7 месяцев назад

What is not working? I'm wondering if there are still any others getting reversed / mirrored text?