Home » Weebly Tutorials » How to create Pricing Tables in Weebly

 

Last week, we completed a new free Weebly widget but I decided not to release it yet. After releasing 4 widgets and getting a lot of feedback and questions, I noticed that not all those who have downloaded those free widgets can use them effectively.

So, along with releasing new widgets, I’ll spend more time guiding you how to take the most out of our free Weebly widgets.

Today, I pick up Colored Columns widget which is getting the highest conversion rate to date (37%), to give you some idea of how to make a table in Weebly.

If you haven’t downloaded the Colored Columns widget yet, here is the link for you: Free Colored Columns widget.

Note that I only used our Colored Columns widget and basic Weebly tools to create the pricing tables below.

FIRST EXAMPLE

Here is how it is shown in published site:

How to create Pricing Tables in Weebly 1

Here is the screenshot to show you which elements and how I organized them in editor:

How to create Pricing Tables in Weebly 2

SECOND EXAMPLE

Here is how it is shown in published site:

How to create Pricing Tables in Weebly 3

Here is the screenshot to show you which elements and how I organized them in editor:

How to create Pricing Tables in Weebly 4

THIRD EXAMPLE

Here is how it is shown in published site:

How to create Pricing Tables in Weebly 5

Here is the screenshot to show you which elements and how I organized them in editor:

How to create Pricing Tables in Weebly 6

FOURTH EXAMPLE

Here is how it is shown in published site:

How to create Pricing Tables in Weebly 7

Here is the screenshot to show you which elements and how I organized them in editor:

How to create Pricing Tables in Weebly 8

So easy to create, right?

Here are some tips you should never ignore in order to get the best result:

1. Organize the structure and elements of the pricing table before you add the HTML code of the Colored Columns widget. The hardest part is to make the pricing table look clear and well-organized.

2. Use Spacer element to separate each part to give more room in each column. It’ll make your pricing table look clearer.

Have any questions related to creating pricing tables using our Colored Columns widget? Just leave your questions or suggestions in the comments section below then I’ll be happy to help you out.

Share This