Difference between revisions of "SiteBuilder"
m |
(A tutorial on the features and tools of SiteBuilder, a BaseKit software.) |
||
Line 1: | Line 1: | ||
__FORCETOC__ | __FORCETOC__ | ||
− | == | + | ==What is SiteBuilder?== |
− | + | SiteBuilder is an easy-to-use, programming optional way to create a website. If you don't already have a BaseKit SiteBuilder license, you can easily purchase one [http://hostek.com/sitebuilder/pricing.htm Here]. | |
− | You should have | + | ==After Your Purchase== |
+ | ===How to Login=== | ||
+ | To login, you will want to go to http://sitebuilder.ezhostingserver.com and use the username and password given to you in your email once your purchase has completed. | ||
+ | |||
+ | ===Choosing Your Template=== | ||
+ | Once logged in, you will see a bar at the bottom of your screen that has many different free templates to choose from. You can navigate all of the templates at the search bar and menu at the left side. | ||
+ | #Search or click through the templates | ||
+ | #Choose the one you want by clicking "Yes, this one" next to the template | ||
+ | #The siteBuilder will load the template for you to start working with | ||
+ | |||
+ | ===How to Edit Your Website=== | ||
+ | Once you login you will see the SiteBuilder main page. From here you can add text, pages, images and more. This is also the place where you can preview and publish your changes. | ||
+ | In the main window, you should see a bar at the top that shows Theme Colors, Theme Fonts, and Background. | ||
+ | To change the Theme Colors: | ||
+ | #Click on Theme Colors | ||
+ | #Depending on the theme, these colors will vary, but clicking on any one of them will change the whole layout. | ||
+ | |||
+ | To change the Theme Font: | ||
+ | #Click on Theme Fonts | ||
+ | #Notice the preview pane for the fonts. This will also vary depending on the theme. | ||
+ | #Click on the one you want, and watch your site text change. Play around with this until you find one that suits your site. | ||
+ | |||
+ | To change the Background: | ||
+ | #Click on Background | ||
+ | #Click the drop down menu to choose between a solid color, an image, a "flex" background, and a linear gradient. Each one of these opens more options, so below will be a short synopsis about each. | ||
+ | ##Solid Color backgrounds are fairly self explanatory, but SiteBuilder allows you to choose from virtually any color possible. Click the rectangle under Type to open the color picker. This tool allows you to choose the lightness, the saturation, and the hue. It also gives you a Hex key to use to match other pages with this color. | ||
+ | ##Images give your site personality as you can convey your site to be a veritable oasis by placing an image of a Hawai'ian beach or the grittiness of the city by selecting an urban still. To select an image, drag the image you want to the arrow in the menu. Just remember the image needs to match the size of your webpage. | ||
+ | ##A Flex background is an image background, but instead of the image being used once for the entire page, it gets used for each editable field as well. | ||
+ | ##A linear gradient creates a blending of two colors. To choose these two colors, click the two boxes under Type and choose the colors you want. Once you're done with the color, you can choose the angle. You can either choose a base angle from the drop down menu, or choose from any angle by using the slider. | ||
+ | |||
+ | ====Adding Pages==== | ||
+ | #Mouse over "+ Add" and click Create Page. You can also Create Folder, which will allow you to better keep track of your similar pages. | ||
+ | #A box will appear to give you the option to choose the name. E.g. About Us | ||
+ | #Choose what the URL name will be. Staying with the same example, about-us. (Note: This information is auto filled by default, but you can choose something different if you wish) | ||
+ | #Choose what this new page will be called. This is also auto filled. | ||
+ | #Choose whether you want this page to be active, a draft, or inactive. | ||
+ | ##Active means the page will be publicly visable when published. | ||
+ | ##Draft means you can edit it, save it, and wait to publish until you choose to. | ||
+ | ##Inactive means it will only be visible in the editor. | ||
+ | |||
+ | ====Adding Widgets==== | ||
+ | A widget is any form of addon that helps with the functionality of your site. This inclused Text and Image panes, Content forms, Email forms, Twitter feeds, etc. | ||
+ | On the bottom of the left pane, you will see many different colored bars representing the different categories. Select the one you want by dragging it to your webpage. Once the widget is in place, you can change the settings of the widget, move it around, or delete it altogether. | ||
+ | |||
+ | ====Adding Media==== | ||
+ | Media is uploaded to SiteBuilder through the + icon. Your maximum amount of space allotted changes depending on the SiteBuilder account you have. | ||
+ | You can also search through the media already uploaded by clicking either the Files and Images bar or by the search bar under Media. | ||
+ | When you've uploaded your image/sound byte, you will want to drag the file to your webpage to insert it, and like the Widgets you can easily modify the settings or move the media file. | ||
+ | |||
+ | |||
+ | ==Managing Your Website== | ||
+ | Once you're done making your website look the way you want, you will have the ability to make it act the way you want. To manage your website, click Manage at the very top menu. This will send you to another list of options. | ||
+ | |||
+ | ===Site Status=== | ||
+ | The Site Status page allows you to change the domain name used for the site, in the event you ever get tired of your current domain name. Note: This does mean you must register a new domain name. | ||
+ | |||
+ | ===Domain Mapping=== | ||
+ | Domain mappings allow you to point your registered domain to your SiteBuilder acount. To learn more, click the Map A Domain button in SiteBuilder. | ||
+ | |||
+ | ===What is a Favicon?=== | ||
+ | A Favicon is the icon shown when you browse to a site. We all have been to Google's site and seen their trademark G on the tab. This editor allows you to make your mark. | ||
+ | To add a favicon, simply click Choose an Image or drag and drop an image from your computer. For best image results, the favicon should be a 16X16 image. | ||
+ | |||
+ | ===Ecommerce=== | ||
+ | SiteBuilder allows you to link up your site to your PayPal account to enable you to do business the way you want it. Simply input the email address used by PayPal and change the currency to what you require. | ||
+ | |||
+ | ===SEO=== | ||
+ | SEO or Search Engine Optimization is what brings people to your site. For effective SEO, you will want to be specific without being niche, but broad enough to entice people to visit your site. | ||
+ | To add SEO settings to your site: | ||
+ | #Type a Title for your site. E.g. "My Test Site" | ||
+ | #Type a description for people to search for. E.g. "This is a test site designed to teach effective use of the SiteBuilder platform." | ||
+ | #Type some keywords. For my site, I would choose these: SiteBuilder,Tutorial,Educational,Testing,Hostek (Note: The keywords aren't case sensitive in most cases) | ||
+ | #Select your local site language. If your site has more than one, then go with the one that most of your users use. | ||
+ | |||
+ | ===Redirects=== | ||
+ | Redirects are useful when you have information on a different page or wish for people to visit a different page due to maintenance. | ||
+ | To add a redirect: | ||
+ | #Click New | ||
+ | #Type in a page name. Can be found in your list of pages. | ||
+ | #Choose a destination in the drop down menu | ||
+ | #Choose whether this is permanent or temporary | ||
+ | #Click Create redirect | ||
+ | |||
+ | ===Users=== | ||
+ | This tool allows you to create logins for others to use, but gives them limited permissions. This is most often used if you have a web developer doing the work for you, but you don't necessarily want the developer to have complete access. | ||
+ | To create a new user: | ||
+ | #Click New | ||
+ | #Give the new user a name | ||
+ | #Select an email address for password retrieval | ||
+ | #Make the user a password | ||
+ | #Select the default language for the user. This defaults to the default language of the site. | ||
+ | #Click Create user | ||
+ | |||
+ | ===Reset=== | ||
+ | This tool allows you to completely reset all changes to the default. Note: This is permanent, and cannot be retrieved. Please only use if you're absolutely sure you need a reset. | ||
+ | |||
+ | |||
+ | By: Cory C. |
Revision as of 20:05, 3 July 2014
What is SiteBuilder?
SiteBuilder is an easy-to-use, programming optional way to create a website. If you don't already have a BaseKit SiteBuilder license, you can easily purchase one Here.
After Your Purchase
How to Login
To login, you will want to go to http://sitebuilder.ezhostingserver.com and use the username and password given to you in your email once your purchase has completed.
Choosing Your Template
Once logged in, you will see a bar at the bottom of your screen that has many different free templates to choose from. You can navigate all of the templates at the search bar and menu at the left side.
- Search or click through the templates
- Choose the one you want by clicking "Yes, this one" next to the template
- The siteBuilder will load the template for you to start working with
How to Edit Your Website
Once you login you will see the SiteBuilder main page. From here you can add text, pages, images and more. This is also the place where you can preview and publish your changes. In the main window, you should see a bar at the top that shows Theme Colors, Theme Fonts, and Background. To change the Theme Colors:
- Click on Theme Colors
- Depending on the theme, these colors will vary, but clicking on any one of them will change the whole layout.
To change the Theme Font:
- Click on Theme Fonts
- Notice the preview pane for the fonts. This will also vary depending on the theme.
- Click on the one you want, and watch your site text change. Play around with this until you find one that suits your site.
To change the Background:
- Click on Background
- Click the drop down menu to choose between a solid color, an image, a "flex" background, and a linear gradient. Each one of these opens more options, so below will be a short synopsis about each.
- Solid Color backgrounds are fairly self explanatory, but SiteBuilder allows you to choose from virtually any color possible. Click the rectangle under Type to open the color picker. This tool allows you to choose the lightness, the saturation, and the hue. It also gives you a Hex key to use to match other pages with this color.
- Images give your site personality as you can convey your site to be a veritable oasis by placing an image of a Hawai'ian beach or the grittiness of the city by selecting an urban still. To select an image, drag the image you want to the arrow in the menu. Just remember the image needs to match the size of your webpage.
- A Flex background is an image background, but instead of the image being used once for the entire page, it gets used for each editable field as well.
- A linear gradient creates a blending of two colors. To choose these two colors, click the two boxes under Type and choose the colors you want. Once you're done with the color, you can choose the angle. You can either choose a base angle from the drop down menu, or choose from any angle by using the slider.
Adding Pages
- Mouse over "+ Add" and click Create Page. You can also Create Folder, which will allow you to better keep track of your similar pages.
- A box will appear to give you the option to choose the name. E.g. About Us
- Choose what the URL name will be. Staying with the same example, about-us. (Note: This information is auto filled by default, but you can choose something different if you wish)
- Choose what this new page will be called. This is also auto filled.
- Choose whether you want this page to be active, a draft, or inactive.
- Active means the page will be publicly visable when published.
- Draft means you can edit it, save it, and wait to publish until you choose to.
- Inactive means it will only be visible in the editor.
Adding Widgets
A widget is any form of addon that helps with the functionality of your site. This inclused Text and Image panes, Content forms, Email forms, Twitter feeds, etc. On the bottom of the left pane, you will see many different colored bars representing the different categories. Select the one you want by dragging it to your webpage. Once the widget is in place, you can change the settings of the widget, move it around, or delete it altogether.
Adding Media
Media is uploaded to SiteBuilder through the + icon. Your maximum amount of space allotted changes depending on the SiteBuilder account you have. You can also search through the media already uploaded by clicking either the Files and Images bar or by the search bar under Media. When you've uploaded your image/sound byte, you will want to drag the file to your webpage to insert it, and like the Widgets you can easily modify the settings or move the media file.
Managing Your Website
Once you're done making your website look the way you want, you will have the ability to make it act the way you want. To manage your website, click Manage at the very top menu. This will send you to another list of options.
Site Status
The Site Status page allows you to change the domain name used for the site, in the event you ever get tired of your current domain name. Note: This does mean you must register a new domain name.
Domain Mapping
Domain mappings allow you to point your registered domain to your SiteBuilder acount. To learn more, click the Map A Domain button in SiteBuilder.
What is a Favicon?
A Favicon is the icon shown when you browse to a site. We all have been to Google's site and seen their trademark G on the tab. This editor allows you to make your mark. To add a favicon, simply click Choose an Image or drag and drop an image from your computer. For best image results, the favicon should be a 16X16 image.
Ecommerce
SiteBuilder allows you to link up your site to your PayPal account to enable you to do business the way you want it. Simply input the email address used by PayPal and change the currency to what you require.
SEO
SEO or Search Engine Optimization is what brings people to your site. For effective SEO, you will want to be specific without being niche, but broad enough to entice people to visit your site. To add SEO settings to your site:
- Type a Title for your site. E.g. "My Test Site"
- Type a description for people to search for. E.g. "This is a test site designed to teach effective use of the SiteBuilder platform."
- Type some keywords. For my site, I would choose these: SiteBuilder,Tutorial,Educational,Testing,Hostek (Note: The keywords aren't case sensitive in most cases)
- Select your local site language. If your site has more than one, then go with the one that most of your users use.
Redirects
Redirects are useful when you have information on a different page or wish for people to visit a different page due to maintenance. To add a redirect:
- Click New
- Type in a page name. Can be found in your list of pages.
- Choose a destination in the drop down menu
- Choose whether this is permanent or temporary
- Click Create redirect
Users
This tool allows you to create logins for others to use, but gives them limited permissions. This is most often used if you have a web developer doing the work for you, but you don't necessarily want the developer to have complete access. To create a new user:
- Click New
- Give the new user a name
- Select an email address for password retrieval
- Make the user a password
- Select the default language for the user. This defaults to the default language of the site.
- Click Create user
Reset
This tool allows you to completely reset all changes to the default. Note: This is permanent, and cannot be retrieved. Please only use if you're absolutely sure you need a reset.
By: Cory C.