1. Log into cPanel and click the icon that says "BaseKit SiteBuilder" under the Software/Services section of cPanel.

2. You will be given the option for which domain you'd like to build a website for. This will list all the domains, subdomains, and addon domains on your account. Then click on the "Setup SiteBuilder" icon for the domain on which you'd like to build a site.

3. Next, choose what subdomain you'd like BaseKit to use as your preview URL and click the "Finish Setup" button.

4. Next, click the "Start Building!" icon to be taken to BaseKit to build your site.

5. Click on "Publish" in BaseKit when you're done building your site.

6. Go back to your cPanel and click on the BaseKit logo again to go to the BaseKit page. Click on the radio button with your domain name to publish the site to your domain. Click the "publish" button on the dialog box that comes up to publish.

If you want to unpublish your site or edit your site later, you can click on the BaseKit icon again, and make those changes. (Clicking the green checkmark allows you to unpublish.)

Builder Layout

Part 2 of 14 of the BaseKit Getting Started Guide

BaseKit is designed to make creating a new website easy. This process becomes easier as you gain familiarity with the layout of the system.

Navigation Tabs

At the top of the page there are 5 tabs for navigation between different functions of publishing:

Design Tab

Most of your work on your site will be done in the Design Tab, including all design, layout, content, and widgets. We will talk about the functions of this tab extensively below.

Preview Tab

Click the Preview Tab to view the site before it's been published and ensure everything looks and works the way you want it to.

Themes Tab

This tab allows you to change your color scheme for your template.

Manage Tab

Use the manage tab to change your account email, your site Title and Description, manage domains, SEO settings, users, comments, and your database.

If you want to scrap your site and start fresh with a new template, you would want to click the "Add Site" link in the left column of this page to create a new site and select a new template.

Publish

Click the Publish link to publish your new website!

Help / Logout

If you run into problems while using BaseKit, the Help link in the top right corner of your page will pull up a search field to help you find the answers you need. When you're done building, click the Logout button to end your session.

Left Design Bar

Design Bar

This bar is visible when you are working in the Design Tab. There are options for Site Layout, adding Widgets, and adding media to your site.

Click on the "<" tab (extending from the Design Bar into the site editing area) to minimize the Design bar and focus on editing the content of your website.

Detailed features of and instructions for using this bar are below.

Bottom Settings Bar

This bar appears at the bottom of the design view when the feature of your site has extra settings that can be adjusted.

Typically you will see this bar when you click the gear icon of a site feature.

The settings bar includes image settings, adding CSS, and customizing widgets. The screenshot above shows an example of what the settings bar looks like when editing image settings. Different features will have different settings.

Login

Part 3 of 14 of the BaseKit Getting Started Guide

There's no need to log into BaseKit! It is integrated into cPanel.

1. Login to cPanel (Instructions in welcome mail)
2. Click on "BaseKit SiteBuilder" under "Software Services."

3. Select the site you want to work on. You can select any domain or subdomain already added to your account*.
4. If this is the first time you logged in for this domain or subdomain, it will give you the option to choose a template.  Otherwise you will go directly into design mode.

*Your primary domain name (the one you signed up with unless you changed it) will be listed already, as well as addon domains and subdomains already added to your account.  Additional domains will need to be added as addon domains first, and additional subdomains would need to be added as subdomains before they will appear here.

Choose a Template

Part 4 of 14 of the BaseKit Getting Started Guide

Set Site Defaults

Set Theme Colors

Once you've chosen your theme, choose your color palette by clicking the Theme Colors link in the top left corner of the web page editing area, next to the Add Pages link.

Set Theme Fonts

Choose your theme fonts by clicking the Theme Fonts link in the top left corner of the web page editing area, next to the Theme Colors link.

Set Background

Set your site background as a color, gradient, or image by clicking the Background link in the top left corner of the web page editing area, next to the Set Theme Fonts link.

Site layout

Part 6 of 14 of the BaseKit Getting Started Guide

The top of the left Design bar is an area for organizing the pages of your site.

There is a "+" link for adding pages or folders to your site. Listed below this are all the current pages.

When you hover your mouse over an existing page, you have the option to delete the page, clone the page, edit the Name and URL, edit SEO settings, and create page and body scripts.

Click on a page to edit the content of that page.

You can also change the layout using widgets such as Columns Layout and Navigation Menu.

Editing Text

Part 7 of 14 of the BaseKit Getting Started Guide

Edit Existing Text

To edit existing text, simply double click on the text box you'd like to change and type in (or paste in) your new text. The bubble above the text box gives your options like changing the text style; color; font; size; bold or italics; left, center, and right justification; bullets and numbering; linking; and even editing the text using an HTML code editor.

