Close

widget

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.

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.

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

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.