Building the “I Can’t Believe it’s Not Photoshop!” Homepage from Scratch

The topic for today's landing page build is "I can't believe it's not Photoshop!"

​If that sounds familiar, you're right: we've created a page with this theme before. The great thing about this page build is that it shows you many tricks and advanced effects you can apply, using Thrive Architect.

And of course, we're stepping things up this time around. We're presenting a whole new set of visual design tricks and we've created an entire set of landing pages for you to download.

​Here's what the template looks like:

​The layout is visually impressive thanks to many subtle layering effects. There are overlapping sections and subtle shadows that give an impression of depth in this design.

This template is fantastic for showcasing screenshots or anything else where you want to communicate with images. And of course, because it's a Thrive Architect landing page, it also features many conversion focused elements like the call to action section and the testimonials.

​In the video, you can see me build this entire layout in real time. I also do a lot of "thinking out loud" and explain why and how we build the different sections the way we do.

Below are the "chapters" of the video, along with time stamps, in case you want to jump directly to a specific part of the video.

​Start With the "Styled" Blank Landing Page Template

​Starts at ​00:​38

To save some time in the setup, the first thing I do is load the styled blank page template. This already has some of the groundwork done and you can learn more about it in this blog post: Meet the New (Almost) Blank Page Templates in Thrive Architect

Set Up Your Page Fonts

​Starts at 01:58

​​Another time saving step is to set up all the fonts, sizes and colors you want to use, before you start working on the content of the page. To do this, we make use of the new landing page font setup feature.​​​

Design the Title Section With a Layered Background Effect

​Starts at 03:50

​​There are 3 key elements to the layout of the title section:

1. We add multiple layers to the background, to create the stylish gradient overlay effect seen in the template. This also means you can easily swap out the image in the background and it will basically always look good.​​​
   
2. We tweak the layout so that the video goes all the way to the edge of the screen and we set up the layout of the other elements to adjust around this.
   
3. ​We place the video inside a content box, to which we apply a drop shadow. This "lifts" the video off the background and it compensates for the lack of shadow options directly on the video element.
   

Create the Featured Icons Section With the "Off Center" Effect

​Starts at 16:42

​​​​​Next up, we build the 3 column layout with the icons. Here, we use styled content boxes and absolute positioning on the icons, to create the effect of icons being off center from their backgrounds.

Create the Zig-Zag Image Section Layout & "Ghost" Numbers in the Background

​Starts at 22:58

​​This is probably the most visually impressive part of the page and we utilize a whole slew of tricks to make this work, including:

• Image backgrounds with carefully chosen alignments and a gradient overlay that changes direction on small screens.​​​
  
• Using content boxes with background images to give us options to align and crop images directly in Thrive Architect.
  
• Creating a layout that involves oversized numbers and overlayed gradient-effect content boxes to create the fading "ghost" effect.
  
• Creating the zig-zag effect and making everything mobile responsive in the fewest moves possible, thanks to duplicating elements and responsive editing.
  

Build the Testimonial Section With Overlap Effects

​Starts at 35:40

​​For the testimonials section, we use content boxes within columns for easier copy-pasting and we re-use some of the tricks from earlier on the page to create an interesting, asymmetrical layout and a large, fading quotation mark icon in the back.​​​

What's extra special about this section is how it's an asymmetrical, screen-spanning layout, but it's quite quick to build and beautifully mobile responsive.

Create a Stylish Call to Action Box

​Starts at 46:07

​​For this bit, we utilize overlap and drop shadow effects again. The result is a relatively simple call to action box, but thanks to the visual effects, it's gorgeous and fits the rest of the page perfectly.

Add a Text Section & Build Your Own Social Icons

​Starts at 51:52

Finally, we add a simple text section and we build our own, custom designed social icons, including a nice hover effect.​​​

What's Your Takeaway?

Did you learn something from this tutorial? Are you going to apply some of these tricks to your next design? I sure hope so! Let me know your feedback and questions by leaving a comment below.

​And of course, if you haven't already, grab you copy of the Thrive Architect plugin for WordPress, to start building awesome designs like this as well!