Editing tools overview | To do first | Dimensions Logo | Banner Picture | Adjust Colours | Page Content Photo Gallery | Picture in content | Videos | A Table Links | Anchors | Domains | Display
Calendar- 816 pixels wide
CLICK HERE for step by step videos to help you build your website.
Component sizes
The different sizes components need to be / or the maximum size they should be.
NOTE: The top section of your webpage has the option of having your facebook wall on the right hand side of your main page.
Pictures and media you put in the top left section should be no larger than 487 pixels wide if the facebook option is on the right. If larger your media will overlap the facebook option or get bumped down to the lower section.
- You can upload a logo of any size although it will be auto sized
to fit 130 pixels high. (So it does not cut off any part of the logo)
Banner Pictures: -900 pixels wide by 250 pixels high
- If your banner picture is more than 900 pixels wide they will beauto sized to 900 and you can move the picture up and down to suit.
Photos on page:
Top section - 487 pixels wide- max recommended
Bottom section- 816 pixels wide- max recommended
Photos for gallery:
Can be any size, although the larger they are the longer it takes to load on your webpage when someone goes to your website, also the longer it takes to upload to the gallery. In most cases a 1000 pixel wide picture is more than clear enough.
Videos:
Top section - 487 pixels wide- max recommended
Bottom section- 816 pixels wide- max recommended
| Google documents- PDF | Total Snap hosting cpanel- PDF |
|
|
|
Section 1. Overview of editing tools
Overview of the editing tools at the top of the page:
Overview of the main editing tools:
|
Section 2 -Important to do first
|
|
| Note: When you finish doing a change. Click the blue save button at the top of the page to save your changes to your live website. | |
|
|
1. Click on the [Text Colour & Meta Info] tab. Enter in the Meta info- title and description. The title is what appears in the top tab of your website and along with the description are the words Google uses to know what your site is about to bring it up when someone types in a search request. |
 |
