How to Create a Slider in Thrive Architect Using Smart Slider 3

How to Create a Slider in Thrive Architect Using Smart Slider 3

Have you ever wanted to add a slider to a page you built with Thrive Architect? My clients request this feature all the time. Unfortunately, Thrive Themes is adamantly against the use of sliders, so this feature is not present in any of their plugins. While I may not personally use sliders that often, there may come a time when knowing how can be useful.

I recommend using Smart Slider 3 to create sliders. This plugin has several beautiful and free templates for you to customize, and they integrate seamlessly with Thrive Architect.

How to Add a Slider into Thrive Architect

Once you download Smart Slider 3, create a new slide. I recommend one of their quick templates. Once you have your template created, locate the shortcode they provide.

How to add a slider into thrive architect

Next, open your page you built with Thrive Architect. Where you want your slider to go, paste the shortcode into a WordPress element.

adding smart slider 3 shortcode to thrive architect

When you enter the shortcode and press save, the page will look like it isn't working. Simply save your Thrive Architect page and refresh. Previewing the page, you'll see that everything is working great! You now have a slider on your page.

How to add a Thrive Architect button into a Smart Slider

This is where things get a little hacked together. I highly recommend you watch my video above, but I will give you the gist of everything here.

To get a button into your Smart Slider, first you'll need to create the button on the page. Style it exactly how you want it to appear within the Smart Slider. Save and preview the page.

Inspect the button using your developer tools and navigate to the first div of the button. In my example tutorial, this was "div class="thrv_wrapper .... ". Right click, copy element.

Now paste everything you copied into a text layer in your Smart Slider. Save the slider, and now you have your button in the Smart Slider! However, we're not done.

Next, you'll need to hide the button we created in Thrive Architect. You can't delete this button because we're technically calling upon this button's attributes to make our second version of the button work.

In Thrive Architect, navigate to the gear on teh right hand side. Go to advanced settings and view the pag source HTML. Find the button and edit the HTML to add some styling information. You'll want to add style="display:none;" within the element. This will hide the button, while still give the Thrive button in your slider everything it needs to function. It's a little hacky, but it gets the job done.

I'm happy to answer any questions you have about adding sliders into Thrive Architect using Smart Slider! Feel free to leave a comment below. And as always, if you need a little more hands-on help, feel free to reach out to me about my Thrive Architect Help program.

  • Hey Doug, this was super useful! I had no idea sliders on Thrive was a thing and your site was the first and only resource i needed. One question though, if only having Smart Slider (the Free version) how would I enable screen size to automatically adapt to mobile and tablet devices?
    Thanks!

    • That’s super easy. All you have to do is put the slider short code within a WordPress element, and have that WordPress element be within a background section that is set to full-width. You could probably do the same with a content box.

      In the demo from this post, that slider was 100% mobile responsive and adapted to any screen size.

  • Close Menu
    >