Back to Browse

Pricing Table with Monthly/Yearly Toggle - Elementor Flexbox Containers

5.6K views
Nov 19, 2024
7:54

⭐ Giveaway: Our 100% FREE plugin makes any site 3X faster - https://bit.ly/airlift-performance-plugin. In this video, I'll guide you through creating a professional pricing table with a monthly/yearly toggle feature. You'll learn how to create Monthly and Yearly text labels, design a toggle button with custom CSS, add a 20% discount badge using advanced styling, and implement responsive design for different device views. The tutorial covers step-by-step instructions for setting up the toggle mechanism, adjusting pricing for yearly plans, and adding custom JavaScript to switch between monthly and yearly price lists. I'll also show you how to apply CSS classes, use HTML widgets, and customize the pricing page to improve conversions. Code: https://docs.google.com/document/d/1JANX57uVh6kvn6sWoT_fqlw8ritJmEppmyzbYcF0eOk/edit?usp=sharing 00:00 How to create a pricing table? 00:26 Design the toggle button 03:12 Add this CSS code (IMPORTANT!) 04:26 Design the pricing table 05:20 Add JS code (don't miss this!) 05:46 Use the pricing table on any website #wordpress #elementor #webdesign

Download

0 formats

No download links available.

Pricing Table with Monthly/Yearly Toggle - Elementor Flexbox Containers | NatokHD