An introduction to Jigsoar

 Jigsoar is a powerful website builder perfectly suited for web designers and developers to rapidly create and deploy powerful websites on a hosted, web-based, and completely customizable platform.

Jigsoar contains four different sections which allow you to have full control over your website. These sections are the Toolbar, Components, Themes, and Panels.

The Toolbar

The Jigsoar Toolbar lives at the top of your screen and helps you navigate Jigsoar. From the toolbar, you can toggle Edit Mode on and off, and open four different settings panels.

On the left of the toolbar are two buttons. The first opens the settings panel for the page you’re currently on, and the second button opens the statistics panel which ties into Google Analytics.

See Setting up your site for more information on Google Analytics.

Next to these buttons is the edit mode toggle switch. When it’s set to off, the website will look the same to you as it does to the public (minus the toolbar, which is always visible when you’re logged in). When edit mode is turned on, component overlays will appear which let you move, edit, and delete parts of your website.

See An introduction to components for more on components.

On the right side of the toolbar are two more buttons. The one on the very right activates the settings panel, which gives you access to site-wide settings such as the website description, page structure, user management, and more.

For more on Jigsoar's settings, see Setting up your site.

Next to settings is the Themes button. Clicking this will show your favourite themes, which is a list of all themes you’ve set in the past, or chosen to favourite. From this panel you can activate the Theme Browser where you’ll be able to check out all the themes available in Jigsoar.

See the Managing themes section for more on themes.

Components

Components are the fundamental core of Jigsoar. They make up the content that your site consists of - things like text, a photo gallery, contact forms, or a blog are all components that can be moved around, edited, and also deleted.

Jigsoar includes 15 core components which are included in the base fee, and you can use these components as many times as you like.

Advanced users can edit the code for components by using Jigsoar’s code editor.

Themes

Themes are what make your website look good. They dictate the layout, colors, navigation style, and plenty more. Jigsoar comes with 12 themes designed by our team, with more available every month.

The code that powers themes (HTML and CSS) can be completely customized using Jigsoar’s built-in code editor. If you’d like to create a theme from scratch, you can do that too.

Themes also control the style of components through CSS rules which the components inherit. Together, the themes (written in HTML and CSS) and components (written in Javascript and PHP) combine to create your final website.

See the Managing themes section for more on themes.

Panels

Panels are how you interact with page settings, site statistics, your favourite themes, and the site-wide settings. They slide out from either the left or right side of your screen and are central to changing important parts of your website. 

The Trash

When you delete a page or component in Jigsoar, it isn’t gone forever. What you deleted is sent to the Trash (accessible from the settings button in the toolbar), where it can be deleted permanently, or reinstated in case you deleted it by accident or changed your mind.

The time, date, and a record of what user made the deletion are displayed alongside the name of the component or page.

Site Details

Once you’ve signed up for Jigsoar, you’ll be presented with a website and the default Jigsoar theme. If you log out of Jigsoar, you can log back in by or putting /js-login after your site URL. (For example, if your website was www.mysite.com, going to www.mysite.com/js-login would let you log in.)

To begin, give your site a description and set some keywords by opening up the settings panel. To do this, click on the Cog icon in the top right of your screen and select Site details from the menu.

A site description and keywords are useful for search engines like Google, Bing and Yahoo! who use these in search results. This text is also used by social networks when visitors to your site share it on services such as Facebook or Google+.

In Jigsoar, you can edit settings simply by clicking on what you’d like to edit, changing the information in the text field, and then clicking the Save changes button at the bottom of the panel.

In this same screen you can also edit your Site title (which was set when you signed up), as well as the site email address you’d like to use when your website emails people (for example, your customers). By default this will be set to noreply@yourdomain.com

When you first create an account, your website will have a domain name which ends in “.jigsoar.com.” If you’ve purchased a custom domain (for example, www.mydog.com or www.awebsite.org) you can enter this domain name into the Custom domain field.

You will need to point your domain at Jigsoar's IP address: 174.129.246.29

Adding, moving, and deleting pages

Jigsoar provides an easy way to add, delete, and move pages around. Click on the Cog icon in the top right corner of your screen to open up the Settings panel and click on Page structure.

To add a new page, click on the Add new page button at the bottom of the panel. The page will be added to the bottom of your page list.

To move a page around, simply roll over it with your mouse and then click and drag the three dots that appear to the left of the page name. You can rearrange the order of pages as well as nest pages up to three levels deep. This will create a “dropdown” effect in the navigation menu.

To delete a page, roll over the page name and then click Delete page on the right.

To edit a page, click on its name.

Google Analytics

Jigsoar has in-built support for Google Analytics, which lets you see valuable statistics about your website traffic. It includes the number of unique views, page views, bounce rate, average time on site, and a graph to see how well your website has been performing over time.

To set up Google Analytics you will first need to have a Google account and have Analytics enabled. You can enable Analytics for your Google account by going here: analytics.google.com

Once you’ve got Google Analytics enabled, click on the Cog icon in the top right corner of your screen, and click on Google Analytics in the menu. Here, you can fill in your Analytics account information. You will need to have the following information (provided by Google) to enter into Jigsoar:

The email address you used to sign up to Google Analytics

Your password for Google Analytics

Your Google Analytics profile ID

Your Google Analytics tracking code.

