How to Make an Online CV Landing Page (+ Template)
If you're a freelancer, looking for a job or simply learning all the ins and outs of Thrive Architect you're in for a treat.
In this landing page from scratch video, I'll guide you through setting up a résumé (or curriculum vitae) one-page website.
- How to set up your page correctly so that you'll never to the same work twice.
- How to create a clean, graphical look with the smart use of borders, boxes and columns.
- How to create a good looking header section for desktop, tablet AND mobile.
Plus, if you don't feel like creating the page from scratch, you can load the template shown here, directly in Thrive Architect.
The Résumé Template
Here's a preview of the résumé template:
Some of the highlights of this template:
- This template is ideal for a one-page personal website for a freelancer or for someone who's looking for a job.
- The boxed layout makes the page very scannable and pleasing to the eye. It allows for a lot of information without creating a cluttered feeling.
- The header image section creates a personal feeling AND is created entirely in Thrive Architect (no image editing tool needed!).
Get this Template!
The template shown in this video is available right now, in Thrive Architect. You don't even have to download and upload any files. Instead, just create a new page on your site, open it in Thrive Architect and load a landing page. You'll find a new set called "Bonus: LP From Scratch" which contains this template. We will add future landing pages from our Landing Page From Scratch series into this set as well.
Set Up the Page Foundations
Starts at 01:30
I pride myself in being lazy... Because it makes me hate repeating actions multiple times. Setting up your page correctly with the right fonts, font sizes, colors and content width will allow you to build your page much more quickly, with fewer repeat actions.
Rather than loading your theme font and overwriting it for each heading, paragraph,... you will immediately load the correct fonts.
Create the Background Section Boxes
Starts at 04:29
As you can see in the image above, this template consists of different "boxes" to structure the page.
Luckily we only have to create this box once and then we'll be able to duplicate it for each new section we build.
Build the Welcome Section
Starts at 08:29
The first section is a pretty basic 2-column layout. The gap between the columns is created by using the "gutter width" slider.
Build the Professional Skills Section
Starts at 10:10
The second section is a 4-column layout with the same structure in each column: an image, a subheading and some text. In order to quickly reproduce the layout, we use a content box (without margins or paddings) to be able to copy all the elements at once.
Build the Skills Section
Starts at 12:12
Rather than starting from scratch, you can use the 4-column layout from the section above and turn it into the new 5-column layout in just one move.
Build the Experience Section
Starts at 13:32
The layout possibilities with content boxes are almost endless... Discover how to smartly use several boxes to create this layout and why you should always check the responsive view before copying your layouts.
Build the Education Section - My Personal Favorite
Starts at 17:03
This layout is my favorite layout on the page. The whole section look super clean and it was made through a clever use of different border styles. It's much easier to create than you might think!
Build the Portfolio Section
Starts at 20:06
At first glance, this is not a very interesting section... These are just images cropped to create a nice looking layout. But what's smart about it, is what you can NOT see.
When you click on the images, you can open up a full size image. This can be the original image or any image you want.
This feature is your best friend when combining good design and usability on a portfolio.
Build the Testimonial Section
Starts at 21:38
Testimonials will always help to build trust and they should be used much more frequently. On a résumé page, you're selling yourself so having client testimonials might be what wins new clients over.
If you have Thrive Ovation, our all-in-one testimonial plugin, you can simply pick one of the many templates and customize your colors.
But I wanted to show you that you CAN build this from scratch and even create that cool looking picture effect without photo editing software.
Build the References Section
Starts at 28:22
And because social proof is so important, we also included a good looking references section in this template.
Combining content boxes with pictures in a smart way can create very interesting layouts like this.
Build the Contact Section
Starts at 31:13
As on any conversion focused landing page, you do not want to forget your call to action. In this case we want clients or recruiters to contact us. That's why, in this section, we repeat the important contact information in a very clear way.
The Cherry on Top: the Header Section
Starts at 34:56
There are several things that make me excited about showing you how to create this hero image header section:
- The whole section is made without using any photo editing tools (yes that includes the pointer and the "Hi" box). This means that you can simply upload your own image, change he colors of the pointer and the box and create a personal style.
- There is a different header section for mobile because this type of layout typically does not play nice on smaller screens. And the layout is optimized for tablet so your resume will look nice on all screen sizes.
What Do You Think?
This is our first résumé template... Do you like it? Should we create more of these? Or do you have another template you would need? Let us know in the comments below!