Before you start! This is a LONG post! We’ve separated this post out into 10 individual articles over on our help site – you can find it here!
It’s a bold claim, right? Not just how to build a website in 2 hours, but an absolute kick-ass website – one that will make you really look like the real deal! Well, we’re standing by it, we love using Skizzar to build websites for our clients, and with it now being a platform that is available for the public to use, we thought we’d write up a walkthrough on how to build a site that stands head and shoulders above the rest.
Since we’re a team of creatives here at Skizzar, we’re going to make this a tutorial about building a website as a musician. We’ll be looking at setting up 4 pages – home, about, gallery and a blog…all in less than 2 hours. So, set your timers up and let’s get cracking!
Get yourself prepared
Before starting anything, it’s always worth getting your content together – this really speeds up the build process as it gives you a clear idea of what you are trying to add to your site.So let’s start by listing what content you might want to collate:
Hi-res, at least 2000px wide. For a gallery, you may want between 8 -12 images, and you’ll also want some to use as background images on sliders
– Biography/About Text
Think about the contextual tone you want for your website – formal? Friendly? really friendly? and whether you are going to talk in first or third person. A good bio should be around 500-800 words in length, with the main points covered at the beginning (we’ll be adding an excerpt of the bio to the homepage). This is also a good place to include an overview of your experience if you wish to add that to your site.
– Video links
Generally speaking, from a load time point of view, you’re better off embedding videos into your site from somewhere like YouTube or Vimeo. Bear in mind though that if you add LOADS of videos to your website, it’s still going to take a very long time to load. So, with that in mind, pick your best and have the links ready – the idea of your website is to show off your best or most recent work, not to show off everything you’ve ever done. So if you have videos, try and restrict it to say 4 max.
– Social Links
Lastly, gather a list of social media links you’re going to want to include on your website. For this example, we’re going to use Twitter, Facebook, Instagram, and YouTube.
Sign up for a Skizzar website
Alright, now for the fun to begin. Head over to skizzar.com and click on Get Started to create yourself a website. Fill in the signup form (you’ll be creating a yoursite.skizzar.com domain, but you can always add your own domain name at a later point)
Setup and create your first page
Once you’ve signed up for a Skizzar account, you’ll be taken to the Skizzar website set up wizard – a few simple questions that will help you set up the basics of your site. On the last page of the wizard, you’ll be asked to pick a page template – let’s start by creating our homepage. So select Homepage with content and click on proceed to Customizer.
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!
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).
Create a Gallery
In the previous step we learnt how to add a new page to our site. Repeat this same process, but from the list of templates select Gallery.
The Gallery page template uses a content widget, split into several columns each with a featured image as the gallery image. To edit an image, shift and click on the content widget to open up the widget settings panel, for each column click on Featured image in the horizontal menu. Upload your own image and use the design options to edit the size, ratio and whether you want the image to open in a lightbox or not (a larger version pops up when the users clicks on it). For our images, we are using the following settings (note that your image should be at least 1000px wide to look good on all screens).
– Image ratio – square
– Image width (leave blank)
Columns don’t just have the capability of adding a featured image, but they can also accommodate a featured video. This is a great way to create a video gallery. Instead of uploading a featured image, open the featured image drop-down and select the featured video tab. Here you can insert any embeddable link – for example, YouTube, Vimeo, and even SoundCloud, Spotify or Instagram posts can be embedded as featured media – give it a try!
Below the gallery is another slider, similar to the homepage and about page. We’re going to use the exact same background settings, but, instead of directing visitors to the gallery page (which they are already on), we’ll direct them to the blog instead. Remember, we haven’t created the blog page yet, so we’ll come back and add in the links later.
Lastly, we have a contact form which we are going to keep exactly the same. However, take a look back at step 4 to see how to edit contact forms.
Creating a blog
Blogging is a great way to attract visitors to your site and therefore boost your search engine rankings…it’s also meant to be a great form of therapy too.
Start in the same way as steps 5 and 6 by adding in a new page, but this time, select the Blog 2 Colummns page template.
At this point, we haven’t created any blog posts, so this page might look a little bare. Start off by editing the slider widget at the top of the page in the usual way – a high quality background image, a title and an excerpt. Below this is a content widget – this would usually be a great space to write something about yourself, but, since we already have an about page and an overview on the homepage, we’re going to go right ahead and delete this content widget.
Next in line is a posts widget. So far, this will just have a title and excerpt (which we know how to edit) and the default blog post that is created when you sign up to Skizzar (‘Hello World’). The way the posts widget works is to display posts that you have written in the dashboard. Let’s create a test post so you can see how it works. Navigate to the dashboard by hovering over the Skizzar logo in the customizer and clicking on Dashboard. From here, select Blog Posts > Add a New Post. Give your post a title, and some content – for the purpose of this tutorial, we’ll just add in some holding text. Blog posts can be added to categories and assigned tags using the category and tags boxes on the right. Each blog post can also have a single featured image – this is the main image for your post, as usual, you’ll want something high quality and at least 2000px wide. Once you’ve created your test post, hit Save & Publish and your post will instantly be added to your blog page – simple right!
We’ve whizzed through creating a blog, but you can check out our more in depth tutorial on this subject here: help.skizzar.com/blogging-and-creating-blog-posts
Editing your website navigation
Now we’ve created our 4 pages, you may wish to change the order and display settings of the menu, so let’s take a look at how to do that.By default, all new pages are added to the menu at the top of the page, but, Skizzar is incredibly flexible when it comes to creating menus and assigning them to locations on your website. We don’t need anything too fancy on this site, just a simple menu where we can control the order of menu items. From within the customizer, navigate to Menus on the left and click on Create new menu. Give your menu a name, we’re going to use Main Menu and assign it to the Header Menu location – this is the top of your website. Click on the Next button and you’ll be able to add new items to your menu.
Skizzar allows you to add in existing pages, blog posts, categories, custom links and may more page types to your menu. For this tutorial, we’ll keep it simple and add in our 4 existing pages; Home, About, Gallery and Blog. Each item that is added has some simple settings allowing you to change the title – so let’s go ahead and change the title of Gallery to Media. Lastly, let’s add in a custom link that will scroll down to the contact form. Click on Custom link, and in the URL, delete http:// and replace it with #contact. Next, in the label, type Contact and then add it to your menu.
You can re-order your menu simply by dragging and dropping items in the order you wish – so let’s change our menu order to be Home, About, Blog, Gallery, Contact.
It is possible to change the appearance of your menu by navigating to Header > Menu Styling in the main customizer menu. We’re a fan of uppercase menu text, so select Uppercase from the Text Transform dropdown under header menu styling.
Footer – instagram feed and social icons
You may have noticed, at the bottom of each page, an Instagram feed and social media links. These are in a section of your website known as the footer.You can edit the widgets in the footer in the exact same way as the widgets in the body of your website, either shift & click on the widget, or click on the blue edit pencil. Let’s start by changing the instagram feed. Shift & click on the insta feed inside the footer to open up the widget settings. Simply remove the default skizzar_sites instagram handle and add in your own to show your latest 8 images. You can change the number of images, but we find that 8 works best as it consumes an entire row.
To edit the social icons, click the blue edit pencil on the social icons widget. For this widget, instead of columns, slides or buttons we can add several icons. By default, the template displays Facebook, Twitter, Instgram and YouTube – you can add or remove these in the same way as you would add or remove a column in the content widget. We’re going to get rid of the YouTube icon. Each button also has design options available to allow you to customize the way it looks – this is useful if you wish to change the background colour of the buttons or the font settings. For this tutorial, we’re going to leave them as they are.
We can also change the background of the footer on your site easily by navigating to Footer on the customizer main menu. From here, select a colour that you wish, we’re going to use a darker background with a hex value of #111111 (notice how the colour of the text also changes to white on a darker background).
Lastly, we need to add in the links for our social media channels. This is a global setting found on the main menu of the customizer under Site Settings > Social Networks. Here you will find an input list for all your social pipes, simply copy the entire URL into the appropriate input and Skizzar will do the rest – the buttons in your social media widget will now take you to the correct social media pages.
Fonts and Buttons
Ok, we’re getting near to the end now – just the last finishing touches to go!! Skizzar allows you to set global styles for text and buttons on your website. Lets start by looking at how to change fonts.On the main customizer menu, navigate to Site Settings > Fonts.
Skizzar splits text into four categories:
– Body text – this is the main text on your site (i.e. excerpt text)
– Headings – this is all heading text
– Header Menu – the text in your main menu
– Buttons – button text
Skizzar is also integrated with the Google Fonts library, so head over to fonts.google.com to take a look at what all the fonts look like. When choosing a font, it’s important to consider your reader first – whilst a handwritten, swirly font might look nice, it might not be the easiest to read, so start by deciding what sort of font you are after – Sans Serif are blockier, whilst Serif fonts are a bit curvier – often, a mixture of the 2 can work well! For this tutorial, we’re going to use something quite blocky for headings, menus and buttons and then something a little bit more mature for the body – here are the settigns we’re using:
Headings – Lato
Body – Crimson Text
Menu – Lato
Buttons – Roboto
Head over to fonts.google.com where you can also see what font pairs work well together!
Consistency is key when approaching typography – it’s worth making note of the sizes you use for each heading and excerpt and make sure it is the same across your entire site. Now is a good point to check the typography across your site and make changes. In this tutorial, we are using the following typography settings:
H1 Headings (i.e. on sliders):
Size – 60
Letter-spacing – 8
Size – 20
Size – 30
Letter spacing – 6
Size – 20
H5 Headings (i.e. content)
Size – 20
Size – 16
Now let’s chat about buttons. Skizzar splits buttons into 2 types – buttons on dark backgrounds and buttons on light backgrounds – and you can style each from the main customizer menu. Navigate to Site Settings > Buttons and you’ll see a list of design options available for each. For this tutroial, we’re going to change the background colour of buttons on light backgrounds to a hex value of #3498db and reduce border radius to 6px (inline with the Skizzar branding). We’ve also gone in and added a read more button to the about text on the homepage, linking to the new About page.
Final checks and adding a bit of pizazz!
Lastly, we’re going to want to check over each page on our site and make sure everything looks and feels right – try to approach this as a visitor seeing your site for the first time – is the information clear and easy to find? Do they get a good impression of what you are about as soon as they land on the site? Does it look slick and professional (check over your spelling and your grammer…no really!). Check each button, now we have added all our pages, and make sure they link up to the right pages (there’s nothing worse than a broken link!).Once you’ve done all the checks and everything is looking slick, here are a couple of subtle little design tricks we like to add, just to make things look really pro!
– Faint borders between columns
– Read more button style
– Footer menu
– Site icon
– Facebook share image
…and there you have it, stop the clocks! We’ve covered a heck of a lot of topics and design techniques in this post, so you should have no problem adding new pages to your new site or editing up the way it looks – but, if you do need a hand with your site, then we love to help! Just raise a support ticket from your dashboard and let us know how we can help you out.