1. How Basekit Works

Transcription

1 1. How Basekit Works BaseKit is site building software that runs on an external BaseKit server and is accessible through your cpanel account. To use BaseKit, just follow these steps: 1. Log into cpanel and click the icon that says "BaseKit SiteBuilder" under the Software/Services section of cpanel. You may have to scroll down to find it. 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.

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

3 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.)

4 2. Builder Layout In Basekit 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:

5 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 , 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.

6 Left 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.

7 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. 3. Logging in to Basekit There's no need to log into BaseKit! It is integrated into cpanel. 1.Login to cpanel 2.Click on "BaseKit SiteBuilder" under "Software Services."

8 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. 4. Choose a Template A theme (also referred to as a template or skin) defines how your website looks and feels. The colors and fonts in a theme help set the mood of your website and is part of a visitor's first impression. A theme is separate from the content of your website, and can be changed without affecting the actual content. For example, if you have a page about your company, and it includes a written description, when you change themes, the words will not change, however they may look different, with a different color and/or font than the previous theme. To begin a website, you will need to select a theme (which can be changed later). When Starting a New Website Once you log in, you will be presented with a choice of themes. You can change this later if you want! Pick one that suits your site, and then proceed to building by clicking on "Create your site". This will take you to the Design tab of the builder by default. From here, you can start personalizing your site! Changing the Theme on Your Site

9 You can change the theme any time by doing the following while in BaseKit: 1.Click on Themes in the top menu. 2.Click on the theme(s) you want to preview. A preview of your site with that theme will be shown instantly. You can preview as many as you like. The changes have not been applied to your site at this point. 3.Decide on which theme you like best. 4.Click on the Select" button on the theme you are previewing to apply the theme to your website. 5.Optionally, click on Preview in the top menu to preview your site with the new theme. 6.Click on Design in the top menu to continue editing your website. Keep in mind that changing the theme may affect the layout and alignment of elements on your website. For example, one theme may have a bigger font than another, which would affect how the words on the page flow and align with other items on the page. 5. Set Site Defaults in Basekit 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.

10 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. 6. Site Layout 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. 7. Edit Text 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.

11 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". 8. Editing Images in Basekit 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.

12 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.

13 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

14 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. 9. Widgets Widgets allow you to add and arrange content on your website using BaseKit.

15 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.

16 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. 10. Content Widgets These widgets can all be found in the Content section of the widget tab.

17 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. 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. 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.

18 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. 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. Setting Up and 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.

19 1.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. 2.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. 3.Adjust the gutter width to control how much blank space is between the columns. 4.You can close the dialog box by clicking on the X. 5.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.

20 How to Add a Google Map In Basekit, you can use the Google Maps Content Widget 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.

21 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.

22 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. 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.

23 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.

24 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.

25 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. Adding an Image Carousel 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. 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.

26 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 buttons 3. Tick the Next / Prev checkbox (3) to show the Next and Previous Buttonss 4. Tick the Page Indicators checkbox (4) to show the page indicators. 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.

27 11. Form Widgets in Basekit 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.

28 Star Rating Add a rating option to your form. Datepicker Add a calendar to your form. 12. Social Widgets 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 an RSS Feed Flickr Image Gallery a group of icons linking to the most popular social media sites

29 a "Tweet This" link a "Facebook Like" link All the above widgets are customizable, simply click on the gear to access the settings bar. Adding a Twitter Feed You can add the latest posts from any public Twitter account to your page using the Twitter widget. Let's begin by dragging this content down to make room for our Twitter feed. Adding a Title (optional) Let's add a title to this section using an instance of the Text Block widget (optional). 1. Drag the Text Block widget to the location where you are about to place the Twitter feed. 2. Select the sample text in the text block and delete it. 3. Type the title of this section, such as "Our Twitter Feed" or whatever you would like. 4. Click on "Styles" on the text block menu. 5. Click on "heading 2" or whatever style you prefer. Adding the Twitter Feed The Twitter widget is located in the SOCIAL section of the widgets panel. 1. Drag an instance of the social widget onto your desired location. 2. Click on the widgets gear icon to display the properties panel. 3. Type in a Twitter username here and run a search for a feed. 4. You can also adjust how often this feed should be updated. 5. You can toggle whether or not is displays retweets. 6. Also the maximum number of tweets that can be displayed at any given time can also be adjusted.

30 At this time, the Twitter feed is live and fully functional. Setting the Background Color of the Section (optional) Let's perform an additional step to further integrate it into this particular web design (optional). 1. We will grad an instance of the Background widget and place it on our page. 2. We will then change the color from transparent to white, and adjust the size of the inner padding. 3. Next we drag the previous two widgets, and drop them inside of the background widget. 4. As the final step, we will adjust the placement of the previous content. Adding an RSS Feed You can tap into any publicly available news feed using the RSS widget. The RSS widget is located in the SOCIAL area of the widgets panel. 1. Drag and drop the RSS widget into an area of your page. 2. Click on the widget to display the options tab. 3. Click the gear icon to display the properties panel. 4. Replace the default RSS URL with the URL of your chosen RSS feed. Press the Enter (Return) key when complete. 5. Close the properties panel. 6. Rearrange or delete unnecessary items on your page (such as images) and modify the size of your RSS feed to better suit your layout. Adding a Flickr Image Gallery The BaseKit site builder allows you to easily tap into any publicly available Flickr album or photo collection.

31 The Flickr widget is available in the SOCIAL section of the widgets panel. 1. Drag and drop an instance of the Flickr widget onto your page. 2. With the widget selected, click on the gear icon in the widgets options tab. 3. You can type the direct URL of the album to display, or you can search for images based on a keyword or a specific user. 4. You can also adjust the number of images to be displayed by changing the "quantity" shown. 5. You can also adjust the number of images to be displayed. 6. Now you can adjust the size and position of the gallery to suit your design and layout needs. 13. Template Widget 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. 14. Add Media Files in Basekit

32 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. Starting Over To delete your BaseKit site and start over from scratch, you can reset your site. Login to your current BaseKit design area Click Manage. Click Reset Site. Warning! Any data or pages you have will be deleted.