How to Create a Résumé One Page Website

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.

You'll discover:

  • 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.

More...

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.

Tutorial Chapters

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

2-column welcome section 

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

Identical 4-column layout

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

Identical 5-column layout

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

2-colored boxes in a 3-column layout

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

Smart use of borders to create this graphical layout

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

What's smart is what happens when you CLICK on the images...

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

Use testimonials to sell your services.

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

Highlight references in style

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

Don't forget the final "Call to Action"

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

A good looking header section on desktop, tablet AND mobile

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!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

68Comments

Jeff W Reply

Looks awesome Hanne! :)

Really sharp and modern-looking!

Personally on other templates I’d love to see more of:

1) Video Sales Pages
2) Sales Pages
3) (I’d love to see this one)… ‘Member’s Area / Dashboard Pages’ (for those who have a membership site). There are ssoooooooo few choices out there for membership area pages. Pages where when logged in, you see a nice dashboard with all the videos (or content) that you can get access too

Optimize Press has some but they too are rather dated. Other than them, I know of no other place where you can find ‘modern-looking’ Membership Area or Dashboard Pages

Thanks Hanne and I love your videos as they are always really well done and you explain things very clearly! :)

    Luis Carlos Eskay Reply

    Great idea! I totally agree. It would be very nice to have that training.

    Also, I think that the ThriveThemes team is working on a membership site plugin, correct? It would be nice to have a sneak peak on that, as I´m sure it will outperform most of the current options in the market.

    Thanks.

      Hanne Reply

      Hi Luis,

      Working on yes but still far from being able to give a sneak peek!

    Dean P Reply

    Agreed! I’ve even struggled to find good designs online to gain inspiration from

    Hanne Reply

    Hi Jeff,

    Thanks for the suggestions! (Video) Sales pages are coming very soon :) And I noted your request for a member dashboard page.
    For the moment the one we have is in the “Know How” set.

Jason B Reply

I agree with Jeff W, there aren’t many great looking member’s area templates. This could be a great opportunity.

    Hanne Reply

    Thanks Jason, noted :)

    Jeff W Reply

    Thanks Hanne and much appreciated!

    Looking forward to your Video Sales Page templates and hopefully some membership site area templates will eventually get added. :)

Kevin B Reply

Awesome tutorial, Hanne – Thank you. I clicked on play and then I saw the video was 44mins long. I thought, “I’ll watch the beginning and then watch the rest later”…

Not a chance! This video is packed with great tips from beginning to end. Totally rivetting. I had to sit and watch it all.

I loved it. My head is exploding with ideas. Brilliant :)
Best wishes
Kevin

Brian C Reply

Thanks Hanne, involved, but very good.

Richard C Reply

Terrific! I gain confidence with every tutorial. Thanks Hanne.

Thank you very much Hanne, this is a very nice tutorial with multiple possibilities, from companies, to HR professionals and all the way to the simple user (like me) who will just take advantage of it to create my résumé hosted under my name as a domain. I will also link it to LinkedIn .

Hey!, everytime I watch your videos I end up having homework lol.

Thank you. Take care.

    Hanne Reply

    Sorry Luis ;-) But don’t worry the videos aren’t going anywhere so you can implement step by step!

Artur Zygmunt Reply

This is absolutely perfect.
But I think we need more “authority/expert/guru” style pages.

I think that many of your customers are trying to achieve the expert branding, because it’s the way to go when selling info products and professional services.

What actually could be different in “expert template”?

Place for a slogan.
Place for lead magnets and offers.
Place for video (or even better: video playlist)

Hanne and Shane,
After reviewing all the themes and page builders out there, Thrive is definitely the easiest to use, very fast, and “Google friendly.” As you recall, I found out about Thrive when I was looking for timers to add to my D*vi website. Now, I cringe in fear and get frustrated when I have to make a change to my D*vi website, since it’s not truly drag and drop and not a true front-end visual editor. I think they will run into a big wall over at Elegant in a year or two. I know of no other builder better than Thrive. And Shane, I unsubscribed from R*an Deiss after about 5 days! I love the clean look of this template, and in addition to promotion, I’d recommend making more and more 5-page websites for different biz niches with templates for each page. As you’re probably aware, Elegant has changed their by-line on their Home page, saying they’re for professionals, etc. The big hurdle most people face, and which I don’t see a way around (good for me) is that someone has to know how to, and put the time into, learning how to use WordPress. Most business people don’t have the time. Nor should they, they should use an expert. And further, most business owners have no idea about internet marketing, which is really what they need when they start thinking and say, “I need a website.” Best to you.

    Hanne Reply

    Hi Jeff,
    Thanks for sharing! And we’re working on something called “mini site” templates. You should see them pop up in the upcoming weeks :)

      Luis Carlos Eskay Reply

      That´s going to be great! Looking forward to it. From what I´ve seen from some marketers out there, mini sites convert really well.

      Thank you once again Hanne.

I am using Architect after using TCB for several years now. I can not for the life of me, find where on Architect we can create the save template option that used to be on the top right of the elements in TCB. Now there are only trash and copy options. Copy used to be on the left. How do we now save the elements we create as templates to use on other pages and posts?

    Hanne Reply

    Hi Katerina,

    When you click on the element you want to save, you can see the very last menu called “styles and templates”, click on the green “save template” button, give the template a name and hit the save button again :) (click here for video instructions)

Henk B Reply

