Walkthrough #3 – Customising the homepage

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. Customising your homepage

   The Skizzar customizer allows you to edit and create page layouts by adding widgets to your page. Each widget can be extensively styled to suit your preference.

   At the top of your homepage is a slider widget – this is a great place for you to add an eye-catching image or video of your or your business. It’s the first thing people will see so let’s make it a good’un! To edit the background image of the slider widget, click on the blue edit pencil – this will open up the widget design settings. On the horizontal menu, click on background and select background image from the drop-down. Uploading your image is really easy, but make sure you are using a hi-res image that is at least 2000px wide (remember, some people may be looking on really big screens which could stretch and pixellate your image). Skizzar uses the best image compression techniques available to reduce the file size of your images without compromising the quality of it – so don’t worry too much about file size, we’ll take care of it!

   Once you’ve added your background image, you’ll see some new settings are available to you in the Background drop-down within the widget settings. These options allow you to change the display preferences of your background image. For our image, we’ve used the following settings:

   – no-repeat – this means the image won’t repeat like a tile
   – align center – the center of the image will be at the center of the page
   – parallax – this is a popular scrolling effect giving a 3D “depth of field” as you scroll
   – darken – adds a darkened overlay to your image to make text stand out on top better
   – stretch – your image width will always be the full width of the screen
   
   NOTE: If you can’t see these background image settings straight away, publish your changes and refresh the customizer.

   Now your background image is in place, let’s change the text. A slider allows you to add header text, excerpt text, and a button. Generally speaking, you’ll want your header text to be yours or your company name and the excerpt to be a tagline about you or your business – remember, it’s the first thing visitors will read on your site, so make it relevant. Along the horizontal design bar, click on the text option. You can add your own styling to both the header text and the excerpt text separately.

   For this tutorial we are using the following settings:
   – Header font size – 60
   – Header font spacing – 8
   – Header – uppercase
   – Excerpt font size – 20
   – Excertp uppercase

   A button can be a really useful way to guide your visitors to the main purpose of your site straight away. Buttons can be linked to existing pages on your website or, to custom links. By default, on this page, the button will scroll down to the next section of the page – let’s keep it this way, for now, we’ll also look at button styling later.

   Below the slider on your page is a content widget. This is likely to be the very next thing visitors on your site will be reading, so we’re going to take a snippet of the bio that you’ve already prepared and add it in here. Start by clicking on the blue edit pencil for this widget

   Tip: you can also hold Shift & click on the widget you wish to edit to open up the widget settings.

   The content widget allows you to add a main header & excerpt and then several columns (which you can edit the width of) also containing a header and excerpt. You can also style each column individually using the horizontal design bar, as well as editing the style of the entire content widget using the vertical design settings on the right.

   From a design point of view, large chunks of text all in the same size can look overwhelming and uninspiring, and will most likely lead to your visitors leaving your site in a fit of absolute rage. So, to avoid this, we can be clever with the use of different headings and columns to split up your text and make it look more appealing to read. Armed with your bio/about text, let’s take the first few words and make them the heading text of the widget – something like, Hi, my name is Sam Skirrow. Under this, in the excerpt, let’s feed our visitors a little bit more info – I’m a freelance bassist & synth bass player from the UK. You can already see how visually this looks better than having everything in the same font size – the layers of text engage your visitors.

   By default, this page template splits the text into 2 columns – again, a visual tool to split up chunks of text. Take the next sentence of your bio and add it to the column heading, then add in the remainder of the paragraph in the excerpt of the first column and the excerpt of the second. Remember, we don’t want to put All our about text here, ideally, we want our visitors to think, “Crikey, this guy is interesting, I want to read more”, and then click through to our about page. Since we don’t have an about page yet, we’ll wait to add a read more link in. What you should have now, is 2 columns of text giving a teaser about you whilst also looking visually appetizing. Let’s move down the page a little further.

   Below our content widget is another content widget which has been set up to display services. You may not offer any services or feel like this is relevant, so, if that’s you, you can delete the widget. It’s likely though that you do offer services that you would like to draw attention too, in which case, let’s look at how to edit this widget.

   Shift & Click on this widget to open up the settings panel. You will see a widget heading & excerpt (the same as above) which you can change to suit your needs, and, 3 columns with a featured image, and heading and some excerpt text. For this example, we’re going to use the services Bass Guitar, Bass Synth and Vibe tech – you can start by adding these headings into each column along with a short sentence describing each.

   Tip: A great idea here is to think about adding a page for each service you offer, then, you can link from these overviews to the page – it’s great for search engine optimization.

   Each column has an image added to the top of it – these are called featured images and each column can have one. On the horizontal design bar, click on featured image and upload your desired image for the service you have described. Once you have uploaded your featured image, you will see more design options available to you.

   Note: if you don’t see more design options, publish your changes and refresh the customizer.

   The design options allow you to edit the size and ratio of your featured image, as well as the image alignment (left of the text, above or to the right).

   You may also notice that this widget has a slightly different background color to the one above it (it’s a light grey) – let’s look at changing this to a darker color. To do this, we use the widget setting on the vertical menu. Click on background and select a darker color, for this tutorial we’re going to use the hex value #2a2a2a – a charcoal grey. Look at what happens to the text in the widget at this point – Skizzar detects when a background is light or dark and adjusts the default text color accordingly (because you don’t want black text on a black background, that would be silly). Note though, that by using the column text settings (on the horizontal menu) – you can override the default text colors.

   Personally, I don’t like dark backgrounds – I think they look gloomy, so I’m going to change it back to light grey! Once you’re happy, scroll down the page to the next widget.

   Below the services icons, we have another slider widget – this is a great way to visually split up the page with another high-quality image, and also a great place for you to direct your visitors to important places on your site – this is known as a call to action. In this instance, let’s try and encourage visitors to check out the Gallery page. Shift & click on the slider to open up the widget settings, or click on the blue edit pencil. The techniques for changing the background image and text are exactly the same as the slider at the top so we won’t dwell on this too much. There is one subtle difference between this slider and the one at the top of the page, and that is the height of it. On the vertical options panel, you will see a tab labeled Layout – click on this and you will see several options that affect the design of the slider – full width, boxed and full page.  Full width is what the slider widget defaults to and takes up the entire width of the page, boxed will have white space to the left and right of the slider and full page will be the same height and width of the page. For boxed and full width settings, you can also set a custom height.

   The last widget on our page is a contact form. We like the idea of adding a contact form to the bottom of each page rather than having a dedicated contact page, that way, it’s easy for your visitors to get in touch wherever they are in your website. The contact form, by default, is ready to use out the box, however, let’s look at adding an extra input field and changing the recipient email address for the sake of this demonstration.

   Start in the usual way by either holding shift & clicking on the contact form, or clicking the blue edit pencil to open up the widget settings. In this case, instead of columns (like the content widget), or slides (like the slider widget), we have form fields. There are several different types of form fields available, text, email, text area, dropdown, radio buttons. In this example, we’re going to add a phone number field. Start by clicking on New Form Item, by default, adding a new form item duplicates the very last item. We’re going to use the following settings:
   – Input Type – Text
   – Label – “Phone Number”
   – Form Field Name – phone_number

   Note: It’s super important that form field name is a unique name (i.e. not used by any other form fields), and only uses lower case letters, numbers, and no spaces.

   It’s likely that you don’t want the phone number field sat under the message box, so you can drag and drop the form field, within the widget settings panel to the location you want it – we’re going to add it below First and Last Name.

   By default, all emails from visitors will be sent to the admin email account (i.e. yours), however, you may wish to redirect emails to a different email address. To do this, select Settings from the vertical options panel and enter your email address into the Send to email address option.

   And that’s it, we’ve completed our homepage for now – there is a little bit of tidying up to do, and some buttons to add in/link up – but we can do that at the end once we’ve created our other pages. So have a sip of tea and let’s move on to the next step!