Тёмный

Create a Pricing Table with Monthly/Yearly Toggle Switch in WordPress using Elementor 

Make Dream Website
Подписаться 33 тыс.
Просмотров 53 тыс.
50% 1

In this tutorial, I'll create a Pricing Table with Monthly/Yearly Toggle Switch in WordPress using Elementor.
✅Contact me for any WordPress related Project:
makedreamwebsite.com/
✅Get Elementor Pro:
makedreamwebsite.com/elemento...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsite.com/bluehost
✅Get all the code snippets:
makedreamwebsite.com/create-a...
Today, I’ll show you how to create a pricing table on your WordPress website using Elementor. In Elementor when you are using the Elementor pricing table widget, you don’t have so much option to customize the design and layout of the pricing table. I’ll show you how to make a 100% customizable pricing table and how you can make a monthly yearly pricing table switch with that. And for this you don't need any WordPress pricing table plugin.
Here I give a 20% discount for the yearly subscribed users. That’s why the price has decreased for the yearly plan. Finally, we will make it fully responsive from the tablet and mobile devices.
First, we have created the toggle section which we have build by using the Text Editor and Divider widgets. We also use some custom CSS and JavaScript code to convert the divider widget into a Elementor pricing table toggle button. We also add a 20% discount badge for our yearly plan.
Then, we created our pricing table design. But, we didn't make that with the default Elementor price table widget. By using the heading, text editor, button and icon list widgets we make the WordPress pricing table. Then, we make the pricing tables fully responsive for our tablet and mobile devices.
After that, we duplicate the whole pricing table section and make another version for the yearly plan and hide the first section initially. Finally, by adding the JavaScript code we fully make it work. Here we also need to add some CSS classes with the toggle button and with the 2 sections.
For these whole tutorial, you don't have to have any kind of Elementor pricing table plugin. So, that’s how you can create this kind of fully responsive customizable pricing table and add a toggle button with that. If you enjoy this kind of Elementor tips and tricks, Elementor advanced design and Elementor custom CSS related video don’t forget to like and subscribe. And if you want me to help you for any WordPress related project feel free to contact me through my website.
✅Contact me for any WordPress related Project:
makedreamwebsite.com/
✅Get creative templates on my Template Shop:
templatish.com

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

 

