Landing Page from Scratch with Thrive Architect: Layered Backgrounds, Mobile Editing & More

Author 
Hanne   329

Updated on December 22, 2019

This is the first "landing page from scratch" video featuring Thrive Architect, the new visual editor that will soon replace Thrive Content Builder.

Now that you know that there is no risk of ever losing your content with Thrive Architect, I hope you're getting really excited for all the new design possibilities...

In this video, you'll discover what it feels like to work with the new plugin and get an idea of the layouts and content you can create with the new plugin.

More...

Video Chapters

This landing page from scratch video is not a highlight reel for Thrive Architect. We're not trying to show off all the coolest things our new visual editor can do. Rather, we want to show you how the improved workflow will help you create a better looking homepage faster than with Thrive Content Builder. 

Here are some of the​ main things you'll discover in the video:

Improved Font Management (4:22 min)

In Thrive Content Builder, using a custom font was a bit complicated. You had to load the font to your website from within the Thrive Dashboard to be able to use it on a landing page. In Thrive Architect, fonts are easily and immediately accessible in a drop-down menu. 

Faster Margins & Padding (8:48 min)

We've all been there... Adding 20px margin, enter, no it should be 25px, enter, or maybe 23px? It's fiddly work to get your layout and spacing to look just right.

Because this is such a common workflow, we've made it easier and faster in Thrive Architect. You can now simply click and drag to change margins and padding and you'll see immediately what's happening on the page. This makes getting the perfect layout walk in the park.

Using a "Ghost" Button (10:44 min) and Changing Every Detail (13:28 min)

One of the biggest improvements in Thrive Architect is customizability. The transparent button with a colored border (also known as a ghost button) is a perfect example for this. You can edit every detail: border color, background color, shadow, hover state, text font, etc. And changing the button text is much simpler as well: you can now edit button texts in-line, just like any other text on the page.

Layered Background Sections (11:08 min)

One of my personal favorites: with Thrive Architect you can layer different backgrounds on top of each other. This means that you can add an image and immediately apply an overlay without having to use a photo editing tool! 

Placing Text on Top of an Image (17:44 min)

This is more of an advanced feature, but if you know what "position:absolute" and "z-index" mean you'll be over the top excited about this one. If not, this basically means that you'll be able to position any element on top of any other element. You can see a preview in the video with text on top of an image and we'll be sure to show you more layouts that will benefit from this feature in the future.

This is a feature that is meant for advanced users, so if it seems a bit complicated to you, don't worry. You can create 90% of all layouts you can think of without getting into the advanced features. But for those last 10%, we didn't want to leave you hanging, either.​

Mobile Editing (20:44 min)

When in one of the first sneak peek videos of Thrive Architect, you discovered the mobile view, many asked about mobile editing options. As you can see in the video, you'll be able to customize the look and feel of your page for desktop, tablet and mobile separately. 

Let's Get on the Same Page...

There are a few recurring questions we get when we're talking about Thrive Architect and let me address them here heads on.

Will I have to buy this new plugin?

Thrive Architect is an update of Thrive Content Builder. This means that all current users (people who only have the Thrive Content Builder or Thrive Landing Pages plugin, members and agency members) will get this as a FREE update.​

For everybody who's not currently a Thrive Content Builder customer, Thrive Architect will be released to the public on the 29th of August.​ 

What will happen to the pages built with TCB? Will my previous design and layout stay in place?

Thrive Architect is backwards compatible. That means you can start using it and it won’t affect your previous content AND you can edit your TCB content with the new plugin. We'll soon release a video to show you how this works exactly. 

What about the other plugins?

Most of our plugins use Thrive Content Builder to edit the elements (opt-in forms, quiz pages, course lessons, etc.). All of them will be updated to Thrive Architect. This means that if you're currently using eg. Thrive Leads, you'll have all these new features at your disposal too. Yes, that includes the mobile editing 😉

Any thoughts, feedback or suggestions? Leave them in the comments below!

