Пікірлер
@i_AsK343 15 сағат бұрын
perfect❤❤❤
@bberry48 Күн бұрын
Great video. Something you'd think wouldn't be so complicated to find and easy to do. Thanks so much
@littleduckdanceandartsacad6838 Күн бұрын
The mobile footer covers the original footer, how to solve?
@thecreativarena Күн бұрын
if you dont want to show the original footer on mobile just goto container advanced setting for the original responsive and hide it on mobile but if you want it show on mobile also on the original footer goto mobile responsiveness and give it some bottom margin adjust till you get desired outcome hope this helps if not let me know
@rogerio6892 2 күн бұрын
Any solution for Safari browser ?
@boomlaboom 2 күн бұрын
can someone help me, i have done that but the tab button is on the bottom of the content not on top of the content :"
@thecreativarena 2 күн бұрын
with editing the tab on the tab content section go to the bottom part you will see the direction where you can set it to either above below before or after
@DigitalTanbis-ld8lg 4 күн бұрын
Wow.
@GbengaSaviour 4 күн бұрын
Itsa nice effect I like it thank you
@gersonbatista8754 4 күн бұрын
Thank you!
@polly3608 4 күн бұрын
What about mobile?
@Tope-f8b 5 күн бұрын
Thanks so much, i been searching tutorial of this design
@thecreativarena 5 күн бұрын
I'm glad you found it useful, be sure to check out my other tutorials for more cool designs!
@BobbyMarko 6 күн бұрын
Thanks for the tutorial! Works great! Is there a way to set it so the hide effect doesn't happen until you get past the first section of the page? Maybe a scroll offset setting?
@invisible1880 6 күн бұрын
I have elementor pro plugin but i did not get this widget any solution?
@thecreativarena 6 күн бұрын
make sure you have set Nested Elements to active to do this go to elementor settings under features go to stable features you will see it
@TheLuthorri 6 күн бұрын
Can you add anything that tells the user to scroll horizontally?
@rayasreviews 8 күн бұрын
AMAZING! This is the perfect tutorial, and the cards look and do EXACTLY how it is supposed to
@thecreativarena 8 күн бұрын
I'm glad you found the tutorial helpful!
@essence2333 9 күн бұрын
Absoluteness! great tutorial . Thank you.
@AgalyaBrindhu 9 күн бұрын
It's amazing, can i do it with free version?
@AbuchiOkafor-pk2hi 10 күн бұрын
This is beautiful thank you so much
@the_just_john 10 күн бұрын
Bruh... That was an amazing and perfect tutorial session. Clear instructions, and I didn't even need to follow step-by-stepep, I just watched till the end and I was good to go.
@ICUAT 10 күн бұрын
great thank you
@MarceloB-uh3uy 11 күн бұрын
Hi. Thanks for de video. When I click on a tab, the tab container goes to the beginning automatically and I can no longer see the selected tab when I scroll. How to resolve this?
@skybuck2000 14 күн бұрын
404
@yingred03 16 күн бұрын
new subscriber here!! keep it up man!! your projects were so gooood!!!
@thecreativarena 16 күн бұрын
Thanks for subscribing, I’m glad you liked the projects!
@michalkocis8934 16 күн бұрын
Thanks for awesome tut again! I would like to ask if you couldn't show if someone hovering the area of single item ( as loop 1 post ) in that grid, to make post title be underlined on hover ( I mean whole container ) if you could make video about CSS like how to work with class id, pasting code etc .. that would be fantastic! THANK YOU. Keep doing great job man!
@thecreativarena 16 күн бұрын
i have done videos on how to make dynamic custom loop cards with css you can check this video kzbin.info/www/bejne/gojVmHqFdtOrbtE
@michalkocis8934 16 күн бұрын
@@thecreativarena I go ahead! Thank you!
@jonbustamante 17 күн бұрын
Nice. But this is only ideal for a single-line heading, which is hardly the case.
@thecreativarena 18 күн бұрын
CSS CODE .card{ width: 300px; height: 280px; box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15); transition: 0.5s; } .card:hover{ height: 350px; } .imgBx{ position: absolute; top: 20px; right: 25px; background: #333; border-radius: 12px; transition: 0.5s; } .card:hover .imgBx{ top: -100px; scale: 0.75; box-shadow: 0 35px 80px rgba(0, 0, 0, 0.2); } .content{ position: absolute; top: 232px; width: 100%; padding: 0 30px; height: 45px; overflow: hidden; text-align: center; transition: 0.5s; } .card:hover .content{ top: 90px; height: 260px; } @media screen and (max-width: 480px){ .card{ width:280px; height: 350px; } .imgBx{ top: -100px; left:0; scale: 0.7; box-shadow: 0 35px 80px rgba(0, 0, 0, 0.2); } .card .content{ top: 90px; height: 260px; } }
@dariodesisto6971 21 күн бұрын
an amazing tutorial
@997turboabs2 21 күн бұрын
Another fantastic tutorial. I ammended the code so that on a mobile device the hover effect is turned off (because it doesnt work with mobile devices) and added the product title to the top of it. On desktop everything remains the same: :root { --dark-color: #161616; } .card_img { transition: 0.5s; } .card_price { transition: 0.5s; } .card:hover { box-shadow: none; } .card:hover .card_name { left: 0; } .card:hover .card_img { transform: rotate(30deg); margin-left: 3.5rem; } .card:hover .card_price { margin-left: 3.5rem; padding: 0 1.5rem; } .card_name { position: absolute; left: -25%; top: 0; width: 3.5rem; height: 100%; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; background-color: var(--dark-color); color: #fff; transition: 0.5s; } /* Improved styles for mobile devices */ @media screen and (max-width: 480px) { /* Ensure product title is visible */ .card_name { left: 0; /* Make title fully visible */ transform: rotate(0); /* Neutralize rotation for readability */ writing-mode: horizontal-tb; /* Change writing mode for mobile */ width: auto; /* Adapt width for horizontal text */ height: auto; /* Adjust height */ padding: 0.5rem 1rem; text-align: left; } /* Remove hover effects and reset transform for images */ .card:hover .card_img, .card .card_img { transform: none; margin-left: 0; } .card:hover .card_price, .card .card_price { margin-left: 0; padding: 0; } } Hope this helps someone! Thank you, this was good fun.
@997turboabs2 22 күн бұрын
mind = blown Fantastic use of some simple gsap. 10/10 for the tutorial. Perfect and to the point! 11/10 for providing the css and java! Only things i did additional to this was to set the top container to hide on desktop/tablet/phone and the bottom container with the html widget i set the vh to 0. Thank you. Subbed. Look forward to some more
@footzy_vibes 23 күн бұрын
Awesome tutorial 🔥 but I don't know why the css code isn't working on my phone and also in the editor
@thecreativarena 23 күн бұрын
follow the tutorial step by step and make sure the css code and classes are added to the individual cards accordingly
@GbengaSaviour 24 күн бұрын
This just awesome
@christrim320 24 күн бұрын
when i had the javascript my previous cards disappear except for the very last one, any idea what could be causing said?
@thecreativarena 23 күн бұрын
Do they disappear on scroll ?
@christrim320 23 күн бұрын
@@thecreativarena the section is scrollable its just the last card that is visible only for some reason. I'll try it again on a fresh page, maybe there's a conflict going on somewhere.
@thecreativarena 23 күн бұрын
Did you try Adding More room for Scrolling like add another container after the container that have those designs and and give it min height of 100vh and then try to scroll down see if it helps
@christrim320 23 күн бұрын
@@thecreativarena okay shall do, i did have multiple sections below, but it might be i may need more space for the scroll trigger to operate. Thanks for your feedback tho, appreciate your hard work.
@MustafaKemalKaratas 25 күн бұрын
Hi, i have question. i did everything but card stay under header how can i fix it :/
@thecreativarena 24 күн бұрын
i dont really understand your complaint however try increase or decrease the z-index to see if this helps
@papayawebmedia 26 күн бұрын
Nice work!! Greetings from Mexico!
@ThisandThatNorthwest 29 күн бұрын
Hello, when i add the loop grid and create a new template, I'm not getting the small box (with the save&back section) to add an image. I tried deactivating plug-ins, but to no avail. Any suggestions? Thanks!
@thecreativarena 27 күн бұрын
yeah a couple of suggestion make sure your elementor plugin is updated make sure your internet connection is good deactivate your cache plugin and try it again clear your browser cache plugin i believe one of this should help you
@Abdullah_WordPress_Expert 29 күн бұрын
creative man
@SaperoNine 29 күн бұрын
Very generous And genius I liked your video 📷
@munishkumar6022 29 күн бұрын
I want to show dual menu (header menu and this sticky footer menu ) How i achieve it
@thecreativarena 27 күн бұрын
if you want it to display on all the pages i think you create the header menu on header template and the footer menu on the footer template
@munishkumar6022 27 күн бұрын
@thecreativarena i create this sticky menu in header menu so i have permission to hide on desktop both working fine now .. And if create sticky menu in footer then existing footer will be gone...
@ClaireOdonel Ай бұрын
Thank you for the tutorial very helpful. I have edited my loop template image by error so all grids are showing the same image. Do you know how to change this please?
@thecreativarena 29 күн бұрын
you need to edit the template then go to the image when you hover on the image on the content edit section you will see some options click on the dynamic tags option you see there and select featured image. this will make your loop display only the featured image set for each post or product
@marvinramos9449 Ай бұрын
bro... you are really the best... i wanna kiss you hahaha... this thing is really spectacular
@thecreativarena 29 күн бұрын
Much appreciated, glad you found it helpful!
@amirsaood2826 Ай бұрын
Which extension you are using to view responsive devices??? Can you please tell bro? Is it for Google chrome?
@thecreativarena 29 күн бұрын
yes its for google chrome and you can watch this video and see all the wonderful chrome extension i used including the one you asked for kzbin.info/www/bejne/qGLOi2iDq5qfoKM
@picor-u1v Ай бұрын
❤
@peacebuilder3164 Ай бұрын
🎉
@gergelyfoldi491 Ай бұрын
Great video, but I can't seem to find the widget you mentioned. Could it be that it's been renamed or moved to the Pro version and is now paid? Thanks in advance for clarifying!
@cpanda4070 Ай бұрын
Thank You Soo Much, It's Working
@personalitybuild-up4945 Ай бұрын
There is no search option in elementor features.... How can I find it ?
@thecreativarena Ай бұрын
make sure you are using elementor pro and its updated
@motobandit5345 Ай бұрын
The Offset doesnt work for mobile. The value added on mobile is not pulled. When I add 100 on desktop, its 100 on mobile as well. Super annoying. This could be such a great feature but Elementor doesnt do it right :(
@AbuchiOkafor-pk2hi Ай бұрын
This is beautiful❤
@hielo404 Ай бұрын
Gracias!
@GbengaSaviour Ай бұрын
Thank you for this
@lance-f2c Ай бұрын
what if i dont want logo in transparent header