The Chic Landing Pages: Magazine-Like Layouts for Your Website
Today, we've got a new set of landing pages available in Thrive Architect, plus another landing page from scratch video.
This time around, we're going into the nitty-gritty of some advanced layouts builds, in the video. Even if you're 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.
One reason why I chose this particular 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:
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 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!