Pages
Create a Page
You can initiate creating a page from the dashboard, under the Pages navigation section or from the editor itself. The create page process is broken down into 5 steps.
Step 1
The navigation/page name will be the navigation link name as well as the name of the page unless you enter an alternate page name. Click Next.
Step 2
Select the page type desired. The newsletter may not be available if you do not have the newsletter module installed. Click next to proceed or previous to go back to step 1.
Step 3
On the third step of the create page you can select the site template design for the page. In this case there is only one, however each site is unique, so you may have more than one.
Step 4
There are three options when selecting the page content layout. The default “Blank Page” is pre-selected and has no formatting. You may also select from the pre structure sample content. This will have content already in the page to help you get a start on you page. If you have any saved page content, you may select that as well. To learn how to save page content see the page editing section.
Step 5
Once you’ve reached step 5 the page has been created and you may either create another page, or edit the content of the page that you have created.
How to Edit a Page
There are a number of ways to open a page in the Page Editor. Here’s a list of the possible page editing avenues:
- Quick edit from dashboard which opens the homepage in the editor
- Click on the name of the page from the dashboard page list
- You can also click on the page name in the recently edited list
- Open the page manager and click the edit button for the given page
- When you add a new page you can immediately begin editing it
Once you are in the Page Editor there are a couple of ways to open different pages:
- You can “navigate” the site to open pages for editing
- Recently edited pages are available in this view as well
Page Editor
The page editor is where pages can be modified, published, unpublished and deleted. Below is an example of what the page editor looks like:
Diagram C
- The navigation of the website can be used to access published pages just as you would navigate the actual website
- Edit Mode will display all editable areas of the page:
Diagram D
Clicking on the green pop-up button will take you to that editable section - Since editing the page content is the most common task, the edit content button bypasses the edit mode toggle, and immediately takes you into editing the page content.
- A page can be added/created from here. This will take you out of the editor and into the create page process.
- You can click the publish or un-publish buttons from here. If they are grayed out, then they are not available.
- This will display the status of the current page. It will display published, unpublished or locked by another user.
Diagram E
When it is locked by another user you may click the status and it will allow you to request the page to be unlocked. - This will delete the published as well as the review page copy, so only delete if you are absolutely sure you no longer want the page
- Every time a page is saved or published a snapshot of the changes. The history button allows you to view or revert the page to any version in the past.
- The preview button will open the review, or unpublished version of the website in a new browser window.
- The advanced button will slide up the advanced page view and allow you to make changes to the page that are not as common. This will be covered more in depth later.
- Any changes that you make in the advanced section will need to be saved, which can be done by clicking the Save Adv. Button.
- The navigation title is required whereas the page title is optional. You can see in the example above that B is the navigation title and A is the page title. Since only the navigation title has been entered, A will use it for the page title. If you want the page title to be more descriptive you can add the page title and A will be changed to the page title text.
- This is a list of the last three pages that you’ve edited. Selecting the page name will load that page into the Page Editor.
Page Editor Advanced
Clicking the “Advanced” button will slide up the advanced options:
Diagram K
- Meta Information is available to set for the Meta Title, Keywords and Description. VSM will auto populate this the first time that you add content to your page.
- You can replace the homepage of your website with any other page. Use caution when considering this option.
- The Parent Folder is the containing folder for this page. It helps organize to the pages and allows you to define editor permissions on folder. This will be covered further.
- Encoding for the page language can be set from the Language dropdown. This will not translate the content on the page, but will allow you to use a keyboard or software to write content on the page in that native language.
- The SSL checkbox will add encryption and secure the individual page. An SSL certificate must be established for the website before the page will display properly.
- Recently edited pages can easily be accessed by clicking on the name.
- Templates carry the design of the website and potentially there could be numerous designs for different page treatments within the website. You may select a different design from the dropdown. This will auto apply to the page.
- Companion pages may be available for the page. This is determined by the template selected above. If the template has companion pages established, up to two may be available. A companion page is a page that has no navigation or design and may be referenced from multiple pages giving persistent content. Pressing the edit button next to the companion dropdown will open that companion page in the editor. If you edit the companion’s content and that companion is referenced by many pages, the content will update for all of them.
- The custom CSS input allows you to place addition styles in the code of the page. You will need to have strong CSS knowledge to utilize this properly.
- A navigation icon can be specified for any page. It will add that image to the navigation element of the page. The display of this is dependent upon the overall design of the website.
- To save the changes that you have made in the advanced section press the “Save Adv.” button.
Editing Content
Once you’ve loaded the desired page into the Page Editor you can then start editing the page content. By either selecting the Edit Content or picking the content element to edit from the edit mode view, will open the content editor over the current view.
Diagram F
The content editor works very much like a word processor. Text, images and hyperlinks can all be created, modified and managed on the page from here.
- From the top you have the options of “Save Changes”, “Save and Close”, and Cancel. Save Changes will keep the content editor open and save any work that you have done. Save and Close will save your changes then close the content editor, taking you back to the Page Editor. Cancel will close the window and any changes that haven’t been saved will be lost.
- This is the main toolbar for editing page content which will be outlined in more detail later. View Video about selecting an embedded table cell.
- We’ve added a pixel ruler to give a better idea of how the page will render.
- The content that you will be editing is presented here. The navigation and overall design is protected so that you can better focus on content editing.
Toolbar
Diagram G
All elements of the toolbar will be outlined below:
|
|
Undo/Redo |
|
This will allow you to undo or redo a change that you’ve made to the content. If they are grayed out, as in the example image, the action isn’t available, since no changes have been made.
|
|
|
|
Cut, Copy, Paste, Paste Text |
|
You can select text and use the cut function to add that text to the clipboard. Cutting will remove the selected text whereas copying will leave the selected text and add it to the clipboard. You can also paste any text from the clipboard. Paste Text differs from general paste in that it will only paste unformatted text. NOTE: This function may not be available in all browsers
|
|
|
|
Find/Replace |
|
Find and replace is a very handy function that will allow you to either find text on the page or find and replace text. This is limited to the page you are editing.
Clicking the icon will open the function dialog:
|
|
|
|
Bold, Italics and Underline |
|
Highlight the text that you would like to format then select either bold, italics or underline. If you have selected text that is already bold and click the “Bold” icon, the bold formatting on the text will be removed.
|
|
|
|
Font and Highlight Color |
|
Below the icon the color bar indicates the active color. In this case it is gray. You can select a different color by selecting the down pointing arrow to the right of the icon. This will open the color picker:
This isn’t the limit of you options. If you don’t happen to see the color that you would like, you can select “More colors”. From this selection you can choose from three different palettes: Picker, Pallet and Named.
Please note that sometimes the color will not apply to the selected text if a style is overriding it.
|
|
|
|
Style Selection |
|
The style dropdown will populate with structured styles set up for the given website. By highlighting your text then selecting the style form the dropdown, will apply that formatting.
|
|
|
|
Pre-defined HTML |
|
To apply the pre defined HTML, highlight the text and select the item from the dropdown. There may be styles assigned to items in the dropdown depending upon the website structure.
|
|
|
|
Font Family |
|
To change the font family, highlight the text and select the desired font from the dropdown. You may find the font selection somewhat limited, since only standard web safe fonts are available.
|
|
|
|
Font Size |
|
Highlight the text and select the font size that you would like to adjust it to.
|
|
|
|
Text Elements |
|
Selecting the text icon will center the selected text or text surrounding the placement of the cursor. For further text options select the right down arrow. The functions listed below are explained by their name. The special characters function will open up a display of characters not available on a standard keyboard and the selected character is inserted at the site of the cursor. |
|
|
|
Paragraph Elements |
|
For paragraph formatting options select the right down arrow. The functions listed below are explained by their name with some notable exceptions:
Blockquote Inserts tab spacing to the left and right of the text block
Horizontal Rule Places a solid thin separator line horizontally
Line Break By default hitting enter on the keyboard will add a double space. Selecting Line Break will only add a single space. Holding down the shift key while pressing the enter key on the keyboard will also enter a single space. |
|
|
Hyperlinking |
|
Linking from one page to another is fundamental to a website. With the exception of the remove link all the elements listed will require further in-depth explanation. |
|
|
|
|
To link to a page, document, image or website, select the text that you wish to link, then from the Links dropdown select Link Selected Item opening the following dialog box:
|
|
|
General Tab |
|
|
The link URL is the destination that you would like the link to connect to. For example to link to Efinity Technologies, the link URL would read http://www.efinitytech.com.
To link easily to an internal page within your website, leave the link URL and select the page from the Internal Page dropdown list. This will auto populate the link URL with the path to the selected page.
You may also link to an image or document with your website image/doc library. Selecting the Browse button will open the image/doc library dialog: |
|
Diagram H
Find the image by selecting folder (1) and viewing the files and inserting (5) the desired image. If you don’t yet have the image in your library, you can press browse (2) to search your local computer and find an image. Once the image to upload is selected it will populate the browse input box (3) and then it can be uploaded to your website library by clicking (4) Upload File. The list of files will refresh and then you can insert the new image (5). The Link URL in the underlying window will then be populated with the image/document path.
Diagram I
- If any anchors exist on the page, you may link to them instead, by selecting one from the dropdown. Bookmarks and anchors will be further explained later.
- The target determines how the link functions, whether it opens a new browser window, or replaces an existing one.
- The title allows you to tag the link so that if you place your cursor over the link it will display the title.
- By selecting a Class from the dropdown you may assign any formatting styles to the link that has been previously set up for the website.
- Finally the REL tag allows you to set some additional attributes to the link. This is used mainly when linking to an image and using lightbox to add a nice presentation to the opening of the image over the website. You may also group images together on the page by selecting the same lightbox group for each image. This will allow the user to cycle to the other images in the group without exiting the lightbox display.
Once you have all the options for the link you may press the insert button to link the text and close the link dialog. If not, there are additional tabs available. The only other selection we’ll cover here is the Popup tab. The Events and Advanced require strong HTML and DHTML knowledge to properly utilize.
To link the pop-up to an internal page, select the page from the dropdown list and it will auto populate the most common attributes. You may adjust the width and height of the pop-up window as well as the pop-up position.
|
|
|
|
An anchor is a “spot” on the page that you can link to. You can create an anchor out of any selected text. Simply input the Anchor name and press insert.
The anchor will then be available in the link dialog.
|
|
|
|
Table formatting is the preferred method for text layout. If you are trying to organize the content on your page and would like to have a image to the left of your text, or three columns of text, tables are the answer.
Tables can be a bit involved, but remembering that it is really just rows and columns can help put it in perspective.
The functions listed to the left (with the exception of insert table) require that the cursor be in a table or table cell. Obviously, you can’t determine the cell properties if you don’t indicate which cell.
Before we get into the table functions we’ll define the elements of a table. |
|
Table Diagram
Diagram J
The diagram above will help better associate table functions and structure later on in this section.
|
|
|
Insert Table |
|
|
This will insert a new table. A table can be inserted into another table’s cell to create a nested table as well. The insert dialog box will open:
The key fields are the Cols and Rows. Cols are the number of columns you would like to have along with the number of rows. Additional attributes can be set, reference the table diagram previous to better understand the meaning of cellpadding and cellspacing. The acceptable input for cellpadding, cellspacing, width and height is a pixel number. For the width and height you may specify a percentage as well. If using a percentage, be sure to add the percent sign to the field i.e. Width 100%.
Additional properties are available under the advanced tab. Once you have everything specified that you require, insert the table.
|
|
Table Properties
This will open the same dialog as the insert table.
Row Properties
There isn’t a lot that should be set at the row level. Most property edits should be made at the table or cell level. The row properties will open a dialog box and allow you to adjust some minor and relatively few settings.
Cell Properties
The cell properties on the other-hand are quite useful and necessary. Again, selecting cell properties from the dropdown will open a dialog box:
The alignment lets you specify the text align as left, right or center. Vertical alignment allows you to align the cell’s contents vertically as top, center, or bottom. Width and Height are similar to the table and accept percentages. Just above the update button you have the option of applying your changes to the current cell, all cells in the row, or all cells in the table. This is extremely handy if you have a lot of cells to update with similar information.
The advanced tab allows you to set the cell background color or add an image to the background. View Video about selecting an embedded table cell.
Merge Cells
Many times you’ll have the need to span cells for presentation. For example you may want an image with a caption below and text on the right side. You would start with a table of 2 rows and 2 columns. In the first row first column would be your image. On the second row first column would be the caption. The text that is to run the height of the table on the right will need to “span” the two rows since it needs to occupy row 1 column 2 and row 2 column 2 seamlessly. The following dialog will display:
Making sure that our cursor is in the right column, we would select rows: 2 and leave the columns set to 1. This will merge our rows so our content can span 2 rows.
Split Cells
Any time that you have merged cells, you can then split them back. Place the cursor in the merged cells and press the split dropdown.
The remaining table functions are explained well by their names.
|
|
The image dropdown allows you to open an image’s properties, insert an image, and gallery. An image must be selected before the properties will be able to be opened. You can know that an image is selected when “handles” (little white bordered boxes) display around the image.
|
Image Properties
Once you’ve properly selected the image and pressed properties the following dialog box will appear:
You will see an image preview and some general information about the image. Be careful if you choose to adjust the image URL. If you change it to an image that doesn’t exist, the image will appear broken.
The Appearance tab allows you to adjust the display of the image in relationship to other content.
The alignment of the image will allow you to wrap text around it. Changing the dropdown select will adjust the preview to the right. You can resize the image, however this is discouraged, since the image will appear pixilated. To resize properly, do it within the image/document library (see Image/Docs).
The vertical and horizontal spacing can be adjusted as well. This will allow you input a number of pixels to space the image away from other content. A border may be set on the image by inputting the number of pixels for its width.
Insert an Image
Clicking the insert image will open the image/document library (ref Diagram H). This uses the same process as the linking explanation below Diagram H.
Insert a Gallery
If you have a gallery already created, you can insert it onto the page from here. To understand how to create a gallery, see the Image/Documents section, specifically Galleries. A dialog box will open and you will be able to insert the gallery from the selected dropdown.
|
|
Many of the insert functions listed here are repeated elsewhere. Insert Image and gallery are both defined under the Toolbar > Images section. Insert Document link will open the image/docs library and you may select a file. The filename will become the link name and will be auto created. This function is a time saving measure over having to define each file before linking.
|
Insert Form
Forms are an excellent way to collect interest from your customers. Setting up a form properly requires a processor. This is explained under Forms > Processors. If you do not have a processor set-up prior to attempting to add a form, the insert form dialog will indicate that this needs to be completed first. Here’s the insert form dialog:
From the form dropdown, you will be able to select either form skeleton or simple contact form. If you have the data elements module installed you may see directories you’ve created show up as a part of this dropdown as well. The skeleton form is empty and only inputs the form tags whereas the simple form adds common fields such as name, email and comments. With any of the forms you may select “Use Captcha”. This will add Captcha to the form to help prevent spam messages. Before the form is inserted into the page you will need to select a processor from the dropdown list. These are set-up in the Forms > Processor section and define how the form is to be delivered and what page the visitor should be directed to once the form submits.
If you already have a form on the page and would like to add the ability for visitors to add a document or image to the form submission, select the Form Component from the dropdown list and insert it. This has to be inserted into an existing form for it to work.
Insert Media
If you have media files, such as flash or QuickTime movies, you can insert them into the page with the insert media link. It will open the following dialog:
There are three types of valid media: Flash, QuickTime and Windows Media. Select the type from the dropdown. Any files that you have uploaded into the images/doc library (it doesn’t matter which folder) that match the type will display in the File dropdown list. Simply select the file and hit insert. There are some additional preferences that may be set on the advanced tab.
Insert HTML
When you subscribe to some third party services such as PayPal, they may send you a snippet of HTML code. It can be very difficult to insert this code in the correct location when viewing the HTML source. The insert HTML option allows you to place your cursor at the location of the desired insert, select insert HTML, paste your HTML code into the text area and press insert. The code will insert into the page without you needing to view the native HTML code.
|
|
Utilities |
|
The utilities dropdown provides some general housecleaning functions to clean up troublesome formatting. When content is pasted from other programs such as Word, formatting specific to that program can be orphaned in the page. Clean Selected Content will strip Word specific formatting out. |
Remove Formatting
This will remove all formatting from the selected text.
Table Cleaner
If you paste spreadsheet information from Excel, it can cause “code bloat” and add extraneous HTML into the page. This will clean up the code and reduce the page size.
Clean Messy Code
If you have troublesome text that doesn’t seem to cooperate, select the text and press “Clean Messy Code” to help correct the issue.
Toggle Visible Aids
Tables will display with a dashed line around them. Toggling visual aids will cause the dashed lines to disappear. Selecting “Toggle Visible Aids” again will turn the dashed lines back on.
These areas are reserved for experts in CSS or VSM internal components, so it isn’t covered within general help.
|
|
Save Page Content |
|
Clicking this will “snapshot” the page content and save it under a name you specify. This page content can then be recalled when adding a new page and can be managed from the Website > Templates. |
|
|
|
HTML mode |
|
At anytime you can access the raw HTML for the page content by selecting the HTML button. |
|
