KW Advanced Agent Website Training

April, 2010

What We will Discuss

• Using hyperlinks to your “contact me/us page”

• Which color boxes control what areas of the website

• Color scheme- using HTML color codes for custom colors

• Background Color code- changing the appearance of your homepage and custom pages with alternate colors behind your text

Using hyperlinks to your “contact me/us page”

• Using a hyperlink to your “Contact” page allows for your customer/client’s information to come in a neat and tidy format that can either sync to or be added to your database.

• The “Contact” page tells the viewer exactly what info you want/need from them.

• The hyperlink to an email will only work for users with MS Outlook set up on their computer. Using the “Contact” page helps insure that we are able to get the lead from both Outlook and non-Outlook users.

Using hyperlinks to your “contact me/us page”How to…

1. Preview your website and navigate to your contact page. Copy the address that appears and paste it to MS Notepad for now.

2. On the page where you are adding the link, locate the appropriate place and type in your calls to action…ie…the phrase you will use to prompt the viewer to contact you. For example: Click here to contact me today for up to date market information.

3. Once you have your call to action typed out, you will then use the steps we have discussed for adding a hyperlink. Simply highlight text and click the insert/edit link button on your text editor.

4. Toggle over to Notepad where we have the “Contact” page address waiting. Copy this address and then enter it into your website admin tool’s pop-up box for the hyperlink.

5. Remember to click “save” and then refresh your page using CTRL + F5. You should see your link and you should click to make sure it goes to the page you intended.

Using hyperlinks to your “contact me/us page”How to…

1. Preview your website and navigate to your contact page.

Copy the address that appears and paste it to MS Notepad for now.

Using hyperlinks to your “contact me/us page”How to…

2.) On the page where you are adding the link, locate the

appropriate place and type in your calls to action…ie…the

phrase you will use to prompt the viewer to contact you.

3.) Simply highlight text and click the insert/edit link button on

your text editor.

Using hyperlinks to your “contact me/us page”How to…

4.) Toggle over to Notepad where we have the “Contact” page address waiting.

Copy this address and then enter it into your website admin tool’s pop-up box for the

hyperlink.

Using hyperlinks to your “contact me/us page”How to…

5.) Remember to click “save” and then refresh your page using CTRL + F5. You should see your

link and click to make sure it goes to the page you intended.

Which custom color boxes control what areas of the website

• While your website admin tool allows for you to customize your site using any colors that you like for your template, this can be difficult without first knowing which color box is tied to which area of your template.

• Also, it is often thought that this is where you will change your text colors for the content on your homepage and custom pages. This is true, until you have used the “Text Color” button in the page editor to customize the font color for that page. Once this occurs, the custom and default color scheme options for your text will be overridden with what you have selected in the text editor. Other wise, the text colors set in section 2.2 will apply to your contact info and the default content (pages that you cannot access to edit directly). This will also vary from template to template.

• Please also be aware that frequent changes to your template’s color scheme will require you to clear your temporary internet files. If you start to see that your changes are not being displayed, click here for steps on clearing out your temporary internet files.

Which custom color boxes control what areas of the websitecontinued…

Box 1 determines your border color.

Box 2 determines your focus box border color.

Box 3 determines the color of your template’s text on

contact pages and on the left margin for your contact info.

Box 4 will determine the font color for your written text on most templates until

the text is changed on the page editor using the "Text Color” button.

Color scheme-using HTML color codes for custom colors

• Your website admin tool will allow for a wide variety of color choices, however, you may already have what you want in mind. If so, knowing the HTML Color codes for each color can save you time.

• Using the HTML Color code, we can determine the specific color, rather than moving around the color selector looking for the closest match.

• This site will provide the complete list of HTML colors and codes: http://www.immigration-usa.com/html_colors.html

• The Keller Williams color codes can be found in the Marketing section of MyKW.kw.com. (login required) http://mykw.kw.com/kwintranet/ctPost.jsp?pid=355&id=263

Color scheme-using HTML color codes for custom colors

1.) Click on the color box you wish to edit

2.) When the custom color box opens, paste in the color code you wish to use here.

Background Color code- changing the appearance of your homepage and custom pages with alternate colors

• Have you ever wanted to change the color of the page behind your text? While this is not a feature that is readily available in the website admin tool, with a little knowledge of HTML, and a lot of patience, you can change the background color of your template.

• Do: be prepared for a bit of trial and error when it comes to applying this change.

• Do: save your existing page/content into MS Notepad, should you need to return the page to the way it was.

• Don’t: Forget to save your work.

Background Color code- changing the appearance of your homepage and custom pages with alternate colors

What you need to know:

• These techniques are far beyond the intended use of your KW Agent Website.

• You will encounter problems, frustration and need to clear your cache often when applying this type of customization.

• KW Support cannot restore your page to it’s prior version. This information is not stored anywhere other than on your website and on your computer if you have saved a copy.

• If you have any apprehension at all about making this type of change please do not attempt to alter your background color or any other HTML aspect of your website.

• Finally, until you are very comfortable with HTML, please practice by creating new pages. Once you have successfully applied this method to a few practice pages, you can attempt changing your Homepage and/or any of your custom pages.

Background Color code- changing the appearance of your homepage and custom pages with alternate colors

continued…

1. Open to the page editor for the page you want to edit the background color. Click the “source button” and use CTRL + A to highlight all of the source code on the page. Right-click and select “copy.”

2. Open Microsoft Notepad and paste in the source code you just copied. Should you need to recover your prior page, this will be the only way to do so.

3. Return to your website admin tool and click towards the top of your source code to remove the highlighting of your source code.

4. At the top of the source code, insert the following HTML Tag: <table bgcolor="#333333“> <tbody><tr><td> (note the color code of #333333 being used to create a dark grey background. Replace this with any other color code to customize to your liking.)

5. At the very bottom of the source code on the page, paste in this piece of code to close out the command: </td> </tr> </tbody></table>

6. Now, click the “Source” button again and you will notice that you may not see your text.7. Using your mouse to highlight all of the text, (which will show up when highlighted), use the

“Text Color” button to choose the best color for your text on top of your new background color.

Background Color code- changing the appearance of your homepage and custom pages with alternate colors

1.) Open to the page on your site where you want to edit the background color. Click the “source button” and use CTRL + A to highlight all of the source code on the page. Right-click and select “copy.”

Background Color code- changing the appearance of your homepage and custom pages with alternate colors

2.) Open Microsoft Notepad and paste in the source code you just copied. Should you need to recover your prior page, this will be the only way to do so.

3.) Return to your website admin tool and click towards the top of your source code to remove the highlighting of your source code.

Background Color code- changing the appearance of your homepage and custom pages with alternate colors

4.) At the top of the source code, insert the following HTML Tag: <table bgcolor="#333333“> <tbody><tr><td>

(note the color code of #333333 being used to create a dark grey background. Replace this with any other color code to customize to your liking.)

5.) At the very bottom of the source code on the page, paste in this piece of code to close out the command:

</td> </tr> </tbody></table>

Background Color code- changing the appearance of your homepage and custom pages with alternate colors

6.) Now, click the “Source” button again and you will notice that you may not see your text.

7.) Using your mouse to highlight all of the text, use the “Text Color” button to choose the best color for your text on top of your new background color.

Thank You for Joining Us!

http://answers.kw.com