Website Manager - Look and Feel

From RPM 3.0 Help Wiki
Jump to: navigation, search

Look and feel big.jpg

Introduction

The Website Manager - Look and Feel page is your website editor. This page allows you to do the following:

  • add/edit/delete content, including pictures, text, and rich media like videos
  • add/edit/remove pre-defined Widgets to your website
  • add/remove additional web pages
  • edit your website's menu
  • edit the your page's Meta Tags
  • add javascript to your website for advanced functionality
  • change your website's template
  • add/edit/delete blog entries

Website Manager - Look and Feel Overview

Top lookandfeel.jpg

Accessing

Hover the mouse on top of Website Manager, then click on Look And Feel


Layout

The page features a Website Editor Menu and a preview of your website. When you use the editor to make changes, those changes are instantly made to your live website. At the moment, RPM Agent 3 does not support an undo feature.
Bo websitelf overview.jpg

Website Editor Menu

Toggle Edit Mode

Toggle Edit Mode
The purpose of Toggle Edit Mode is to preview what your website looks like to the public eye whiles you are logged into your back office. When you click this link you will notice that little icons like this one Mambo edit.png appear and disappear.



Adding/Updating Content

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
    Top lookandfeel.jpg

  2. Navigate to the page on which you wish to edit.
  3. Mambo edit.pngClick on the "edit icon" in the area you wish to add or update website content. The Content Editor should appear with your current content.
  4. Make any changes you wish.
  5. Mambo save.png Click on the "save icon" and your new content will now appear on your website.
  • Should you wish to cancel your changes, simply press the "cancel icon." Mambo cancel.png
  • Editable hidden pages will show up in the website menu highlighted in orange.
  • To avoid confusion, there can only be one editor open at a time. Disabled editors are shown with this icon: Mambo locked.png

To Edit the source of your content click on the "Source" button in the top left corner of the editor tool bar.

content_source.png


Add/Remove Widgets

Add/Remove Widgets Window

The side column area(s) on the pages of your website are used to hold widgets. Click the Add/Remove Widgets link to open the Widgets window (figure: Add/Remove Widgets Window). When the window opens, parts of your website will turn yellow to indicate where in your website you can place widgets.

To add a widget to your website:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.\
  2. Click on the Add remove widgets.jpg link in the green menu above.
  3. Locate the desired widget in the Add/Remove Widget window
  4. Click and hold the small "list" icon on the right-hand side of the desired widget
  5. Drag the widget to a target yellow placement area on your website
  6. When the widget recognizes the placement location, you will notice it change into a larger version. When this happens, release the mouse button.
  • NOTE: a complete list of available widgets and their function is available here.


To remove a widget from your website:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.\
  2. Click on the Add remove widgets.jpg link in the green menu above.
  3. Locate the desired widget in the widget window on your site.
  4. Click and hold the small "list" icon on the right-hand side of the desired widget
  5. Drag the widget back to the center Add/remove Widgets window and drop.
Dragging Widget on to Website



Add/Delete Pages, Edit Menu

Menu manager start sm.jpeg

Add/Remove Menu Items Window

Edit/Delete an existing Menu Item

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Open the "Add/Delete Pages, Edit Menu" window.
  3. Click on the menu item to be edited in the Menu Order section on the left. The edit form for the selected menu item will be shown on the right.
  4. If the menu item is not an Internal Page, a "Delete" button will appear. Click it to delete a menu item and its website page content. Internal Pages can still be hidden.
  5. Update the form and click the Update button.
  6. If you would like to hide a menu item but still have the page accessible (via hyperlink) check the "Hidden" checkbox. NOTE: you can restore hidden pages by selecting the menu item, un-checking "Hidden", and clicking "Update".


Add a Menu Item

Edit/Delete Menu Item Form

