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?
More...
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.
Getting Started
In this post’s tutorial video, Shane shows you how to create the following stylized podcast subscription buttons from scratch using Thrive Architect:
The final product — a set of podcast subscription buttons you can use multiple times across your website.
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:
Step 1 is to create a parent Content Box element that has 2 columns inside it.
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):
The early setup stages of your first Content Box podcast subscription button.
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”.
When adding decorative text to you Podcast Buttons, make sure to use the Plain Text element instead of the Paragraph or Heading element.
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:
Make sure to click the Float feature checkmark to get your icon badge to float next to your Plain Text element.
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.
Don't forget to set a hyperlink action for your finished Content Box button under the "Animation & Action" tab.
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
Quickly create your second Icon podcast button by changing the icon, background color and hyperlink.
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:
After you clone your Soundcloud button and move it into the right-hand column, replace the icon badge with an image of the Castbox logo. Set the image dimensions to 50 pixels wide (and 50 pixels tall) under the "Main Options" tab in the sidebar.
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:
Add the Stitcher logo image and set the image size to 34 pixels under the "Main Options" tab in the sidebar.
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).
Set the Stitcher logo Content Box to 50 px in Minimum Width and 50 px in Minimum Height under the "Main Options" tab in the sidebar.
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):
Your final podcast subscription button set should look like this.
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:
Highlight your parent Content Box and click the floppy disk icon that appears in the upper right-hand corner of the element to save it as either a Template or Symbol.
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:
Select the Symbol tab, give your new Symbol a name, add it to a category and click the save button to turn your new podcast subscription button set into a reusable Symbol.
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.
Fantastic video Shane – clear and creative
Thank you, Nalin!
Offtopic, but I love the Scroll Behaviour section 🙂
Video on that coming soon. 😉
Thanks for this Shane.
Will this work for woocommerce product buttons?
Hi Joshua,
I don’t think you can style WooCommerce buttons like this, no. Those buttons are kind of “baked in” and we’d have to rip the code apart a bit to make them this customizable.
Great content, delivering great value and education, as with all the things your company does, Shane. Thank you.
Quick question:
Would it be possible for you to save the designs you did as templates inside Thrive Architect so that we can access them and work things around from that point moving forward?
Thank you.
PS. Just updated to WP 5.0 Gutemberg last night. My initial feeling is an “I hate This Thing”. On the other hand, I know we must evolve and adapt, although in the meantime I´ll be using the classic editor.
Any tutorials or articles coming on that subject?
Thanks.
Hello Luis,
Thank you for your comment!
I’m putting together a bonus landing page that contains everything we’re building in these “let’s build” videos. We’ll release it with the next video, most likely. From there, you can save whichever elements you want as templates or Symbols for your own site.
Regarding Gutenberg: we’ve already made sure that Thrive Architect is fully compatible. We are also working on some updates that will let you “skip” Gutenberg entirely and use only TAR, if that’s what you prefer. You’re not the only one who doesn’t like the new editor, but I can also understand that this was a necessary change for WordPress to make.
Thank you so much, Shane. Take care.
I enjoy this kind of training. These videos demonstrate how amazingly flexible Thrive Architect is. Creativity and a willingness to play with TA settings can produce almost any result you desire.
Thank you for your comment, Mark! Indeed, we try to make this kind of creative work optional, but possible in Thrive Architect.
Enjoyed this tutorial thank you. I’d love to watch a tutorial on how to create a website using Thrive without having to install a theme. I often just enjoy creating my own page designs from scratch for clients. I suppose the theme builder is the future.
Hi Kenny,
We have something along those lines in this case study.
Thx Shane … a little off topic but do you have an eta for your new theme builder ? … really could use it now 😉
Sorry, we don’t have an ETA yet.
Thank your very much.
I always find new tips and how-to in this kind of videos. They are very interesting, please go on sharing them.
Thank you, Chandra! We’re working on several more videos like this, to be released soon. 🙂
Great tutorial & great ideas, especially for how to implement “symbols” feature!
I’ve been wondering how to create a “button-looking” element on my main menu…
I want to highlight a lead magnet in my main menu & give it a background color highlight and rounded corners.
But since it’s in the main WP navigation, I don’t even know if this is possible! :-0
Any ideas would be great!
BTW, I’m very “CSS-challenged!” 😉
Thanks!
Hi Karen,
Thanks for your comment! Yes, this is possible. To do so, you can “unlink” the menu item you want to highlight and then apply background, borders and corners until it looks like a button.
Hi Shane – great methods of doing things as usual. What I would like to know is if there is any benefit of using svg images as backgrounds and is it easy to do in Architect.
Hi Craig,
As backgrounds? I don’t know. SVGs are great for simple vector graphics, since they are a much smaller file size than an equivalent PNG or JPEG image. The downside is that they aren’t as widely usable and editable as images.
Very helpful. Thank you! May I ask where you find the images for the podcast logos.
Hello Molly,
Thanks for your comment! For this kind of image, I simply search for “[brand name] logo” in Google Images. Normally, I would never recommend getting images from a Google search, but logos are an exception. Using a logo like this on a button isn’t a copyright concern, since you’re basically advertising someone’s business and logos are meant to be used to represent the respective company.
I always enjoy your videos Shane – TY. I dealt with a similar challenge recently and was delighted to see that I have done it right! Please keep ’em coming 🙂
Thank you for your comment, Kevin! Glad you enjoyed the video.
Just when I thought I had you figured out…I was totally wrong again hahaha…You guys keep my mind floating with new possibility’s! Thanks Again Shane:)
Thank you, Chase! Glad to know you learnt something new. 🙂
Also, this is a little bit off topic too. But I was wondering will the feature for timer pop up buttons be available in the future?
Can you elaborate what you mean by this feature?
Thanks for sharing the different ways to improve your blog with the use of different styles of the Podcast button design.
Glad you liked this tutorial, Elizabeth!
This is nice tutorial and is one more cool design trick using Thrive Architect. Thanks.
Meanwhile I watch every video you put out and I know that sometime soon there will be an update about the new theme builder. The anticipation for that video is killing me. I know you’re working hard on it and I am practicing patience. I know it’s going to be awesome! Go Team Thrive Themes!
Thank you for your vote of confidence, Scott. I’m sorry about the lack of news about the Theme Builder. It’s an ambitious project and we want to make sure it’s really solid before we release anything.
Shane, could you at least give an idea of the month it might come out in? Have been waiting to redesign couple of my sites and several client sites…
Shane, this was JUST EXCELLENT, really helped me understand better what you offer before I purchase.
YES I do believe you offer the best. The new editor offered at WordPress already ruined a page and made me so upset I was about to leave them forever. (this was on a free site at the .com platform.) I also have a site at the .org platform and Intend to use one of your themes and Architect to finally (in THIS lifetime) have what I really want.
Have a good Yule and 2019. StepheN
Thank you for your comment, Stephen! I’m happy to know that this tutorial helped you get a better picture of the product. 🙂
These tutorials are really thorough and very useful. Thanks.
Thank you, Lloyd. I’m happy to know that you like this kind of tutorial.
This is great. Thank you!
Hey Shane,
How do you input a Facebook Fanpage “Like” Button in the Thrive Architect where the user would click the button and it would automatically have them “like” your fanpage?