When you’re editing an existing page, or creating an entirely new page from scratch, you’re going to need to insert content. Your Site Manager comes equipped with a WYSIWYG editor (or “Wizzy-Wig” which stands for “What You See Is What You Get”) to allow you to create HTML web pages without having to know the HTML language.

Login to your Site Manager and Roll your mouse over any section of your page and when it hightlights, click it to bring up to WYSIWYG editor. For more information on how to bring up and use the WYSIWYG editor, click here

Many of the formatting options such as font, alignment, bullets, color, bold, italics, and underline are just like Microsoft Word. However, there are some unfamiliar commands in the WYSIWYG editor that we will tell you about

Full Window

This tool is used expand out the editable area to the full size of the window. Normally, if you resize or maximize the editing window, the actual editable area remains the same size. Use this tool if you want to see a larger area to work on.

Print

You can use this button to easily print out  the content of that editing field.

Find and Replace

This tool is used to easily find and replace words or phrases in your page content. Rather than sifting through your whole page trying find the specific phrase you want to change, just type it into the Find/Replace tool and let the WYSIWYG editor find it for you. If you want to replace the phrase with a different one, simply enter the new phrase into the space under Replace With:

Spelling

You can use the Spelling Tool to run a spell check on the page content. You can choose to simply ignore the misspelled word, replace it with another correctly-spelled word, or add the current word to the system dictionary.

Clean Up Code

The Clean Up Code ability is an advanced tool that you can use to remove or alter unnecessary pieces of code in the Source area.

Cut, Copy & Paste

The cut, copy, and paste options serve the same functions they do in most document programs; Cut allows you to remove a highlighted passage and add it to the clipboard, Copy will add the highlighted passage to the clipboard while leaving the original intact, and Paste will insert whatever passage is on the clipboard to the text field.

Paste From External Source

The Paste From External Source tool allows you to add content to your page from an existing Microsoft Word document or other program without the potential danger of HTML formatting errors.

First, go to your document and hit Ctrl-A to select your text and then Ctrl-C to copy it. Now go back to the WYSIWYG editor and click the Paste From Eternal Source icon. When the window pops up, paste your text copied from a Microsoft Word document by hitting Ctrl-V and then click Insert. The text should now appear in the WYSIWYG window. For more information, click here.

Undo

If you make a mistake, dont worry! This tool will undo the last modification that you made.

Redo

If you decided that you shouldn’t have hit the Undo button and you want to go back to how you had it, click the Redo button.

Table

Tables in HTML are much like the tables you would use in a word processor.

On the dialog box that pops open you are given options as to how wide you would like the table to be in relation to the area it is being placed in, how many rows and how many columns you would like it to contain, the Cell Padding and Cell Spacing properties (defines how much space is in between each cell, and how much buffer space is in between the inserted text and the table walls), the border width (enter 0 if you want the table to have no border), and even the background color of the table cells.

When you’ve placed the table, you can edit it further by right-clicking on the table, a table cell, or highlighted content within the table. A dialog box will open, giving you options to insert a row or column, delete a row or column, insert a link, image or email link, and to bring up (and edit) the overall cell properties. These options can also be found on the toolbar at the top of the WYSIWYG editor.

Tables can be very handy if you’re wanting more than one column in a web page (for example, if you have more than one office location and want both locations listed in the footer of your website), but are a little more complex than ordinary one-column pages, so take your time when working with them.

Insert/Edit Image

This tool allows you to insert and edit images in your webpage. When you click the icon, a dialogue box will open. You can either choose from your personal pictures by clicking Browse, or use pictures from the galleries that we provide. Once you have a picture selected, click OK.

In order to change the size of the picture, click a corner and drag it to fit your desired size. To adjust how text flows around the picture, move the picture to the right place on the page, right click the image and choose Image Properties. From this window you can make changes pertaining to how the image looks on the page and in relation to the text.

For more information on adding pictures, watch our Site Manager Tutorial.

For tips on working with graphics and images, click here.

Insert/Edit Media Object

This tool allows you to insert and edit videos in your webpage. When you click the icon, a dialogue box will open. You can choose from several different video options, including Flash, Youtube, Quicktime, and Windows Media. Once you have a video type selected, you can set the properties, enter the video URL, and click OK.

Insert/Edit Horizontal Line

This tool allows you to insert a horizontal line in your webpage. This helps visually seperate sections of your page. You can change the color, alignment, width and thickness of the line

Insert/Edit a Hyperlink

