Methods to Use Divi’s Circle Counter Module to Show off Your Skillset

by | Jul 11, 2023 | Etcetera | 0 comments

Although a standard resume is timeless, believe growing a internet based totally resume internet web page to blow their own horns your skills as neatly. Specifically will have to you’re on the lookout for a job throughout the tech industry. In this tutorial, we’ll show you learn the way to make use of Divi and the FREE Ingenious CV Structure Pack to create a internet based totally resume internet web page design! We’ll focus on using the built-in Divi Circle Counter Module as neatly.

Online Resume Internet web page Design: Why is it Essential?

While shedding off a paper resume would possibly artwork in some industries, in tech, that can be an element of the former. It is important to believe property that can provide your resume the boost it will have to get the job. At the very least, we would like an interview! A internet based totally resume internet web page creates a central place where recruiters, headhunters, and potential managers will also be knowledgeable additional about you. Development a robust private emblem online shall we for your long run employers to look the real you, together with what’s for your resume. Some pages that you just’ll believe together with in your non-public resume internet web page include:

  • An About Internet web page: At first, and additional importantly, take into account to craft a logo voice that is uniquely you. Don’t disregard to brag about yourself!
  • An Online Resume: A internet based totally resume puts you in front of the companies looking at your job instrument. Additionally, serps like Google and Bing can to search out it as neatly. The additional eyes that see it, the additional probabilities you are going to have of finding your next choice!
  • A Testimonials Internet web page: Showcasing praise and superb artwork from prior (or provide!) bosses and is excellent social proof.
  • A Portfolio/Gallery: If you have examples of your artwork, striking them proper right into a portfolio supplies measurement in your resume.
  • A Contact Internet web page: A slightly form and email deal with make it easy for other folks to get involved with you, and come up with that job!

If this is all new to you, don’t worry! We’ll mean you can get started with designing your online resume internet web page. At Divi, we created the FREE Ingenious CV Structure Pack that you just’ll download. In this pack, now we have now internet web page layouts for each of the pages listed above. Moreover, we’ll be using Divi’s animation choices, along with cool modules identical to the Circle Counter Module to blow their own horns our quite a lot of ability gadgets online.

Let’s get started and get that tech bag!

Starting Your Online Resume Internet web page Design

Download and Arrange the Construction Pack

The first step to development our online resume internet web page is downloading and putting in place the Creative CV Construction Pack. Now we have now instructions on the process in this weblog publish. This tutorial will focus on upgrading the house format of the pack with the Circle Counter Module. This is a native Divi module and is the perfect strategy to blow their own horns your ability set. With clean lines, animation, and additional, you’ll display your skills in a very visual way, environment you and your resume apart.

That’s what the home layout looks like out of the sector:

The Creative CV Home Layout, the foundation of our online resume website design

Even supposing this layout is a smart jumping-off stage for our online resume internet web page design, we will make it additional personalized. At first, we will use Circle Counter Modules to animate the skills segment. Then, we will add some animation to the other modules on the internet web page. Finally, we’ll add some additional visual interest to the internet web page with the Icon Module.

See also  Tips on how to Customise Your WooCommerce Cart Web page for Extra Gross sales!

Updating the Abilities Section

Changing the Row Building

First, let’s remove the Textual content Modules which will also be lately in this segment. Hover over each module, and click on on on the trash can icon throughout the Module Settings menu that appears.

Remove Text Modules from the skills section in our online resume website design

Secondly, exchange the development of the row. Click on on on the grid icon throughout the row’s hover menu. Then, select the selection of columns that have compatibility up with the selection of skills you want to blow their own horns. We went with 5 columns, so we clicked the icon for 5 columns.

Change number of columns

Styling the Row

For each column throughout the row, we wish to add a border. This is a callback to the borders which can be utilized during the Creative CV Construction Pack. To do this, click on on on the apparatus icon to open the Row Settings modal box.

Edit row settings to prepare for column styling

Together with the Column Border

Once throughout the Row Settings, click on on on the apparatus icon on the first column.

Edit column for border styling

This may occasionally open the Column Settings. Right through the Column Settings, click on on on the Design tab. Next, click on on on the Border tab. We’ll add a thick, black, bottom border to each of the 5 columns in this row. Listed below are the settings to use:

Bottom Border Settings:

  • Border Weight: 5px
  • Border Color: #000000
  • Border Style: Solid

Styling the bottom column border

Once your settings are inputted, click on at the golfing inexperienced checkmark to save lots of a lot of your column settings. Practice the steps for the remainder columns throughout the row. When that is complete, save the row.

Integrating Circle Counter Module

Now that our foundation is set, let’s add the principle well-known particular person of the show, the Circle Counter Module. Click on on on the gray plus icon throughout the first column. Make a choice the Circle Counter icon so that you can upload the principle module to the row.

Add Circle Counter Module

Together with Content material subject material

