Close

customizer

Add Projects to Your Skizzar Website

Now you have created projects in your dashboard, you need to use the projects widget to display them on your page. To do this, create a blank page (or navigate to an existing page) and click on Customize.

When the customizer has loaded, add a new widget by navigating to Edit Layout > *Page Name* Body > Add Widget and select Projects from the list of widgets.

The projects widget is very similar to the posts widget and will display all the projects you have created in the dashboard. You can change the display settings for this widget to alter the appearance of how your projects are listed. In the video tutorial you will see that we have changed the display settings to an overlay appearance in 2 columns. However, it is easy to achieve a number of different layout settings using the option provided.

How to Create a Project

Projects are a great way to showcase a portfolio of your work on your website. Similar to creating a blog post, there are 2 steps involved with creating a project, first you must make the project in the dashboard, then, you must add the projects widget to your website to display them. This video tutorial will show you how to create a project in the dashboard.

To get started, from your website’s dashboard go to Projects > Add New. Give your project a title and some content describing the details of your project.

Once you have added all your content you can set display settings for your project and add a gallery of images. Scroll down and you will see these settings underneath the text editor, they look a bit like this:

screen-shot-2016-10-30-at-20-31-39

These settings will allow you to set the text for the labels and details of your project, on the Layout tab you can change the way your project will be displayed and the video tab allows you to upload a video for your project.

Below this box you will be able to upload several images to your project gallery (you can change the way these images are displayed in the Layout Settings above).

On the right of the page you will see categories (which are filterable), tags and featured image (this is the main image for your project and is recommended that you use one).

Once you are done, save the project and repeat these steps to add more!

Integrating Forms with Mailchimp / Creating a Subscribe Form

This Tutorial assumes you have built or know how to build a form using the Skizzar form builder widget. If you don’t know then check out our tutorial on building a form for your Skizzar website here.

We’re going to talk about linking your form with a Mailchimp list. For this, you will need:

Open up the customizer to get started and Shift + Click on your contact form to open the settings (or navigate to Edit Layout > *Your Page* Body > Form)

Skizzar allows you to collect 3 types of data and send it to mailchimp

  1. Email address (required)
  2. First Name
  3. Last Name

So for Mailchimp integration to work you must at least have a form that asks for the users email address.

Once you have built your form, click on the Settings tab on the right and check the Mailchimp Integration – this will reveal the following options:

  • Mailchimp List ID – this is the unique ID for your mailchimp list – find it here
  • Mailchimp API key – this is a unique key for your Mailchimp account – find it here
  • Email Unique ID – this is the unique name for your Email input
  • Fname Unique ID – this is the unique name for your First Name input
  • Lname Unique ID – this is the unique name for your Last Name input

Top Tip: Since the only required field is Email – you can make a super minialist form that just collects an email address – like a standard Subscribe form.

Once you’re done, hit Save and Publish and you’re done

skizzar_website_builder_integrate_your_form_with_mailchimp

Make sure your unique name for your Email, First name and Last name inputs match up to the Email Unique ID, Fname Unique ID & Lname Unique ID in your widget settings

Add a form to your Skizzar website

There are many types of forms on the world wide web – contact forms, register forms, subscription forms, polls…see, loads! Forms are a great way of gathering information from your visitors and providing an easy way for them to get in touch with you without you having to part with your email address or phone number (since some people don’t like to do that).

Since each form is different, we have created a brilliantly flexible Form Builder widget for Skizzar. This allows you to create the exact form you want on your site.

In this tutorial we’ll look at how to create a simple form and link it to your email address.

Start by logging in and on your site navigate to the customizer. Once in the customizer, you’ll want to go to Edit Layout > *PAGE NAME* Body > Add Widgets and select the Forms widget.

This might look a little scary at first, but it’s simple, instead of columns (like in the content widget) we have form inputs – inputs can be text, email, text area (useful for writting messages), checkboxes, radio buttons and dropdown selects.

Start by selecting the input type you want and adding text to the label for that input i.e. First Name (for the visitor to enter their first name). Decide whether you want this input to be required by your visitors (i.e. the form won’t send if it’s not filled in), if so, make sure “Required” is checked.

This next bit is important! Each input needs to have a unique name which it is identified by – unique names MUST BE LOWER CASE and MUST HAVE NO SPACES OR SPECIAL CHARACTERS.

Here is a good example of a unique name for your input:
first_name

and here are some bad examples:
First Name
Firstname
#firstname
First Name!

As a rule of thumb, make all capital letters small, and replace spaces with either – or _

You can change the width of your inputs by selecting the number of columns it will occupy. This is a great feature if you want First name and Last name to sit in line with each other, then you can make them occupy 6 out of 12 columns each.

Once you have built your form, it is good practice to check it’s going to send to the correct email address. Click on the Settings tab on the right and make sure your email address is entered. You can also set the subject of your emails from this tab too.

Once you’re done, hit Save and Publish and you’re good to go! We recommend sending yourself a test email with your form to make sure it’s all working properly.

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.

 

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