“Hyperlinks” are those clickable hot links on webpages used to direct the viewer to a web address, or “URL” (Uniform Resource Locator). When you want to create a link on a webpage to either a file, email address or another webpage, you would use this button.

Highlight the text that you want to make into a hyperlink and then click the hyperlink button. A dialogue box will open asking you where you want the hyperlink to go.

You have five options on the left to choose from: Page on this Site allows to you to choose a page on your website from a master list of all your pages. Web Location gives you the option to put in a URL address for any website outside of your own. Place in this Document allows you to skip to a specific place on the page through anchor tags, which will be explained in the next section. E-mail Address lets you choose an email address that will be opened in that user’s primary E-mail  program. Finally, Images allows you to choose an object from the Images gallery to create a direct link to, prompting the ability to download.

Insert/Edit a Bookmark

A bookmark acts as an anchor that can be linked to from other places on the page.

Let’s say that you want to have a “Back To Top” link at the bottom of your page. Simply enter a bookmark at the top of the page and then create a link from the bottom of the page. The name that you give the bookmark will be the target that you need to send the link to. When you choose the option of sending the link to A Place In This Document, you’ll be able to choose from all of the bookmarks you’ve created.

Special Characters

This tool allows you to enter symbols and characters into your website that are not on your keyboard.

Styles

Formatting a specific sentence or paragraph can be done using this drop-down menu. The default is paragraph formatting. These formatting options can be useful for quick and uniform formatting of heading texts, address texts, and so forth.

Font

You have a selection of fonts to choose from, such as the set default font, or a specific font like Arial, Times New Roman, Georgia, Courier, and Verdana.

Font Size

Font size, in web terms, is not listed in points, but rather in a scale of one to seven. For example…

1. Size One

2. Size Two

3. Size Three

4. Size Four

5. Size Five

6. Size Six

7. Size Seven

Font sizes will vary a little in appearance depending upon which font you are using, and some fonts will work better than others in various sizes.

Bold, Italic, Underline

You can use these tools to make your text Bold, Italic, or Underlined.

More Font Options

There are also three other font options you can use in the editor by selecting them from the dropdown: ^superscript, _subscript and strikethrough.

Font Color

Use this to choose the color you want text to be. The default is black.

Highlight Text

Use this command if you want to create text displayed as you see it here

You can choose whatever color you would like, and can change font color as well.

Align Left, Center, Right, Justify

All these tools can be used to align the text on the page to the:

left,

center, and

right.

Justified will stretch the sentences to the full length of the page, if possible, by spacing out the letters.

More Paragraph Options

There are two more options in the drop down menu, which allows you to set the paragraph direction Left to Right or Right to Left.

Numbered List

Numbered lists are useful when you

1. Wish to list items in order of importance
2. Wish to list steps in order of action
3. Don’t wish to use a bulleted list

Bulleted List

Bulleted lists are useful for occasions in which you

• Want to create a list of services
• Want to display a list of examples
• Don’t require a numbered list

Increase Indent

Use this button if you wish to indent a paragraph, such as what is shown here. Click on it once to move the paragraph indent to the right this much

Click again to increase the paragraph even further over. These functions can be used for a multitude of purposes.

Decrease Indent

Use this feature to remove the indents added as per the above paragraph.

Let’s go over how to add or delete a page or a link.

Adding a Page

Before we begin, remember to log into your client portal and click the “Modify your site” button to get to your site manager. When you enter the site manager, you will be brought to the homepage for the website. To add a page to your site, click “Add Page” in the site manager navigation bar.

You can add any stock page from the “Add Page” list that will load. However, you can create your own custom pages by selecting custom page. After you have made your selection, be sure to click add or your page will not be generated.

Removing a Page

To remove a page, please be sure to be in your site map. If not, click “Site Map” in the site manager tool bar. From there, right click the page you want to remove and then left click delete.

**WARNING!!! If you remove a page that was not part of the CPA Site Solutions stock pages (aka Custom Pages), they are not recoverable! Only stock content pages can be restored and they can only be restored to their original content. Any content that was edited will be lost.**

Adding a link

Once again, make sure you’re in your site manager before we begin. From the site manager, click “Add Page” even though we are adding a link.

Once the add page window appears, you will want to scroll to the bottom of the add page list. There you will see a topic called “Custom Link.” Select custom link and then hit add. After you hit add, a new window will appear titled link settings. This is where you establish what your link will be titled, where the link will take you, and if you want the link to open in the existing window or in a new window/tab. You also have the option to link to an existing page on your site with the “Link Target” option. Once everything is filled out, be sure to hit add.

Removing a link

