Personal Branding – Personal Site – Adding Sections

Tuesday, June 13th, 2017
Web Design

Personal Site Part 3 – Adding Sections

We’ll be picking up where we left off in part 2 of our personal site series.  If you haven’t read it, you should go back and check that out first. You can check out the finished blog here.

From the WordPress Dashboard select Pages -> Home -> Editor.

Highlight ‘A Sales Professional, Who Has Excellent Interpersonal Skills and Thrives To Make The Customer Happy.’ Click ‘Heading 1’ and select ‘Heading 2’. This will apply a better structure to our page.

Add Work Experience

Next we want to start adding some work experience to our personal site. Go to the end of the sales blurb and hit enter to start a new line.

Create Job Title

To begin, click ‘Paragraph’ in the top menu and select ‘Heading 3’. Now type ‘Work Experience’ and click enter. This will create a new heading for our work experience section. Notice that we use ‘Heading 3’, this keeps with our site structure.

personal site - create heading
Create A Heading

Create Bulleted List

In order to create a bulleted list, click the ‘Bulleted List’ button (three circles with 3 lines next to them). This will create a list item for us. Click the Bold button (solid B) and type out ‘Salesperson – Local Electronics Store’, this line will serve as our job title and business line.

Personal Site - Create A Bullet List
Create A Bullet List

Add A New Level

Hit enter, then hit tab, this will bring the bulleted list in a level, the bullet should also now be an empty bullet instead of the solid black bullet. You can now add specific skills that you used or learned at this job. Add an experience and then click enter after each. This should put a new experience on a new line with a new bullet for each.

Personal Site - Tab in A Level
Tab in A Level

Return To Previous Level

When you are done adding experiences for that job, hit enter, then hold shift and hit tab, this will bring the bullet back a level and make it solid black again. Now you can hit bold and add another job title and business and repeat the steps above to add experience for this job. You can then repeat the whole procedure as many times as necessary to get all your work experience into your site.

Personal Site - Multiple Items With Multiple Levels
Multiple Items With Multiple Levels

What is HTML?

At this point we want to take a step out and start looking at what’s going on behind the scenes here. Click on the ‘HTML’ tab. You should see something like the following:

Now for many people, the extra characters are just gibberish but what that is actually called is HTML or Hypertext Markup Language. HTML is the main language used for structuring documents on the web. All those brackets describe to your browser the exact structure of your web site.

For example <h1>Joany Salesprof</h1> tells your brows that everything that is contained with <h1></h1> is a level one heading. <h1></h1> are called tags. Most tags in HTML have an open tag (<h1> in this example) and a close tag (</h1> in this example). Everything contained between these two tags is a level 1 heading to your browser.

Some tags can contain other tags, a good example we have here is the <ul> and <li> tags. A <ul> tag opens an unordered list. Inside that tag we have pairs of list item tags <li></li>. Everything within the <li> tags will have a bullet to start and by default will be on it’s own line. The whole unordered list is then closed out with a </ul> tag.

For more information on HTML check out MDN for HTML.

Add More Sections

You can then add your experience, education, volunteer and skills to your personal site in a similar fashion using lists.

Your HTML should look something like what is shown above.

Personal Site - Completed Example
Completed Example

Author: The NetWorkIt Team

The NetWorkIt Team is based in Halifax, Nova Scotia, Canada. We work to create content and tools to help you succeed in your career.