Let’s Build Engaging Podcast Subscription Buttons with Thrive Architect
When you need to place Call-to-Action (CTA) buttons on your website, should you limit yourself to the standard designs you’re used to… or can you achieve something far more engaging?
Well, if you build your posts and pages using Thrive Architect, you can leverage the Content Box element to fancy up your button designs however you want.
“Fancy up how?” you ask.
Well, how about a Content Box acting as a button where the entire area is clickable, uses engaging hover effects and offers unlimited ways to incorporate, modify and resize icons or images within them?
And should you need to use those same buttons over and over again on multiple posts and pages, you can templatize them as “Symbols” for easy drag & drop insertion and one-click modification.
Interested to learn how to take advantage of this fast-action web design power for your WordPress website?
Watch Shane’s video tutorial above and read our step-by-step instructions below to learn how you can build sexy looking design assets — like podcast subscription buttons — for your website using nothing but Thrive Architect in just a few short minutes.
Shane's Let's Build Video Series
This “Let’s Build Podcast Subscription Buttons” post is the second web design tutorial in Shane’s new “Let’s Build” video series.
You can check out his first video tutorial on how to make eBook cover designs using Thrive Architect by clicking here.
In this post’s tutorial video, Shane shows you how to create the following stylized podcast subscription buttons from scratch using Thrive Architect:
The benefit of creating such a reusable design for use cases like your podcast is huge — Thrive Architect allows you to save the design as a Symbol making it easy to add, remove or modify buttons or their links across all instances on your website in a single update.
What are Symbols in Thrive Architect?
Symbols are a special class of content templates in Thrive Architect that allow for multiple, synchronized instances of a specific design.
What the heck does that mean?
You design a thing. You place that thing on many pages of your website. When you update it in one place, it updates everywhere.
In Thrive Architect, you can turn anything into a Symbol. Any individual element or any container element with other elements inside it can become a symbol. All you have to do is click the little save icon on the frame, to get started.
To see examples of how you can use our different template types, check out the following posts:
- Symbol Templates: Which of These 15 Thrive Symbols Examples (+ Bonus Templates) Is Right for Your Online Business?
- Content Box Templates: 14 Content Box Templates to Help Build & Sell Your Online
The video tutorial showcased in this post is also highlights how you can come up with creative solutions in Thrive Architect for whatever you need to create on your website. With that said, here’s Shane’s step-by-step recipe for creating the podcast buttons Shane shows you how to build in his video above.
Let’s Build Podcast Subscription Buttons with Thrive Architect!
Step 1: Setup Your Parent Content Box Container
First, you’ll need a parent Content Box that you can drop a Column element set to 2-columns wide into. Set the Margins and Paddings of both your parent Content Box and Column element to 0 pixels on all sides.
Set the Gutter Width of your Column element to 20 pixels and center-align the Vertical Position feature:
With that basic setup step done, you can now move on to building your first podcast button.
Step 2: Create an Icon Podcast Button
In the tutorial video, you’ll start by creating your “Apple Podcasts” Content Box button. Although the Apple Podcasts icon badge looks like an image, it’s actually a Thrive Architect Icon element that’s been stylized. Here’s how to recreate that effect for yourself:
Drop a new Content Box element in your left-hand Column. Next, set the Padding of your new Content Box to 10 pixels on all sides. Set the Bottom Margin of the new Content Box to 20 pixels (to match the Gutter Width of your Column element).
Right-align the Content Box so it positions itself alongside the Column gutter.
After that, set the Background Color of your new Content Box to white (#ffffff) and its Border Color to a 1 pixel wide light grey (#e8e8e8). Create a Hover effect for the Content Box button by changing the hover state Background Color to a light grey (#e8e8e8):
Now it’s time to start styling your new Content Box so it takes the form of an Apple Podcasts subscription button.
To do this, add a Plain Text element inside the Content Box. Note that you should use the decorative Plain Text element instead of the Paragraph or Heading elements anytime you need text that’s not going to act as actual “blog content”.
Type the necessary text into the Plain Text element like “Subscribe on Apple Podcasts”.
You can then create a visual hierarchy between the text lines by changing the top “Subscribe on” text to a Font Size of 14 pixels, the Line Height to 1.50 EM, and the Font Color to a very light grey (#9d9d9d) and then changing the “Apple Podcasts” text to a Font Size of 20 pixels and a darker grey Font Color (#767676).
Next you can add an Icon element above your Plain Text within the Content Box button.
To achieve the 50 pixel wide by 50 pixels tall logo badge appearance shown in the tutorial images, your square Icon Size + Padding dimensions need to add up to 50 in both the horizontal and vertical directions. This is why Shane uses the Icon Size of 34 pixels and an omnidirectional Padding of 8 pixels in the video (8 px + 34 px + 8 px = 50 px).
Use the following parameters to style your Apple Podcasts Icon element:
- Icon Name: podcast-regular
- Icon Color: white (#ffffff)
- Icon Size: 34 pixels
- Padding: 8 pixels (all sides)
- Margins: 10 pixels (right side only to provide space between the icon badge and Plain Text element)
- Alignment: Left-align
- Background Color: Linear gradient with a 0 degree angle using (#8635c0) at the bottom and (#ec58f8) at the top
- Corner Rounding: 8 pixels on all corners
Then, under the “Advanced” sub-section of the “Layout & Positioning” tab, click on the checkmark to activate the Float feature. Now your Plain Text element will float next to your Icon element.
What does the Float feature do in Thrive Architect?
The Float feature in Thrive Architect represents the same float property used in HTML & CSS.
Enabling the Float feature on a given element in Thrive Architect specifies that it should be placed along the left or right side of its container (depending on which alignment you select for it) and allow its underlying element(s) to wrap alongside it.
To see how this works in practice, watch Shane's tutorial video starting at the 5:20 mark or look at the screenshot displayed directly below this highlight box.
After completing all these steps, your Apple Podcasts subscribe button should look like this:
The last step to turning this particular Content Box design into an actual button is to set a hyperlink action for it.
To do that, highlight the Content Box, open its corresponding “Animation & Action” tab in the sidebar, click the hyperlink button, and insert the link to your podcast’s homepage on Apple Podcasts.
It’s also a good idea to tick the “Open in new tab” option so visitors don’t automatically bounce from your website when they click to try and subscribe to your podcast.
Step 3: Create a Second Icon Podcast Button
In the video tutorial example above, the second Soundcloud podcast button is yet another icon based design.
This means that creating it based on a clone of your first button is super easy.
Simply clone your first button, replace the Apple Podcasts icon with the Soundcloud icon and then modify the Background gradient color to match Soundcloud’s branding.
Here are the few icon details you need to modify if you built your first button correctly:
- Icon Name: soundcloud-brands
- Background Color: Linear gradient with a 0 degree angle using (#fb371d) at the bottom and (#fd8525) at the top
To finish this second button off, just change the Plain Text element copy to “Follow us on Soundcloud” and modify the hyperlink. Two podcast buttons down and two to go!
Step 4: Create an Image Podcast Button
When it comes to the Castbox podcast button design, you won’t be able to use the icon strategy shown in Steps 2 and 3 to replicate the hexagonal logo design Castbox uses (the limitations of CSS prevent this).
However, the work around for this particular problem is quite simple — just use a copy of Castbox’s logo in your Content Box button design instead.
To get started, first clone your Soundcloud Content Box button and drop it in the right-hand side of your parent Columns element.
Next, delete the SoundCloud icon logo you created and insert an Image element above the Plain Text element.
Now upload the Castbox logo to your site via the Image element you just placed on the page.
No matter what the pixel size of the logo file you just uploaded is (make sure it’s square though: e.g. 100 pixels wide by 100 pixels tall), you can reduce it to your desired size within Thrive Architect under the Image element’s “Main Options” tab.
We’re using 50 pixels wide by 50 pixels tall for the logo badges in this tutorial so that’s what you’ll want to reduce your Castbox logo image to:
Next, set all the Margin and Padding options to 0 pixels except for the Right Margin — set it to 10 pixels and turn the Float feature on within the Advanced options.
Once again, modify the Plain Text element so that it says “Listen on Castbox” and update the hyperlink. Podcast Button #3 complete!
Step 5: Create a Hybrid-Image Podcast Button
The final podcast button Shane shows you how to create in the video tutorial is for Stitcher. Because the Stitcher logo is multi-colored, it also can’t be recreated using icons.
The best way to mimic the logo badge for use in your podcast subscription button is by incorporating the Stitcher logo image within a stylized Content Box element. Here’s how to do that:
Start by cloning your just completed Castbox subscription button and deleting the clone’s Castbox image logo. In its place, insert a new Image element and upload the Stitcher multi-color logo image through it:
Set the Stitcher logo Image Size to 34 pixels, all Margin sides to 0 pixels and all Padding sides to 0 pixels.
Now insert a new Content Box element above or below the Stitcher Image element, set its Minimum Width and Minimum Height settings to 50 pixels by 50 pixels (to achieve the right logo badge sizing like the other logo badges), and center the Vertical Alignment.
Once that’s done, you can drag & drop the Stitcher logo into the 50 pixel by 50 pixel Content Box and center-align it horizontally. Make sure this new Content Box’s Padding sides are all 0 and only the Right Margin is set to 10 pixels (for spacing between the logo badge and Plain Text element).
After that, set the Background Color of the logo’s Content Box to black (#000000), round all the Corners to 8 pixels and activate its Float feature to get the Plain Text element to shift next to the logo badge.
Modify the Plain Text element text to say “Subscribe on Stitcher” and modify its hyperlink to open the correct web address.
After all that, you should end up with a multi-button podcast subscription design that looks like this (each button should also change its Background Color from white to light grey on Hover):
Turn Your New Podcast Button Set Into a Symbol
Now that you’ve got this amazing design asset built for your website, you can take one additional step to give it evergreen staying power.
That extra step is simple too — just save the parent Content Box element as a Symbol.
You can do that by highlighting your parent Content Box element in your Thrive Architect breadcrumbs and clicking on the green “Templates & Symbols” floppy disk icon that appears in the element’s upper right-hand corner of your editor window:
In the “Save your element for later use” lightbox that appears, select the Symbol tab, enter a name to save your new podcast button symbol under, choose or create a category for it, and then hit save:
Now you can insert this new symbol on any post or page on your website. Whenever you make a modification to it, all instances of that symbol will be instantly be updated across your site!
Now It’s Your Turn
After watching Shane’s video tutorial and reading this post on how to make stylized button sets for your website, I hope you can see that creative solutions to achieve any design you need are possible with Thrive Architect.
Try your hand at creating these awesome button designs and you’ll soon understand how fast and powerful this approach is for overcoming different web design challenges you’re currently having across your site.
Have any web design examples or challenges of your own you’d like Shane to create a “Let’s Build” tutorial video around? Let us know in the comments below and Shane just might show you how to build it using nothing but Thrive Architect!
Note: thanks to Matt for creating the written portion and tutorial for this post.