by Hanne  August 11, 2017

329

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Leave a Comment

  • This is extremely impressive!
    I’ve been working with many (and I mean many) visual editors over the last 10 years and this demo shows a major leap.
    I’ve only recently made the move to Thrivethemes products, but I’ve got a feeling I won’t need to move away for a long time.
    Can’t wait to see it available and start playing with it.
    Keep up the good work 🙂

    • Believe me you won’t.. Thrive content builder is the only service I am using right now, and by the way I have used many editors like this, even on parallel to compare, nothing even comes close to thrive content builder !

      And I didn’t watch the video, anything from these guys I give it a thumbs up, blindly!

  • I love the new feautures, but let’s see if I understood right cause I am from spain. With the new architect plugin You can design for different devices like mobile , tablet etc showing diferents results for each device . So when you change de size letter for the smartphone only change the size letter for smartphone … This means that the internal code of the page written in html will ask if the page is being displayed on the desktop or on smartphone or tables and depends which one will show diferents internal codes. ¿ did I understand right? Thanks

    • Hi Juan, I am also from Spain, if you need something else just let me know. It is your device and browser type and state the one setting display type and dimensions, the rest is CSS (style sheet specific). As far as I see all side menu are styling (css) and most inline actions are html.
      What is not clear to this point is if I can configure several devices, dimensions and layout (vertical/horizontal view), something close to what it is available in chrome developer tools with device toolbar.
      For instance this multi-device edition is essential these days, making it as an easy task will put TA in another level.

  • Well. Perhaps you should have called it Thrive Sonic, ‘cause that is one FAST hedgehog. I can’t wait to run it. I can see lots and lots of little improvements that stack up and make the current version look super clunky and annoying, even though it was already a major improvement in my workflow compared to Optimize Press.

    If you’re consistent in your rate of progress, I’m confident you will be able to have Thrive 3.0 directly interface with our brains (Thrive Neuromancer, of course). I’m counting on you.

    • Let’s not get ahead of ourselves just yet. 😀

      But yeah, this is a bloody fast tool to use, which I realize especially now that I’ve recently used several competing products again.

  • In the previous videos I was thinking like “Oh, they are following to Cornerstone direction… looks very good”

    Now… seeing this video I’m thinking “Ohhhhhhhh my god.. GIMME THAT… NOWWW!” lol

    Great video, really excited about Architect.

  • We left Thrive due to some of the TCB limitations, but still use it on a few landing pages. Since I don’t have a subscription, will my TCB plugin get the update? If I use it and love it, I’d be happy to come back to the fold.

    • Hi Chett, if you have the plugin now, you’ll get the update (even without being a member) and we really hope to win you back over 🙂

  • Will this have global content blocks. Lets say a testimonial, that can be added in, then if it’s changed it updates on all the pages?

  • Hi Shane!

    Seems like you guys did fantastic job with this. I was wondering, do you have anything like the library/template system like Elementor does? I use those to add ‘special elements’ to normal blog posts – such as product highlights. The way it works is that you create the piece of content in the visual editor, then save that section as a template, and then pick the shortcode from Elementor library and post into a blog post. Something like that would be very handy to have in Architect also.

    • Hi Seppo, this is something we have already in Thrive Content Builder (and yes it’s also included in Thrive Architect) it’s called “content templates”. The way this works is that you create and save the element as a template and then you can use it everywhere you want.
      You can see an example of this in this article.

      • That’s awesome. Haven’t used TCB in a while, but looks like I have to change back soon 🙂

      • Hanne, this is what I meant with my earlier question. Would be really cool to be able to update the content template and have it update all the templates

      • Hi Hanne

        In relation to templates I’m really impressed and thinking of signing our agency up. What would be super awesome and save alot of time would be the ability to easily copy templates from one customer wordpress install to another. Is that possibile?

      • Hello Gavin,

        We have an export/import feature for landing pages that you create or modify yourself.

  • Probably a completely redundant question, but, I am assuming that everything that I have thus far built in TCB will work in, and convert to, Architect. I am also assuming that the learning curve to transfer to Architect will not be steep. Correct?

  • Couple questions (btw, I’ve always loved Thrive Themes…especially your survey/quiz plugin).
    1) When is the release date?
    2) How will this affect current pages built? For example, when I upload architect, will those pages automatically change over to the new plugin for editing or will I have to keep TCB on.
    3) I’m assuming it will be similar when it comes to integrating buttons with Thrive Leads/API connections?

    Thank you as always Shane and Hanne!

    • Hello Alex,

      1) Thrive Architect will be released on August 29th, 2017.
      2) Thrive Architect is backwards compatible, so you can edit pages and content created with TCB, using Thrive Architect.
      3) You will be able to open Thrive Leads form on click of buttons and links.

  • He just makes it look entirely too easy, Lol. I always enjoy these videos, and of course I am a huge fan of Thrive. Thank you for all that you do. You guys are amazing.

    • Thank you, Johnny! It doesn’t take too much practice before you can blaze through a page like you saw in the video. 🙂

  • Can you do a style for fonts? I’d like to be able to reuse those elements without having to replicate elements and fill them in over and over.
    It’s a real pain if I create content in another tool like a word processor and paste it in, because either every paragraph has to be moved over one at a time to a pre-formatted page element copy, or I have to manually fix the fonts/spacing/etc on each auto-generated text block.
    Either that, or I’m missing something on how it works.
    At any rate, really looking forward to Architect.

    • Hello Kent,

      Copy/paste from Google Docs has been greatly improved in Thrive Architect, compared to Thrive Content Builder. Pasting from MS Word is more difficult to handle, but that also works better than it used to. Basically, there’s a lot less of what you described needed, if copy/paste is part of your workflow.

  • WHEW! I am so glad my web developer recommended Thrive Themes to me!

    I’ve had a website since 2002, and Thrive is, without a doubt, the easiest tool I’ve ever used. With the exception of not allowing us to have a portfolio section on my site without gobs of work (boo!), and a few other oddball things, I’m really happy — and Architect looks to be even better!

    Keep it up. I appreciate your work!

    P.S. You can see my site at ineedcopy.com — it uses Pressive.

    • Thank you, Renae! I’m glad you’ve had a good experience with Thrive Themes products. I also appreciate your feedback on what we could do better and I hope we can improve in those areas as well.

  • This looks amazing Shane! You are literally ahead of the curve in all of your products & features. It was so amazingly fast that I even got a little dizzy just watching…but in a good way. Looking forward to the TA upgrade.

  • I can not wait to use TA. I am seriously considering to not see any more TA videos because then it is harder to go back to TCB 🙂
    For instance congratulations for the work, there are simple things like menu element search, element icons, accordion panels, inline text edition.. very helpful.
    But there is one that call my attention “top breadcrumb”, very smart way to select context and focus elements to take events and actions, in TCB you have to almost fight to be understood, sometimes unselect, select, reselect before to make changes.
    I am counting days … tomorrow 17 … sorry, your developers are going to kill me, tell them that what I see until now it is already amazing.
    I am also very excited to see new themes and landing pages for TA.

    • Oh… I feel you, sir!

      I don’t even have any desire to open my TCB again since the first time they tease TA. I said to myself: “Let’s just wait for TA… Let’s just wait for TA…” (a legit way to procrastinate, btw :p)

    • Thank you for your comment, Jesus! I know it’s difficult to wait, but it will be worth it.

      And yes, the breadcrumbs for selecting elements are really cool! I use them all the time.

  • Wow, awesome! Looking forward to start playing with this new plugin. I love how you can edit specifically for mobile and tablet. That was a big downside of TCB 1.0 that mobile view sometimes was not great. Amazing that you can now tweak everything to your liking. Great job!

    • No, that’s not possible in Thrive Architect. You can, however, apply styles on a block level to affect several elements at once and you can drag entire sections or boxes containing multiple elements.

    • Theoretically, yes. But you’d have to do it on a page-by-page basis.

      Of course, all this awesome new tech will also be part of (and the foundation of) the next theme, which we’ll start developing soon.

  • Will it have the ability to do subscript or will i have to go to html mode and add the around the subscript text?

    • Hey Robert, I asked Hanne in the last VIDEO they posted. No subscript, no superscript. I was interested in using the Superscript for references. It’s no biggie for me since I write all my posts in Nisus, then copy-n-paste the Superscript into TCB– stays formatted as it should.

    • I’m not sure what you mean, Robert. There’s a lead generation element in TCB, which will also be available in Thrive Architect. With this, you can add opt-in forms to your content and connect them to your email marketing service via API.

  • It looks absolutely stunning and very easy to use, but then again Shane always makes things look easy!

    Really looking forward to using it.

    Thanks for being so awesome at what you do at Thrive Themes.

    • Thank you, David! With a bit of practice, I’m sure you’ll make it look easy as well. I think you’ll get used to the new features and layout quickly. 🙂

  • Integration with Woocommerce would be nice. And when I say would, I actually mean MUST.
    Thanks for considering this.

    • Thank you for your suggestion, John.

      Can you tell me what exactly you’d like to do with Woocommerce and Thrive Architect?

      • Hi Shane,
        the ability to select the Woocommerce widgets (in appearance/widgets) and include them in a page from what you call in TBC the Advanced Elements. For the moment I can only see the Custom Menu option.
        The next step I suppose is the ability to have Woocommerce Elements which can be sized, styled and modified on the fly within the visual editor interface.

  • WOW! Most impressive…can’t wait.

    Shane, I have a question relating to content templates. Currently in TCB if you create a content template it’s static. If you subsequently want to change it you then have to manually edit it in every page where it’s been applied which can get tedious Would be fantastic if these could be dynamic so that any change made to a saved content template automatically applied on all pages where the template was used. Is this a feature in TA? Here’s hoping…

    Cheers, Mark

    • Hello Mark,

      The content templates in Thrive Architect act the same way as those in TCB. But we have features on our roadmap that will allow for creating templates with shared styles as well as “global” templates where, if you make a change in one place, it changes everywhere.

  • Impressive as always! Looking forward to the release… Quick question… In the current version of TCB you have to be using a Thrive Theme in order to get full width page sections… It looks like with Thrive Architect Shane was creating full width “background” sections using what looked like one of the default WP themes… is it no longer required to use a Thrive theme specifically to get full width sections? And are the Thrive Architect “background” sections taking the place of the TCB “page sections”?

      • Thanks Shane!

        Of course, I prefer using Thrive WP Themes in all my projects but this opens up wider usage on the client side even more where perhaps clients’ are not able to transition themes as easily.

        I really appreciate the hard work and attention you guys have given to every detail. As a marketer with a design and development background I couldn’t ask for a better product than what I’ve seen so far with Thrive Architect… truly a God send.

        Thanks again!

      • Thank you for this comment, Sheldon! It means a lot to me that, with your background, you can appreciate the specific kind of care we put into our products.

  • What would happen to that “absolute”-element when a visitor views the website in Landscape-mode on their tablet or phone? Would it still display in the right place?

    • Hi David,

      That’s a good question. It really depends on the layout you create. An absolutely positioned element could indeed look good on tablet and mobile and look out of place on a screen size in between. However, if the position looks good on all 3 screen sizes in the editor, it’s very likely to look good on every screen size in between as well.

      The more absolute positioning you use and the further you move objects from their anchor point, the more likely it is that things will break on some screen sizes. Because if that, I try to limit the use of position:absolute and keep adjustments to small measures.

  • Oh my goodness this looks amazing! I can’t wait for all of these features. But the mobile, tablet, desktop editing functionality is worth its weight in gold.
    Thank you! Matt

  • I am totally Geeking out right now. What a great leap forward. Being able to adjust the Mobile view layout without impacting the other layouts is brilliant. Can’t wait to see more.

  • I’m affraid from TA.
    I really enjoyed the DRAG AND DROP part of TCB. We’ll get lots of new features but in exchange lost DAD. I can scrool and change everything in the panel menu.
    I’d preffer the way of instapage a real DAD version of TA.

    • Hello Tamás. I’m not sure what you mean. What gave you the impression that Thrive Architect doesn’t support drag and drop anymore?

  • Hi Shane, Thank you for the demonstration. I just didn’t get how you create the second picture without its original background. It looks like a cut out of the guy posted on the blue background. How do you make this happen? Thank you.

    • Dalila,

      I could be wrong but It is probably a png file which allows you to have transparent areas.
      In order to get those areas you need a program to cut the background out.
      Photoshop and many other programs can do that.

    • Hello Dalila,

      The second image used is a different image from the first one. The person in the image was isolated from the background and the dots pattern behind the person are also part of this image. The image has a transparent background as well.

      Basically, this is something you have to use a photo editing tool for. The more typical use case (for me, at least) is that I get such an image from a stock image source or from a designer.

  • Wow, Shane and team, this is amazing, a massive leap forward. Can’t wait to start reworking my site with TA. Thank-you x 100’s 🙂

    • Thank you, Mark! You’ll get it really soon. Well, kinda. I know it’s tough to wait, but it will be worth it. 🙂

  • I’m very impressed! I can see how proud you are of your new “baby”. Congratulations, you guys deserve all the success.
    Happy to be a Thrive customer.

  • I was using Wix.com for some time… and what I find amazing is that you can really drop elements everywhere, like you where using powerpoint… I really love that. Why architect still uses modules and content sections. etc.

    • Hi Samuel,

      That’s a good question! There are two reasons why we don’t use this kind of drag and drop that you describe.

      1) Technically, what you describe works by using position:absolute for every element on a page. This is not a great way to build websites, for many reasons. In terms of clean code and mobile responsiveness, it’s a lot worse than a “block” editor like Thrive Architect.

      2) A blank canvas and total freedom aren’t as useful as they may seem. I can theoretically give you any painting you want by giving you a blank canvas, a brush and some colors. The problem is that most of us can’t make a beautiful painting, given these tools. And we can’t translate what we think of in our minds to the canvas. A position:absolute editor leads to the same problem.

      A block editor does a lot of the work for you (especially in conjunction with templates). Elements and text are correctly aligned by default, spacing before and after elements are taken care of (and chosen by a professional designer) in all templates, the hierarchy of elements in the DOM is correct by default and so on and so forth. Another way to say it is: there’s a reason why professional web designers use CSS and HTML the way they do and only sparingly use free positioning. We’ve built Thrive Architect on the foundations of what the best web designers use. Using Thrive Architect, you can create a page like the best brands and businesses do. Using Wix (despite what their ads might tell you) you can’t.

  • Seriously I’m five minutes in to the video and the excitement level has now increased 10x – I don’t want to build anymore sites until this comes out but its hard explaining that to clients lol lol – can’t wait ….counting sleeps!

  • Yes! The mobile/ tablet level control is exactly what I’ve needed and will save so much time!

    But what I’m especially excited about is seeing how that features works within Thrive Leads. It used to annoy me that I’d spend forever getting my pop ups to look perfect, only to have them a mess on mobile. I’m assuming this means we can make changes to Thrive Leads forms that will be specific to mobile? Perfect!

    • Hello Bradley,

      Yes, the editor in Thrive Leads will also be switched to Thrive Architect and you’ll have the same advantages there. 🙂

  • It was never a bother to me, but I noticed there is not now an option for 5 columns. It this gone? I understand that it is much more difficult to have 5 columns. Just curious.

    Thank you for your work. I found Thrive when I was looking for a countdown timer setup, and am happy to say I got a lot more! Am still a big fan of Divi, but as I’e said before it’s a bit slow, even though they’ve made some CSS type tweaks to make it faster, it didn’t make my site faster. I currently use Thrive for landing pages and all the cool convertion options, options basically missing in Divi. Now it looks like I can build/create my pages from scratch as with Divi. I left X and Genesis a long time ago because they forced me to fit into a theme. I’m not a designer, but I do OK with layout, so am very happy with Thrive. Best to you.

    • Hello Jeff,

      You can still create 5 columns. Or 7 columns or 15 columns or whatever you want. The layouts you see when adding a column element to the page are just some basics that we make available at one click. But you can still drop elements next to each other (or in between each other) to create additional columns and you can resize the widths with drag and drop.

  • I am excited about the new system. I have been impressed with Thrivethemes and the instruction given by Hanne. I remember the first time I viewed a lesson on how to setup a Homepage with Hanne. I thought I need to get involved with Thrivethemes, and I became a member after seeing how a real website looked after Hanne gave the instruction. Thanks for sharing this new information.

  • Wow! It’s a lazy Saturday morning and I clicked your email link, just to see. Well, you now have my full attention. This looks amazing. This is like an Apple moment where you didn’t know what you needed or wanted until it was presented to you. And like several people have commented already, having to go back to OptimizePress (which is/was a great product) Architect makes OP look prehistoric. For me, the spacing and positioning options are gold. Also, the independent changes you can make to tablet and phone views. Nice work.

    • Thank you, Jason! I’m very happy to know that you’re looking forward to putting Thrive Architect to use.

  • Love it! You guys just keep impressing me. I’m glad I found you 🙂 Now I will wait until Architect comes out to design my blog homepage. Pure awesomeness! Keep up the fantastic work! Cheers

  • But if you really want to “kick ass” with your new Architect, I’d say follow the rise of elegant themes. One thing they did was make a bunch of layouts, some with dummy pictures and some really beautiful ones. Hard to resist. They had a countdown as you may know, a contest for something or other, etc.

    • Hi Jeff,

      Not sure what you’re referring to but we have over 160 templates included in Thrive Architect and will be coming out with many more in the future 🙂

  • Well, now I’m going to delay my launch by a couple of weeks. 😉 We’re at the point where the mobile-only editing option is completely required for a website, and I’m indescribably happy that you guys not only have it figured out, but make it EASY.

    *Thank you*

    • Thank you for your comment, Jeremy. I generally don’t support putting things off until later, but in this case, I can understand. 🙂

  • after trying to edit some text in a Divi module and get it to show at the same height and many times it getting messed up and realizing how annoying and difficult Divi is and how user friendly it ISNT i cannot wait to start using Thrive Architect this is just incredible and the functionality and capabilities are astounding

  • This will be an awesome update. Thanks Thrive Themes team. That mobile specific edits are what’s missing in the Thrive Content builder. Now that mobile accounts for most traffic to many websites, this is going to be a very powerful feature. I’ll definitely edit my sites when the Thrive Architect plugin comes out.

  • This is incredible!!! Can’t wait to get it. I created my very first “real” website after switching over to Thrive and I”m really happy with it. I will recommend Thrive to everyone!! How can I become an affiliate? Thrive is so amazing for the non-techie, newbie like me. And I love your tutorials. Thanks so much for everything you do!!

  • This is what I’ve been waiting and hoping for! Truly a game changer. I need it … now. When will it be released to members?

    • Hi Sandi,

      Members will get it a few days earlier than the public. But the official release date is the 29th of August. Stay tuned!

  • Really excited about the launch. Wondering if superscript and subscript options will be added to the text editor. This seems like a common oversight of so many visual editors and yet so many of us have trademarks that we need to indicate through superscripting. Will Thrive architect address this?

    • Hello Chris,

      The new editor supports superscript and subscript if you paste it from a source with super/subscript. We don’t have a button to apply the effect from within our editor, though.