The Chic Landing Pages: Magazine-Like Layouts for Your Website

Author
Shane Melaugh   130

Today, we've got a new set of landing pages available in Thrive Architect, plus another landing page from scratch video.

We are going into the nitty-gritty of one of these new templates; the Chic Landing Pages, which is a magazine-style landing page set. Even if you are an expert Thrive Architectstranaut (that's what we're calling it, right?),  I bet you'll learn a few tricks you've never thought of before.

More...

Video Sections

One reason why I chose this particular magazine template to make a landing page from scratch video on is because almost every section on this homepage employs some unique trick for its layout.

Here's an overview of the page and the timestamps for when each of the sections start, in the video:

chic magazine page template

Here's the overview in written form:

  • 04:45 - building a simple header & navigation menu.
  • 06:18 - creating the title section. Includes a background gradient hack and overlapping effects.
  • 13:56 - a simple text section, with some tips about text formatting and alignment.
  • 14:55 - part 1 of a magazine like overlapping effect. Plus, use of fonts and a customized border for a nice visual effect.
  • 17:10 - part 1 of the magazine style layout, employing a background gradient hack, some overlap and including a fully mobile responsive feature grid with nested columns.
  • 23:45 - a testimonial or quote section with an interesting, multi layered scrolling effect for the background images.
  • 26:50 - a "zig zag" layout with overlapping effects. Highlight: you won't believe how quickly the second section is created and made fully responsive.
  • 37:26 - custom built testimonial layout. For a quicker way to get the same result, try Thrive Ovation.
  • 45:08 - another simple text section.
  • 46:00 - a split layout call to action section using background images, image alignment and subtle overlays.
  • 49:43 - the "about the author" section with another magazine-like overlapping layout.
  • 55:01 - A title, highlighted by a "split border" effect.
  • 56:48 - a custom built post grid. Okay, here, we're really taking things a bit far. I don't actually recommend you do this, but it showcases what's possible. Also, more templates and customization options for the post grid element are coming soon.
  • 1:03:24 - eye catching call to action section with a background image.
  • 1:06:50 - a simple footer bar with navigation links.
  • 1:07:55 - running through the entire page for responsive/mobile friendly editing.

Thinking Out Loud

When watching the video, you'll notice that it wasn't rehearsed and I never built this page before recording. There's a lot of me thinking out loud, as I build the page and there are even a few moments where I realize I made a mistake and go back to fix it.

I hope that this helps you get an idea of how to approach building layouts, even if you don't know the perfect solution yet. And it also shows that you don't have to be afraid of making mistakes or building something in a way that isn't ideal. In most cases, it's easily fixed.

The Set

The magazine-style landing page shown here, as well as a set with further pages of the same style are available right now, in Thrive Architect. The set is called "Chic" and you can find it when you load a landing page.

Let us know what you think of these new templates! And if you have any questions or feedback about the tutorial, please leave a comment below!

Shane

by Shane Melaugh  December 1, 2017

130

Enjoyed this article ?

You might also like:

Leave a Comment

  • Once again you made a great video and really cool page design. I look forward to seeing the post grid styling features in the future. Meanwhile the manual approach you took for posts on this page should work well for featured blog posts where the content doesn’t need to dynamically update.

    Now we need a teaser video of the new theme you’re working on… maybe as a Christmas present if you guys make enough progress to demo it by then. Thrive Architect is such a huge leap forward and I can’t wait to see how you guys bring it all together with a new theme.

    • Yes! A teaser of the new theme for Christmas. I have a site that I should’ve launched in September (my own) and I’m holding off for the new theme. Because I know that I’ll want it the moment it’s released 🙂

    • Thank you for your comment, Scott!

      I’d love to get a theme teaser ready by then, yes. We’ll do our best to make it happen. 🙂

  • Wow, Shane! I haven’t watched the video yet, but I am looking forward to watching! What a gorgeous template! Now you’re making me think about switching from what I have to this template! Nice work!!!

  • Wow, Shane, just wow. (And thanks!) This is yet more ‘clear blue water’ evidence (if any were needed) showing why Thrive Architect and the rest of your Thrive Themes tools form what is unquestionably the best website building platform on the market.

  • This is a really beautiful template set Shane! Wow.
    I haven’t gotten around to watching the video yet but will later today.

    The template and the extra design elements you include – miles apart from the competition and purely brilliant!!

    Loving TA and these new templates/tutorials we’re seeing!! ????????

  • Wau! This look really beautiful and professional! Love that. Really look forward to your new theme (if you gonna make one 🙂 so I can finally stop combining perfect thrive tools with other theme.

  • wooow! what an amazing design. I’m really impressed by what you can do with ThriveThemes. Thanks so much for this Tutorial.

  • Inspiring Walkthrough Shane.
    Is it possible you could make the menu options a bit more versatile? Need it have more options to suit the final look and feel of it on the mobile platform.

  • Love the new set. Thank heavens we can change the pink to something… not pink :). I might have to go and create a new home page now…

  • OMG, you are awesome! It is so impressive what wonderful results you bring for your customers. I am more and more enthusiastic and very happy to be a part of this community!

    • It’s really cool, right? I have to give credit to the design team for this. I would not have thought of using the feature in this way myself.

  • Superb tutorial Shane. Just love the fact you not only explain everything so clearly but provide the completed template for us to “nick’ everything or particular elements to use without having to build ourselves.

    Another example of you guys going over & beyond.

    Thank you

  • Love it! I always pick up a tiny gold nugget in ever one of these videos. I have a wedding photography client this theme would even work great for.

    Thrive Architect could use a few more animation options. I’d love to have a loop animation where my call to action buttons subtly look as if their levitating or shake side to side every 15 seconds or so to draw focus and attention to them.

    Tiny additions constantly added to Architect are just as welcome as the bigger updates that take time to come! 😉 They also hold us over until larger features come.

    • Thank you for the suggestion, Derek! We’ll definitely revisit animations at some point in the future and add some more options there.

  • Thank you Shane,I think we will all get some great takeaways from this tutorial. The fact this was a never before done landing page, nor never rehearsed video, brings down to earth how an individual (a Thrive Architectstranaut) would feel when trying to build a landing page from scratch for the first time.

    • Thank you for your feedback, Luis! It’s good to know that you appreciated this more “raw” approach to doing the tutorial.

      Also, I take your comment as an indication that “Thrive Architectstranaut” is officially catching on. 😀

  • These in depth videos on page design with Thrive Architect are absolutely fantastic. They are an incredible teaching tool on how to get the most out of Thrive Themes products. The value you guys consistently put out blows me away. I’m very impressed.

  • What can I say other than brilliant work and inspirational!

    Can’t wait to get started on something to use some of the useful tips you’ve delivered here.

    Thanks for your dedication in delivering a professional and amazing platform for web design.

  • This design is stylish, professional and simply gorgeous. Exactly what I need and it’s so good to see your first more feminine set that is perfect for a lifestyle blog.
    There are many women bloggers out there who will just love “Chick” landing page so it’s great to see the new design that will definitely appeal to this fast-growing market.
    Absolutely amazing display what Thrive Architect can do and like many others I look forward to the new Thrive theme.

    • Thank you for your feedback, Barbara! This is definitely not our last template with more feminine design choices. 🙂

    • Hello Heiko,

      That’s mostly up to your personal preferences. I tend to go for 1080px, but 1180px or 1200px are fine as well.

    • Hi Wendy,

      No, you don’t have to do any such thing, actually. The new templates become available when you load up a landing page, without needing to update the plugin at all. 🙂

  • Love it! You guys rock!! I got worried when I saw the time and request for more in depth videos, but love how you broke it down to sections & time so it helps to save time not having to go thru entire video 🙂 Keep up the awesome work <3

    • Thanks for your comment, Kat! Glad you liked my solution, there. I always try to find a balance between explaining things in detail, but also keeping things moving.

  • Hi,
    The thing that I’m curious on is in your new theme, will we be able to style that to match this landing page?

    I’m going to be creating a new beauty/fashion site for my wife and this look would work well.

    Thanks

    • Hi Patrick,

      Yes, what we are working on with the new theme is to give you the tools you need to apply a style like this (or any style) to your website on the template level.

  • Absolutely exquisite Shane. Will be using this template. Have seen some of the videos etc done using text almost like a blueprint telling you how to proceed step by step & even showing pics of the elements so you can see exactly what is happening because sometimes it’s hard to know just watching the video. Maybe it could be a Christmas present for the members. I would be over the moon!

    • Thank you for your comment, Sara. Can you tell me some things you find difficult to follow, when watching the videos? I’m interested in learning how I can make them more useful.

    • Thanks for your response Shane.
      I searched for an example of my idea of problem-solution. I will call it ‘blueprint’ for lack of a better word. I found one done by you called How To Set A Separate Homepage & Blog Page.

      As for this latest ‘chic’ video, I watched the entire video. Just watching it, I didn’t have any issues frankly. But having tried to implement what you were doing in a prior video, I envision repeat failure. In that video, you were showing how to build a landing page from scratch.

      But even with stopping said video and going back it didn’t become any clearer. I may or may not have understood what you were saying at a particular point, but I think it was more I simply couldn’t implement it. So, I would try to see what your hands were doing. (You don’t always have to have the ‘physics’ down
      as long as you know to click here, then go there, click that, remove this, jump down to here, etc.) Trouble was the movements were so fluid you couldn’t ascertain what you were doing. That’s why I asked for the physical blueprint, so to speak.
      Just to offer further imput for your evaluation, I had one interaction with some creature-double feature individual online, who reacted with total incredulity that I would attempt ‘architect’. Needless to say, I dismissed their comment.
      But I mention it because I believe a lot of ppl would just take off if they could learn what they need to know using the blueprint method. As word got around you’d increase sign-ups exponentially. Because people either can’t get over the learning curve, or they find it is just too big a mountain to climb. I venture to say it may be both. I can only intuit an opinion: It’s all
      about the mountain!

      Anyway, thank you for all you do for your members. We’re sincerely thankful.

      All the best,
      sara

      • Hi Sara. I’ve prepared the ‘blueprint’ for you & other members: a 51 page PDF with arrow-annotated step-by-step screenshots and accompanying descriptions, taken directly from the video. Tell me where to send the Google Drive share link.

      • Wow, that’s great, Stan! You can post the link in a comment and I’ll add it to the post, with your permission.

      • Thank you, Stan, on behalf of all Thrive members who like me are non-techy.
        I see that Shane is wanting you to post the link in a comment and then he is going to put it directly in the post. Maybe they’ll make you a CEO of something. You’d surely deserve it. Thank you hugely!

  • I love Thrive Themes and I love you Tutorials. It is really hard for me to resist changing my Website all the time 🙂
    I had struggle with the overlapp effect of the Image. After a few tries I noticed, why it didn´t worked the way like in the tutorial. Maybe someone has the same Trouble so here was the solution. I changed the size of the Image. The overlapping is than oriented at the original size. Using the normal size of the Image and everything was okay.

    • Hm, that sounds like something that shouldn’t happen. Could you post this in our support forum, so we can see if it was a bug or conflict that caused this?

  • This ‘chic’ landing page looks fun. Looking forward for a reason to incorporate this into an idea I have for next year.
    Thank you

  • Hello Shane,
    I have an additional comment, it´s actually a request:

    Would it be possible for your team to publish a tutorial on how to build a landing page, using Thrive Architect, in this case for a Book Club?

    It would basically be a Book review page, where you would offer your insights on the books you have read and recommend them for such and such reasons…

    It would be most appreciated if you could do this.

    Thanks,
    Luis

    • Thank you for your suggestion, Luis. So, would this be for a single book or would it be an index page with a growing list of books?

      • Yeah… something like that has been on my mind since forever, actually. Specifically for books, as well.

        This could be done with Thrive Architect and landing pages, of course, but it’s really not the ideal way to do it. What you need for this, I believe, is a custom post type builder/editor. And that’s something we’re working on with the new theme.

  • Hey Shane, I literally saw this entire video twice in one sitting as I went back and forth in each element section to really get this process of building pages. I’m not great at all in designing or building pages but I’m learning and to see you build pages like this is inspiring and it truly helps…omg does it. It allows me to see how things can be done. Shane, I truly have to say, it is awesome to see you work and build pages. With practice, I hope I get as good as you someday.

    As a request, you have made videos showing how landing pages or the home page is built and nothing on other pages. I also saw a video course that shows how to build an “about” page in the member area which was helpful. However, I would love it if you can create a tutorial video and the “template” where we can access in the back end of the plugin for a “branded service page.” A video that also teaches what elements go on a service page. That would be awesome if you did. Thanks.

    • Thank you for your feedback and suggestions, Luis.

      Can you explain in more detail what you mean by a “branded service page”? Do you have an example in mind?

      • Hey Shane, well, so far most of your videos you talk about and build the home page, one course on the about page in your university course, then landing pages, download pages, confirmation pages etc.

        But, it would be great if you build a service page. Service page meaning where the expert talks about his services like what he or she does and how they do it – who he or she services to – availability of what kind of service.

        Also, a catalog page where the expert has a listing of all their products. A service page and catalog page of course all beautifully designed.

        So for example when you visit tony robbins website he has these pages. Also, how do you get your videos to fit when you choose video background? When I choose video background none of my videos fit in the background. I just remembered to ask you that question when I just visit tony robbins site. His video fits perfectly as a video background.

      • Thank you for the added details, Luis! We’ll see what we can do to provide something like this. 🙂

        Regarding video backgrounds: that mostly depends on the dimensions of the background that you want the video to fit into.

      • Great, looking forward to the tutorials for service and catalog page. Regarding video backgrounds: what are the best dimensions to record video (if that matters)? and to set the background in the plugin?

  • As Always valuable content.

    At this point i would like to mention the overview section in the content and in the image.

    Is so helpful and we can use it overe and over again!

    Guys if you can make the tutorials this way.(at least for building our sites)

  • Thanks again Shane for this extensive tutorial, i really appreciate this! Like to see more of this tutorials in the future!

    What i like in the future is more options for the menu element, also when it changes to mobile view, there is no real editing now for this.

    I love the support you and your team provides with this tool, keep it up!

  • Hi Shane, this looks very, very cool…. and I would like to use it (customized) to be my home page (and NOT a landing page). How do you do that? How do you have the menu on the top right become your “real” menu”? How do you have the blog posts being displayed coming from your real blog? How do you make the settings you use for H1, H2, body text become your template settings? I mean, this distinction between a “theme” and a “set of pages created in Architect” is just something I don’t “get” and it makes me very frustrated as I feel that I spend hours (several days already) in vain trying to get it.

    • Hello Cecil,

      1) To turn this page into your homepage, follow this tutorial.

      2) You can use the “custom menu” element in Thrive Architect for the top navigation menu. It’s currently a bit limited, though. We’re working on a major update to this element, to polish out its current shortcomings.

      3) The thing about the fonts currently only works one way. Meaning: on a landing page, you can choose to use your theme’s fonts for headings and text, but you can’t apply your landing page’s fonts to your theme. We are working on a new Thrive Themes which will allow you to customize fonts (and everything else) on the template level and site-wide.

      I hope this helps!