Removing a link is very similar to removing a page in your site map. To remove a link, right click the link you want to remove and click delete.

**WARNING!!! If you remove a link, it is permanently gone. There is no way to recover a link. Please be sure you have a copy of all important links you may need for the future saved somewhere in a document.**

Moving a Link or Page

To move a page or link on your sites navigation bar, click the Site Map located in the blue toolbar in the Site Manager. Once at the site map, simply left-click and drag your link or page to its appropriate location. The Site Map represents the order in which pages or links are displayed. If you have a vertical navigation bar, the site map displays the exact order of your pages and links as if they were displayed on your site. If you have a horizontal navigation bar, then the top of the Site Map list represents the beginning of your navigation bar on the left-hand side. Likewise, the bottom of the navigation bar represents the end of the horizontal navigation bar (right-hand side).

Additional Resources:

Adding Text

Adding Images

Using Keywords on Your CPA Website

Tackle Personalizing Pages First

To learn about dragging and dropping pages around, please watch the following video:

Moving and Organizing Pages

Before we begin to move and organize pages in your site manager, let’s review how the site manager works. Once you have logged into your Client Portal and clicked on Modify Your Site, you will be brought to the Site Manager. Be sure to click Site Map in the top left-hand corner.

After the Site Map has been clicked, you will be transferred to the Site Map page where you should see a site map that should look somewhat similar to the image below:

Moving A Page

Moving a page on the site map is relatively simple. For example, let’s say you want to move “Home” somewhere else on the site map. To do this, simply left click Home and hold the left click while to drag the page to a different location on the site map. Once you have “Home” over the new location, release your left click and then hit save changes when prompted.

Organizing Your Pages

We’ve learned how to move a page on the main navigation bar, but how do we move a page that is embedded in a portion of the drop down menu and put it on the main navigation bar? Some of our clients like to have the client portal on the navigation bar when it is embedded in the drop down menu for Resources. To do such a task, you first need to expand out the drop down section of the Resources tab. To do this, simply left click the + sign to the left of Resources.

Once the + sign is clicked, the site map should look something like the image below:

From this point, you should be able to click and drag the Client Portal to anywhere in the Site Map.

In this tutorial, you will be instructed on how to insert an image on a page. After you have navigated to the page you want to edit, move your mouse over the area that you want to edit so it becomes highlighted in gray. Once you click the gray area, the WYSIWYG (What You See Is What You Get) editor will appear in a new window.

After the editor opens, you can then begin to insert a picture by clicking on the “Insert/Edit Image” button.

Once the button is clicked, another window will open where you can select an image or upload an image from your computer. If your image already exists on the server or you want to use some of our pictures already on the server, then you can just select them in the file/directory selection area. However, if you need to insert an image that is on your computer, first click upload.

Another window will then open where you can browse for a file on your computer. After you’ve located your file, be sure to hit upload so the picture/image uploads onto the server.

Now that you have your image uploaded, be sure your uploaded image is checked and then click Insert.

Your image should now be placed inside the WYSIWYG editor. From here, you can move your image virtually anywhere in the editing window by left-clicking the image and dragging the image to the location where you want it placed. To make your image larger or smaller, single left-click the image so a series of small boxes develop around the perimeter of the image. You can then left-click and drag a box to resize the image. To adjust how the text flows around the picture, right click the image and choose Image Properties.

From this window, you can make changes pertaining to how the image looks on the page in relation to the text. Once positioning adjustments have been made, click Apply and you’ll be brought back to the WYSIWYG editor. Be sure to click Save or your work will not be saved!

Additional Resources:

Adding and Deleting Pages

Adding Text

Using Keywords on Your CPA Website

Tackle Personalizing Pages First

To edit the page headers on your website you have two options.  You can change the existing image to one of our other stock images, or you can upload your own.  This section will show you how to use our stock images.  Please see the Creating a Custom Header page.

To get started, you’ll want to log into your site manager.  For instructions on how to do this, click here.

Once you’re logged in, click on the page that you want to change the header of by navigating through the links on the site.

Scroll over the header area so that the gray or beige box appears denoting that it’s an editable region.

Click within that gray or beige editable region to bring up the editor window:

From here you can change the Navigation Title so that it says something different (such as Personal Financial Planning Services”).  You can also click on the “Change Image…” button to bring up our image gallery so that you can choose a different image.

Click on the folder you’d like t browse through.  When you find an image you like, you can click on it to select it.  If you don’t like the images in the folder you chose, you can click the “Back to folder listings…” link above the list of images.

