Understanding WebPal Sites

WebPal Sites allows you to manage websites and web portals in a similar fashion to other content management systems. WebPal offers powerful content functionality right from the start through our various list of extensions (or commonly referred to as "widgets" or "plugins"). 

The Document Tree

WebPal sites is structured in a hierarchical manner using a document tree. At the highest level you have a chapter called "thecontent", which contains all of your content. Each of the folders under the content are corresponding to pages in your website. Within these folders, there can be inner pages.

Each of the pages have a name and shorttitle:

• name (which is found under attributes, on the panel to the right) is the name of the page while navigating through the website. For instance, the "About Us" chapter for which you have given the title "about" can be found here: http://www.mydomain.com/about
• shorttitle - is the title of the page visible in the navigation. From the example above, the shorttitle would be "About Us"

Attributes

Each page has a few choices under attributes:

• design: choose the design that applies to the page.
• show-in-menu: yes/no based on if you want a page displayed in the navigation bar
• index: should this page/content be indexed by a search engine such as Google

HTML/WYSIWYG Editor

Every page has a content area which you have full control over.  For more information on editing your content, see our editing content section.

Extensions

There are a number of extensions that WebPal offers. See how to install extensions here. For access to our public repository list, subscribe to our GitHub. To add a new feature to your website or application that is not listed in our repository, contact us for more information. 

Common

Under the 'common' page you are able to edit logo and footer content which appear on all pages. This page is hidden from navigation. 

Designs

These are your creative designs that each of your pages are linked to from the attributes. 

Editing Content

Editing content in WebPal sites follows a typical editing session. This can be described as follows:

1. Open the sites from the welcome dashboard upon login or from the sites icon in the top left panel. You will now be presented with the document tree outlining all of the content on your website.
2. Select the root page you would like to edit your content from. This is where you do all of your content editing. Most of your content editing will happen in an "HTML" node.
3. Insert a new HTML node by right clicking on the chapter and selecting "Insert > html", or clicking on the "Insert > html" button in the action bar. Enter the name and short title as described in the overview.
4. If an "HTML" node has already been created, simply click on the page you would like to edit. This will open up the text editor as shown below. 
    

HTML/WYSIWYG Editor

Here is an overview of the icons at the top of the WYSIWYG editor: 

​Font Styles: This drop down list has all possible formatting styles predefined for the design.

For example: Heading 1, Heading 2, ... etc.

Insert image: 3 options available. See how to insert images here.

Insert video: Copy and paste URL or embed code from YouTube or Vimeo and set properties as required.

Insert horizontal line: Horizontal line is predefined for website style, mainly used for title and content separation.

Insert Table: Table insertion is very simple and self explanatory. Set table width as necessary to fit the content area or set it 100% to cover the full content width. 

To edit a table that is already inserted,right click on the table > Table Properties
To edit a cell, right click on the table > Cell > Cell Properties

Insert Link: 4 options available

• External URL
• Chapter: linking within the website
• Email
• Browse: browse to a file within Document Manager

To edit a link that is already inserted,

• right click on linked text > Edit link
• or double click on linked text

Save Your Changes

1. Once you have made changes to your web, save your work by clicking "CTRL S" or the "Apply" button in the preview panel to the right. A red asterix will appear next to the root page and the "Publish" button will become available to you in the main chapter.
2. Clicking on the apply button will save your work back to the WebPal server. Note that your website has not yet been updated, you have simply saved your work. At this point you can continue editing or move to the next step, previewing your changes.

Preview Your Work

1. To preview your work, click on the preview panel to the right.
   NOTE: if the right panel is hidden, click the arrow to the right of the action bar to open it.
2. You will see a preview of your webpage in the preview panel. Select the "Preview" button and choose whether you would like to preview the page in a popup or new tab within your browser. 

Publish Live

1. If you are satisfied with your changes you can simply select the "Publish" button located in action bar of the root page you are publishing.
2. A window will pop up asking to verifying that the changes will be published to all selected sites. Select "Publish" and check your live site to confirm the changes.

NOTE: If you have not taken your site live yet, contact us for assistance.

Inserting Images

To insert an image to your webpage, begin by opening the HTML node within the chapter you would like to add your image to. Click the "insert image" button and the below window will open.

There are three options available to insert images:

Option 1: Upload from computer

1. Select the file from your computer and click the "insert image" button. 

Option 2: External URL

1. Insert the URL from the image address within an external website and select "Submit".
   NOTE: If you do not have the external URL, simply right click on the image and select "copy image address".
2. If a successful link has been entered, the "Submit" button will turn green and read "Success". If the link address cannot be read, the button will state to "Try Again"

Option 3: Browse and find in the Document Manager

1. If you have already uploaded your image to WebPal Docs, browse the image from the folder it is located in.
2. Alternatively, you can search by the file name within each folder.

Image Properties

Once your image has been inserted, set the image title, alt text, size, and alignment under "Properties". 

To edit an image that is already inserted or replace the image:

1. Right click on the image > Image properties. Edit the properties, or follow the above steps to replace the image.
2. Alternatively, double click on the image and edit or update accordingly. 
    

Insert Video:

Copy and paste URL or embed code from YouTube or Vimeo and set properties as required.

WebPal Extensions

Importing extensions (also known as plugins) into WebPal is easy to do via a GitHub account.

1. Start by logging into WebPal System Tools as seen below:

2. Select "CMS Tools" > "Import Web" 
3. In the Import Web tab select "GitHub" in the Import From option

4. Open the Palomino GitHub account which can be found at https://github.com/palominoinc​

4. Open the extension you would like to import. Click the "Clone or download" button and copy the extension URL. 

5. Open the Import Web tab in WebPal again and paste the link into the Git URL field. Choose a name for the extension if applicable.
6. Select "Import". The extension will then be added to your web.

Publishing Your Website

Once you have taken your website live, publishing your changes can be done very easily. 

1. Once you have made your content changes and previewed your work, simply select the "Publish" button located in action bar of the root page you are publishing.
2. Depending on the page, a window will pop up asking to verifying the changes you are publishing selected sites. The following options will appear:

1. Publish this page only. Publish the subpage only
2. Publish this page and all subpages. Publish both the root page and all subpages within the page. 

3. This publishes all selected changes to the live site. Are you sure? This option will pop up only when there is a root page and no subpages within it. 

3. Select "Publish" and check your live site to confirm the changes.

NOTE: If you have not taken your site live yet, contact us for assistance.

SEO Techniques

Search Engine Optimization (SEO), is optimized, user-friendly content that makes your site visible on search engines and to a wider audience. There are multiple ways to utilize on-page SEO in WebPal.

Updating Your Settings

In the documents tree below your site name, open the settings for your entire website. The following attributes will be available to update:

Title aka Title Tag

 According to Moz, title tags — technically called title elements — define the title of your website. Title tags are often used on search engine results pages (SERPs) to display preview snippets for a given page, and are displayed at the top of your browser. Title tags are the most important set of meta tags on your website.

While the size of your title tag is dictated by how many characters will fit into a 512-pixel display, it is recommended to stay within 50-60 characters.

Description aka Meta Description

The meta description is the attribute that summarizes the web page. The description is used to display snippets on SERPs. The meta description does not affect your SEO ranking, but is very important for click through rates to your website and your overall search marketing.

There is no limit to the number of characters in your meta description, however, search engines generally pull between 150-160 characters. 

Keywords aka Meta Keywords

Your meta keywords are a series of keywords that are relevant to the page. The meta keyword attributes is optional, as most search engines are no longer using them as a ranking factor. 

Other SEO Tips

There are a few other ways to optimize your SEO rankings throughout WebPal:

Headers and Body Text

Ensure your H1 tag contains the most important keywords to your webpage. Search engines follow the chain of command in terms of prioritizing keywords, so ensure you are using H1, H2, H3, etc. and body text (aka "Normal Paragraph" text) in order of keyword importance.

Images and Alt Image Attributes

Images are very important to include on each of page of your website. Be sure to include the image's title, filename, surrounding text, and alt attributes for optimal rankings. The image's title and alt text are particularly important and can be updated from the image properties in WebPal. See how to insert images and update properties here.

Collaborating with Others

WebPal allows for multiple users to collaborate on the same site at once. However, if more than one user is attempting to edit the same page or extension, an "element is locked by" message will appear.

In order to access the page, the person editing will need to finish their session and exit the page. 

Multilingual Content

WebPal offers website content to be multilingual if necessary. 

WebPal Node Extension Library

WebPal's extensive library of Node Extensions allows users to pick and choose functionality right from the get-go with no custom development required. Reduce development costs and turnaround time with a solid framework in place.

Organizing Pages and Nodes

Most web sites are organized in a tree structure:

All top-level pages are directly accessible from the domain name of your site, for example mysite.com/home, mysite.com/about, etc etc.

In the example above, home is the first page at the top level, thus WebPal will automatically redirect to this page if the user entered mypage.com in the browser.

Some terms, based on the example above: 

• products is a parent page of category A
• staff is a child, or sub-page, of about
• widget 1 is a leaf page, it has no children
• home, products, about, and contact are top-level (level 1) pages
• category A, B, staff, and board are level 2 pages
• staff and board are siblings

Ordering Siblings

Quite often, you need to change the order of pages in your tree. To do this, select the parent node of the pages to re-order, then drag the sub-pages to re-order them.

Move a Page

To move a page to a new parent in the tree, you can drag them as well, or right-click to cut, and paste.

Backup and Restore

You can import and export subtrees and individual nodes in the web tree, for backup purpose, or to transfer and re-use in different websites or projects. 

The use of these functions is rather self-explanatory.

Use Export XML if you simply want an XML representation of the exported node, for import into the same web, or processing of the XML. Associated files (images, pdfs, etc) will not be attached to the XML export.

Use Export As File... to download a zip archive of the node XML, and associated files. This is equivalent to a full backup of the node. You can later import this file to restore the node to the backed up state.