Once you’ve entered all the information, click Save changes. You will now be able to open up the website statistics panel by clicking on the Graph icon on the left of the toolbar. Note that it can sometimes take up to an hour for Google Analytics to start working with Jigsoar.

Managing users and groups

Jigsoar has support for multiple users and groups, as well as the option to set explicit visibility and permissions for users or groups. This lets you set up a website with multiple administrators, or allow your customers to log in themselves.

To manage users and groups, click on the Cog icon in the top right corner of your screen and click on Users / Groups in the menu that appears. If you’ve just created a new site, you’ll be the only user listed and there will be no groups.

To create a new user, click the Create new user button at the bottom of the panel. You’ll be able to give the user a name, an email address, and a password which they will use to sign in. There are also two toggle switches that let you set whether a user is active on the site (can actually log in or not), and whether they will receive emails (such as newsletters).

To add them to a group, decide which groups you’d like the user to be a member of, and select those. Once you’re finished, click Save changes at the bottom of the screen and your new user will now be listed in the list of all users. You can of course choose to put the new user in no group.

To create a new group, click the Create new group button.

Browse the theme library

Jigsoar comes with 12 default themes designed by our team. To browse these themes, click on the Themes icon near the top right corner of your screen and then click the Browse all themes button.

Browse through themes by clicking the left or right arrow on either side of the theme name. Jigsoar gives you an abstract preview of the theme’s structure and color scheme. To use the theme straight away, click Use this theme now. All themes you use will automatically be added to your favourites.

To only add it to your favourites for use later, or to edit it before you set it as your current theme, click Add to favourites.

You can click on the icons in the top right of the theme browser to change between Carousel view and Thumbnail view depending on your preference.

Editing a theme

Jigsoar gives you the ability to fully customize the HTML and CSS code that makes up a theme. If you are familiar with HTML and CSS, you can edit a theme by entering Jigsoar’s in-built code editor.

To start the code editor and edit a theme, click on the Themes icon in the toolbar, and click on Edit which appears underneath a theme once you roll over it. The code editor will launch in a new tab.

See Using the in-built code editor for more information on editing themes.

Creating a blank theme

You can create a new blank theme by clicking on New theme in the Favorite themes panel. Creating a new blank theme does not set that theme as the current theme. Your new theme will have some basic CSS and HTML that provides browser compatibility and will get you started, but it’s a completely blank slate for those who know HTML and CSS.

An introduction to components

Components are at the heart of Jigsoar. They are the bits and pieces that make up your website content. Jigsoar comes with 18 “core” components (included in the $14/month fee) and one extra component (available at $4 extra a month).

Components provide the functionality of your website, and house your content. Without them, your website would just be a blank page. Everything in Jigsoar is an component: your site title, the navigation menu, the slideshow, any text, galleries, or contact forms. They can all be edited, moved, and deleted. 

Add, move, and delete components

components can be added by clicking the Add content button in a content area. Content areas are defined in the theme’s HTML file, which you can edit. Editing themes is out of the scope of this chapter, but for more on it, see Managing themes: Editing a theme.

To move an component around, toggle Edit mode on by flicking the switch in the toolbar and simply click and hold on the black bar that appears when you roll over some content. You will then be able to drag the component into a different position on the page.

To delete an component, simply click on the Trash icon in the black bar. The component will be moved to the Trash (accessible from the settings panel), and will remain there until it’s deleted permanently by yourself, or restored.

Editing a component

Each component has its own set of options which allow some customization without having to dive into the code. To access an component’s options, click on the cog icon in the black bar that appears when you hover over some content.

Components are at the heart of Jigsoar. They are the bits and pieces that make up your website content. Jigsoar comes with 18 “core” components (included in the $14/month fee) and one extra component (available at $4 extra a month).

components provide the functionality of your website, and house your content. Without them, your website would just be a blank page. Everything in Jigsoar is an component: your site title, the navigation menu, the slideshow, any text, galleries, or contact forms. They can all be edited, moved, and deleted.

components can be added by clicking the Add content button in a content area. Content areas are defined in the theme’s HTML file, which you can edit. Editing themes is out of the scope of this chapter, but for more on it, see Managing themes: Editing a theme.

To move an component around, toggle Edit mode on by flicking the switch in the toolbar and simply click and hold on the black bar that appears when you roll over some content. You will then be able to drag the component into a different position on the page.

To delete an component, simply click on the Trash icon in the black bar. The component will be moved to the Trash (accessible from the settings panel), and will remain there until it’s deleted permanently by yourself, or restored.

The built-in code editor

Jigsoar has an built-in code editor which supports syntaxt highlighting for a variety of web languages, and simple auto-completion. It also acts as a file manager for your code, and allows you to upload new images to use in the theme, as well as view and edit component files for full control over your website.

To launch the code editor, click on the Themes button to the right of the toolbar, and click on Edit for the theme you wish to edit. The code editor will open in a new tab.

The code editor is split into two columns - on the left is a list view of your Files, Images, Containers, or component files, depending on which tab you have active. On the right is the main pane with a large view of the code you’re currently working on, with tabs for multiple files at the top.

Uploading new files

To upload a new file, click on the Files or Images tab in the list column on the left, and click on Upload new file at the bottom of the list.

There is a 25mb limit on individual file uploads.