After you’ve selected the image you’ll see a preview of it in the editor.  You also have the option of changing the Header Style.  The different options are listed below with visuals:

Standard Framed Image-

Mirrored Image-

Photo-Stack Image-

Steel-Framed Image-

Title Only-

Custom Header- this type of header is covered in the “Creating A Custom Header” help section.

Once you’ve finished updating the header, click the “Save” button to save your changes:

Finally, click on the “Publish” link at the top of the site manager to push these changes out to your live website.

Working with the Site Map allows you to change the layout of your website pages.  To get there, the first thing you’ll want to do is log into the Site Manager of your site.

Click on the “Login” link at the bottom of your screen or, if your site has a portal login box you can use that.  Then enter your username and password:

Next, log into the Site Manager by clicking the “Modify Your Site” icon:

Click on the link at the top of the Site Manager that says “Site Map:”

This will bring up your Site Map with the pages of your site listed.  You can expand the menu to see your sub-menu items by click on the plus sign next to the menu name.

If you click on any of the pages you will be brought directly to that page so that you may begin editing.

In the Site Map, you can also drag and drop menu items to different locations.  Say you want you Contact link to be right next to your “Welcome” link.  To do this you’ll want to hold down the left-click button on your mouse as you hover over the menu item you want to move.  The item will be highlighted, but you won’t go directly to the page (unless you stop holding down the mouse button).

Drag it to the location you want it to appear in within your navigation.  You will see the dotted line denoting the new positioning of the link:

When the link is in the desired location, click the “Save Changes” button:

You may also wish to delete pages on your site.  To do this, you’ll hover over the link you want to delete then right-click  This will bring up the “settings” and “delete” option.  You’ll want to choose “delete:”

Again, you’ll want to save your changes:

The last step is to hit “Publish” to push the changes out to your live site.

Advanced Site Map Options

You may have noticed that some of your menu items are gray or have lines through them.  There are specific reasons for this.  The image below explains:

To change the settings of your link, you’ll hover your mouse over the link you want to change and then right-click.  You’ll see the “settings option:

Here you are presented with a number of different options:

Navigation Title:  This is the name of the page as it appears on your navigation bar

File Name:  This is the name of the file that will appear in your internet browser as part of the URL.  For example, www.domainname.com/firmprofile.php  The file name can be changed but should always end in .php

Image: If you want to change the header image associated with this page you can do so here.  Click the “Change Image…” button and this will bring you to our image gallery.  (You can also do this when you’re directly editing the page itself)

Show in Navbar:  When this is checked, the Navigation Title will be visible on the website as a link that visitors will see.  There may be instances where you want to put content on a page, but don’t want visitors to able to access it without clicking on a specific URL.  If this box is unchecked, the Navigation Title will not show up on the site, but users could still get to the page if they went specifically to http://www.domainname.com/filename.php

Linked in Navbar: When this box is checked, the Navigation Title will be clickable so that when users click on it they will go to an actual page on the site.  Sometimes you may want to use the Navigation Title as a place-holder that can’t be clicked on, but that has clickable sub-links below it.  If you uncheck this box you will accomplish this.

Include in Sitemap:  When this box is checked, the page will appear within your website’s site map.  On your site there is a link at the very bottom that says “Site Map” and it lists all the pages on your site.  If you uncheck the “Include in Sitemap” box, the page will not be displayed on this Site Map page.

Header Style: If you want to change the way the header image appears on the page you can select a different option from this drop-down menu.  (You can also do this when you’re directly editing the page itself.)

Descriptive Paragraph: This will only come into play if the specific page is listed on a Hub Page, such as you see on your default “Resources” page.  Each item on the page has a small text description that explains what the page is about.  This box is where you can change and/or enter a description.

Don’t forget to save your changes once you are finished.

Site Map- Search Engines Tab

You have the ability to change the page titles, keywords and meta descriptions for each page of your website, which can be beneficial for the Search Engine Optimization of your site.  To do this you’ll right-click on the page whose settings you want to change and pick the “settings” option:

On the next screen, you’ll select the tab that says “Search Engines:”

You can enter a unique page title for the page, specific keywords that are relevant to the page, and a related description.  Don’t forget to click “Save” when finished.

As always, you’ll want to hit “publish” to push all changes out to your live site.

The first step to logging into your Site Manager is to go to your website’s home page (YourDomainName.com).  If your site isn’t live yet, you’ll go to the virtual address we’ve sent to you in your “Welcome” email, that will look something like this: http://cp3.cpasitesolutions.com/~username/

