HOME > Templates

Resume is The Next SMART Template for Blocs 3

Today, I am happy to release the new improved version of Resume, the next SMART template I have rebuilt from scratch using Blocs 3.

Posted by @EldarGezalov on January 4, 2019
resume smart template for blocs 3
Resume is the second template with SMART capabilities, previously available only in Event template.

Resume template is one-page website template explicitly built for portfolio, resume, and other personal websites. It has a beautiful navigation bar with hover effects, and more than ten beautifully designed sections/blocs.

Resume template comes in two variants: light and dark. It is effortless to change the style of this template by changing a couple of colors in Global Swatches Panel and a couple of custom classes.

Below are the short instructions on how to do that.

1. Decide between Dark or Light color scheme

To avoid changing the text color of your website, I recommend first to choose one of two color schemes, dark or light. If you want to use the light color text, select the Dark version, and if you're going to use the dark color text, choose the Light version of Resume template.

dark and light version of resume template for blocs 3

2. Change the main background color

Next, you will need to change two background colors. I recommend using similar colors, with a small difference to give a contrast to your blocs.

If you want to have a blue color website, I suggest to choose two types of blue color, and one should be a little bit darker than another. Take a look at the screenshot of the example.

colors of blocs 3 website background

3. Choose the accent color

After you have set the background color, choose the accent color for your site. The accent color is used for all icons, small colorful lines, hover effects, and other little details of your website.

Let’s say we want to use the yellow as our accent color. To change the accent color of resume template, you need to do two things.

First, you should change the accent color in the Global Swatches Editor. By default, the accent color set to red.

global swatches editor in blocs 3

Second, you need to edit the colors of a hover state for the following two custom classes, which you can find in Class Manager.

.navbar-nav li a

Open both of these classes, switch to hover state, and change the red color you can see in all of the tabs. It can be a typography color, or border color, or shadown color. Change all of the reds to the accent color of your choice.

custom class editor in blocs 3

Now you have a new color scheme for your website. If you want, you can change fonts, and then concentrate on editing the content. Change the text, change the profile picture, and your site is ready to be published.

Check the demo and download the Resume template

Posted in Templates

Email Newsletter

Join my newsletter to be the first to know about new articles, courses and templates, and get insight into my creative process.

View News Archive >
eldar gezalov trainer web designer

Eldar Gezalov

Trainer & Web Designer
I help people make beautiful websites, create online courses, and run online businesses.

Web Design Courses

Learn web design with Blocs

View Courses


Subscribe to my newsletter to receive latest news and updates.

Blocs Templates

Speed up web design workflow

Learn more

Learn About Blocs

Visit Blocs website

Contact Me

Have questions or need help?