Add New Text

To create a new text box, just drag the Text Block widget (located in the left design bar, under the Basics category) and drop it in the location of your choice. The Text Block widget is on the Widgets tab (bottom half of left Design bar), in the Basics section.

Resize Text Area

You can resize any text box by clicking on the text area and dragging the resizing squares at the corners and sides of the box to your desired position.

Move Text

To move a block of text, single click on the block you wish to move, and click on the move icon. Then drag the box to its new location.

Delete Text

To delete a block of text, single click on the block and click the red "x".

Editing Images

Part 8 of 14 of the BaseKit Getting Started Guide

In this article we cover:

• Uploading Images
• Add Images
• Change Images
• Resize Images
• Move Images
• Edit Image Settings
• Delete Images

Upload

You have three options for uploading:

• 1. Quick Upload: Double click on the image, click “UPLOAD” link in the bottom left of the pop up, and choose the images you’d like to add from your local computer. You can select up to 5 at a time.
• 2. Media Tab: Click the Media Tab in the left Design management column. Click “ADD” to choose the images you’d like to add from your local computer. You can select up to 5 at a time. Then just drag the image you want to the image in the template to replace.
• 3. Single click the image, and click the "+" icon to upload.

Add Images

To create a new area for an image, just drag the Image widget and drop it in the location of your choice. The Image widget is on the Widgets tab (bottom half of left Design bar), in the Basics section. See below:

Change Images

To change an image to a new image:

• Doubleclick the image to open the media library’s image choices. Click the new image you want to use.

Resize Images

To resize an image:

• Click to select the image. Resizing boxes will appear around the edge of the image. Click and drag those boxes until the image is the desired size.
• Reset your changes back to the original size by clicking the refresh button.

Move Images

To move an image:

• Click to select the image. The options for the image will appear over the top left corner of the image. Click on the arrow icon to enter Move mode, then just drag the image to the desired area. Guide lines will appear to make the image easy to align with existing sections of the page.

Edit Image Settings

To edit an image’s settings, click to select the image. The options for the image will appear over the top left corner of the image. Click the gear icon to open the Settings/CSS editor. This will allow you to:

Reset Size

Choose a new width and height for your image. To disable constrained proportions, click the lock icon. Click the Refresh button to reset to the original image size.

Add Link

Choose linking options when clicking this image.

• Internal link - takes you to another page on your site

• External link - takes you to a page off your site

• Link options - allows you to open your link in same window or a new window

Alt Tag

Set what text appears if the image cannot be displayed

Title Tag

Set what text appears when you hover over the image

Rollover Image

Drag an image from the Media Gallery to set an image to appear when your mouse rolls over your image.

Lightbox Image

Drag an image from the Media Gallery to set an image to open in a "lightbox"- an overlay of the image in your current browser window.

Delete Images

To delete an image:

• Click to select the image. The options for the image will appear over the top left corner of the image. Click the red X icon over the top left corner of the image.

Widgets

Part 9 of 14 of the BaseKit Getting Started Guide

Widgets allow you to add and arrange content on your website using BaseKit.

In the previous sections, we have already discussed the use of the basic widgets, such as adding text or adding images. These are simply quick ways to drag and drop new text areas and images to your site.

The rest of the widgets work very similarly; simply drag your chosen widget to the spot you'd like it to have on your website.

Click the gear icon to make changes to the widget's settings and customize it to fit your needs.

There are several types of widgets to choose from:

Content Widgets

You can set up content related features such as columns, navigation, Google Maps, video, comments, site search, image carousel, a sitemap and backgrounds with Content Widgets.

Form Widgets

Form Widgets allow you to set up forms on your website.

Social Widgets

You can set up Twitter feeds, RSS feeds, Flickr, Tweet This links, Facebook Like links, and icons linking to the most popular social media sites with the Social Widgets.

Template Widgets

Template Widgets allow you to add pre-formatted blocks to your site, such as navigation bars, footers, top bars, etc.

Text Block Widget

This allows you to add and arrange text on your website.

Image Widget

The image widget allows you to add and arrange images to your site.

Content Widgets

Part 10 of 14 of the BaseKit Getting Started Guide

These widgets can all be found in the Content section of the widget tab.

Columns Layout

The column widget allows you to make place holders and add separation for the different features of your web page. Simply drag the widget to the area to which you would like to add columns. By default it sets two columns, but by clicking the gear, you can add up to 6 columns and set the gutter width between columns.

For step-by-step instructions, visit our page on Setting Up & Managing Columns.

