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

Author
Shane Melaugh   130

Updated on December 31, 2019

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

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.

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!

  • Thanks so much for this. It’s essential instruction for those of us who need a gestalt – the overview that lets us understand WHY something is done in addition to HOW it is done… and how it shouldn’t be done. This demonstration has also convinced me that Architect is sufficiently sophisticated to handle most mobile responsiveness issues. You wouldn’t believe the number of mobile-related CSS fixes Support had to implement in my TCB + Squared theme sites. Please continue creating more ‘live’ start to finish instructional vids that give equal time to tablet & cell phone tweaks.

    Questions: (i) Which Thrive theme was used to create this new landing page template? (ii) Does this downloadable template contain any or all of the mobile tweaks that you implemented in the video, or must we still do that ourselves? (iii) In general, do any of the downloadable landing page templates contain mobile tweaks, or are they just styled for desktop?

    • Hello Stan,

      1) On the demo site this was built on, we’re using a default WordPress theme. We never changed it after installation. The theme you use has no impact on how to build the page or what it will end up looking like. That’s one of the great things about landing pages. 🙂

      2) All the mobile optimization is already done in the downloadable template.

      3) All of the templates are fully mobile optimized.

  • There a growing number of dimensions for both tablet and mobile phone screens. My understanding is that your Responsiveness settings (and the background CSS) are based on an ‘average’ set of dimensions for each of tablet & cell phone. Would you be willing to install the landing page you just created – complete with all the responsiveness tweaks – on a test WordPress site and provide the URL, so that we can see how the page displays on a variety of tablets and cell phones and operating systems? Hopefully, the page display differences will be insignificant, but one never knows until the page is opened on different mobile devices.

  • Hi Shane and crew!

    Im currently using Pressive where I cant make changes so easily as you made here. For example I cant edit the Title Section with the Architect, I also cant make the whole page in full width.

    Can I do my whole home page like you did this Chic landing page? Or is there a fundamental difference between a “page” and a “page” ie home page and landing page?

    Thanks and cheers form Tallinn,
    Rando

    • Hello Rando,

      Thank you for your comment! There is a difference between a landing page, as built with Thrive Architect and a “normal” page in your theme. In short, a theme page is based on a template that is shared between all pages and it has a limited content are in which you can add whatever you want. A landing page, on the other hand, is like a blank slate on which you can do anything you want, but it doesn’t share a template with any other pages.

      There are pros and cons to both. In order to create theme templates with the kind of design freedom you know from Thrive Architect, you’ll have to wait for the release of our next theme.

  • Love this new design but I notice on the template itself one of the background images is parallax so the image floats behind the text when you scroll – can you show us how to recreate that in our own designs?

    • Hello Michelle,

      It seems I forgot this detail when I built the landing page. Thanks for pointing this out.

      In the video, at 24:10, all I’d have to do is check that box that says “Static background image”. That’s it! You can do this with any background image on background sections or content boxes. 🙂

  • Great tutorial again Shane, thanks.

    I got a lot from this about workflow. Initially I built the page as a learning experience but it fit what I was after so well that I used it as a base for a new homepage. ????

  • Hi, Shane. Thanks for the time and effort you put in to create such an informative tutorial. My questions are: (1) After adding a gradient point, can it be deleted or do you have to start over? (2) Any chance of getting a color picker tool to speed up the color selection process?

    • Hi Joel,

      We can’t delete gradient points right now. Sorry about that. We’ll fix that in a future update.

      What do you mean by “color picker tool”? I ask because the thing you use to set colors in Thrive Architect is a color picker. But you must be referring to something else…

      • By “color picker tool,” I mean something like an eye dropper cursor that you can drag around the screen, and as it hovers over various areas of the screen it provides a readout of the hexadecimal color. Then, when you actually click to select that color, the “color picker tool” pulls that hexadecimal color code and adds that color to the palette. For example, Adobe Photoshop has this feature. It simply enables you to select the color from an element on the screen instead of having to select a predefined color from the palette or hand-enter the hexadecimal code. Does that make sense?

      • Hi Joel (I realize I’m not Shane, lol) and thought you might want to try the color picker I’ve been using. Not quite the same as what you describe AND you can cut/paste either the Hex code or RGB values.

        My default browser is Chrome and there is an extension called “ColorPick EyeDropper” available.

  • Hey there guys, where is the page that you have on the site that shows all of the different landing page options. It used to be easy to find and now it seems to be hidden, does it still exist? It is a very useful tool when discussing ideas in a session with a client and it being hidden is making it harder to explain an idea.

  • Hi Shane, which tutorial do you suggest that I drill over and over, for building the most solid foundation in Thrive Architect so that I can become a master builder as quickly as possible?

    At this point, I’m mostly dreaming of getting at least close to the speed and efficiency displayed in the builds you showcase in so many of the Thrive Themes University videos.

    “I’m soooo glad to have found your team and without a doubt, my Thrive Themes Membership is the best Christmas present to myself I can remember for quite some time!” (Even though I purchased earlier this year still feels like a Christmas present;*)

    Wishing everyone at Thrive Themes a blessed, Merry Christmas and a prosperous, Happy New Year!

  • Hi Shane, Nice looking landing page as always.

    I’m patiently waiting for enhanced features for post grids. Specifically, I would like to see responsive images in post grids. This was the one and only improvement I was really hoping would be included in the upgrade to Architect. It was indicated in a forum post in early Nov. that the devs were working on this.

    Do you have a timeline for post grid updates, and will responsive images be included in the updates (please say yes ;)? Thank you.

    • We have included dynamic image loading in Thrive Architect, for the image element, but not for the post grid element. A complete overhaul of the post grid is currently in the works.

  • Hi Team Thrive Themes…I’m a bit late to the game here AND this is, once again, an awesome tutorial AND a great way to develop a site with an amazing look. I got behind on my reading/listening and when I found the Chic set in the templates, I started using it before I watched. I’ve got a draft site built for a harpist where each page is built using a modification of the landing pages. Since there are no plans, at the moment, for a blog. Each page has some of your neat touches.

    (Wished I had watched first…that tip on creating a component and then checking for the mobile views is worth it’s weight in gold.)

    Have a great one!

    MamaRed

  • I do have a question now that I’ve watched the video again. What are you using as the logic for margin vs. padding selections. It appeared there IS logic (you usually have that and I’m definitely learning a bunch!) and I didn’t quite grasp it. Seeing so many things that would have been easier had I watched the video first! lol Ah well, live and learn, e? Hugs&Blessings. MamaRed.

    • Margin is on the outside of an object, padding on the inside. If I’m working on something that doesn’t have a styled background, I will generally use margin to position it. If the element does have a styled background, then the padding is for changing the space around stuff that’s inside that background and margin is for positioning the whole thing.

      • Thanks Shane….that’s one of those things I hadn’t mastered, so figured it was time to learn! Love the tutorial and appreciate all the time you and your team put into helping us be better at this stuff.

  • How do you have the blog posts being displayed to actually show posts coming from your real blog?

  • Love the template, quick question. How do you get the blog posts to be real “latest blog posts” and look that good? Is there any blog post plugin you recommend to make them look good? I tried post grid of TA and although I LOVE Architect and have it in like 6 different sites, I can’t get a post grid/gallery that I truly love.

    Thanks!

  • Hello,
    I love your job, and I must say that I’m struggling a lot with Thrive Architect. I watch the images of your videos because I am deaf. Subtitles are not always appropriate. Why would not the deaf and hard of hearing get started with building a website? Why not do a full transcript and mention it in or under your videos you would expand your clientele for sure. I am 51 years old, my ENT has told me that since 5 years he has a younger and younger clientele the 15 to 30 years are more and more affected by this health problem, he must not be the only one with all these young people and their headphones to the ears even in their sleep. The profit yes with the comfort for the handicapped it would be really a step of giant.
    Thanks for reading me.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >