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. 🙂
This tutorial was **AWESOME**!! Thanks so much. One thing I learned that I didn’t know about was the Landing Page Settings feature. Huge time saver!! I’m a big, big fan of Thrive Themes. Thank you for continuing to innovate and improve an already great product. Looking forward to more tutorials like this.
Thank you, Michael! Glad to know you found this useful!
What I want a tutorial about it how to get those more seemingly complex overlap designs in your templates. For example, the “Video Course Lead Generation” template has the video element overlapping two different page sections, with some other elements on the right side of it as well.
Also, your templates where you overlap the button on the line of two page sections.
It seems tricky to get these overlaps just right to look good on mobile. So that is what I would like to see in future tutorials is how to achieve some of these overlap effects correctly.
Thank you for the suggestion, Joan! I’ll see if we can incorporate this in a future tutorial. 🙂
Shane, Thank you,
Can you please make TCB available for posts too. And we need a certain way to remove post metas for Thrive & different Themes.
Like in this post: [screenshot – http://screencast.com/t/Yi7ezHHh0nRq ]
Thank you again,
Sand Das.
For Kevin Gallagher.
Thank you for your suggestion, Kevin!
The reason Thrive Landing Pages aren’t available in blog posts is because posts are displayed in various index views such as the blog page, archive pages etc. What you change in the single page view with Thrive Landing Pages doesn’t translate into these index views.
The post meta is determined by your WordPress theme. If you’re using one of our themes, you can control what is shown or hidden in the post options as well as in the theme options.
As always outstanding. As I use Thrive themes and Content Builder more and more the tutorials become so much easier to follow.
Thank you, Bob!
Hi.
Yes, you did it! Now, please, I would like to do a similar homepage that weebly.com and mopro.com have. I think I could do that with TCB, but I can not handle the even manager with TCB when the pictures and other elements appear in order to get that beautiful design of those homepages. They are really beautiful and I would like to do something similar, of course, I don’t want a copy of them. Thank you for this video tutorial.
Thanks for the suggestion, Juan! I’ll check these sites out to see what we can learn from them.
Brilliant tutorial. I really learnt a lot. Perfect for showing the qualities of the content builder. Thank you.
One improvement I’d like is the ability to hit enter in a text box and get a new line and expand the text box. I don’t know if you can do that. Makes things easier.
Yep, I agree. This is something I was just recently discussing with the developers. It’s a bigger change than one might think, but we aim to release it in a future update.
Thank you very much, Christian!
Suddenly now when I look at websites I see how they can be built using TCB. I particularly like this one (including the content, TCB can’t help us with) – http://www.adventurecats.org/ and this one – https://goldentriangledc.com/initiatives/ both of which come from the not-for-profit space. It now brings home the importance of images. It would be useful to know if you have an image optimization process. Thank you for your high standards.
That’s awesome! Glad to know you are developing TCB X-ray vision. 😀
Thanks for the suggested links also.
Excellent stuff Shane, very good tutorial. It’s cool to see how flexible TCB and Thrive landing pages are in replicating other designs.
Glad you enjoyed the video, Michiel!
Really liked that video….amazing just how flexible the WP plugin is….!!!!
Thank you, Michael!
Thanks, Shane. This was a useful instruction! Lots of insights of adding fonts and settings for the Landingpage. Also new for me was the minus margins! I have done some sites and these spaces between containers was bothering me a lot! Thanks!
Thanks for your comment, Tom! Great to know that you got some good value out of this. 🙂
Hi Shane,
Excellent work. As always you provide top notch content!
Thank you very much, Svein!
This is an excellent tutorial. I understand the potentials about copyright if copying a complete landing page but the value in the tutorial for me is the elements that Shane has covered. My frustrations in the past about trying to replicate an exact font / colour – the inspector view is a revelation!
Also, Landing page settings will save me acres of time – I’ve been setting each element individually. Content Containers – now I understand there use and value.
Thank you, Shane.
Thank you for your comment!
Yes, I don’t mean to suggest that someone should copy an entire landing page. But I hope it helps to see how you can find the needed elements, get the styles etc.
Hi Shane
Please continue with this type of hands on video.
Replicating a site allows you show the Content Builder in action in a way that pure “how to use” do not…
It makes the learning much easier!
Thank you, George! We’ll create more tutorials like this, going forward.
So helpful to see how you use Content Builder. Thanks so much Shane. Greatly appreciated.
Thank you for your comment, Geoff!
Loved the level of detail on this tutorial! I’m new to TCB/Thrive membership, so it’s all good stuff.
Thank you, Sarah!
I’d like to know how I can use a regular bulleted list by using the existing landing pages because when I use the bullets they seemed to adapt to the settings of the landing page, not the regular ones.
Hello Angelito,
To create a default bullet point list, add a paragraph to the page and choose the bullet list from the paragraph settings.
Extremely helpful. You clarified some things about using containers 🙂 Thanks a lot Shane. Can you please show us how we can do that box sliding-down effect (it’s on the example page in your video, I saw it on another one which was exactly the same). And also how can we use a plugin like this: https://wordpress.org/plugins/social-locker/ on a page created with Thrive Content Builder which is not a wp normal page?
Thanks a lot in advance if you take the time to do it.
Regards,
Csaba
Thanks for your comment, Csaba!
You can use a plugin like social locker by inserting a “WordPress Content” element in Thrive Content Builder or Thrive Landing Pages.
For the entry animation effect, you can select the content box, choose “Event Manager” and add an animation that appears on page load. 🙂
Wow Shane, that’s fantastic. Thank you very much for the fast reply and help. I love TCB and the way you do business too. Keep up the good work we need much more of this straight & honest marketing these days and in the future 😉
Thank you! 🙂
Great and clear!!!
Thank you, James!
Shane, under your heading of ‘even more flexible and even easier’, I have one simple suggestion. I downloaded an icon set to build my website. Later, I needed to add a few extra icons, so downloaded some more. But the theme only holds one set at a time. It would be even more flexible and even easier if we could upload multiple icon sets as our sites grow. I now fear to use icons.
Absolutely agree with you that that’s very annoying. We’ve got a project for improving both font manager and icon manager significantly. The reason nothing has been released yet is because we haven’t found a really good solution yet, but it’s something we’ll keep working on until we have a much better system.
Hi, a feature request, please integrate thrive themes with CSSHero also with wp-types toolset
Thank you for the suggestions, James!
You bring out the geek in me Shane. Well done.
Haha, good to know! 🙂
Since you asked … one landing page design, I am in need of and would put to use immediately would be a split screen full width design like this …. https://app.getflywheel.com/login
There’s no clean way to do a vertical split layout like that in TCB yet. We’re working on it, though. 🙂
Great tutorial as always, Shane. Even though I have TLP, I don’t create that many landing pages. After seeing this video, I’ll definitely have to start paying attention to more landing pages and up my game! Especially since I keep forgetting I can save so much time editing only a few elements withing the Landing Pages settings instead of doing it the hard way by editing individual elements—which I tend to do! It’s nice to know I have this much control and customization over my own landing pages!
Thanks for your comment, Eric!
Hey Shane,
Thanks for the tips. OK, unsolicited constructive criticism coming your way…
🙂
I’ve always found your blog a little hard to read, but I changed the font weight of your paragraph text in Chrome Inspect from 300 to 500, and the result is much easier on my 48 year old eyes.
Thank you for your comment, Jim! We’ll see what we can do about the readability on the site.
This was great content, perfect walk through. I’m going to look for a landing page to stump you 🙂
Thanks Shane!
Thank you very much, Nate!
Great tutorial Shane. There is one thing I constantly have problems with though. I am really surprised there is no “Custom Menu” feature in the Thrive Content Builder. Every time I create a home page or landing page for categories, I have to build out my menu instead of just inserting one.
Hi Michael,
Check out this post about the custom menu element in TCB.
Awesome video Shane. This is really helpful for those of us who want go to the next level with Thrive Content Builder.
Here is one request I would like to see. I see it in some other landing page builders. I want to see a “down arrow” (downward pointing triangle) icon that sits between 2 regions. If the user clicks on the down arrow, then the page scrolls down to the next region.
This type of widget is really help for big background LPs that have additional info below the fold. The downward triangle is an easy indicated that there is more info below. That fact that it sits between 2 regions is what makes it so effective.
Here is one example, although it’s pretty lame.
https://marketplace.leadpages.net/bloomfactor/coachingone/
Thanks and keep up the good work.
Jeff
Thanks for your comment, Jeff!
Glad you liked the video. The down arrow thing is something that’s been requested by our designers as well, so we’ll definitely add a feature for that. 🙂
Shane,
I loved this video and thanks again for providing us with incredible training. A couple of landing pages I like are: http://socialtriggers.com/ and http://www.copyblogger.com/
Thanks again and have a super week.
Thanks for the suggestions, Mike!
Hello mate
I would ask you some new Textures and backgrounds to easy change. A preloaded landing page modelo has some background that are nota possible to apply on other landpage. If i change a preloaded background image and later i decide to Undo, seldom i can do it easy and painless.
Would it nice a extra 200 new background and Textures separeted by type or colors ?
Another thing i ask. Pre-loaded pictures. Now i have to look for a picture on internet, download and upload on media center to put in contente builder. If you havena database linked with pixabay or similar sites as facebook does you will rock.
Thanks for the suggestions, Ivan. I’d love to make images more accessible in TCB and this is something we’ll do some research on.
Suggestion for the “Table of Contents” element. Include a way for users to quickly scroll back up to the TOC section, or maybe make the TOC a sticky element that auto-toggles down when hovering close to the address bar.
I’m creating a user guide and using the TOC element. Jumping to a desired topic is easy enough, but then a person has to manually scroll all the way back up to pick something else, and it gets tiring like that.
Thank you for your feedback, Joan! We’ll see what we can do to make the TOC element more user friendly. 🙂
Very well explained! Have never used the landing page font settings before, would have saved me lots of time, very usefull video!
Thank you, Daphne!
Shane,
I love these tutorials. Watching you begin the building process with a specific outcome in mind is the fastest way that I learn how to master the Thrive Content Builder interface. Keep these types of videos coming!!!
Sincerely, Wayne
Very happy to hear that. Thanks, Wayne!
I love it when you replicate pages. I love thrive content builder and all the updates.
I really like the Convertri Sales page. However its closed now so do not think you can replicate that
Thanks!
Yes I liked this tutorial.
Thanks, Robert!
Great Tutorial Shane, as usual! I enjoy watching your tutorials, and I can say as a newbie to all this I have learned a great deal from you and Thrive Themes. I am always referring back to the Knowledge Base in the members area when I get stuck or just don’t know what to do, and for the most part I can usually find what I need. I just wanted to say thank you, and keep up the good work.
Very happy to hear that, Johnny!
Thank you Shane, I like these videos.
Helps me be a better user of these tools!
Thanks for your comment, Paul!
These “building” videos are SO HELPFUL! Thanks so much.
Thank you, Kathy!
this is fantastic, so helpful to a complete non-techy non-developer like me! thanks so much. if i come across a page i love I’ll definitely link it back in these comments 🙂
Thank you, Joy! Glad you like this post!
I can not find the tab landing page builder, before it had
Hello Oscar,
Please post in the support forum if you’re experiencing technical problems.
Thanks Shane, great video. I love these kinds of tutorials. Great to see specifically how you inspected the original page. It was also very useful for me that you showed how to customize the width of the different elements, especially the button. One of the things I wasn’t sure about before was how do you know which style of “content box” do you choose? So it was great that you showed that style 6 is the most customizable. Finally, it was helpful to know that it isn’t possible to do a white border around the button, because understanding the limitations will also save a lot of frustrating trial-and-error.
Thank you for your comment, Yusuf!
The thing with the content boxes really isn’t optimal and I agree that it’s good to know that style 6 is generally the most flexible. However, I really want to improve how content boxes work so it’s less of a guessing game. 🙂
Loved this post Shane – here’s why:
1) Good to see how someone from Thrive makes the most of the features in TCB while building something practical rather than just showing a feature “in isolation”
2) Appreciate the fact that you noticed something that needed to be improved (the button border), weren’t afraid to mention it, and said that you’re going to fix it
Would love to see more of these types of posts/tutorials where its based on something like “Hey, that looks cool, how can I make that magic happen using what I have?”
Thank you very much for your feedback, Dan! We’re definitely going to be publishing more tutorials of this kind. 🙂
Can you build a landing page like this with Thrive? http://neilpatel.com/
Thank you for the suggestion, Nate!
Hey Shane – Once again you have done an awesome tutorial here. Yes please alot more of these. They really show practical application of Thrive Themes and what different features do. Excellent stuff
Thanks for your comment, Jason!
Do Thrive Themes work with Convertri? I love TT landing page.
Convertri is a hosted solution from what I know, so I don’t see how the interaction between Thrive Landing Pages and Convertri would take place… But I’m not that familiar with it, so I’m not sure.
Shane, how do space hero image to full screen and position the box properly so that it looks good on a desktop AND mobile site? I’ve had a problem trying to do this on my own site. I added ~200 px of margin, but then I had to scroll and scroll and scroll to see it on a mobile phone. Support tells me I should never use margin of greater than 30-40px otherwise it will be messed up when viewed on a mobile phone.
Hello Chett,
I’m afraid we don’t have a good solution for that yet. I tried fixing it with some custom CSS, but couldn’t find a good solution with that either.
What I can tell you is that we’re working on a series of improvements to our visual editor which will take care of mobile responsiveness issues like this.
Wow! This is SO useful.
I’ve been using the editor for quite a while and am getting the hang of it – but there are some pretty good tips that I did not know, eg the landing page settings. I’ve been changing those manually.
(Is there a same setting for paragraphs/H1’s in regular pages?)
Also, I love the F12 tip to use for fonts, colors etc. thnx again!
Thank you! Very happy to know this was useful for you. 🙂
You can change site wide font, color, and paragraph settings in the WordPress customizer. I don’t think there is a drop down to fix the styles like this on normal pages and posts apart from the customizer and possibly the theme global settings depending on which theme you have. Good luck!
Hi Shane, thank you for the incredible video tutorials you offer. They are amazing. One question I have is about creating shapes other than boxes. Is that possible in TCB? Here is an example of what I mean: http://learndobecome.com. Could those buttons that are round in the picture background be created? Love how they flash with a border when you hover over them. Could this be replicated? Thanks!
I have done some pretty crazy custom styling like the button shapes in TCB, and could do those round buttons on your example page, however it requires advanced knowledge of CSS classes and styling. Yes you can do it. Is it easy? Not out of the box.
Very useful! Make more!
Thank you, Renee!
Hallo Shane, tolles Video und ein interessanter Ansatz. Leider kann ich manche Videos nicht nachvollziehen, da ich nicht so gut englisch verstehe und Ihr oft zu schnell sprecht und Fachausdrücke oder Slang benutzt, das ist schade. In diesem Video war es aber gut und der text hilft mit dank “Tante Google!” Weiter so und vielleicht ist ein Transscript ab und zu möglich.
Danke aus Deutschland
KILLER!!!
I love these. The Thrive page builder is such an awesome tool. My website needs work and this really inspires me to make some cool pages.
Awesome, I love that you got down to the nitty gritty detail. I have one comment – when looking for the style settings in the inspector window, there is another tab that says “computed”. Sometimes it’s easier to see what the actual font is for an element on that tab than scrolling through all the css on the first tab.
Thank you so much for this video, Shane. I wondered about how to create a picture background. I learned so many more things than I expected. I appreciate your including the “F12″because I didn’t know how to bring up the Inspector or how tho make the background full page or….
Hi Shane, thank you for that tutorial. It was great. I really learned from it.
cool video – thanks for that! if you use chrome, install ‘whatfont’ and ‘colorzilla’ to check the font type and color code of any site / element.