Navigation Menu

The Navigation Menu allows you to add site navigation to any page, in any location. The gear icon opens the settings bar at the bottom of the builder. The settings tab lets you customize the navigation menu by choosing horizontal or vertical orientation, alignment, which pages to display, and padding/spacing between links. The styles tab allows you to customize the style of your navigation links, including selected links and behavior when hovering your mouse over a link. Options include colors, font, background, spacing, borders, shadows, and visual FX.

Google Maps

Use this widget to add a Google Map to your website! Simply drag it and drop in an open area (use the Columns Layout widget to create one). Clicking the gear icon gives you the option to set a default address to display and you can drag and drop many icons to the map to mark points of interest.

Video

To add a video to your website, drag this widget to the column where you want the video. By default it will add a YouTube video. Click on the gear to add the embed code for the video of your choice.

For step-by-step instructions, please visit How to Add Video.

Comments

This widget adds a comments section for your visitors. Edit the look by clicking on the gear icon at the top.

Site Search

Click and drag this widget insert a search bar into your web page. You can alter the size of this widget by clicking and dragging one corner or side. The gear allows you to edit the message in the search box.

Carousel

Click and drag this widget to insert a carousel of rotating images into your web page. Drag and drop images from the Media Center Tab to the Carousel to add them. You can resize the carousel by clicking and dragging the corner or size of the box. The gear will allow you to add and remove pages, change the rate at which the images change, and turn on/off the page indicator and page turning buttons.

For step-by-step instructions, please visit Image Carousel Widget in BaseKit.

Site Map

Drag and drop this widget where you'd like to add a site map.

Embed

Drag and drop the embed widget anywhere you'd like to embed some HTML or scripts. Click the gear and paste your code into the settings bar at the bottom of your screen.

Background

The background widget lets you establish a separate background for an area of your website. Click the gear to set the image and its options, background, alignment, and radius, opacity and padding for your background image.

BaseKit: Setting Up & Managing Columns

When you first create a new page in BaseKit, it is only one column wide.  But it may be useful to divide your page into columns to make it easier to place navigation and content on the page.

To divide your page into columns, follow these steps while viewing the page you want to change:

1. Click on "Widgets" on the left side of the screen.
2. Click on "Content" to expand the Content Widget icons (if not already expanded).
3. Drag the "Column Layout" icon to the section of the page you want to divide into columns.  This will automatically divide the section into two columns.
4. Click on the Gear icon immediately above the columns you just created to view the Settings.  A dialog box will appear with the Column Settings.
5. If you want more than 2 columns, select the number of columns.  It should immediately change once you select the number from the drop down list.
6. Adjust the gutter width to control how much blank space is between the columns.
7. You can close the dialog box by clicking on the X.
8. You can adjust the width of the columns by dragging the gutters (the space between the columns).  When you hover over the gutter, you would get a double arrow indicating that you can drag the gutter left or right.

The column widget just divides the page into columns, but does not actually specify what content is to go into each column.  You would select other widgets, like the Text Block widget or the Image widget to specify what you want in the column.

You can have multiple columns areas per page, and you can even put column areas within existing columns to create complex layouts.  For example, you can use the column widget to divide the page into a content area and a sidebar, and then insert another column area within the content area to further subdivide the page.

Deleting Columns

You can delete a column area by clicking on the column area you want to remove.  Be careful not to click on content you placed into the columns, because you do not want to accidentally delete that instead.  You can tell the column are is selected because the outside border of the column area will change to a bolder line with tiny stripes.

You can then click on the red X immediately above the column area you just selected. 

It will ask you to confirm you wish to deleted this widget.  Click "CONFIRM" only if you are sure. 

Be careful when deleting a column area, because it will permanently delete the column area AND everything inside of it, including images, text and any other widget you added.

BaseKit: How to add a Google Map

In BaseKit, you can use the Google Maps Content Widget to insert a interactive Google Map.  You can specify a general location, such as a city or region, or you can specify a specific address.  You have the choice of showing a street map, satellite map or a hybrid of the two.  You can even add markers to the map showing locations you want to draw attention to.

Inserting a Google Map

