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

Author
Hanne   329

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

Enjoyed this article ?

You might also like:

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.