12 окт 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 257   
@HansOey
@HansOey Год назад
Thanks for this tutorial! Very concise and clean finish.
@ErickGerber
@ErickGerber Год назад
This is amazing! Thanks so much for making this tutorial! I was looking at all kinds of different plugins but with this, you don't need any extra plugins cluttering up your website. Amazing!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
🙏👏😇😇
@fabienbedot9645
@fabienbedot9645 Год назад
Great tutorial! It helped me a lot. You have a real gift for explaining simply and taking the necessary time. This is very rare. Bravo and thanks again!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks for such great appreciation 😇
@swartz4049
@swartz4049 2 года назад
We appreciate you sharing this knowledge.
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thank you for your appreciation
@StevenHogenbosch
@StevenHogenbosch 2 года назад
Thank you very much for this very clear and eleborate tutorial! It was a breeze with your video!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
You're most welcome!
@spicyboi2328
@spicyboi2328 Год назад
DUDE You Saved My life . Amazin Channel. Keep going !
@ComebackGAWD
@ComebackGAWD Год назад
Worked like a charm. I don't even know how to code!
@avromd8579
@avromd8579 Год назад
Excellent! Thank you so much for providing this resource. I knew it could be easily done in Elementor. 🙏
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're very welcome!
@souleater8534
@souleater8534 7 месяцев назад
Thanks, i will give this ago. What are you using on the backend to process payments both the annual one off and the monthly
@pushingpandas6479
@pushingpandas6479 2 года назад
Best elementor tutorials. I subbed! Thank you
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thank you too!
@teamactivemedia
@teamactivemedia Год назад
This was such an easy to follow, effective and clean solution. Thank you for sharing this, I'm so thrilled I didn't have to use a plugin.
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks for the awesome feedback!
@DavidHunterinOttawa
@DavidHunterinOttawa 2 года назад
JITU, really fantastic tutorial on how to implement a pricing table toggle in Elementor. Thank you so much! You saved me a lot of time. And it works perfectly the first time. fyi, I didn't bother using custom columns for the pricing tables - I just used the default pre-built pricing table blocks - works great.
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Glad to hear it really helps you!
@AliceinMethodologyland
@AliceinMethodologyland 2 года назад
Thank you for all of the help!!! You're amazing!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
You're welcome!
@thomashysselinckx5059
@thomashysselinckx5059 3 месяца назад
Great tutorial, thanks!
@MakeDreamWebsite
@MakeDreamWebsite 3 месяца назад
You're welcome!
@AdamKiss-sf2bf
@AdamKiss-sf2bf Год назад
Thank you so much! Very detailed and helpful. As a beginner, I could do everything. 10/10
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Glad it was helpful!
@bradymills5882
@bradymills5882 3 месяца назад
This is incredible! Thank you for this amazing tutorial.
@MakeDreamWebsite
@MakeDreamWebsite 3 месяца назад
You're very welcome!
@sonageciova8300
@sonageciova8300 2 года назад
Thank you so much, it helped a lot!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Glad to know that helps you...
@Fuseek
@Fuseek Год назад
I truly appreciate your tutorial bro. Just finished editing my website by following this tutorial. Also, if anyone can't make the column appear larger than the other column, try to adjust the margin instead the padding.
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Glad to know that helps you. And thank you for your great tips...
@kevinmarshall1239
@kevinmarshall1239 4 месяца назад
Incredible tutorial - thank you
@MakeDreamWebsite
@MakeDreamWebsite 4 месяца назад
You're welcome!
@oluwatamiloreadekoya6615
@oluwatamiloreadekoya6615 5 месяцев назад
Amazing tutorial, thank you!
@MakeDreamWebsite
@MakeDreamWebsite 5 месяцев назад
You're welcome!
@andrewverbrugghe9298
@andrewverbrugghe9298 2 года назад
It really did help me. Thanks a lot !
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Glad to know it really helps you. You're welcome!
@vaishnavia.n.312
@vaishnavia.n.312 Год назад
Thank you so much , amazing work, and great explanation.
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're welcome!
@shaunels
@shaunels 2 года назад
Great tutorial! Thanks a lot!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
You're welcome!
@andreasp.1572
@andreasp.1572 Год назад
Absolutely fantastic! Works like a charms. Thanks a lot!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're welcome
@andreasp.1572
@andreasp.1572 Год назад
@@MakeDreamWebsite I do have one question please: I want the button to be on the monthly side by default. What do I need to change in the code?
@FahdJeddah
@FahdJeddah 11 месяцев назад
Hi there, great tutorial. You make it very easy to make with no time. Thank you
@MakeDreamWebsite
@MakeDreamWebsite 11 месяцев назад
You’re welcome 😊
@DudiKroyzer
@DudiKroyzer Месяц назад
Thanks♥ Excellent guide
@MakeDreamWebsite
@MakeDreamWebsite Месяц назад
You're welcome!
@DudiKroyzer
@DudiKroyzer Месяц назад
​@@MakeDreamWebsiteHow to make pressing the switch also change the color of the button (circle) I want the button to be white for the first price and black for the second price Thanks
@Xeeshan195
@Xeeshan195 10 месяцев назад
Great tutorial! Thanks a lot! For initial postion left to right : edit in the code 2 lines selector .elementor-divider:after{ left: var(--padding); ------> change it } selector.monthly .elementor-divider:after{ left: calc(100% - var(--size) - var(--padding)); ------> change it } and change the table id Thank you
@Nadirwork
@Nadirwork 9 месяцев назад
thanks mate, u save my time :)
@ryanerickson7148
@ryanerickson7148 2 года назад
Hi there, great tutorial. The toggle button works great. Unfortunately, a couple of things happened. 1. I had my display "full width" and now it only lets me have a boxed look. 2. I had a template block added from Envato Free Blocks and now it disappeared. Any ideas on how to fix? Once I remove the Javascript code, everything is back as I positioned it.
@MauricioSamaniego
@MauricioSamaniego 2 года назад
Great tutorial!! it Really Works!! Thank you! One question: How can i activate the toggle function with "monthly" and "yearly" tittles when you click on them?
@jonamayicotanim7806
@jonamayicotanim7806 2 года назад
Thank you so much brother!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
You're welcome
@rafaelfernandes8746
@rafaelfernandes8746 5 месяцев назад
Super nice man! Appreciate it! Super tks!!!!
@MakeDreamWebsite
@MakeDreamWebsite 5 месяцев назад
Thank you!
@hassenzouari2479
@hassenzouari2479 Год назад
Thank you so much really helpful
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're welcome!
@edilsonlsouza
@edilsonlsouza Год назад
Excellent article!! I just wanted it to start in a month, how to do it?
@azginyoda
@azginyoda 2 года назад
amazing content. Thank you!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Welcome!
@user-io4qc8rm1c
@user-io4qc8rm1c 3 месяца назад
Thanks a lot!
@MakeDreamWebsite
@MakeDreamWebsite 3 месяца назад
You're welcome!
@shortvideos2479
@shortvideos2479 8 месяцев назад
many thanks!!!!
@MakeDreamWebsite
@MakeDreamWebsite 8 месяцев назад
You're welcome
@fftkerala
@fftkerala 2 года назад
You are Awesome. Thanks very much.
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Very welcome
@FaithlessClothing
@FaithlessClothing Год назад
I need some hlep! By clicking on the toogle button I would also like the year and month to change. If monthly is visible I want the font next to the toggle button to be bold the same with yearly
@michaelmccarthy5690
@michaelmccarthy5690 9 месяцев назад
Well done brother! Very impressed by your help and work, it was really appreciated, keep up the great work.
@MakeDreamWebsite
@MakeDreamWebsite 9 месяцев назад
Thanks a lot!
@DanZL1
@DanZL1 2 года назад
Is there any ways of adding multiple toggle buttons and tables on the same page? I created the first pricing table and it worked! Then I duplicated everything from the first and created the next one below the first. I also changed the classes of individual tables and the JS but still the first toggle is changing the second pricing table? :(
@mrydigital
@mrydigital Год назад
This is amazing! Thanks
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Welcome 😇
@anthonyoconnell5677
@anthonyoconnell5677 8 месяцев назад
Hi. This is such a great video. Everything is working except both pricing tables are on the screen. The toggle works but how do i get rid of the 2nd list? Thanks.
@tafmakura
@tafmakura 10 месяцев назад
Amazing, thank you very much!
@MakeDreamWebsite
@MakeDreamWebsite 10 месяцев назад
You're welcome!
@urfiijefferson2875
@urfiijefferson2875 9 месяцев назад
@@MakeDreamWebsite Thank you for these miraculous videos Please how can I set the month as the default? Many people are asking to solve this problem in the comments including me You said you would create a template for it a year ago I searched a lot for it and did not find it. Please provide this script or flap for us soon Please reply Thank you
@marufkan8912
@marufkan8912 2 года назад
thanks bro ,, amazing class
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Glad you liked it
@hacktheSEO
@hacktheSEO 9 месяцев назад
Thanks it's work well :)
@MakeDreamWebsite
@MakeDreamWebsite 9 месяцев назад
You're welcome!
@sarmadnadeem_
@sarmadnadeem_ Год назад
Thank you so much. This was highly appreciated. You're a gem.
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're veryyy welcome!
@sarmadnadeem_
@sarmadnadeem_ Год назад
@@MakeDreamWebsite Much appreciated. Can you please tell how to make a comparison table of pricing plans?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
@@sarmadnadeem_ I think I need to make separate video about it...
@sarmadnadeem_
@sarmadnadeem_ Год назад
@@MakeDreamWebsite yes pleasee sir. It would be highlyy appreciated. I'm in dire need of this currently.
@thelonewolf2025
@thelonewolf2025 2 года назад
Thankyou so much.
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
You're most welcome
@jingga6627
@jingga6627 2 года назад
thanks a lot bro
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Very welcome!
@belarus-in-the-us
@belarus-in-the-us Год назад
Thank you A LOT!!!!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Welcome
@halfslashgh5205
@halfslashgh5205 5 месяцев назад
awesome tut.😀😉
@MakeDreamWebsite
@MakeDreamWebsite 5 месяцев назад
Thanks! 😃
@andresstoro
@andresstoro 2 года назад
Muy buen tutorial y funciona a la perfección :D
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Gracias
@kmanekfnd33333
@kmanekfnd33333 11 месяцев назад
레전드다 이거. 이 사람은 워드프레스 엘리멘터 최고의 강의들을 올립니다.
@MakeDreamWebsite
@MakeDreamWebsite 11 месяцев назад
큰 성원에 감사드립니다
@francoseling496
@francoseling496 2 года назад
Great one. Subscribed.
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thank you 😊
@sasakikojuro
@sasakikojuro 2 года назад
Hello, really a good video but I don' have elementor pro. Is there any other way with only free plugins?
@luisvinicius2347
@luisvinicius2347 2 года назад
Youre a genius!!!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thanks a ton!
@rimonchowdhury1289
@rimonchowdhury1289 2 года назад
Incredible!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thank you 😊😊
@sakoulias1
@sakoulias1 2 года назад
Thank you so much this is perfect
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Very welcome!
@sakoulias1
@sakoulias1 2 года назад
@@MakeDreamWebsite I jinxed it... It works great for a while, but after a few visits/hours, it just stops working, and requires me to delete and rebuild the 2nd table. Then it works again for a while, only to stop working again. Those elementor clashes are infuriating
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
@@sakoulias1 It shouldn't be work like that. May be it's conflicting with some other plugin or there may be another reason. You can share your page link, if it doesn't work.
@silverfoenix
@silverfoenix Год назад
Very beautiful work, the way you combine Javascript with CSS to make your vision website reality is I have this idea of when hitting a button (try for free), instead of going to checkout product you instead make a contact form section appear for that pricing option (same background color style), when changing your mind the contact form replaces with another! It might be you next video idea!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks for the idea!
@badboy-lj7gs
@badboy-lj7gs 2 года назад
Hello, its working perfectly but my other section cant stretch. Please can you fix that?
@andreasmusic1222
@andreasmusic1222 2 года назад
Woah...Impressed!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thank you
@jiviz1
@jiviz1 10 месяцев назад
hello and thanks for the tutorial i made my table and it works well but somthing wierd happend i cant add any lottie widget to this page the other page of the website seems fine only the page i import the jscript and css seems to have some kind of conflict with lottie widget . can you guide me on this how to fix the problem ? thanks
@miiqbal44
@miiqbal44 Год назад
thx u bro
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're welcome
@1pedro876
@1pedro876 8 месяцев назад
Excellent
@MakeDreamWebsite
@MakeDreamWebsite 8 месяцев назад
Thanks
@kcol3747
@kcol3747 2 года назад
Awesome but the code prevented me from using the accordian faq i made. but when i remove it its active. Also the drop down menu becomes in active as well on mobile i dont understand y
@visualmodo
@visualmodo 2 года назад
Very good WP video!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Glad you enjoyed it
@morgancotten
@morgancotten Год назад
Hello, Thank you for this beautiful tutorial! I have a question, what change should I make in the code for the price to be displayed on Monthly automatically and not Annually? Thanks a lot !
@MakeDreamWebsite
@MakeDreamWebsite Год назад
I'll make a ready template soon where I'll also add that version...
@manumathew88
@manumathew88 Год назад
Any options slider price with filters
@victor.nunez.6724
@victor.nunez.6724 Год назад
Hello, i need your help! The pricing table with slide testimonial not function correctly. Please!
@Mario10PorCiento
@Mario10PorCiento Год назад
Hello! First of all, many thanks for this great feature. I just have a question: How can I make the toggle be switched on Monthly side as predefined?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Ok I'll make that as template and added as a pin comment soon!
@rubendragan6514
@rubendragan6514 11 месяцев назад
thanks! Brother is there a way to use the css for other builders? It should work right?
@MakeDreamWebsite
@MakeDreamWebsite 11 месяцев назад
Actually I'm not sure though as I've not tested it for other builders...
@kenakka4353
@kenakka4353 2 года назад
Thank you so much for this amazing and detailled tutorial I have a question: how can i accept paiements if someone decides to purchase one of my plans, i mean is it directly in my woocommerce Or it requires other integrations ?? Thank You
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-sgkHGBiCQqE.html You can check this out.
@DudiKroyzer
@DudiKroyzer Месяц назад
Excellent tutorial♥♥ How to make pressing the switch also change the color of the button (circle) I want the button to be white for the first price and black for the second price Thanks
@marinc979
@marinc979 2 года назад
Hi, thank you ! Do you know what's the name of the font 'Ready to start with social Optin ?'
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
You're welcome. I can't remember exactly. It may be "Proxima Nova Bold" (a custom font).
@nichaaaatp
@nichaaaatp Год назад
This is super helpful! Thank you so much :) I also have a question, if this method can work with currency?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're welcome! Yes, it works... By following the same process, you can create 2 sets of table for 2 different currencies. But, if you want more than 2 currency, in that case you can't do that in this way...
@mgroot2235
@mgroot2235 2 года назад
Great tutorial, thank you. Once you've created the pricing table, how do you link to the "add listing form" for the selected product?
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
You can use this kind of link jituraiyan.com.com/cart/?add-to-cart=25 (25 is product ID for example). And before that you must have to have installed WooCommerce.
@mgroot2235
@mgroot2235 Год назад
@@MakeDreamWebsite Thanks
@jasonkuma6546
@jasonkuma6546 2 года назад
Hi! Great tutorial. I just have one question, do I need to create 6 different "product" links? And do I add the links to all 6 buttons, before I combine the tables using the CSS? Thank you!
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Yes, you need to
@jasonkuma6546
@jasonkuma6546 2 года назад
@@MakeDreamWebsite thank you!
@meshtarua
@meshtarua Год назад
nice one
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thank you!
@MS-tn4zq
@MS-tn4zq Год назад
Hey man, thanks for this nice tutorial. I have a issue to change the toggle to monthly by open the site. Can you give us a example where the toggle is on "month" for first?
@schoolpull
@schoolpull Год назад
Just invert the text next to the switcher and invert the name of the tables (table-price-1 becomes table-price-2 and viceversa)
@mohammedjamali6412
@mohammedjamali6412 Год назад
hi , any solution for connecting pricing table to checkout page ,, i put the url on the button ( get started) but it redirect me to checkout page blanc with this message '' ” You have not selected a valid subscription plan”
@kevinmarshall1239
@kevinmarshall1239 4 месяца назад
Hey there. While everything worked perfectly on Chrome and Firefox on my laptop, the moment I tried this on my iOS device, the toggle button loaded on the wrong side and didn't work correctly too. I discovered that it was also happening exactly this way in Safari on my laptop. The following replacement of code fixed this for me and keeps it working consistently on all browsers: Replace: left: calc(100% - var(--size) - var(--padding)); With: left: calc(100% - 23px - 5px); Thanks!
@MakeDreamWebsite
@MakeDreamWebsite 4 месяца назад
Glad to know you can solve the issue. Thank you for letting me know.
@mich_adediran
@mich_adediran 8 месяцев назад
Damn! You should make a subscription plan (patron or a paid community) people would love to see more
@AadityaSharmas
@AadityaSharmas 2 года назад
Great 👍
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thank you! Cheers!
@vipinvestor9476
@vipinvestor9476 Год назад
Nice tutorial! How about if there is 3+ options ? Can the code be modified so more options can hide / displayed ?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks for the suggestion. Noted!
@andyburns_co
@andyburns_co 10 месяцев назад
When I set this up using Flexbox Containers rather than sections/columns in Elementor, switching from Monthly to Yearly makes the pricing tables go to full width. It is a direct clone of monthly. Tried reversing CSS classes on the price tables and it exhibits the same behavior. Have you made this approach work with Flexbox Containers? Seems like a conflict is occurring with the JS code.
@khanhduy81
@khanhduy81 4 месяца назад
same issue
@mehedihasanshibly7523
@mehedihasanshibly7523 9 месяцев назад
the toggle button circle getting out of the border. I'm using container. any way to fix it?
@bharatpansari
@bharatpansari Год назад
i have made a button displaying "enter your address" ,which when clicked opens a popup in which there is form field to enter the pincode using elementor .I also have a csv file in which first coloum is of pincodes and the second coloum is of city related to that pincodes.now i want to link the form and the button displaying "enter the address" in such a way that when any user enter his/her pincode in that form ,the popup closes and the button which initially shows "enter you address",shows the the city related to that pincode.how can I do that....can u please assist me
@emirkaankaraman9390
@emirkaankaraman9390 Год назад
Hi thank you so much for your sharing, but I have a problem, When I am in elemontor, the button works properly, however when ı saved and look the preview on my home page, it doesn't work, so What can I do? Could you help me?
@noctedshop
@noctedshop Год назад
I have the same problem the button not show up on desktop only mobile and tablet , did you find a solution ?
@yuliyarybalova1567
@yuliyarybalova1567 2 года назад
Hi, :) I created a switcher. however, I want it to be open on the Monthly tab from the default ( not yearly). Tried different things ( in Css and script), but nothing helped. Maybe you can advise what to modify?
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
For that toggle element give it the CSS class - monthly And before the last JavaScript code instead of .pricing-tables-1{ display: none; } Make it to .pricing-tables-2{ display: none; } Hope that will work.
@perpeleacalin4713
@perpeleacalin4713 2 года назад
@@MakeDreamWebsite hey, can you please give us the exact code. I have tried multiple times and is not working. Thanks!
@secretchimp69
@secretchimp69 2 года назад
@@MakeDreamWebsite If you simply make change the CSS class to "monthly", it does change the default starting point, but it loses the toggle functionality. There seems to be one more step missing in there
@jakebolling7550
@jakebolling7550 Год назад
On mine, adding the code hides the monthly price section and the toggle doesn’t switch
@nine8three
@nine8three 2 года назад
Awesome Tutorial. this works like a charm! One question that I have is... is there anyway of making "monthly" the active state? (Wouldn't it make sense to show the full monthly price first before toggling to the yearly discounted rate?)
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Yeah, It's also possible. But, I put the yearly discounted price as default, because for seller it's more profitable and also for customer it's cost efficient. So, we should encourage the customers to take the yearly plan as less click as possible (without toggling on any button).
@buzatualexandru
@buzatualexandru 2 года назад
@@MakeDreamWebsite So how can we make the monthly plan active, instead of the yearly one?
@CDGArtz
@CDGArtz Год назад
@@MakeDreamWebsite Can you show us how to do this?
@edilsonlsouza
@edilsonlsouza Год назад
@@MakeDreamWebsite Hello! Can you teach us how to start monthly?
@Xeeshan195
@Xeeshan195 10 месяцев назад
selector .elementor-divider:after{ left: var(--padding); ------> change it } selector.monthly .elementor-divider:after{ left: calc(100% - var(--size) - var(--padding)); ------> change it }
@stefanpfadt4353
@stefanpfadt4353 2 года назад
If you can make the cards flip at the same time you toggle from monthly to yearly - then you are a legend 😉
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Yes, that can also be done with some change of the code
@stefanpfadt4353
@stefanpfadt4353 2 года назад
@@MakeDreamWebsite Great! Any chance you know where I can find code or how to learn it?
@andyburns_co
@andyburns_co Год назад
Is the JS code snippet posted on github or elsewhere?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You can find the code snippet link in the description
@lester1750
@lester1750 Год назад
Very good tutorial. Thanks a lot. I have a question: I want to change the word ''monthly'' and ''yearly'' to others, and changing it in the CSS code doesn't work, how can I do it?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're welcome. No, you don't need to change the css code for that. You can just simply change the text of the text editor widget...
@lester1750
@lester1750 Год назад
@@MakeDreamWebsite Thank you very much for the quick answer. My question was whether I should change it, since performing the same steps as you, the toggle works on my page but the content does not change.
@MPowerMotor
@MPowerMotor Год назад
This is awesome, but how can I make monthly the default option displayed as opposed to yearly?
@lucazdesigns
@lucazdesigns Год назад
estou com a mesma duvida
@themotivationplaza
@themotivationplaza Год назад
How to do this using containers?
@pavelbelik6174
@pavelbelik6174 2 года назад
Hi, amazing video! Unfortunatelly it caused one problem for me. Now scrolling to element by clicking on a link does not work. I put a link on an arrow icon /#scroll and gave CSS ID scroll to the element where I want to scroll to by clicking on the icon. But it does not work. Probably a colision with the javascript you provided, because when I delete the HTML widget, scrolling works. Actually in Elementor editor it works always but on the live page clicking on the icon (link) does not trigger any action when your javascript is present. Do you have any idea how I could fix it? Thank you so much.
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Yeah.. that may be confilct on you page for some unexpected reason. Can you share your page link so I can find out the issue
@pavelbelik6174
@pavelbelik6174 2 года назад
@@MakeDreamWebsite Thank you so much for the fix! Now it works :). For others: just delete the "slim" in the javascript code, exactly here: jquery-3.6.0.slim.js --> jquery-3.6.0.js
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Yes, exactly
@SAPrivateSchools
@SAPrivateSchools Год назад
Excellent tutorial, thank you! I'm getting so close, but my "pricing-table-1" disappears after adding the html and only shows "pricing-table-2". The toggle then does nothing. What am I doing wrong?
@jakebolling7550
@jakebolling7550 Год назад
I’m having the same issue on mine
@martabluu
@martabluu 5 месяцев назад
Same here!
@xoxo-eh6yp
@xoxo-eh6yp 2 года назад
Nice bro🚀🚀🚀🚀
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
😇😇
@user-er3cn9on8t
@user-er3cn9on8t 4 месяца назад
but how to do without pro
@mdjakaria1540
@mdjakaria1540 2 года назад
Great
@MakeDreamWebsite
@MakeDreamWebsite 2 года назад
Thank you ❤️
Далее
Envy recreating this new trend ✨ #shorts
00:14
Просмотров 2,4 млн
Why is THIS the Perfect Homepage?
14:21
Просмотров 513 тыс.
Show More/Show Less... using Elementor (Free)
14:53
Просмотров 47 тыс.
I tried every website builder. This is the BEST
19:31
7 Wordpress Plugins I install on all websites (2024)
15:07