We’re going to take inspiration from the branding of the Creative CV Construction Pack to style our newest addition. To start out out, add the ability that you want to blow their own horns throughout the Establish field beneath the Content material subject material tab. Next, add throughout the share that correlates to that ability. Consider, authenticity is very important when development your personal logo and showing up online.

Adding text content to Circle Counter Module in our online resume website design

Styling the Circle

Using the brand design of the Creative CV template as a data, we switch to the Design tab to start out out together with color to our Circle Counter Module. Throughout the Design tab, we start by way of clicking the Circle tab. We use the following settings to style the circle part of our module:

Circle Design Settings:

  • Circle Color: #fe5a25
  • Circle Background Color: #000000
  • Circle Background Opacity: 0.2

Circle Counter circle design and branding

Setting Up Establish Text Sorts

Next, we switch to style the determine of our module by way of clicking on the Establish Text tab. We will use the equivalent font that is used during the layout: Candal. The settings for the Establish Text styling is as follows:

Establish Text Design Settings:

  • Establish Font: Candal
  • Establish Text Color: #000000

Title Text settings for the Creative CV layout

Styling the Amount Text

The Amount Text styling follows the equivalent building since the Establish Text. However, we use a larger font measurement. This draws attention to our skillsets displayed throughout the Circle Counter Module. Listed below are the settings for the Amount Text that we get admission to by way of clicking the Amount Text tab:

Amount Text Settings:

  • Amount Font: Candal
  • Amount Text Color: #000000
  • Amount Text Dimension: 46px

Number Text Styling

Add Animation

The overall touch to our Circle Counter Module is so that you can upload an entrance animation. Once our visual design is established, we will be able to organize our motion design. With Divi, it’s easy so that you can upload micro animations to quite a lot of modules used during your design. In our case, we’ll add a slide animation to our Circle Counter Modules. To do this, we first get began by way of clicking on the Animation tab. Next, we click on on on the Slide Animation Style. In any case, we click on on on the Up Animation Path.

Animation Settings:

  • Animation Style: Slide
  • Animation Path: Up

Circle Counter Animation Settings

As you’ll see, there are relatively a few settings available to further style the animation of this module. However, we wish to keep our motion design simple and antique, so we will pass away most settings at their default.

Click on on on the green icon at the bottom of the Circle Counter Setting menu to save lots of a lot of your settings.

See also  Recent Sources for Internet Designers and Builders (April 2023)

Reproduction and Edit

Now that the principle Circle Counter Module is complete, we will be able to copy our artwork. This may occasionally allow us to save lots of a lot of time and create continuity within our artwork. To do this, hover over the Circle Counter Module and click on on on the Reproduction icon. Next, on the newly duplicated module, click on on on the apparatus icon to enter the settings.

Duplicate the Circle Counter Module

Exchange the Content material subject material tab along with your other skills and abilities. However, pass away the Design tab on my own. After saving your artwork within that module, hover over the module all over again, and click on on and drag it to move it into the second column.

Update and move circle counter module

Repeat this until your entire skills are throughout the columns of your row.

Final Circle Counter Modules in the Creative CV Online Website Resume Design

With our Circle Modules superbly in place showing our skills, let’s add some excitement to the other modules on this internet web page.

Add Animation to Profile {Photograph}

At the top of our internet web page, now we have now an Symbol Module. Proper right here, upload an authorized, colourful, and crisp headshot of yourself. To do this, click on on on the apparatus icon after hovering over the module. Then, click on on on the Design tab for us so that you can upload an exciting animation to the image.

Upload professional headshot to online resume website design

Once throughout the Design tab, click on on on the Animation tab. Identical to the Circle Counter Modules, we’ll keep our animations quite simple. In this case, we’ll use a Zoom animation with the default settings to grasp visitors’ attention to our internet web page. Listed below are the settings that we use to make use of a zoom animation to our image:

Animation Settings:

  • Animation Style: Zoom
  • Animation Path: Heart

Adding animation to the Image Module

As we’re working all over the online resume internet web page design, take into account to modify the static modules very similar to text to personalize the template in your needs.

Add Blurb Modules

Next on our hit report, we’ll trade the contact text with Blurb Modules. We do this for two reasons. The principle is so that you can upload additional color to the icon that is built-in throughout the module. Secondly, we will be able to add a mild animation to a single Blurb Module, as opposed to having a lot of lines of text flying across the show if we were to stick the segment as is.

To get started, we hover over each Text Module, click on at the trash can icon, and remove them from the segment.

Replace text modules within the

Next, we click on on on the gray plus icon to add a Blurb Module to the principle column. Identical to the Circle Counter Modules, we’ll copy the module once now we have now styled it.

Add Blurb Module to the first column

Next, we click on on on the Blurb Module icon.

Click on the Blurb Icon

Add Your Content material subject material

