Walkthrough #4 – Creating an about page

This article is part of a walkthrough series detailing how to build yourself a website, from scratch in less than 2 hours. To see each article in this series click here, or, for the full blog post, click here.

1. Creating an about/biography page

   From within the customizer, hover over the Skizzar logo in the top left of the page and select Add New Page. If you are no longer in the customizer view, from your dashboard you can hover over Your pages and select Add New. From here you will see a list of pre-build Skizzar page templates (like when you first signed up to Skizzar). We want to create an about page, so let’s select the Content Page template. Give your page a name (something like “About”) and click on proceed to the customizer.

   By now, the customizer should be a pretty familiar place, so we’re not going to go into as much detail as the last step. But, as an overview, on this page, we have a slider at the top where we can add a background image and the page title.

   A content widget for your full bio (don’t forget our design tip about using the different headings and excerpts to create blocks of text that look visually stimulating).

   We mentioned in the last step that each column can have it’s own featured image, so in this case, let’s add a profile picture as a featured image to our about text. From within the column settings, along the horiztonal options panel, click on featured image and upload a picture of yourself. Once uploaded, we’re going to apply the following settings:

   – Image ratio – circle
   – Image width – 220
   – Image alignment – centre (default)
   – Text alignment – centre (for both title and column text)

   Below the content widget, we’ve got a Call to action widget. This widget is a great way to direct your visitors to important places on your website. Instead of columns or slides, this widget allows you to add several buttons. In this instance, let’s aim to direct our visitors to either our blog or to the contact form at the bottom of the page. Add a heading, and some excerpt text, then open up the settings for the first button. For each button, you can choose whether to link to an existing page or to an external link, we haven’t created our blog yet, so let’s leave this link as external and just put in a holding ‘#’ – once we’ve made our blog page, we’ll come back and edit the link. You’ll also see that each button has it’s own set of design options available. Let’s stick with the default template settings – but the extensive design options should be pretty self explanitory should you wish to change them.

   For the second button, change the link type to external and in the URL put #contact. This uses a more advanced technique called anchors which we’ll explain in a different post. For now though, all you need to know is that doing this will mean when a visitors clicks on it, it will scroll down to the contact form at the bottom of your page.

   Below the call to action widget is another slider. For this, we’re going to apply the eact same settings as the home page, with a view to draw our visitors attention to the gallery.

   Lastly, below the slider is another contact form. For the sake of this tutorial, we’re going to leave this exactly how it is (rather than add in a phone number like the homepage).