Even if a standard resume is undying, believe growing an internet resume web site to exhibit your talents as smartly. Particularly should you’re looking for a role within the tech trade. On this instructional, we’ll display you how one can use Divi and the FREE Creative CV Layout Pack to create an internet resume web site design! We’ll center of attention on the use of the integrated Divi Circle Counter Module as smartly.
On-line Resume Web site Design: Why is it Necessary?
Whilst shedding off a paper resume might paintings in some industries, in tech, that could be a factor of the previous. You will need to believe assets that may give your resume the spice up it must get the task. On the very least, we would like an interview! An internet resume web site creates a central position the place recruiters, headhunters, and attainable managers can be informed extra about you. Building a strong personal brand on-line permits your long run employers to peer the true you, along with what’s in your resume. Some pages that you’ll believe including for your private resume web site come with:
- An About Web page: In the beginning, and extra importantly, keep in mind to craft a emblem voice this is uniquely you. Don’t disregard to gloat about your self!
- An On-line Resume: An internet resume places you in entrance of the corporations taking a look at your task software. Moreover, search engines like google like Google and Bing can to find it as smartly. The extra eyes that see it, the extra probabilities you might have of discovering your subsequent alternative!
- A Testimonials Web page: Showcasing reward and just right paintings from prior (or present!) bosses and is excellent social evidence.
- A Portfolio/Gallery: If in case you have examples of your paintings, striking them right into a portfolio provides measurement for your resume.
- A Touch Web page: A touch shape and electronic mail cope with make it simple for other people to get involved with you, and come up with that task!
If that is all new to you, don’t concern! We’ll allow you to get began with designing your on-line resume web site. At Divi, we created the FREE Creative CV Layout Pack that you’ll obtain. On this pack, we have now web page layouts for each and every of the pages indexed above. Additionally, we’ll be the use of Divi’s animation options, in addition to cool modules just like the Circle Counter Module to exhibit our quite a lot of ability units on-line.
Let’s get began and get that tech bag!
Beginning Your On-line Resume Web site Design
Obtain and Set up the Format Pack
Step one to development our on-line resume web site is downloading and putting in the Inventive CV Format Pack. We’ve directions at the procedure in this blog post. This instructional will center of attention on upgrading the home layout of the pack with the Circle Counter Module. This can be a local Divi module and is the easiest solution to exhibit your ability set. With blank strains, animation, and extra, you’ll show your talents in a extremely visible manner, environment you and your resume aside.
That is what the house format seems like out of the field:
Despite the fact that this format is a great jumping-off level for our on-line resume web site design, we can make it extra customized. In the beginning, we can use Circle Counter Modules to animate the talents segment. Then, we can upload some animation to the opposite modules at the web page. In any case, we’ll upload some extra visible pastime to the web page with the Icon Module.
Updating the Abilities Phase
Converting the Row Construction
First, let’s take away the Text Modules which are recently on this segment. Hover over each and every module, and click on at the trash can icon within the Module Settings menu that looks.
Secondly, trade the construction of the row. Click on at the grid icon inside the row’s hover menu. Then, select the selection of columns that fit up with the selection of talents you wish to have to exhibit. We went with 5 columns, so we clicked the icon for five columns.
Styling the Row
For each and every column inside the row, we need to upload a border. This can be a callback to the borders which are used all over the Inventive CV Format Pack. To do that, click on at the equipment icon to open the Row Settings modal field.
Including the Column Border
As soon as within the Row Settings, click on at the equipment icon at the first column.
This may open the Column Settings. Inside the Column Settings, click on at the Design tab. Subsequent, click on at the Border tab. We’ll upload a thick, black, backside border to each and every of the 5 columns on this row. Listed here are the settings to make use of:
Backside Border Settings:
- Border Weight: 5px
- Border Colour: #000000
- Border Taste: Forged
As soon as your settings are inputted, click on the golf green checkmark to save lots of your column settings. Observe the stairs for the remainder columns within the row. When this is whole, save the row.
Integrating Circle Counter Module
Now that our basis is ready, let’s upload the primary famous person of the display, the Circle Counter Module. Click on at the grey plus icon within the first column. Make a selection the Circle Counter icon so as to add the primary module to the row.
Including Content material
We’re going to take inspiration from the branding of the Inventive CV Format Pack to taste our latest addition. To start out, upload the ability that you wish to have to exhibit within the Name box beneath the Content material tab. Subsequent, upload within the share that correlates to that ability. Keep in mind, authenticity is vital when development your own emblem and appearing up on-line.
Styling the Circle
The usage of the logo design of the Inventive CV template as a information, we transfer to the Design tab to begin including colour to our Circle Counter Module. Within the Design tab, we commence via clicking the Circle tab. We use the next settings to taste the circle a part of our module:
Circle Design Settings:
- Circle Colour: #fe5a25
- Circle Background Colour: #000000
- Circle Background Opacity: 0.2
Surroundings Up Name Textual content Types
Subsequent, we transfer to taste the name of our module via clicking at the Name Textual content tab. We will be able to use the similar font this is used all over the format: Candal. The settings for the Name Textual content styling is as follows:
Name Textual content Design Settings:
- Name Font: Candal
- Name Textual content Colour: #000000
Styling the Quantity Textual content
The Quantity Textual content styling follows the similar trend because the Name Textual content. On the other hand, we use a bigger font dimension. This attracts consideration to our skillsets displayed within the Circle Counter Module. Listed here are the settings for the Quantity Textual content that we get right of entry to via clicking the Quantity Textual content tab:
Quantity Textual content Settings:
- Quantity Font: Candal
- Quantity Textual content Colour: #000000
- Quantity Textual content Dimension: 46px
Upload Animation
The overall contact to our Circle Counter Module is so as to add an front animation. As soon as our visible design is established, we will arrange our movement design. With Divi, it’s simple so as to add micro animations to quite a lot of modules used all over your design. In our case, we’ll upload a slide animation to our Circle Counter Modules. To do that, we first get started via clicking at the Animation tab. Subsequent, we click on at the Slide Animation Taste. Finally, we click on at the Up Animation Path.
Animation Settings:
- Animation Taste: Slide
- Animation Path: Up
As you’ll see, there are reasonably a couple of settings to be had to additional taste the animation of this module. On the other hand, we need to stay our movement design easy and vintage, so we can go away maximum settings at their default.
Click on at the inexperienced icon on the backside of the Circle Counter Surroundings menu to save lots of your settings.
Reproduction and Edit
Now that the primary Circle Counter Module is whole, we will replica our paintings. This may permit us to save lots of time and create continuity inside of our paintings. To do that, hover over the Circle Counter Module and click on at the Reproduction icon. Subsequent, at the newly duplicated module, click on at the equipment icon to go into the settings.
Replace the Content material tab along with your different talents and abilities. On the other hand, go away the Design tab by myself. After saving your paintings inside of that module, hover over the module once more, and click on and drag it to transport it into the second one column.
Repeat this till your entire talents are inside the columns of your row.
With our Circle Modules superbly in position appearing our talents, let’s upload some pleasure to the opposite modules in this web page.
Upload Animation to Profile Photograph
On the most sensible of our web page, we have now an Image Module. Right here, add a qualified, brilliant, and crisp headshot of your self. To do that, click on at the equipment icon after soaring over the module. Then, click on at the Design tab for us so as to add an exhilarating animation to the picture.
As soon as within the Design tab, click on at the Animation tab. Just like the Circle Counter Modules, we’ll stay our animations reasonably easy. On this case, we’ll use a Zoom animation with the default settings to grasp guests’ consideration to our web site. Listed here are the settings that we use to use a zoom animation to our symbol:
Animation Settings:
- Animation Taste: Zoom
- Animation Path: Heart
As we’re running throughout the on-line resume web site design, keep in mind to switch the static modules similar to textual content to personalize the template for your wishes.
Upload Blurb Modules
Subsequent on our hit record, we’ll exchange the touch textual content with Blurb Modules. We do that for 2 causes. The primary is so as to add extra colour to the icon this is incorporated inside the module. Secondly, we will upload a refined animation to a unmarried Blurb Module, versus having a number of strains of textual content flying around the display if we have been to stay the segment as is.
To get began, we hover over each and every Textual content Module, click on the trash can icon, and take away them from the segment.
Subsequent, we click on at the grey plus icon to upload a Blurb Module to the primary column. Just like the Circle Counter Modules, we’ll replica the module as soon as we have now styled it.
Subsequent, we click on at the Blurb Module icon.
Upload Your Content material
We navigate to the Textual content tab and upload our content material. We’ll exhibit our telephone quantity, electronic mail cope with, and site. For this primary module, we’ll be inputting our telephone quantity main points.
Upload Icon
Subsequent, we click on at the Symbol & Icon tab. As soon as there, we choose sure at the Use Icon toggle. We then use the hunt field to make a choice a telephone icon. That is the only we selected.
Taste Icon
Now we click on and transfer to the Design tab to taste our blurb. We use the next settings for the icon:
Symbol & Icon Design Settings:
- Icon Colour: #fe5a26
- Symbol/Icon Placement: Most sensible
- Symbol/Icon Width: 96px
Set Textual content Alignment & Colour
Now, we click on at the Textual content tab. We need to center-align our textual content and make the textual content all over the module Darkish. Due to this fact, we click on the middle icon, after which we click on Darkish from the Textual content Colour dropdown.
Taste Name Textual content
As with the Circle Counter Module, we’ll use the font all over the format pack. Clicking at the Name Textual content tab, the one environment we alter is for the font circle of relatives, which will likely be Candal.
Frame Textual content Styling
For the Frame Textual content, we’ll be the use of a distinct font. As such, we’ll have so as to add a couple of different tweaks to the settings to make the Blurb Module mimic the styling of the Textual content Modules that used to grace this segment. Listed here are the ones settings:
Frame Textual content Settings:
- Frame Font: Montserrat
- Frame Font Weight: Common
- Frame Textual content Dimension: 16px
Upload Animation
To wrap up our design of the Blurb Module, we’re going so as to add an access animation. Just like the Symbol Module, we would like this front to catch the attention. After clicking at the Animation tab, we click on at the Leap icon. We go away the Animation Path, in addition to the opposite settings, at their default choices.
Animation Settings:
- Animation Taste: Leap
Reproduction Module
After clicking at the inexperienced icon to save lots of all our exhausting paintings, we can replica our Blurb Module.
After duplicating the module, return to the content material tab to replace the Textual content and Symbol & Icon tabs to check your wishes. Whilst we used the Blurb Modules to exhibit our telephone, electronic mail, and site, chances are you’ll need to use them to show different related issues for your position or trade. Get inventive!
Including the Ultimate Touches to Your On-line Resume Web site Design
The usage of one of the vital latest Divi local modules, the Icon Module, we can upload a sprinkling of iconography to our virtual resume. To do that, we can first scroll to the resume segment of our web page.
Including the Icon Module
Then, we can click on at the grey plus icon to upload one Icon Module to the column. We would like the icon to head at the beginning of each and every access inside of our resume. Preferably, we additionally need the icon to be a basic visible illustration of the corporate or position.
Then, the use of the hunt field, kind in a time period that resonates with the location this icon will constitute in your resume.
In our instance, we used a colour swatch to constitute the position that colour performs in UI, UX, and in the long run the paintings of a product fashion designer.
Styling the Icon
We then click on at the Design tab. We use the next settings to modify the colour and dimension of the icon:
Icon Settings:
- Icon Colour: #fe5a26
- Icon Dimension: 32px
Our ultimate design trade will likely be to left align the Icon Module. To do this, click on at the Alignment tab. Then, click on at the left align icon. In any case, click on at the inexperienced checkmark button on the foot of the settings window to fasten to your icon settings.
With the Icon Module designed, we can now click on and drag it to the highest of our position name.
For each and every access to your resume, upload an icon to constitute the discussed position. For this present resume, those are the icons selected:
Ultimate Glance
With those refined animations and further modules just like the Icon Module and the Circle Counter Module, we’ve been ready to carry new existence to the Inventive CV house format:
If you happen to’d love to take the format a step additional, you’ll additionally take a look at the FREE header, footer, and blog post template which will complement the Inventive CV Format Pack as a complete. You’ll be able to see the header and footer freebie in use above. Making your paintings public on-line generally is a horrifying step to your task seek adventure. However with a device like Divi to your arsenal, the drive to construct and care for an internet presence may also be lowered. Having the fitting assets to create a visually interesting but skilled web site calls for steadiness and talent.
Ultimate Ideas
All in all, we’d love to listen to your ideas in your tech adventure. If you happen to’ve been taking a look to get into tech, would you believe creating a web site to your resume? If you happen to’re now not in tech, do you suppose a web site like this is able to allow you to to your profession? Tell us within the feedback down under, and let’s get a dialog going.
The submit How to Use Divi’s Circle Counter Module to Showcase Your Skillset gave the impression first on Elegant Themes Blog.
0 Comments