How to Design Captivating Pricing Columns for Your Funnel

Modified on Mon, 9 Sep at 7:22 PM

Inserting a New Pricing Section

Start by incorporating a full-width section into your funnel page. This will act as the main container for your pricing columns. Tip: Build one column first and then duplicate it to create uniform columns, reducing the need for repetitive styling.

Add a Full-Width Section



Customizing the Appearance of Your Columns

Choose your column and apply a white background to ensure a clear contrast. To give it a sleek look, add a border with rounded corners. You can adjust the thickness and color of the border to fit your design preferences.

Set Background and Border



Inserting Pricing Details

  • Plan Name: Add a headline element to name your plan (e.g., "Basic").

  • Price: Use a larger font headline for the price to make it prominent (e.g., "$99").

  • Payment Frequency: Include a subheading to specify the payment interval (e.g., "/ annually").

Add Plan Name, Price, and Payment Frequency


Highlighting Features

Add a bulleted list to describe the key features included in the plan. Align the list centrally for a neat appearance.

Create a Feature List


Adding a Call-to-Action Button

Place a button element with text like "Join Now" to prompt visitors to take action.


Finishing Touches for Your Columns

Add padding to the top and bottom of each column to create space. Ensure consistent spacing between elements for a clean, organized layout. Duplicate the styled column twice to create a total of three matching columns.

Final Layout of Columns


Personalizing Each Column

Adjust the plan names, prices, and feature lists for each column to reflect different options. Modify the spacing as necessary to keep everything aligned evenly across the columns.


Enhancing the Design

For a more dynamic look, you can add subtle drop shadows to each column. Ensure the buttons are programmed to trigger the right actions, such as opening a registration pop-up.


Enhance the Columns with Shadows



Troubleshooting and Optimization

  • Alignment Issues: If the content within your columns doesn’t align properly due to varying text lengths, adjust the alignment settings or use padding to ensure consistency.

  • Consistency in Styling: To avoid discrepancies, apply all style customizations to one column before duplicating it. This guarantees that the design remains consistent across all columns.


Frequently Asked Questions

  • Can I customize the color scheme for my pricing columns? Absolutely! You can change the background, borders, and text colors to match your brand’s aesthetic.

  • How do I ensure my pricing columns are mobile-friendly? The funnel builder automatically optimizes the layout for mobile devices. However, always preview your page on multiple screen sizes to ensure readability and make adjustments as needed.

  • What if I need more than three pricing columns? You can easily add additional columns by duplicating the existing ones and modifying their content. Just be mindful of the section width to ensure they all fit comfortably.






Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article