Overview:

Before we can move on to the Site Builder, we have to have a Tool or number of Tools to organize.  Remember, Tools are the pages on your website.  There are different types of Tools that are used for different purposes.  The most often used tool is the Page Builder tool.  If you want to add text or images, maybe a table and some formatting or links, a Page Builder is what you will most likely be using.  An example of a Page Builder is what you're looking at.  In fact, all of the pages in the Support section of the Sitemason website are Page Builders. 

To add a tool, simply click the Add A Tool button in your blue Site Builder bar. 


The resulting page shows you the type of tool options that you have available to you. 

Details:

Once you've clicked Add One for the tool that you are planning on using, you will be taken to the Setup & Information tab of that tool.  Even though each tool has very different functions, the administration of that tool will look very similar to the others.  Every tool has a Setup & Information tab, a tab where the content is edited and Elements are added, a Configure Layout tab, a Set Fonts and Colors tab, and an Install Code tab.  In this section we will go over what each of those is generally used for.

When you first come into your tool, regardless of what type of tool, you will be in the Setup & Information tab (unless you have set your User Preferences to take you straight to the Edit Elements tab).  You will notice, once you have multiple tools in your account, that certain aspects will remain the same, again, reglardless of what type of tool you are in. 

Of those common aspects, you will always see the Save Changes and Go Back and View my Web Tool buttons.  You will also notice that you can see what Site Builder you are currently within by the name of that Site Builder to the right of its icon.

Below the name of your Site Builder you will see the name of your tool. By default, Sitemason names the Page Builder in accordance with how many tools you have.  In this example, it is our first tool so Sitemason names it "New Page builder 1."  You can also tell what type of tool it is by the icon to the left of the name of your tool in the top right.

Setup and Information tab

Under the Setup and Information tab of your tool, you can Rename your tool, Delete your tool, change its URL and a couple of other tasks.


The first step is to rename your tool. Simply click Rename and type in a title that gives the tool a name that is meaningful to you and links the tool to its purpose. Your tool's name can be any combination of letters and numbers, but must be no longer than 40 characters.  Click Save Name after typing in the new name. You can change the name of your tool at any point, and all tool data and information is transferred automatically to the new name.


To the right of the Rename button is the Delete button.  Clicking the Delete button will delete that entire tool, so be careful. 

The URL is your tool's address on the web.  By default, Sitemason assigns the URL to match the tool name.  If you will notice, the full part of the URL that you cannot edit is tied to the domain that you set for the Site Builder (reviews in the Site Builder Tutorial).  Since this demo does not have a domain, it retains the Sitemason default URL for the site, however the latter part is editable for the page.

Each tool also has a Tool ID.  This is something that will never change and is unique to the Sitemason system.  It's a sort of reference identification for your tool.

The other two options, Include CSS and Display XML, should stay at their default settings unless your designer or somebody from the Sitemason staff has instructed you to change them

The first step in setting up any new SiteMason tool is to name the tool. The name of your tool identifies the tool for you on your admin page and is not displayed on the active tool. Consider giving the tool a name that is meaningful to you and links the tool to its purpose. Your tool's name can be any combination of letters and numbers, but must be no longer than 40 characters. Click the Rename button, and type your tool name in the field provided. Click Save Name after typing in the new name. You can change the name of your tool at any point, and all tool data and information is transferred automatically to the new name.

Set Fonts and Colors tab

The Set Fonts and Colors tab allows you to set or change the color scheme for various parts of your tool, if your template allows them to be controlled. You can select from among several pre-configured color schemes, or define your own color set, by selecting the color square next to the individual page components, like the border color, the title field background color, and other page components. If you set fonts and colors for the Site Builder, your settings override any fonts and colors set for individual tools and individual pages.

Use the color key box to choose custom colors for each part of your tool. (shown below)



The color selector is used to choose the color for each tool component. Alternatively, you can enter a hex number.


There is also a "Color Preview" window on the right that contains an example of the selected colors. Also on this page is the Fonts section, where you can set the fonts for the Title, Header, and Body Elements in your Page Builder. You can also define the font size and bold text, if desired.

Configure Layout tab

The simple Configure Layout tab has generally very few features other than setting the title or justification of a page's content.

Install Code tab