You can click on the small “login” icon at the bottom of your site:

Then enter your username and password:

Next, log into the Site Manager by clicking the “Modify Your Site” icon:

This will bring up your site’s home page.  Now you’re in the Site Manager, and you can begin editing your website.

Before adding text to your website, we highly recommend that you watch this quick video on how to paste text from Microsoft Word or any other software platform. Please be sure to use the “Paste From External Source” feature every time in order to avoid your web pages from producing errors.

After you have logged into your Site Manager (clicking “Modify Your Site” in the client portal), navigate to the page you would like to add text to. Once there, use your mouse to click on the area that you would like to edit and add text. An area that is considered editable will become highlighted in gray when the mouse rolls over the area.

Once you have clicked the highlighted area that you want to edit, a new window will pop up. This is the WYSIWYG (what you see is what you get) editor. With the WYSIWYG editor, you can edit the content of your highlighted section with an interface that is similar to Microsoft Word. With the editor opened, you should be able to add content by clicking inside the box and start typing. Many of the formatting options such as font, alignment, bullets, color, bold italics, and underline are just like Microsoft Word.

To take content directly from Microsoft Word, we must use a different process than just pasting in text. After opening your WYSIWYG editor, go to your Microsoft Word document, click anywhere in the document and hit Ctrl-A. This will select all the content that resides in your word document. After all your content is selected, hit Ctrl-C to copy your highlighted content.

Now head back to the WYSIWYG editor and click the Paste From Word clipboard icon. This icon looks like a clipboard that has the Microsoft Word logo on top of it. Please note that if you are directly pasting from Microsoft Word, you must follow these instructions or your page will likely become corrupt!

Once the window for pasting your content from Microsoft Word appears, hit Ctrl-V to paste the content into the “Paste from external source” editor. When the content is in place, click Insert.

Now that you have clicked Insert, the “Paste from external source” window will close and you will return to the WYSIWYG window. Be sure to hit save to apply your changes to the area that you have edited.

Additional Resources:

Adding and Deleting Pages

Adding Images

Using Keywords on Your CPA Website

Tackle Personalizing Pages First

Hub Pages, like your Services page, work a little differently then other pages on your site and editing may seem daunting at first. But it’s actually quite easy to edit!

Tab Hub Pages

As an example, the Services section of your site is a Tab Hub page.

If you  log into your site manager and navigate to the Services page you’ll notice you can’t directly click and edit the page like you can on your Profile page, for example.

Your Services page is a Tab Hub page.  It is pulling the information you see on your main Services page from the Site Map.  So to edit your Services page you’ll want to click on the Site Map link in the upper-left of the Site Manager.

Here you can expand the Services section so that you see all of the various pages.  It’s important to note that the main headings have a line through them.  This is because those are place-holders.  They appear as your tab headings on the Services page, but they are not clickable links that take a user to a page.

The items below those headings (with the lines through them) are your pages that can be clicked on and edited.  You can re-order the pages, delete or add them right here on the site map.  For an overview on how to re-order, add and delete pages please refer to our Site Map Overview page.

Finally, when you’re done making changes, you’ll want to hit the Publish button at the top of the site manager, to push the changes out to your live site.

Picture Hub Pages

Your Tax Center page on your website is an example of a Picture Hub Page.  Similar to a Tab Hub Page, you modify the order and listing of what appears on your Tax Center page from within the Site Map and not on the Tax Center page itself.

A Picture Hub Page looks like this:

To edit the page you’ll click on the Site Map link in the upper-right hand corner of the Site Manager:

Then expand the menu next to Tax Center to view the layout of the pages.

You can now drag and drop the sub-menu items to different places to re-order them, add pages or delete pages from within the site map.  For an overview on how to re-order, add and delete pages please refer to our Site Map Overview page.

A common request with Picture Hub pages is to change the icons that are displayed by default, and to change the descriptions listed next to those picture icons.  (Please note that for a hub page, you can not use your own images.  Our system is set up to pull the icons for a Picture Hub page directly from our database of stock images.  So you can select a different image from our stock library but you won’t be able to upload your own unique image like you can on other pages of the site.)

To change the images on your Picture Hub page, you’ll right-click on the page in the site map and choose the “Settings” option.

Here you will be presented with your page settings.  To change the image, click on the Change Image button and browse the image gallery to find a new image, illustrated below:

You can also update the description by modifying what’s listed in the Descriptive Paragraph section, then clicking “Save.”

Finally, when you’re done making changes, you’ll want to hit the Publish button at the top of the site manager, to push the changes out to your live site.