As you know, here at Thrive Themes, we like to make videos showing you how to build assets like landing pages and pricing tables “from scratch” with Thrive Architect.
We previously announced that we would do a "Pricing Table from Scratch" video for you, and asked you to vote on which of 3 pricing tables you liked best. (See the examples, here)
Aaaand the winner is...
More...
The Pricing Table WINNER
Ta-daaaaaa!
Below, I'll highlight each important step that is required for this build with the corresponding timestamps in the video.
To get the entire “Pricing Table from Scratch” experience, watch the video at the top of the page.
Let's crack on!
The Steps
1. Add the Pricing Table Element (0:38)
The first thing you need to do is add the Pricing Table element on the page:
Add the "Pricing Table" element on the page
2. Remove Two of the Boxes (0:50)
After you have added the Pricing Table element on the page, you'll see that it has 3 default boxes:
The default Pricing Table template
Now, you might want to start modifying the default pricing table element straight away, since it has 3 boxes, like the custom design we're trying to build has. And there's nothing wrong with that.
But, to save you some time, I have a better idea...
Rather than modifying all 3 of the boxes, delete the two outside boxes, work on the middle box, and in the end you'll duplicate it twice and finalize the build with some minor tweaks.
Delete the two outside boxes from the sidebar
3. Place Two Content Boxes Inside the Big One (1:47)
If you have a look at the original pricing table, you'll see that it has two main sections:
The two main sections of this Content Box
To create these two sections, place two content boxes inside the big content box.
Then, remove the unnecessary content and place it inside the two boxes.
To select multiple elements, hold Control (Command for Macs) while clicking on them. Then, drag all the elements as a group the boxes:
Drag all the elements in the two content boxes
4. Change the Color, Font Sizes and Add a Fancy Divider (4:18)
Moving forward, we'll start customizing the top Content Box:
- Apply the solid blue color (#3741de color code)
- Apply the gradient (#4a02c8 on the left side and #7204ba on the right side)
- Change the font colors to white (Typography)
- Duplicate the "Simple, fast and effective [...]" text and place it above the Styled List
- Adjust font sizes
- Apply Fancy Divider (Decoration > Fancy Divider > Waves)
5. Adjust the Text Above the Styled List (8:21)
We'll now customize the "Simple, fast and effective [...]" text that we placed above the Styled List.
To make it fit the original, make sure you:
- Have enough words so that the text is displayed on two rows,
- Make the text bold
- Properly place the text above the Styled List.
6. Customize the Styled List (9:41)
The Styled List needs some changes, too:
- Replace the "check" icon with a "circle" icon
- The icon color needs to be changed to the color from the top Content Box (#3741de)
- Change the text color to a darker shade (Typography option)
7. Modify the Button (10:33)
To style the button correctly, here's what you need to focus on:
- Change the style of the button to "Rounded"
- Adjust the Borders and Corners
- Change the background color (#3741de)
- Replace the text of the button with "PURCHASE"
8. Make Finishing Touches and Duplicate the Box (12:04)
It's time to make a few finishing touches to your box such as rounding its corners. Once that’s complete, you can go ahead and duplicate the box twice, so you’ll end up with 3 boxes.
9. Finish the Pricing Table (12:53)
Now that you have 3 boxes, you can see that they're not quite identical. That means you'll have to make a few more changes:
- Modify the "Max Width" of the Pricing Table (Layout and Position)
- Adjust the positioning of the lateral boxes (Layout and Position > Advanced > Edit Position)
- Customize the buttons found on the lateral boxes - Change Background Color and Font Color
Over to You
Did you like this pricing table from scratch video? Do you want us to make more of them for you?
Or do you have another layout that you would like to see us build with Thrive Architect instead?
Leave a comment below and let's chat!
Great stuff: My pricing has so many options, based on quantity and add-on that a table doesn’t express well. A slider and checkboxes are needed.
Yes, in case you have many pricing options, you could probably use a customized Table, built right in Thrive Architect.
As far as sliders are concerned, we don’t really recommend them because they have too many downsides: https://www.youtube.com/watch?v=5sEwPgrYbBU
Hi David Gavrilut,
I love the demo, thank you. The ability to style pricing tables in TA is amazing.
But I am in the same position as David Holland. Our company’s pricing involves calculations and variations. Do you know if this is something we can anticipate in the near future?
Also, do you have any suggestions for some third-party options out there? I have used a couple of paid plugins and none of them seems to be sufficient.
Thank you so much.
Hey David
I don’t think by sliders he meant that type of slider.
I think he meant more like a sliding scale chooser for pricing.
eg. Per user or per contact pricing, setting the amount of contacts or users you have
I see. I misunderstood then. Do you guys happen to have a URL example of such a pricing table that you can send me? Just to see what we’re dealing with exactly.
great video…..learned a lot, not just about pricing sheets but in general.
I use a tool called “instant eyedropper” to get the color codes.
Thanks a lot, Richard! Glad you enjoyed it 🙂
Yep, only after the video I remembered I could have used such a tool, like Instant Eyedropper or ColorZilla 😀
Very helpful and how you make it look so easy. On a similar theme I have been struggling getting ‘buy now’ and ‘menu buttons’ looking inviting perhaps a video teaching how to make glorious designed buttons.
Thanks, David! Yes, well, it is very easy to customize things in Thrive Architect, simply because everything happens instantaneously right in front of you 🙂
Brilliant tutorial, David. Thank you. Please confirm, with the fancy border we can only have a vertical gradient? I think you said that a horizontal one may mess with the other css. Could this be overcome by the use of a background image?
Glad you enjoyed it, Kevin 🙂
So, on a closer look, in this example, the gradient could have been placed anywhere, not only at the top.
It might have been a problem if we would’ve had a different color below the top content box. However, since the bottom content box was white, the gradient wouldn’t have messed anything up.
Excellent – Thanks 🙂
No problem at all 🙂
Thanks for the video David,
If possible, can you add the customization needed on tablets and mobiles as well? It looks just fine on PCs and laptops the way you did it, but the negative margins applied (and maybe font-sizes too) will probably need to be changed on smaller devices, along with some bottom-margins (so the boxes are not too close to each other when they are all displayed in one column) and probably an adjustment to the fancy divider decoration as well.
But more importantly, it would show that when we are working with TA (or any content builder for that matter) we should not only think about making it look good on Desktop but also consider making changes on smaller devices (if needed)… or at least check if we are happy with the way it looks on them as it is.
Keep rocking!
Thanks for the comment, Dwight 🙂
I agree, in the next video I’ll make sure to check how to content looks on the mobile interface, as well.
In this case, the content wasn’t affected on the mobile interface, since the values applied weren’t too high. Also, the pricing table will have a different positioning on a mobile device, each box being placed on top of each other.
Great video.
I would have enjoyed if you had many the exact same fancy divider? It looks like two are used on the original example?
Thank you so mcj.
I’m glad you enjoyed the video, Charlotte!
I’m not sure I fully understand what you mean by the “many the exact same fancy divider” part. Could you please detail that? 🙂
Fantastic explanation. Thanks
Thanks a lot, John 🙂
Good as usual 🙂
Thank you, Iqbal 🙂
I am having a hard time getting it to show monthly/yearly pricing. It would be nice for an add-on video that shows us how to do that more efficiently.
Hello, Hilary 🙂
We have an in-depth article about the Pricing Table: https://thrivethemes.com/tkb_item/how-to-use-the-pricing-table-element/
You can find detailed information about the monthly/yearly options starting from 3:50.
Thank you for this video! There were lots of little tips and tricks I learned … like CTRL-click to group things you want to move all together, and unlocking 1 element in a group to edit the others. It’s so helpful to watch you build things in action!
That’s awesome! Glad to hear that 🙂
Nice! Video made with Camtasia?
Yes, the screen recording was made with Camtasia, but the overall video was edited with Adobe Premiere 🙂
I’d love to see a video on the psychology that drives conversion here. hat is, what design elements do and do not work. I like that Thrive has a clear position on sliders. Do you have any advice on what makes a good pricing table, David?
Hi, Mike 🙂
My colleague Matt has written an amazing in-depth blog post about this exact subject, how to build nice looking pricing tables that WIN you more customers.
I’m sure you’d love it, have a look: https://thrivethemes.com/conversion-focused-pricing-tables/
thank you sir this is amazing tool all over it thanks again fort being helping
Glad I could help, Oscar 🙂