Sometimes, you come across a landing page with a design you really like and you think: "I want that on my site!"
In today's video, you'll discover how you can re-create a landing page, even down to small details, using Thrive Landing Pages.
More...
Previously, we've had a look at how you can create an upside down homepage, a contest opt-in page and a lead generation landing page. We hope that you can learn some new tricks and efficient ways to use Thrive Landing Pages from watching these tutorials.
Here are some of the main takeaways from today's tutorial:
Use Page-Level Font Settings
Sure, you can click on any text element on your page and change its color, load a custom font, adjust the font size and so on. But if you have to do this for many text elements, it becomes quite tedious.
Apart from that, it's good practice NOT to mix and match too many different font styles, sizes and colors, since that just makes a page look messy.
In Thrive Landing Pages, use the page-level font settings to determine what you want your headings and paragraphs to look like and it will instantly apply to all of the text on your page. You can find the option by clicking here:
And choosing this option in the menu that opens up:
Use Your Browser's "Inspect" Feature
When you want to get details like colors and font sizes just right, your browser's "inspect" feature is your best friend. You can access it by right clicking anything on a web page and choosing the "inspect element" option.
Alternatively, you can hit the F12 key to open the browser console and select items you want to inspect from there.
This will work in Chrome as well as Firefox. You'll see something like this:
On the left side, you see the code that the page you're looking at is made up of. On the right side, you see the style information for the page.
Don't worry if most of this looks like gibberish to you - it does to me too.
Play around with the inspect feature for a bit and you'll soon find that basic style information isn't that difficult to identify. Here's an example of the code I see when inspecting a line of text on a page:
As you can see, it's not exactly rocket surgery to figure out that "font-size" is the font size, "color" is the font's color (and you can copy-paste this value directly into our editor's color options to get the exact same shade), "font-size" is the font size and so on.
The trick is just to find the recognizable values among all the code on a page.
Use Content Containers
On this example page, spacing was used in various ways. For example the content box isn't as wide as the page and the text inside the box isn't as wide as the entire box.
The way to create this effect without causing trouble for mobile responsiveness is to use the Content Container element. This ensures that on large screens, generous spacing will be applied to the sides, but on smaller screens, the text will not be crammed into a tiny column.
You can learn more about this and other ways to make your content more mobile friendly in this tutorial.
Over to You
I'm interested to know what landing pages and websites make you go "I want that!", especially since we're working on improving our visual editor at the moment. The goal is to make it even more flexible and even easier to create whatever page design you have in mind.
If you have some favorite landing pages, please share them by leaving a comment below!
Trying to watch video and it keeps stopping at 1:18 minutes. Checked my download speed and Im at 33 Mbps so I know it not my machine.
Sorry to hear that, Ed. I double checked and I can’t see an issue with the video. Please try again.
Ed – Sometimes this can be caused by your browser cache filling up. Try emptying the cache, and perhaps even quit out of the browser and come back in. More extreme steps: open in a different browser and/or restart your computer to free up memory. This can usually fix issues like what you reported.
Shane,
I just wanted to reach out and say keep up the good work. You constantly provide value to your audience. Love the themes for quick lead generation set ups as well!
Steve
Thank you very much, Steve!
How legal is to exactly copy and use a successfull landing page? Not talking about images and copy, but the styling, fonts and elements positioning on the page.
My guess is (and this is speculation) is that Shane is just showing HOW to use one. But then it is up to us to do the due diligence and adapt to OUR own uses. However if the images used is part of the Creative Commons license, it should be fair game, right?
Yep, pretty much. With images, I’d definitely never use one if I don’t know the exact source and license of that image.
Using an image in a video like this would be covered by fair use, but I’d never actually publish a landing page that uses an image I don’t know the source of.
And what do you think about using the entire mix of layout, colours and fonts? is this somehow subject to copyright?
I don’t know.
And also: I’m not a lawyer, so it really doesn’t matter what I answer. 🙂
Disclaimer: I’m not a lawyer and you should not listen to me.
I would definitely never copy the content, pictures or graphics from a website. CSS styles I imagine can’t be copyrighted, so if you see something like a button you really like, I don’t think it’s a risk to copy that button style exactly (or almost exactly).
However, to be clear: tutorials like these are just meant as showcases of what can be done with our plugin. I don’t recommend anyone actually copy an entire page. A typical real-world use case would be that you see a particular element or layout that you like and you want to create something similar on your own site.
Since I can’t know what specific element you may want to recreate on your site, it makes sense for a tutorial to just cover all the elements on a page. But this is really only for the purpose of the tutorial.
Hi Shane,
Liked the video very much so, I learned a couple things i did not know. Thank you.
Also, what I would like to know how to do is how on some landing pages, they have a back ground image that scrolls along with solid background elements like text boxes as you move up/down a page. Also some elements fly into position on the page…
Thanks for your comment, James! The background image effect is something you can achieve in our plugin by checking the “static image” box in the options for a background image.
Great Answer Shane!
It would be great To use your software also with non WordPress sites. You could find a Way To use your editors To build Landing Pages, email collectors etc..And The copy And paste The code in any Website. Thanks
Thanks for your comment, Stefano!
Creating our products for non-WP sites would be a huge task, so I don’t think it’s something you’ll be seeing from us anytime soon.
Excellent tutorial Shane! Love these practical videos, and the landing pages plugin and content builder plugin is so extensive that I keep learning new stuff about it every time I watch you guys use it.
Thank you very much, Mikael!
These tutorials are fantastic! Thank you so much for sharing them 🙂 I absolutely love thrive themes. I’m learning so much and the support here is great!
Thank you very much, Seema!
This was excellent Shane. I just built a page and from this video learned I need to rebuild it a different way so its mobile friendly using the boxes. Love these kinds of video.
Thank you for your comment, Ed! Happy to hear this was useful. 🙂
Hi Shane, This is amazing! Thanks for the design tutorial. I wanted to design a page like the homepage of Chrisducker.com and am stuck for nearly a month.
Can you please help me. 🙂
Thank you 🙂
Thanks for the suggestion, Mahesh! I’ll give it a look.
Thanks so much Shane. I’d be more than thankful if you can help me with this!
P.S. Proud user and lover of Thrive Products! <3
Continue to blown away by your attention to detail and your GENUINE desire to provide VALUE to your Thrive members (and those outside of our Thrive family!).
Seriously, following you is a MASTER class in Internet Marketing.
One question. Is the Thrive Landing pages also offered as a separate plug in? Or is this part of the TCB. (Doesn’t really matter to me as I am an Agency License holder), but if I am going to share this, it would be good to know. Thanks.
Thank you very much, Harvey!
As of right now, TCB and TLP are a bundled offer, but as both products keep expanding, we will split them up into separate plugins in the near future.
Great Tutorial! I had been looking for a few of the features you explained in the video to apply in Thrive. Thanks!
That’s great to know, thanks Alex!
I REALLY like these instructional videos, and I hope you’ll keep ’em coming. I would have liked to have seen some of the things you could do with the button itself – perhaps attach a lightbox to it, have it change colors on mouseover, etc. But I’m sure I can figure that out. 🙂
Thank you for the suggestion, Doug!
You can see an example of creating a button that opens a lightbox in this tutorial.
You guys are pretty crazy in a good way. Keep up the good work! Best conversion themes in the world.
Thank you, Serban!
Great video..thanks Shane. Really appreciate the training and always learn such a lot.
Thank you, Luana!
Hi Shane,
thanks for that. Very instructive and motivating.
Haven’t done much with “inspect” so far and will use it for some inspiration here or there 🙂
Keep these videos coming.
Thank you, Detlev! Glad you found this helpful.
Your lessons are always very good. How did you copy the background photo exactly? Was that also in the inspector?
Hi John,
Yes, I inspected the background and downloaded the image. I have to add though: for anything other than demonstration purposes, I would never do this. Image copyright is a touchy subject and you could line yourself up for getting sued if you just use and publish images you find anywhere online.
FYI – Most browsers have add ons that let you very easily find the colors and fonts of a website. For example, in Firefox, I use ColorZilla to find colors and Font Finder to find fonts. Much easier than using Inspect Element in my opinion.
Thanks for your comment, Ed! That’s an interesting point and something I hadn’t considered.
Honestly, I haven’t found a page I wanted to duplicate that I couldn’t copy with Thrive. I’m glad you demonstrated the global settings. That will save me some time.
That’s great to know! Thanks, Michael. 🙂
I love these demonstration videos that show what’s possible. Videos like this are what sold me on a Thrive Membership in the first place, and why I have very little temptation to look at any other solutions.
Thank you for your comment, Mike! I’m happy to know that our tutorials have been useful for you. 🙂
Great video, thanks. I was thinking that it would be great also to be able to offer more flexible menus for standard and hybrid homepages, as well as more styling options for blog single pages and blog pages. Great stuff though.
Thank you for the suggestions! Can you elaborate on what you’d want those flexible menus to display?
Very Instructive, it opens a new world for me.
Glad you liked the video, Rafael!
Very nice! As an aside, what do you use for your lower thrid graphic? Very clean!
Hi Jenn,
Thanks! It’s a custom animation made by our video editor.
I love these kinds of examples. Especially when they include shortcuts to Thrive features. One thing I would like to see is an example of is how to create unique/fancy section divider styles and add them to your pages?
Thanks for your comment, Gary! I’ll see if this is something we can incorporate in a future tutorial.
Thanks Shane…learned a few new things here that were important for my current project.
Glad to hear it, Gio!
I do not have the full width blank landing page in my options? help?
Please check in your plugins list to see if you have the latest version of the plugin. If you do and you can’t find this template, please post in our support forum for help.
Awesome tutorial! Thank You
Thanks! Glad you liked it!
The content reveal is awesome but I’d love a cookie element that would automatically show the hidden content on a visitors second visit to the website…
For example firs time a visitor sees my VSL I want the buy button hidden… If they decide to come back later and buy I’d like it automatically revealed so they dont have to watch the page for 10+ minutes all over again!
I’m also having a hard time figuring out at the make a page with content areas 100% wide so images load true left or right of a page and not just within the middle content area.
PUMPED you’re beefing this up as it’s the one tool I use every day!!
Thanks for your comment, Derek!
Interesting point about the content reveal. It’s a detail but I see how that would make sense.
The full width backgrounds are a bit tricky: if you aren’t using a Thrive Theme, then we can’t really “know” the page layout your theme creates. Basically, all our plugin can see is the content area and the rest is up to the theme. So, trying to create a full width section in a theme that isn’t ours is something that we unfortunately can’t do.
How do you set the background image to always fill the screen regardless of the end user’s screen resolution? I believe the way you added specific pixel settings will only work well for one specific screen resolution.
That’s correct, yes. There is a way to create a section that will match the height of the visitor’s viewport, but until recently, this wasn’t well supported in all browsers. However, this has changed and we’re now working on some updates that would include this as an option. For the time being, I recommend the approach I show in the video, which will still look fine on most screen sizes as long as the margins aren’t excessive.
Is it possible (yet) to test one landing page against another just using Thrive Themes ( eg not relying on VWO or Optimizely?) I know Thrive Leads have good built in split testing, I wondered if this is a feature you’re working on?
I can see leaving this to those other tools…however trying to use Thrive Landing pages vs. LeadPages — many clients like that LeadPages have the A/B testing built in.
Hello Jason,
Thanks for your comment! We currently recommend using this for A/B testing landing pages. It’s simple and free.
However, we do plan to bring A/B testing to more parts of our products, including the landing pages.
Hey Shane, LOVE Thrive and recommend it all the time… My #1 wish for the content builder is to NOT create new text box elements when I copy/paste text with line breaks. I wind up having to do a “paste without formatting” (CMD + SHIFT +V), which removes the line breaks. Then I have to go in and manually put in CTRL+SHIFT+RETURN line breaks in my copy. HUGE hassle, especially on long sales pages. I don’t want ever single paragraph in its own text box—that’s too many page elements to screw around with. PLEASE fix this!
Hey Josh,
Thank you for your comment! Loved your Thrive Leads case study! 🙂
Funnily enough, I had a conversation with our developers about exactly this issue today. Making this change has more knock-on effects than one would think, but it’s something we want to add in a coming update. I agree that it would be cleaner to have multiple paragraphs grouped in a single text element.
Excellent tutorial… Learned several new tricks…
Thanks, Mike!
Great video Shane, would also like to have the hover over button effect if possible
Hello Guy,
You can set a hover color for the button (in the color settings). There’s no animation for the hover transition, though.
Shane, one thing I’d really like to see in Thrive is an export to static HTML feature. Sometimes speed is essential and a full WordPress install is overkill, but I still want to use a page I designed in Thrive. It would be nice to simply export the HTML, CSS files, and images into a zip let’s say, and then I can just put that outside of WordPress.
Thank you for the suggestion, David!
If you’re using Thrive Landing Pages, the “bulk” of the WordPress site behind your page should really have very little impact on the loading speed of the landing page. We completely override almost everything that is usually loaded on a default WordPress page.
Hi Shane,
Great video! In your video you used a Style 6 content box. I hope a future release of Thrive Content Builder will have the ability to remove the border outline of the content box. For now, I have to inspect the element and remove the border with custom CSS rules. Other than that, keep up the great work over there. I noticed you guys are growing in popularity based on your Theme Rankings! Great job!
Thanks for your comment, Richard! I agree that content boxes need an update in general, as the current style choices are too restrictive.
Great job 🙂
Perhaps, I would have been able to replicate the demo page with Thrive Content Builder but shurely much more complicated in doing.
A page I would like to have as a content builder template is the following:
http://wlm.kunden-erfahrungen.com/
P.S. What’s about Google compliance of pages, built with Thrive content builder?
Thank you
Helmut
Thank you, Helmut!
What exactly do you mean by “Google compliance”?
Helmut,
You can create a similar page easily just like Shane showed in this video.
Choose your image for your background image.
Then add in the container and then add your boxes inside of the container.
Here is a page I am working on for one of my clients which is similar in the set up but not of course, in the content:) It is not finished yet: http://www.sarasotaflhousevalues.com/about/
Awesome topic! Many of times clients askme to replicate something they have seen on the web and this is a great way to do just that. Thank you Shane.
Glad to know this was helpful, Anibal!
Awesome content as usual. Thanks for all of the hard work in keeping meaningful updates rolling out.
Thank you, Jay!
Hi Shane.
Great video! And thanks for all the great content and an awesome tool you are providing!
My question is maybe weird, but, in tabbed content, it would be great if the Tabs could be filled with an image instead of the color etc.
Thank you for the suggestion, Jamie! Do you have an example site where you’ve seen this kind of design?
Marvelous tips. Love your instructional videos. Thanks.
Thank you!
loved the video Shane – especially all the detail.
Thank you, Alex!
Fantastic demonstration! Thank you. However, when testing it looks horrible on mobile. Why? Check it out here: https://kristianborglund.se/testsida-2
It looks like you’ve added side margins to the content box. Try placing it inside a content container instead.
That was it! Thank you sooo much for your knowledge. Couldn’t possibly figured that out myself Shane! / Kristian
You’re very welcome.
How do we create landing pages that includes sections with 2-columns and alternating color backgrounds for text and images, with a solid color background behind them? Something like this: http://backlinko.com/link-building. These look really great and seem quite popular. Thanks!
I think I know what you mean, although I’m not seeing it on the page you linked. A vertical page split is something that’s not possible in TCB yet, but we’re working on it. 🙂
Terrific! I was fascinated and inspired. I love your products and videos.
Thank you, Marjory!
This is great. I had no idea you could make a semi transparent background over text like that or how you can create a smaller section with a content container. Please make more videos like this that show off features in the page builder. Thank you!
Thank you for your comment, Jeremy! Glad to know you got some value out of this. 🙂
Wow amazing tutorial. Please do more – a full screen call to action window (aka a “Page Hat”) is becoming quite popular, and I feel you could almost do the same thing using aspects of Thrive Leads. Would love to see you demo how to do this. (You can find examples with keyword page-hat, and I’m not related to the product by this name).
Thank you for the suggestion, Don!
Hi Shane. As usual, another really great video with helpful nuggets. The page level fonts was a feature I’d missed before. Was listening the other day to an IMImpact podcast you made with Paul where you talked about the launch of Thrive & your aspirations to make the best WP plugins & themes. You’re clearly getting close to achieving that! Like others here I think Thrive products & the team behind it are fantastic. Cheers, Mark
Thank you very much, Mark! Personally, I think we still have a long way to go, but I’m happy to know that we’re going in the right direction. 🙂
Congrats, very usefull tip.
Glad you liked the tutorial, João!
Awesome Tutorial.
Thanks for great content
Thank you, Tom!
Shane, great fan of Thrive Leads.
I am looking at building a couple of landing pages for a client. What would the advantage be if using Thrive Landing Pages over using the built in theme options of a good multipurpose theme (like Bridge) to create a landing page? Using Visual Composer and theme options I can already manage page content and control header and footer options etc.
Sell me:)
Hello Paul,
One of the biggest differences between working with Thrive Landing Pages compared to Visual Composer and all the other competing builders is speed of implementation. In VC, every time you want to add or edit something on the page, there’s a short loading period (and then again when you save the changes). Over the course of building a whole page, those short delays add up in a major way.
VC & Co. are still miles better than the default WordPress editor. But just like most people who try VC never want to go back to the default editor, most people who try our plugin never want to go back to VC. 🙂
Another selling point is that we have more than 150 pre-built templates (and our templates are built by conversion experts, in collaboration with designers, not just designers by themselves).
Great tutorial, Shane. Rather to the point I made in the Open Letter comments that training is best when directed at a user problem rather than simply demonstrating what a user can do with the product.
I have tried and failed to replicate the close packed boxes of http://www.visitleeds.co.uk/. But when using Column Layouts I could never get rid of large spacing and putting multiple Content Boxes into another Content Box seemed not to work well for being responsive.
Regards
Bruce
Thank you, Bruce!
I’ll take a look at the page you linked and see if there’s a way to create something similar with TCB.
Super helpful – thanks Shane. I always appreciate your attention to details and the effort to constantly improve your products.
One thing though (unrelated to this video) – I feel very inspired to create my next landing page with TCB after learning a few more tips and tricks in this video… but recently I’ve been having trouble making changes to the landing pages I previously created with TCB. I tried troubleshooting by turning off plug-ins – it worked once, but then it didn’t work so I’m back to being stuck with a few landing pages I can’t edit 🙁 I tried reaching out in the support forum, but the only advice I got was to turn on and off other plug-ins, which I tried already. Any insights?
Thank you for your comment, Ling.
Unfortunately, I don’t think I can provide any further insights concerning your problem. If you are unable to edit the page, it’s almost certainly because something is interfering with our plugin. With millions of plugins in the WordPress space, any of which could be the cause, there’s just not much we can do.
Although to be clear: what we DO is make sure we code everything in a WordPress compliant way, so that it avoids conflicting with other themes and plugins that are also coded in a WordPress compliant way. But we can’t stop a 3rd party plugin from “reaching in” and messing with our products. That’s one of the downsides of an open source platform…
Can you make those nice looking pages with video backgrounds too?
Hello Brian,
We don’t have video backgrounds in our plugin yet, but we do plan on adding this as a feature at some point.
Any update on the video background yet?
Hi Shane/Thrive Team,
Any updates on integrating Video Backgrounds in the page section element yet?
Loved it. Great tutorial…as always. Though, I particularly liked this one because not only does it show how fast and accurate you can create with ThriveThemes, but also some nice little nuggets on workflow time-savers.
Glad you liked it, Aumji!
Wow! What a breath of fresh air that tutorial is.
Thank you Shane for all that you do. You always inspire us to do more with your excellent products.
Thank you, David!
I always love your tutorials but these are my favorite! I learn so much about design from you. I am a digital marketing strategist and have never found good website designers for my clients. I started using LeadPages but they are not WP except through the plugin and I did not like that. They also are rigid in design. And they are not really a true holistic website that my clients need. If found Thrive Themes and TCB in November of 2014. I started learning on my own websites. I became an affiliate. I require my clients to become Thrive members so they own their own themes instead of me owning the licenses. Then I started to build their websites. I built 3 of them and all through word of mouth, now I am built over 12 custom sites and more on the way. I get a very good price for my custom designed sites. It is because of the way that you teach and the support here, that I was able to add another income stream ( very lucrative) to my consultant practice. Thank you!
Wow, that’s great to know! I’m very happy that we have been able to be part of your success story, Katerina!
Wow, Shane… Great video, my friend. I truly appreciate you taking the time to create and post it.
It would be AWESOME to be able to create this type of opt-in process with Thrive Landing Pages or Content Builder:
https://successwithdustin.leadpages.net/free-training/
I’d also would be stoked if I could create a landing page like this one:
http://getaltitude.com/
Also, not related, I would be great to have “normal” bullet points as an option in Content Builder in addition to the check marks, plus sign, little arrows, light bulb, etc. Sometimes I just want plain-old round bullet points and have to use the WordPress element but they don’t look as good.
And, if we had the option to choose the exact color for those bullet points it would be even better.
One last one, I know that you don’t recommend sliders, but a Client asked me if I could build him a site similar to this one: https://flavorgod.com/
Is there a way to do that with one of your products.
Again, thank you, very much for your and your teams effort and creativity.
Thank you for your comment, Salvador!
The quiz-type opt-in: we are working on a new plugin that will make this kind of thing possible.
For the landing page examples, we currently don’t have video backgrounds, but we’ll add that in a future release. Sliders we won’t be adding and my recommendation is to use one of the many existing slider plugins, if you really must. 🙂
Thank you, Shane.
I look forward to the new plugin that will make quiz-type opt-in forms possible.
Also excited about the video background capability. And, regarding sliders, good tip. I will be using an existing plugin for that.
Thanks again, my friend. Much respect…
Shane, I truly enjoy your tutorials. I learn a great deal of what to focus in on what the customer pain is and pull that out with easy to understand steps through visualization. Yes, I am addicted to Thrive Themes and what your team has put together.
Salvador, I create tutorials/demos for my clients by request and hope that this video that I created will help to answer the question on adding a basic bullet list in Thrive Landing Pages. Not the easiest or quickest way, but it’s a hack that I use and share with my clients. Click here to view.
Thank you very much, Arvin!
Awesome tutorial! So many little gems in there I hadn’t noticed before and good reminders of how to do things properly in the beginning to save time later, like loading the fonts. More of these please!
Thank you, Graeme! We’ll be publishing more of this type of training video, since the response has been very positive. 🙂
Fantastic – can use a lot of this straight away! Thanks very much
Happy to hear that, Suze!
Fantastic demo! TCB has an interesting learning curve…
Your videos have greatly shortened that curve for me.
In addition, “doing it” is the only real way to learn…
The creativity part… well that is a totally different subject LOL
Thank you, Sherwood!
Thanks Shane! This tutorial came at exactly the right time as I’d been thinking about updating my landing page. Thanks so much, these tutorials are always so helpful!
Glad to be of service, Elesha!
Shane… always impressed with the quality, detail, and continued training of your products. Thanks for creating these videos, it helps more than you know. Awesome work!
Thank you, Joseph!
Excellent tutorial Shane! There’s only one problem.
Because of the fixed margins, you’re using to make the background fit the page; it’s going to look bad on mobile, or even desktops with smaller screens.
Ideally, for a full-screen page like this, you want to set the minimum height to 100vw (viewport) meaning it will always fit the entire size of the screen.
As a developer, I can easily adjust everything from scratch using CSS and get the page to look exactly how I want it to on mobile. But I fear this is not the case for your average Thrive Themes user.
Furthermore, when you set the margin in the TCB, it forces the margin using “!important”, meaning even if you wanted to change the CSS you’re not going to be able to. It’s a real flaw in the current build of TCB in my opinion. Ideally, the TCB should offer a “mobile toggle” where other margins, paddings, etc. can be set only for mobile. This would be relatively simple to implement in my opinion.
Perhaps you are apprehensive because it will add to the complexity of using the tool harder and scare off some beginners? But this comes at the cost of a less robust final product (i.e.,. less responsive pages).
Just something to think about. No doubt you already are.
Best regards,
Robert
Thanks for your feedback, Robert!
Setting the height to equal the viewport is a feature we will have coming up in a future release. As for the !important attribute, I’m not sure why this is the way it’s done in TCB at the moment. If possible, we’ll get rid of that as well.
Wow, Shane! You knocked it out of the park with this video. I hope to see more of these. It’s a great way to master the Content Builder editor. Thank you.
Thank you very much, Carmelita!
This tutorial was incredibly helpful. This kind of video in which you put together a variety of techniques that were in Thrive’s individual tutorials makes everything so very clear. Having watched all the individual tutorials, I ‘knew’ all the techniques, but had forgotten to use a couple of them – even when faced with a circumstance that should have prompted my memory. Thanks so much and look forward to more videos like this.
Thank you for your comment, Kate! Happy to know that this was useful for you. And I see your point about individual tutorials compared to a demonstration like this. We’ll definitely be doing more of this type of training, going forward.
Hi Shane,
Thanks for this great video. I’m just getting started with Thrive Themes so my learning curve is steep. This vid will make it less of a climb – very much appreciated.
You asked for a feature request example. It seems this functionality may not be available yet but it would be brilliant to be able to create a landing page or page header design that has video as the background. I don’t have a landing page example but I’ve seen it on the homepages of Ontraport (https://ontraport.com/), Air BnB (https://www.airbnb.com/) and Collabosaurus (https://collabosaurus.com/)
If this is already available – please consider yourself hugged and then point me in the direction of how to make that happen. If not, this is my official request to put in on the functionality roadmap. Many thanks!
Thank you for your comment, Jill! I’m very happy to know you found this useful!
Video backgrounds are something we don’t have in our plugin yet – but it is on our list of features to add.
Hi Shane,
I love how you keep giving. Thrive is now my page builder for everything. I use Ontraport but will be using Thrive and not Ontrapages. Plus it just makes page building FUN. Question: I will also be doing training videos and love how at the start of this. you on full screen swooped into a circle in the corner. I have both Camtasia and Screen flow but don’t know this trick. What screen recorder do you use to make this happen. Thrive is an amazing product
Hello Robert,
Thank you for your comment!
The live video effect is custom built using AfterEffects. I don’t know of an easy way to create a similar effect.
Fantastic training, thanks Shane. Can you tell us some details about the image? For example, what is the best image size and resolution to look for? Is it best to use a large image and reduce it down?
Hi Steve,
Thanks for your comment!
For a full screen background image, I recommend using the resolution 1920×1080. While there is an increasing number of higher resolution screens in circulation, the tradeoff between image file size and quality is generally not worth it. I also recommend using image compression like Kraken.io (which is built directly into our themes) to reduce image file size before uploading.
The ideal solution is to have the image available in many sizes and load the best fitting size for the visitor’s screen, but the technology to do this isn’t quite ripe yet. It’s something we have our eye on as well, though. The goal is that you simply upload an image at whatever resolution you find it at and your website compresses it, resizes it into various sizes and then always serves the correct one. That’s what we’re working towards.
Outstanding video Shane. Maybe your best work yet! For the bordered button, I would just create the button in “Sketch” (for mac) and export it as a png file. That way I can have the borders that I may want. Nice work! And thank you for doing it!
Thanks for your comment, Nick!
Fair point about the image button. Still, will be nicer when there’s just an option to add a border right in the editor, I’d say. 🙂