1. Navigate to the page you want to edit in BaseKit (or create a new page).  The list of pages will be in the left hand corner of the screen.
2. Open the Content Widget section by clicking on the words "Content" on the left side of the screen (if not already visible).
3. Locate the icon for Google Maps in the left column, and drag it to where you want it on the page. (Dragging is accomplished by clicking on the Google Maps icon and holding down the left mouse button, while moving the mouse to where you want it to be placed on the page. Once there, stop pressing the mouse button and you will "drop" the Google Map on the page.

Resizing and Moving the Map

When you dropped the Google Map on your page, it expanded to take up as much space as it could.  This may not have been what you intended.  You can change the size or the map as well as move the map to a different part of the page by doing the following:

1. Click on the Google Map.
2. You will notice eight (8) white squares along the borders of the map.  You can click on any of those squares, and while you are holding down the left mouse button, stretch and resize the various sides of the map.
3. You can also click anywhere on the map itself (other than the white squares) or on the Move icon immediately above the map, and while holding down the left mouse button, drag the map anywhere on the page you want it to appear.

Change the Location Shown on the Map

When you first place the map, it does not know the location you want to show, so it just picks a place.  Since that is probably not what you want it to show, you can change it by:

1. Double Click on the Map or Press the little Gear icon directly above the map.  This will cause the settings dialog box to appear.
2. Where it says "Find Address," enter the location or street address that you want centered on the map.
3. After you type in the location or address, press the enter key on your keyboard (while your cursor is still in the "Find Address" field.  This will center the map on the location. 

Note: Google tries to guess what you mean if you are not specific enough, and sometimes it guesses wrong.  Be sure to be as specific as possible to make sure the correct location shows up.

Configuring the Map

You can select the type of map, the zoom level and whether the zoom and pan buttons appear on the map. 

To make these changes, you will need to open the Settings dialog box by double clicking on the map or pressing the little Gear icon directly above the map.  Once there, you can make the following changes:

• Map Type: Use the drop down menu to select from Street Map, Satellite Map, or Hybrid Map.
• Map Zoom: Use this control to determine the zoom level.  Drag the dot to the left to zoom out, and drag the dot to the left to zoom in.
• Zoom + pan buttons: Check the box next to "zoom + pan buttons" to allow your visitors to control the zoom level and move around the map.  If it is unchecked, visitors must view the map exactly how you configured it and cannot change it.

Adding Markers to the Map

When you select the address, it only centers the map on that location, but does not put a marker.  You can add markers to the map and chose from different marker types.  You are not limited to one marker and you can even use your own image as the marker.

1. Double Click on the Map or Press the little Gear icon directly above the map.  This will cause the settings dialog box to appear.
2. Click on the marker you want to use and drag it to the location on the map.  (Dragging is done by holding down the left mouse key while moving the mouse to where you want it to be placed.  Once there, let go of the mouse button to drop the marker on the map.)

Adding Your Own Marker Image

To use your own image, you will first need to add an image to BaseKit.  Once added, it will show up on the images list in the "Media" section under images.  For the best effect, you may want to use an image with a transparent background.

1. Click on the Media tab in the left column.
2. If you have not added the image yet, you will need to add an image.  You can do that by clicking on "+ Add" and it will open a dialog box asking which image you want to upload.  Find the image on your hard drive and click on the OK or Open button to upload the image.
3. Locate the image in the images tab.  (Click on the word "Images" to expand it, if necessary.)
4. Click on the image you want, and drag it to the gray square that says "Drop your image above."  Once you drop it there, it will add it to the list of available markers.
5. Now that it is on the list of available markers, you can now drag it anywhere on the Google Map.

BaseKit: How to Add Video

A good way to capture people's attention is to add video to your website. With BaseKit, it is easy to add videos from YouTube, Vimeo or similar sites.

Are you uploading or embedding?

If you want to add video from YouTube, Vimeo or smilar sites, you are embedding the video.  What this means is that the video is located on the video site, and you are displaying it as part of your web page.  The video itself is not actually stored on your hosting account.

If you want to add a video file to your site from your computer's hard drive, then you are uploading the video rather than embedding it.  You would need to upload the video from the Files tab instead.

Should I upload or embed?

It really is up to you.  Uploading the video will give you more control over the look of the video's player, however if you upload your video to YouTube or another video site, and embed the code instead, you get additional distribution of your video on that site.

Do you need the Video widget or the Embed Widget?

If your embed code starts with <iframe> then you would want to use the Embed widget instead of the Video widget.  If your embed code starts with <object> then use the video widget as described below.

Embedding the Video

First you will need to use the Video Widget to place the video on the page where you want it.  It will insert a placeholder video that you can change in the later steps.

1. Click on the Widgets tab.
2. Click on the Contents tab to expand it (if not already expanded)
3. Drag the Video icon onto the page where you want it.
4. Once one the page, you can resize the video by using the white squares on the edges of the video.
5. You can also move the video around the page to place it where you want by clicking anywhere on the video or on the move icon immediately above the video.

Selecting Your Video / Getting the Embed Code

Now that the Video Widget is placed on the page where you want it, we will need to obtain the video embed code from YouTube or another source.  In this example, we will use YouTube, but you can actually use any valid video embed code.

Getting the Embed Code from YouTube

In a new tab or window, you will want to open YouTube.  Keep BaseKit open in another tab or window so that we can get back to it in a moment.

1. Find the video on YouTube you want to upload.  If it is your own video, you will need to upload it to YouTube first.
2. Click on the Share button under the video.
3. Click on the Embed button that appears after clicking on the Share button.
4. The embed code and several options should appear.
5. Check "Use old embed code."
6. Select the size of the video by clicking on the desired size.  You can alternately select a specific width and height if you do not want to use the predefined sizes.
7. Copy the embed code.

Added the Embed Code in BaseKit

Now that you have the embed code, we can insert it into your Video Widget in BaseKit.

1. Select the video by clicking on it (if its not already selected).
2. Click on the Gear icon to open the Settings panel.
3. Paste the embed code you obtained from YouTube, Vimeo or any other video site into the Embed Code field.  If there is something already there, you can replace it with the new embed code you just obtained.  This should change the video.
4. Click on the X to close the Settings panel.

A screenshot of the video will appear in edit mode.  The video will not play in edit mode, but will be fully functional once published.on the final site.

Image Carousel Widget in BaseKit

There will be times that you will want to maximize your space and give as much information as possible without having to have your visitors scroll through your entire page. We recommend you try using a Carousel. It is a very versatile tool that will help you give your site a special “pop.”

Step 1: Placing the Carousel on the Page

1. Login into BaseKit. For assistance click here.
2. Expand the Content Widgets in BaseKit.
3. Drag and drop the Carousel widget where you would like your Carousel to be on your page.

Step 2: Setting Up a Carousel

Click the edit gear to change the settings.

1. Add pages to the Carousel by clicking the Add page button (1). Remove pages by click the remove button.
2. Set the time interval using the interval slider (2) . If the Slider is set to 0 seconds the carousel will only advance when the user clicks the next/previous button
3. Tick the Next / Prev checkbox (3) to show the Next and Previous Buttons
4. Tick the Thumbs checkbox (4) to show the image thumbnails

Step 3: Adding Content to the Carousel

The Carousel widget supports Text, Images and Columns only. It does not support video.

1. Drag a Text, Images or Columns widget into the Carousel.
2. To add another widget, click the circular buttons on the Carousel and drag another widget into the field.

If you need any further assistance please feel free to contact us via chat, phone, or ticket.

Form Widgets

Part 11 of 14 of the BaseKit Getting Started Guide

These widgets can all be found in the Form section of the widget tab. Form Widgets add features to a form on your website. Each new widget will have it's own gear icon for the settings of that field.

Form Widget

Add a form to an area of your site.

Text Box

Add a normal (one-line tall) text box to your form.

Text Area

Add a larger (multi-line) text area to your form.

Select Box

Add a drop-down box to your form. Use the gear icon to change the drop-down choices.

Star Rating

Add a rating option to your form.

Datepicker

Add a calendar to your form.

Social Widgets

Part 12 of 14 of the BaseKit Getting Started Guide

These widgets can all be found in the Social section of the widget tab. The Social Widgets allow you to stay connected through social media and drive more traffic to your site.

Use the social widgets to add the following to your website:

• any Twitter Feed
• a RSS Feed
• Flickr
• a group of icons linking to the most popular social media sites
• a "Tweet This" link
• a "Facebook Like" link

All the above widgets are customizable, simply click on the gear to access the settings bar.

Template Widgets

Part 13 of 14 of the BaseKit Getting Started Guide

These widgets can all be found in the Template section of the widget tab. These widgets allow you to add pre-formatted blocks to your site, such as navigation bars, footers, top bars, etc.

You can even create your own template widget to ensure you add a consistent widget to various pages of your website.

Media and Files

Part 14 of 14 of the BaseKit Getting Started Guide

To add media to your site, click the Media tab in the left Design bar, next to the Widgets tab.

Add Media

To add media from your local computer, click the "+" link to choose what files you'd like to add. BaseKit will upload this to your Media Center and it will display in a list below the add link. You can search these files with the search function (that's the field with the magnifying glass) or you can scroll through the files. They are organized in two groups: files and images.

Files

Files can be dragged and dropped anywhere on your site and will display as a link to download the file. You can change the file description by editing the text, or click the gear to set the site-wide styles for File Names and File Descriptions.
Images

If you drag and drop an image, you will add it to your site. Once added, you can edit it like any other image.