If you have a custom built template, you will probably never use the Install Code tab. However, for more advanced users or for those that are not using a Sitemason template, but instead using Sitemason tools to drop into their existing website, the Install Code tab will allow you to grab code to drop into your existing html website.

When you are ready to activate/install your tool, several installation options are available, depending on the tool:

Easy Installation: This option allows you to install JavaScript code on your web page. After initial installation, any changes made to your tool in the Tool's admin area are automatically reflected in the tool on your web page. This is the best installation option for those who wish to create their web pages using traditional HTML design and host the pages somewhere other than within Sitemason.

If you use this installation option, a window appears with the code that you are to insert into your HTML using the following instructions (you can choose a different install option by clicking the Choose a Different Install Option button). To install a SiteMason tool using the Easy Installation method:

1. Locate the HTML file where the tool script will be implemented. You may need to download it from your server using an FTP client or select it from your hard drive.
2. Open the HTML file with a text editor or your HTML editor of choice.
3. Select the JavaScript code from the installation page and copy it. Go to the file that has the HTML code for your web page, move the cursor to the place in the HTML code where you want the tool to appear, and paste in the tool code.
4. Save the HTML file and upload it to the server where your website is located.
5. View the page in your browser with your SiteMason tool installed.

If you encounter a problem, check to:

• Make sure that you have completely copied ALL of the HTML or Javascript code to your web page.
• Make sure that you have saved your page properly.
• Make sure that when you upload the web page via FTP that you overwrite the old copy of the HTML file with the new HTML file.

HTML Installation: This option allows you to install HTML code on your existing web page, or actually create the entire web page in the case of a Page Builder. You can customize this code easily, but the code must be reinstalled on your web page each time you make changes to it. This installation option is ideal if you host your site with a traditional Internet Service Provider and do not want to use JavaScript.

If you use this installation option, a window appears with the code that you are to insert into your HTML using the following instructions (you can choose a different install option by clicking the Choose a Different Install Option button):

1. Locate the HTML file where the tool script will be implemented. You may need to download it from your server using an FTP client or select it from your hard drive.
2. Open the HTML file with a text editor or your HTML editor of choice.
3. Select the tool code above and copy it. Go to the file that has the HTML code for your web page, move the cursor to the place in the HTML code where you want the tool to appear, and paste in the tool's code.
4. Upload the HTML file to the server where your website is located, or save it back to your hard drive.
5. View the page in your browser and the new tool should be implemented.

If you encounter a problem, check to:

• Make sure that you have completely copied ALL of the HTML or Javascript code to your web page.
• Make sure that you have saved your page properly.
• Make sure that when you upload the web page via FTP that you overwrite the old copy of the HTML file with the new HTML file.

Link Installation: This option allows you to link directly to your SiteMason Page Builder. You can share this link with others and they will be able to directly view your Page Builder. Any changes made to your tool in the tool's admin area are automatically reflected in the page attached to this link.

If you use this installation option, a window appears with the code that you are to insert into your HTML using the following instructions (you can choose a different install option by clicking the Choose a Different Install Option button):

1. Locate the HTML file where the tool script will be implemented. You may need to download it from your server using an FTP client or select it from your hard drive.
2. Open the HTML file with a text editor or your HTML editor of choice.
3. Select the tool code above and copy it. Go to the file that has the HTML code for your web page, move the cursor to the place in the HTML code where you want the tool to appear, and paste in the tool code.
4. Upload the HTML file to the server where your website is located, or save it back to your hard drive.
5. View the page in your browser and the new tool should be implemented.

If you encounter a problem, check to:

• Make sure that you have completely copied ALL of the HTML or Javascript code to your web page.
• Make sure that you have saved your page properly.
• Make sure that when you upload the web page via FTP that you overwrite the old copy of the HTML file with the new HTML file.

Secure Link Installation: This option is identical to the link installation, except that it uses a secure server, providing the ability to transmit sensitive data safely.

Removing a Tool
To remove a tool from your toolbox, click on the name of the tool to go into the tool's administration area. From the Setup and Information tab you can click on the Delete button to remove the tool. Once removed, the tools are permanently deleted. You can also click the Save Changes and Go Back button to return to the Site Manager if you decide not to delete a tool.