Editing Text on Your Web Site

with VisibleCMS

Welcome
Thank you for choosing VisibleCMS to manage your web site. In this lesson, you’ll learn how to make a simple change to the text on a web page using
the web-based VisibleCMS interface. You won’t need any previous web design experience or knowledge of HTML to complete these steps, just some
familiarity with using a web browser (Internet Explorer, Safari, Firefox).

Table of Contents

Section Page
Example 2
Step 1: Log In 3
Step 2: The Dashboard 4
Step 3: Select A Page 5
Step 4: Select An Area To Edit 6
Step 5: Edit Content 7
Step 6: Preview Changes 8
Step 7: Content Updated 9
Success 10

1
Editing Text on Your Web Site
with VisibleCMS

Example: Error on the “About Us” Page

For this lesson, suppose you notice an error on your company’s “About
Us” page. Your bio says you have nine years of experience, but it
should actually say ten years of experience. (An example of such
an error is highlighted in Figure 1.) The following steps will guide
you through the process of editing the text on a page and saving your
changes so they’ll be visible on your company’s web site.

Although you’ll be working with a live web page, changes won’t be

saved until the very end of the process, so don’t worry if you make any
mistakes. If you should get lost at any point during this lesson, you can
always just close your web browser and start the process over again
from the beginning.

Figure 1: An example of an error on a company’s “About Us”

page.

2
Editing Text on Your Web Site
with VisibleCMS

Step 1: Log In
To begin, you will log in to the VisibleCMS web site. You will need the
login and password you received from your Visible Sales Rep.

1. Type http://www.yourcompany.com/visibleCMS/admin into the

address bar of your web browser, where “yourcompany.com”
represents your company’s web address.

2. Enter your login name and password into the appropriate boxes
(highlighted in Figure 2).

3. Press the gray button that says “Log In.”

TIP: You may want to bookmark this address on your web browser
so you can easily return to VisibleCMS any time you need to make a
change to your web site.

NOTE: If you do not know your login or password please contact your
Visible Sales Rep or the main office at 312-376-0243.
Figure 2: The VisibleCMS Admin Login screen.

3
Editing Text on Your Web Site
with VisibleCMS

Step 2: The Dashboard

Now that you’ve logged in to the VisibleCMS web site, you’ll see
the Dashboard. This is the main screen for making all administrative
changes to your web site. For this lesson, you will be editing text of a
web page, which takes place in the Manage Pages area.

1. Move your mouse over the “Manage Pages” button (highlighted

in Figure 3).

2. The button will move slightly to the left and will appear darker
to indicate you’re about to select it.

3. Click on the button to enter the Manage Pages screen.

Figure 3: The VisibleCMS Dashboard.

4
Editing Text on Your Web Site
with VisibleCMS

Step 3: Select A Page

You have arrived at the Manage Pages screen, where you will see a list
of all the web pages on your company’s site.

1. Locate the page you wish to edit from the list of available pages.
(In Figure 4, the highlighted example is a page called “About
Visible.”)

2. To select a page, click on the pencil icon next to its name.

TIP: If you would like to only view the page, click the magnifying
glass icon to see the current version. You can then return to the Manage
Pages screen by simply hitting the Back button on your web browser.

Figure 4: The Manage Pages screen.

5
Editing Text on Your Web Site
with VisibleCMS

Step 4: Select An Area To Edit

Once you’ve selected a page for editing you will see a version of the
page with several pencil icons next to areas of text. Each pencil icon
represents an area you can edit with VisibleCMS.

1. Locate the pencil icon closest to the text you wish to edit. (In
Figure 5, the highlighted pencil icon is associated with all of
the content below it on the page.)

2. Click on the pencil icon to begin editing this section.

NOTE: The screenshots of the example web page in this lesson are for
demonstration purposes only, and will look different from the pages on
your company’s web site.

Figure 5: An example “About Us” page ready to be edited.

6
Editing Text on Your Web Site
with VisibleCMS

Step 5: Edit Content

After clicking on a pencil icon you will arrive at the Edit Content
screen. This screen is an example of a “What You See Is What You
Get” web editor. To make simple changes to the text, you can just
delete and type as if you were using a word processor.

NOTE: Don’t worry if some of the formatting on this screen looks

different from what you previously saw on the web page. You are now
viewing a “behind-the-scenes” version of the page, and you will see the
formatting again when previewing your changes in the next step.

1. Locate the area of text you wish to edit (such as the example
paragraph highlighted in Figure 6).

2. Delete the incorrect text and type in the correct information.

3. Press the gray “Preview Changes” button at the bottom of the

screen to continue.

TIP: For further formatting changes, you can use the buttons at the
top of your screen, which function just like those in a word processor.
To see what a button does, just move your mouse over it and a descrip-
Figure 6: The Edit Content screen.
tion will pop up.

7
Editing Text on Your Web Site
with VisibleCMS

Step 6: Preview Changes

Now that you’ve finished making changes on the Edit Content screen,
you will see a preview of how the page looks with your edited text.

1. Look over your changes to make sure they are correct.

2. Click on the gray “Apply Changes” button at the lower right of

your screen (highlighted in Figure 7).

NOTE: If you’d still like to make more changes before saving, just
press the Back button on your web browser. If you believe you’ve made
a mistake and wish to go back to the original version, just click on the
word “cancel” at the lower right of your screen. This will take you back
to the Manage Pages screen in Step 3.

Figure 7: Preview version of the edited “About Us” page.

8
Editing Text on Your Web Site
with VisibleCMS

Step 7: Content Updated

Changes have now been confirmed, and you will see a mostly blank
screen letting you know your content has been updated.

1. Wait for the message on your screen saying “Content updated”

(highlighted in Figure 8).

2. Click on the first link (the word “here”) to view the completed
page.

NOTE: If you’d like to make further edits to this page, click on the
second link to go back to the Manage Pages screen in Step 3.

Figure 8: Screen indicating that content has been updated.

9
Editing Text on Your Web Site
with VisibleCMS

Success!
You will now see a live version of the web page. You will notice that
the incorrect text has been corrected. (An example of edited text is high-
lighted in Figure 9.)

Congratulations, you have just updated your company’s web site! To

make further text edits to your site in the future, just go back to the Visi-
bleCMS Login screen at http://www.yourcompany.com/visibleCMS/
admin to begin the proceess again.

Figure 9: The error on the “About Us” page has been corrected.

10