Pricing columns are a clear, visually engaging way to present your plans side by side and guide visitors toward choosing the option that fits them best. This guide walks you through building and styling pricing columns in your funnel page.
Adding a New Section for Pricing Columns #
Begin by adding a full-width section to your funnel page. This will serve as the container for your pricing columns.
Tip: Start with a single column and clone it to create identical columns, saving time on styling each one individually.
Styling Your Columns #
- Select your column and set the background color to white for contrast.
- Add a border with a slight radius to create rounded corners, enhancing the visual appeal. Adjust the border color and width as desired.
Adding Pricing Information #
- Plan Name: Insert a headline element for the name of the plan (e.g., “Standard”).
- Price: Add another headline for the price, making it larger to stand out (e.g., “$97”).
- Payment Frequency: Use a subheading to specify the billing period (e.g., “/ monthly”).
Listing Included Features #
Insert a bulleted list to detail what’s included in the plan. Center the list for a balanced look.
Call-to-Action Button #
Add a button element with text like “Get Started” to encourage users to take action.
Finalizing Your Columns #
- Apply top and bottom padding to each column for spacing.
- Adjust spacing between elements within the columns for a clean layout.
- Clone the styled column twice to create three identical columns.
Customizing Each Column #
- Tailor the plan names, prices, and included features for each column to reflect different offerings.
- Adjust spacing as needed to align elements uniformly across columns.
Enhancing Column Design #
- Consider adding a drop shadow to each column for a subtle depth effect.
- Ensure all buttons are set to trigger the appropriate action, such as opening a signup pop-up.
Frequently Asked Questions #
How do I create identical pricing columns quickly? #
Style a single column first—background, border, padding, and elements—then clone it twice so all three columns share the same design before customizing the content of each.
Can I customize the color scheme of my pricing columns? #
Yes. You can adjust the background, border, and text colors to match your brand’s color scheme.
What should each pricing column include? #
Typically a plan name headline, a larger price headline, a payment frequency subheading, a centered bulleted feature list, and a call-to-action button like “Get Started.”
How do I make my pricing columns mobile-responsive? #
The funnel builder automatically adjusts the layout for mobile devices, but you should preview your page on different screen sizes to confirm readability and adjust as needed.
My column elements look misaligned. How do I fix that? #
Varying content lengths can cause misalignment. Adjust the content alignment settings or use padding to achieve uniformity, and style one column before cloning to keep things consistent.
Can I add more than three pricing columns? #
Yes. Clone existing columns and adjust the content, keeping the section width in mind so all columns fit comfortably on the page.