2. Click the [content tab] and then the dropdown arrow to enter in your contact info. Note: if a field (ie fax #) is left blank, the field will not show on your live website. If you want a Google map of the address you entered click the checkbox in [Map Option] in the drop down of the [content tab]. |
| Return to top of page | |
|
|
|
| Add Logo: | |
 |
If you have a logo ready you can add it by clicking the [images] tab and click the [Choose File] box. This opens a window that you can use to navigate your computer to find your logo image file. Double click on the logo image file and it will be uploaded to the logo area of your website. Note- if you want your logo to go across the full top of the website page, the logo would need to be cropped and or resized to 900 pixels wide and 130 pixels high. Otherwise the logo image will automatically be sized to fit based on its ratio of height to width. Once your logo is on the website you can click the [add padding] or [subtract padding] to adjust the blank space above and below your logo. |
| Return to top of page | |
|
|
|
| Add banner picture: | |
 |
To add a banner picture, click the [images] tab and select “Banner” from the selection menu. Click the [Choose File] box. This opens a window that you can use to navigate your computer to find your banner image file. Double click on the banner image file and it will be uploaded to the banner area of your website. Note- if you want your picture to go across the full width of the banner area the picture needs to be at least 900 pixels wide. The size of the viewing window is 900 pixels wide by 250 pixels high. Once your banner picture is on the website you can adjust the viewable area of the banner by clicking [scroll view up] and [scroll view down] to adjust by one pixel, or “x10” to adjust by 10 pixels. |
| Return to top of page | |
|
|
|
| Adjust the colour of different areas: | |
 |
Adjust the background colour of areas on your website by clicking the [Background Colors] tab. Click the box beside the name of the area you want to adjust. This activates the colour wheel for that area. You can also type in a colour hex code to match existing branding. Start by clicking in the coloured area of the box in the middle of the colour wheel. Left click and hold, then drag the circle in the shade adjust box to adjust the shade of the current colour. Left click and hold, then drag the circle in the colour wheel to change the colour. |
| Return to top of page | |
|
|
|
| Adding page content: | |
|
Add text, pictures, videos and tables to your webpage. |
|
 |
|
|
Page content editor key functions:
Warning: Pasting text copied from a word document can cause problems with the operation of the website. Make sure to past it into the editor using the [paste from word] tool shown below.
|
|
 |
|
| Return to top of page | |
|
|
|
| Photo Gallery: | To add and edit photos click the photo gallery button. |
 |
Click on the [Photo Categories] tab to add a new photo category, rename one, have a category excluded from the viewing public or make the contents of a category rotate as a slide show in the banner area. |
| Return to top of page | |
|
|
|
| Add a photo: | |
 |
To add a photo to the photo gallery, click the [Add Photo] tab.
1. Choose which category to add it to
2. Click [Choose File] button to search your computer for the picture and double click on it.
3. Add a title and description if you want.
4. Now that you have grabbed the picture, click the [Add Photo] button to upload it to your website gallery.
Note: the larger the picture file is, the longer it will take to upload.
|
| Return to top of page | |
|
|
|
| Delete photos, change the order, or add photos to your webpage: | |
 |
To change the order the picture appears in the gallery click the up down arrows.
To edit the title or description of a photo click edit.
To (embed) this photo: Put this picture on your webpage:
1. Click the [Copy to Clipboard] button. Then click the home button at the top of the page
|
 |
2. Click on the picture icon in the [Page Content] editor. The image embed tool will appear.
3. Click in the URL box, right click your mouse and choose paste or press control + V on your keyboard to paste the picture code from step 1.
4. Choose the width and height you want your picture to appear on your page.
5. Click OK to view it in the content editor.
6. If you do not like the size you can double click on the picture to open the tool and adjust the size.
7. Click [Refresh Content] to see the image on the page and then [Save] at the top to save it to your live website.
|
| Return to top of page | |
|
|
|
| Add videos to your webpage: | |
 |
To embed videos
1. Upload a video to YouTube. Choose the size you want and click the YouTube [embed] button to copy the videos embed code.
2. Click on the film strip icon in the [Page Content] editor. The media embed tool will appear.
3. Click in the box, then right click your mouse and choose paste or press [control + V] on your keyboard to paste the video code. Click OK
4. Click [Refresh Content] to see the video on the page and then [Save] at the top.
|
| Return to top of page | |
|
|
|
|
Using the table tool to organise elements on your page: Placing a table on your webpage allows you to organize elements on your webpage. (Text, pictures or videos) |
|
 |
1. Scroll down the content in your page content editor until you find the place you want to add a table.
2. Click the table icon in the page content editor.
3. Choose how many rows and columns you want in your table and how wide you want the overall table to be.
Note: regardless of how many columns you use the maximum width the table should be to stay on the page is 865 pixels wide.
4. Cell spacing determines blank space between cells
Cell padding determines blank space around the cells.
5. Click the [OK] button.
|
 |
|
| Return to top of page | |
|
|
|
| Adding links: | |
|
When someone clicks on a picture or text on your webpage you can have it take them to other Websites or navigate to a different place on your webpage. |
|
 |
2. Click on the link icon in the page editor
3. In the tool that pops up choose the Link Type you want in the drop down arrow- URL / Link to anchor in the text / email
Link type - to another webpage
[URL] link – takes people to another website or page. Copy the address of the page you want to link to from the address bar when on that page. For example (http://www.totalsnap.com/) Copy by holding the left mouse button down and dragging it over the address in the address bar at the top left of the webpage, then right click and choose copy. Paste this address code in the box ladled URL (right click your mouse and choose paste). Then click the [OK] button.
When
|
|
|
|
 |
When you are linking to another website or webpage you can choose how that other website will open. After you have added a URL link (see steps above) click the [Target] tab to the right.
The most common is as a [New Window]. This opens the website you are linking to as a new page with it’s own tab. The advantage is your visitor can click your website tab to get back to your webpage and choose to keep the webpage they linked to open.
|
|
|
|
 |
Link type - Anchor on page [Link to anchor in the text] - this takes people to another place on your webpage. This is a great way to have people find areas of your webpage fast. You first have to put one or more anchors on your page (explained below). After choosing this link type with the drop down arrow, there is another arrow just below to choose the anchor your text will link to. In the example, I put an anchor at the top of the page and named it “Top of page”. Reminder: when finished, click refresh page to update your current view and click save in the main menu to publish the changes to your live website. |
| Return to top of page | |
|
|
|
| Placing an anchor on your webpage: | |
 |
1. In the editor window move down your content text until you find the place you want to put an anchor.
2. Click the anchor icon in the page editor.
3. Type the name you want to give your anchor in the pop up tool.
Remember you will be using these names when you link to them, so name them something that is related to the spot they are linking to. (“Top of page”, name of video or the heading of the paragraph you are linking to).
Link type [Link to anchor in the text] - this takes people to another place on your webpage. This is a great way to have people find areas of your webpage fast.
Learn how to add a link to this anchor, above in "Link type - Anchor on page"
Reminder: when finished, click refresh page to update your current view and click save in the main menu to publish the changes to your live website.
|
|
|
|
