Building a Pricing Table from Scratch with Thrive Architect
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...
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!
1. Add the Pricing Table Element (0:38)
The first thing you need to do is 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:
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.
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:
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:
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!