Nice Hanne, but there are so many problems with Architect, I would suggest to get stability there instead of presenting us new (nice though) features. A lot of people have a huge lack of basic functionality.

    Hanne Reply

    Hi Henk,
    Sorry you feel that way.
    Can you please tell me what you mean with lack of “basic functionality”?
    We use Thrive Architect all day every day on our site(s) and do not have that feeling so could you please tell me what you thing is missing?

Your tutorials just get better and better – Thank YOU

Jesus Perez Reply

Hanne Great Work, just at right time !!!
There is not a better way to power Thrive Architect than to show real an usable case. Cooking an easy good recipe with a good look and converting elements. Congratulations.

annainchaos Reply

Thanks, you really showcased the possibilities there! :-) I was wondering: please could you tell me the hex value of the red background-color you guys use on the ActiveGrowth website? It’s so cool and I’d love to use it for part of a Thrive Architect site I have planned?

    Jesus Perez Reply

    ActiveGrowth red background-color: #da3d52

    Hanne Reply

    Jesus already gave you the answer, but I always suggest picking something “unique” rather than using the exact color as other websites :)

    annainchaos Reply

    Thanks Jesus!

    And Hanne too: that’s good advice!

acu.insights Reply

Every video teaches me something new (and often it’s something I thought I already knew how to do.) Thank you!

Jay Cameron Reply

Thank you for your latest tutorial. I’d appreciate learning how to add a footer menu to such a landing page as well as viewing a home landing page for authors.

    Hanne Reply

    Hi Jay,

    Thanks for the suggestions.
    Did you see the author homepage we already have in the templates cloud?

George Megas Reply

Nice!
I think we can duplicate this and create a mini site for our business info..
Anyway i would like to make one site for businesses..(info,solutions,etc..)

is the full completed template available for adding and then we just edit the elements rather than build it from scratch

    Hanne Reply

    Yes it is! You can find it in the “Bonus LP form scratch” set

David Reply

This is really beautiful! Other than this, the other consultation theme landing page that was added lately is also good! I am really glad to see so much improvement of design on all the landing page lately. Hopefully you can do this more frequently so that we can have more amazing templates in our arsenal.

    Hanne Reply

    We (and the design team) are on fire now that we have Thrive Architect so yes we’re adding templates much more frequently!

Beautiful! I gonna use this page for my about me page :-D

nalin w Reply

Fantastic, as always, Hannah
Clear, practical tips with lucid explanations of your thought processes and decision making. Thank you for taking the time.

Linda S Reply

Brilliant, thanks.
Inspired once more.

pauwfrancois Reply

Hi this looks amazing, where can i get the template.??

Very good congratulations template, I would like as a customer of thrive if some time to have a template landing page that is specific to promote and sell courses that is what I dedicate, and I have been difficult to adapt the ones in the portfolio of thrive.Thank you in advance!

    Hanne Reply

    Thanks for the suggestion Manù,
    The templates we have now for that purpose are in the “Know How” set, but I’m noted your request for more templates like that.

Volker H Reply

Hi Hanne & T-Team,
it´s time to say thank you for the big step forward with Architect.
As a matter of fact, I was one of the guys with really a lot of very big problems with the very first version of Architect. It was not possible to use it.
In the meantime it is not only possible…it is a pleasure to work with it.
The flexibility is great and your inspiration by these video tutorials are really welcome (especially because some eyecatcher were much to time consuming to produce…responsive etc.).

I look forward to a new thrive theme ;-) more flexible in respect to header, menu a.s.o in order to build a site wide branding more easily.
Maybe supporting custom post types would solve a lot of “issues” with business relevant plugins ;-)
still happy to be a thrive member….

Yet another badass tutorial! Looks like I’m not the only one to have discovered the 960-width trick. My habit is to usually restrict the width at the background section level, but it’s interesting to see it applied to the landing page itself (I almost never using a Thrive template during design). The lines connecting the icons was a pretty slick idea, but creating the header arrow by manipulating the decoration of the right border is really, really genius. The way you solve every visual issue is truly at the “Thrive” level. Maybe you should start bundling the tutorials into a product pretty soon? :)

    Hanne Reply

    Hi Thomas,

    Makes me happy to see people really pay attention to these tutorials :D And I’ll start thinking about bundling them in a product ;)

Gabor H Reply

Hi Hanne, great tutorial! Great way to improve my TA-skills and combine elements for personal designs. Question regarding the Professional Skills Section: where did you find the images? I like the style but they are not relevant for me :)

MamaRed Reply

Hi Hanne….love love love that you’re “lazy” (in the good way, of course). When I work with Biz Owners and entrepreneurs, I tell them my goal is to create Legally Lazee BizOwners so we’re definitely in sync!

I’m thinking this would be good for an about page that I want to redesign and even a services page.

Whoo Hoo!!!!!!!!!!! Love your templates and your tutorials. One of the many reasons I stopped looking for “other” WordPress themes and plugins. I create simple websites for clients and refuse to work in anything else.

I (finally) got tired of all the learning curves and settled (which is a rare thing for someone who is “addicted” to learning new technology.

Blessings
MamaRed

    MamaRed Reply

    P.S. Am I missing the option to “Follow” this post? If it is here and I’m not seeing it, may need some new glasses, eh?

      Hanne Reply

      Hmm maybe not possible… But we’re replacing these comments with Thrive Comments REAAAAALLY soon ;)

    Hanne Reply

    Thanks MamaRed! Means a lot :)

Looks like redoing my website pages with TA – oh wait – these are done for you download templates .
Just love how lazy (?) TA makes me:))