Close

Getting Started

10) Fonts

The right fonts can really make or break your site, so it’s worth taking the time to think about the kind of fonts you want to use. Skizzar integrates with Google Fonts which provides a great and very extensive library of modern web fonts.

On your skizzar site you can apply google fonts to four types of text: Body text, Headings, Menu text and Button text. To change fonts, navigate to Site Settings > Fonts on the main menu in the customizer

Top tip: we like to use this site http://fontpair.co to find google fonts that work well together.

9) Button styling

With Skizzar it’s possible to add button links to columns, slides and call to action widgets, you can link these to either an external URL or to an existing page on your website.

It is possible to change the overall appearance of the buttons on your site and Skizzar gives you 2 scenarios to do this, 1) button appearance on light backgrounds 2) button appearance on dark backgrounds.

To change these settings, go to Site Settings > Buttons on the main menu in the customizer. From here you can select a background type (solid, transparent or gradient), change the text colour, text appearance and button border settings.

On top of this, each widget allows you to change the button settings which will override the main settings – this is useful if you want a custom button for a particular part of your site.

7) Adding and editing menus on your Skizzar website

Now that you have created a few pages, you will want to add a menu to your site so your visitors can navigate around.

Open up the customizer to get started and on the left menu, click on Menus

By default, Skizzar creates a menu for you with your first page, click on this menu (it’s called Main Menu). To add more items, click on Add Items – from here you can select Pages, Categories, add custom links and many more filters to add as items to your menu.

Note: Make sure that your menu is assigned to an area of your Skizzar site by checking one of the menu locations on the menu page. By default, the Main Menu is set to appear in the Header of your website.

You can drag and drop menu items to change the order, as well as expand menu items to rename them.

To edit the look of your menu, go back to the main page of the customizer and click on Header > Menu Styling. From here you can edit the look of your menu items, including the colour, text appearance and spacing between menu items.

6) Adding a blog and blog posts to your Skizzar website

Blogging is a great way of keeping your visitors in touch with what you are doing on a regular basis, it’s also a very good way of increasing your search engine ranking as Google in particular likes new content – plus, you can advertise when you have published a new blog post/article on your social networks which is a great way to drive traffic to your site.

Aside from that very commercial approach, you may just enjoy writing, in which case, Skizzar is for you as we have a very powerful yet easy to use blogging platform.

There are 2 steps to creating a blog with Skizzar; 1) Write blog posts and 2) Add them to a page in your site (you may need to create a page first)

How to create blog posts

  • Start off by logging in and navigating to your dashboard
  • From the dashboard hover over Blog and click on Add New Post
  • Give your post a name and some content – you can use the design bar at the top of the text editor to add images, links and text styling.
  • On the right of the page you will see a list of Categories (You can add new categories by hovering over Blog and clicking on Categories) add your blog to a category, note that blog posts will default to the uncategorized category
  • You can add tags to your blog post
  • The featured image is the main image for your blog, we recommend a minimum width of 1000px for your featured image.
  • Once you have written your post – click publish (You can also save your post as a draft if you want to finish it off later or publish it at a later date)

Adding posts to your site

  • Once you have created blog posts, you will now need to add them to a page in your site – if you don’t already have a page go to Pages > Add New Page from the dashboard and select a blank template. Give your page a name (e.g. Blog or News) and click on Proceed to customizer
  • Now you’re in the customizer, click on Edit Layout > *Page Name* Body > Add Widget and select the Posts widget
  • This widget will add your latest posts to your page – now you can edit the layout settings for this widget to change how the posts are displayed. From the widget settings you can edit the number of columns, how the columns are displayed, how each post is displayed (Top tip: try the “overlay”setting – it’s one of our favourites!), and you can also edit the information that is displayed (i.e. Author, date, categories, excerpt etc)

Now, whenever you add a new post it will show in this list of posts you have just added. Don’t forget to hit save before you close out of the customizer.

 

5) Adding new pages to your Skizzar website

Once you’ve finished building your first page with Skizzar, you’ll probably want to add another one!

There are several ways to add a new page to your site:

  1. From the customizer, hover over the Skizzar icon in the top left and click on Add New Page
  2. From the dashboard hover over Pages and click on Add New Page
  3. From the dashboard there is also a quick link button next to the visitor stats graph labelled Create a new page

You can choose from several template presets, or at the very bottom choose blank. Give your page a name and click on Proceed to customizer.

To see a list of your site’s pages, from the dashboard hover over Pages and click on Your Pages. You can click on each of your pages and edit the title, export/import the page layout and make a duplicate of the page (a useful feature if all your pages have similar widgets on them).

4) Content widget cont. and featured images

The content widget makes use of columns to add content to your site. The appearance of each column can be edited to make it look how you want it to. Each column can also have a featured image – this is an image that can sit above or to the side of your column, like this:

content_widget_and_featured_images_1_skizzar_website_builder

Skizzar allows you to change the size of your featured image and the image ratio – for example, you can make your images square, circular (Note: the original image must be square for circle ratio to work), landscape and portrait.

Top tip: You should aim for your featured images to be a minimum of 1000px wide to allow for image ratios to work effectively

2) Adding a slider to your site

Adding a striking image to the top of your site is a great way to catch a visitors attention. In this video we look at how to add a slider to the top of your site – this video will also show you the basic concepts of creating page layouts with Skizzar using widgets.

To add a slider to your site,

  1. When logged in, go to your site and click on customize in the admin bar at the top of your site
  2. When viewing your site in the customizer, navigate to Edit Layout > *page name* Body and click on Add Widget
  3. From the list of available widgets, select Slider
  4. You have now added a slider to your page! You can edit the heading, excertp text and button for each slide. If you only have one slide, then it will show as a single image, however, if you have more than one slide then when you hover over your slider you will see arrows that select each slide.
  5. Using the design bar for each slide, you can change the background colour, image and style, change the text location and appearance, add a featured image and change button styles.
  6. On the right hand design bar for the whole slide you can change slider settings (including arrow/dot appearance, slider timing, height and effects)

Don’t forget to hit publish before you close the customizer.