To create a menu item that is an editable page on your site follow these steps:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Open the "Add/Delete Pages, Edit Menu" window and click on "Add Menu Item" on the upper left hand side of the window. The Add form will be displayed on the right.
  3. From the Page Type drop-down list, select "Website Page" (already selected by default).
  4. Enter the title of the page in the "Menu Title" text box.
  5. Click "Add Page" and you'll see the new page in the menu.


Add a Menu Hyperlink

Adding A Linked Menu Item

To create a menu item that links to an external page follow these steps:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Open the "Add/Delete Pages, Edit Menu" window and click on "Add Menu Item" on the upper left hand side of the window. The form will be displayed on the right.
  3. From the Page Type drop-down list, select "Link to External Website".
  4. Enter the title of the page in the "Menu Title" text box.
  5. Enter the URL of the page you want the button to navigate to in the "Link" text box.
  6. Choose whether or not you want the new page button to open in a new browser window/tab when clicked (so users don't navigate away from your site)
  7. Click "Add Page" and you'll see the new page in the menu


To create a menu item that links to a file saved on the server follow these steps:

  1. Open the "Add/Delete Pages, Edit Menu" window and click on "Add Menu Item" on the upper left hand side of the window. The form will be displayed on the right.
  2. From the Page Type drop-down list, select "Link to External Website".
  3. Enter the title of the page in the "Menu Title" text box.
  4. Click "Browse Server" to open the file manager.
  5. If your file is not already in the file manager:
    1. Click on "Upload".
    2. Click on the "Browse" button to look for your file.
    3. Navigate to your file and click "Open" - the File Upload window will close and the pathway to your file will appear beside the "Browse" button.
    4. Click on "Upload Selected File".
  6. Double click the file you want to link to - the pathway to your file will appear in the Link text box.
  7. Choose whether or not you want the new page button to open in a new browser window/tab when clicked (so users don't navigate away from your site).
  8. Click "Add" and you'll see the new menu item in the menu.


Moving a Menu item into a sub-menu

Re-Organize the Menu

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Open the "Add/Delete Pages, Edit Menu" window.
  3. In the Menu Order section, click and hold the menu item you wish to move.
  4. If you wish to make the menu part of a submenu, drag and drop the item slightly below and to the right of the desired menu header in the menu bar. When the placeholder (white box) appears in the proper place, release the mouse button.
  5. If you wish to simply re-order the menu, drag the menu item until the placeholder appears in the proper spot.
  6. Release the mouse button and the menu on the actual website will be refreshed to show the change.

Hide or Show Menu item

  1. Log into your site
  2. Go to Website Manger
  3. Go to Look And Feel
  4. Go to Add/Delete Page Edit Menu Add del.png
  5. Select menu item you want to Hide or Show in menu order list Order.png
  6. On right hand side of window in options either check or uncheck the hidden box Hidden check.png
  7. Click update Update.png
  8. If need be re-order menu item by clicking and holding the blue handle beside the name and dragging it up or down the list.
Menu Order Legend
Legend
  • Internal (System) Page - Default website page already supplied
  • User Created Page - Website page created by you
  • Hyperlink - Menu item link to another website
  • Empty Hyperlink - Empty menu item link - can be used for unclickable menu category headers
  • Hidden Page - Internal or user created page that isn't currently visible on the menu



Edit Page Meta Tags - Advanced Users

Edit Meta Tags
!! ADVANCED USERS ONLY !!

Meta Tags are useful for search engine optimization (Search Engine Optimization). Please read this before making changes to your Meta Tags.

To modify page meta tags:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Click on "Edit Page Meta Tags"
  3. Change the "Meta Title," "Meta Keywords," or "Meta Descriptions," make the change in the appropriate field and
  4. Click "Update."
  5. (Optional:) Navigate through the other pages of your website and make the same changes if necessary



Edit Meta Tags

Edit Page Javascript

!! ADVANCED USERS ONLY !!

You can add custom javascript to your website. Custom javascript allows you to run custom client-side applications on your website. To add javascript:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Click the "Edit Page Javascript" button on the edit menu
  3. Cut the javascript from your computer and paste into the javascript window.
  4. Click update.



Change Template

RealPageMaker is regularly adding new templates to make sure your website always looks modern and new. To change your website template:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
    Top lookandfeel.jpg

  2. Click "Change Template" on the website editor menu to open the template manager
    Change template.jpg

  3. Use the template selector on the right to scroll through template thumbnails
    Template selector.jpg

  4. Click the thumbnails to see a larger preview of the template
    Template preview.jpg

  5. When you have found a template you like, click "Click to use Template"
    Use template.jpg

  6. If you are satisfied with your template, you are done. If not, repeat the process. You can change the template as many times as you like.

  • If you are interested in custom work, please visit this page.


Common Website Tasks

Setting-Up a Link to a File

If you have a file on your computer (such as a PDF document) and would like to add a link on a page that will open the file (or give visitors the option to download it), do the following:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Navigate to the page you want to add the link on
  3. Click on the edit icon Mambo edit.png to open the page editor.
  4. Type the text you want to make a link (ex. my new brochure).
  5. Highlight the text you just typed and click on the Link icon FCK insert-link.gif from the editor's tools.
  6. A 'Link' window will pop up. Click on 'Browse Server'. This will open the 'Resources Browser' which is where you up load files for your site.
  7. At the top of the window, click the 'Upload' button open the 'Upload New File' section.
  8. Click on the 'Browse...' button to search for your file
  9. Locate the file you would like attached to the link and click 'Open'.
  10. In the 'Upload New File' click 'Upload Selected File' at the bottom right hand corner of that section.
  11. Your new file should be visible now in the 'File Browser'. Double-click on the file.
  12. It will automatically insert a link into the URL field of the 'Link' window.
  13. (Optional) If you want the file to open in a new window, click the 'Target' tab, and select 'New Window (_blank)' from the drop-down.
  14. Click 'OK' to exit out of the 'Link' window.
  15. Click the save button FCK save.gif to save your changes.
  • You can cancel out of the editor (and discard any changes) at any point by clicking the cancel button FCK cancel.gif

Adding links to page within your website

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
    Top lookandfeel.jpg

  2. Navigate to the page you want to add the link to.
  3. Click on the edit icon Mambo edit.png to open the page editor.
  4. Type the text you want to make a link (ex. 'Click Here to go to the next page').
  5. Highlight the text and click on the 'edit/insert link' icon FCK insert-link.gif.
  6. Enter the URL.
  7. Click 'OK' to exit out of the 'Link' window.
  8. Click the save button FCK save.gif to save your changes.
  • You can cancel out of the editor (and discard any changes) at any point by clicking the cancel button FCK cancel.gif

Adding links to an external website

If you would like to add a link on a page that will open the another page (or website), do the following:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
    Top lookandfeel.jpg

  2. Navigate to the page you want to add the link to.
  3. Click on the edit icon Mambo edit.png to open the page editor.
  4. Type the text you want to make a link (ex. 'Click Here to visit name of other website').
  5. Highlight the text and click on the 'edit/insert link' icon FCK insert-link.gif.
  6. Enter the full URL of the website you want to link to.
    • Recommended: To have the link open in a new window, click the 'Target' tab, and select 'New Window (_blank)' from the drop-down.
  7. Click 'OK' to exit out of the 'Link' window.
  8. Click the save button FCK save.gif to save your changes.
  • You can cancel out of the editor (and discard any changes) at any point by clicking the cancel button FCK cancel.gif

Adding Links to Images on your Website

You can add hyperlinks to images that you've added to the content section of your website. To do so, follow these steps:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
    Top lookandfeel.jpg

  2. Navigate to the page you want to add the link to.
  3. Click on the edit icon Mambo edit.png to open the page editor.
  4. From within the editor, click on the Image that you want to add a hyperlink to.
    Image link selected.jpg

  5. Click on the Link button.
    Image clicking link.jpg

  6. In the URL field paste or type-in the website address. You will notice that the http:// has already been filled in for you.
    Image link url.jpg

    Note:If you are linking to an external website, we recommend you click on the Target tab, then change the target to New Window (_blank) so that people stay on your website while exploring the new one.

  7. Click 'OK' to exit out of the 'Link' window. Image link ok.jpg
  8. Click the save button FCK save.gif to save your changes.


Add/Change a Blog Entry

The blog is an integral part of your website and an easy way to keep your clients updated with recent industry information and news. Maintenance of your blog is also a good way to increase your website's ranking in search engines as part of a healthy search engine optimization (SEO) practice. To add new blog entries:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Navigate to the Blog page. Blog entries are added/edited/deleted using the small icons (Note: not the larger "page edit" icon, this will edit the page itself, not the blog entries):
    • To add a new entry click the small Blog add-blog-icon.gif 'Add Blog' icon. Write the blog entry in the editor that appears and then click the 'Save' button to save the entry.
    • To edit an existing blog entry, click the 'Edit Blog' icon Blog edit-blog-icon.gif next to the entry you want to edit. This will open an editor where you can edit the entry. When you are done, click the 'Save' button to save your changes.
    • To delete an existing blog entry, click the 'Delete Blog' icon Blog delete-blog-icon.gif next to the entry you want to remove.

Tip: - including links in the blog is a good way of increasing search engine placement as part of a good SEO policy.

Note: - Blog postings longer than a pre-determined length will not be shown in full on the main blog page, the archive pages nor the category ones. To force your posting to be shown on these pages please uncheck the Show Summary checkbox when editing the blog posting.

Note: - You may only edit one blog posting at a time or edit one of the content areas, the edit icons will change and you will not be able to open any other editors until you either save or cancel the changes that you are making.


Blog Category Editor

Your blog postings can be organized into categories. The 'General' and 'Listings' categories are special and always available, a category editor is provided so that you may add / edit custom categories. To edit categories used in your blog you can follow the following instructions.

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Navigate to the Blog page.
    • To open the category editor click the small Blog add-blog-icon.gif 'Blog Category Editor' icon.
    • To add a category, enter it's name and click the 'Add' button.
    • To edit or delete a category update it's name and click the 'Update' or 'Delete' buttons. Note: if you delete a category that currently holds blog postings they will be moved to the 'General' category.
    • To close the editor click the 'Close' button. The blog will be reloaded and your changes reflected.

Note: - The 'General' and 'Listings' categories are required by the system and can not be edited or removed. They therefore do not appear in the category editor.


Add a Testimonial

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
    Top lookandfeel.jpg

  2. The live version of your website will be seen below. Go directly to your testimonials page.
    Testimonialspage.jpg

  3. Click the "Edit" icon in the Website Panel Mambo edit.png
  4. The content editor will appear. Write your testimonial.
  5. Click the disk icon just above the text box to save the testimonial entry. Mambo save.png

Add an Email Link

Although this is not recommended (see Why doesn't my email show on my website), you can post emails as links (which will automatically open the default email program on the computer). This is done as follows:

  1. Make sure you've logged into your back office and navigate to the Website Manager -> Look and Feel section.
  2. Navigate to the page you want to add the link to.
  3. Click on the edit icon Mambo edit.png to open the content editor.
  4. Type the text you want to make a link (ex. 'Send me an email').
  5. Select the text and click on the 'edit/insert link' icon FCK insert-link.gif from the editor's tools.
  6. Select "E-Mail" from the "Link Type" drop-down.
  7. Fill in the details for the email link:
    • E-Mail Address: where the email will be sent (i.e. your email address)
    • Message Subject: the default subject line that will be used when someone clicks the link
    • Message Body: any text you'd like to already be in the email. You can leave this blank if you like.
  8. Click 'OK' to exit out of the 'Link' window.
  9. Click the save button FCK save.gif to save your changes.
  • You can cancel out of the editor (and discard any changes) at any point by clicking the cancel button FCK cancel.gif