We navigate to the Text tab and add our content material subject material. We’ll blow their own horns our phone amount, email deal with, and web site. For this number one module, we’ll be inputting our phone amount details.

Add content to blurb module

Add Icon

Next, we click on on on the Image & Icon tab. Once there, we select certain on the Use Icon toggle. We then use the quest box to select a phone icon. That’s the best we decided on.

Choosing the phone icon for the Blurb Mobile

Style Icon

Now we click on on and switch to the Design tab to style our blurb. We use the following settings for the icon:

Image & Icon Design Settings:

  • Icon Color: #fe5a26
  • Image/Icon Placement: Absolute best
  • Image/Icon Width: 96px

Styling Blurb Icon

Set Text Alignment & Color

Now, we click on on on the Text tab. We wish to center-align our text and make the text during the module Dark. Therefore, we click on at the heart icon, and then we click on on Dark from the Text Color dropdown.

Setting text alignment and base color

Style Establish Text

As with the Circle Counter Module, we’ll use the font during the layout pack. Clicking on the Establish Text tab, the only environment we modify is for the font family, which could be Candal.

Styling the Title Font

Body Text Styling

For the Body Text, we’ll be using a different font. As such, we’ll have so that you can upload a few other tweaks to the settings to make the Blurb Module mimic the styling of the Text Modules that used to grace this segment. Listed below are those settings:

Body Text Settings:

  • Body Font: Montserrat
  • Body Font Weight: Commonplace
  • Body Text Dimension: 16px 

Body Text Styling

Add Animation

To wrap up our design of the Blurb Module, we’re going so that you can upload an get right of entry to animation. Identical to the Image Module, we would like this entrance to catch the eye. After clicking on the Animation tab, we click on on on the Leap icon. We pass away the Animation Path, along with the other settings, at their default alternatives.

See also  5 Perfect Internet Scraping Equipment to Extract On-line Information

Animation Settings:

  • Animation Style: Leap

Adding animation to the Blurb Module

Reproduction Module

After clicking on the green icon to save lots of a lot of all our arduous artwork, we will copy our Blurb Module.

Duplicate Blurb Module

After duplicating the module, go back to the content material subject material tab to switch the Text and Image & Icon tabs to test your needs. While we used the Blurb Modules to blow their own horns our phone, email, and web site, it’s imaginable you’ll wish to use them to turn other comparable problems in your place or industry. Get creative!

Contact Information Related Blurb Modules

Together with the Final Touches to Your Online Resume Internet web page Design

Using one of the crucial newest Divi native modules, the Icon Module, we will add a sprinkling of iconography to our digital resume. To do this, we will first scroll to the resume segment of our internet web page.

Together with the Icon Module

Then, we will click on on on the gray plus icon to add one Icon Module to the column. We would really like the icon to move initially of each get right of entry to within our resume. Ideally, we moreover want the icon to be a elementary visual representation of the company or place.

Adding Icon Module

Then, using the quest box, sort in a time frame that resonates with the position this icon will represent for your resume.

Searching for an icon within the Icon Module

In our example, we used a color swatch to represent the location that color plays in UI, UX, and in the end the artwork of a product fashion designer.

Styling the Icon

We then click on on on the Design tab. We use the following settings to change the color and measurement of the icon:

Icon Settings:

  • Icon Color: #fe5a26
  • Icon Dimension: 32px

Icon Color Settings

Our ultimate design exchange could be to left align the Icon Module. To take a look at this, click on on on the Alignment tab. Then, click on on on the left align icon. Finally, click on on on the green checkmark button at the foot of the settings window to lock for your icon settings.

Change icon alignment

With the Icon Module designed, we will now click on on and drag it to the absolute best of our place determine.

Icon positioned over online resume

For each get right of entry to for your resume, add an icon to represent the mentioned place. For this provide resume, the ones are the icons decided on:

Icons used within the online resume section

Final Look

With the ones subtle animations and additional modules identical to the Icon Module and the Circle Counter Module, we’ve been in a position to hold new lifestyles to the Creative CV space layout:

The final look!

For those who occur to’d like to take the layout a step further, you’ll moreover check out the FREE header, footer, and weblog publish template which is able to supplement the Creative CV Construction Pack as a whole. You’ll see the header and footer freebie in use above. Making your artwork public online is in most cases a scary step for your job search journey. On the other hand with a tool like Divi for your arsenal, the power to build and care for a internet based totally presence can be diminished. Having the proper property to create a visually attention-grabbing however professional internet web page requires stability and ability.

Final Concepts

All in all, we’d like to concentrate for your concepts for your tech journey. For those who occur to’ve been looking to get into tech, would you believe making a internet web page for your resume? For those who occur to’re no longer in tech, do you think a internet web page like this would possibly mean you can for your career? Let us know throughout the comments down beneath, and let’s get a conversation going.

The post Methods to Use Divi’s Circle Counter Module to Show off Your Skillset appeared first on Sublime Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!