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"
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
Every page has a content area which you have full control over. For more information on editing your content, see our editing content section.
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.
Under the 'common' page you are able to edit logo and footer content which appear on all pages. This page is hidden from navigation.
These are your creative designs that each of your pages are linked to from the attributes.
Editing content in WebPal sites follows a typical editing session. This can be described as follows:
- 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.
- 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.
- 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.
- 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.
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
- 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
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
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
- Select the file from your computer and click the "insert image" button.
Option 2: External URL
- 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".
- 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
- If you have already uploaded your image to WebPal Docs, browse the image from the folder it is located in.
- Alternatively, you can search by the file name within each folder.
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:
- Right click on the image > Image properties. Edit the properties, or follow the above steps to replace the image.
- Alternatively, double click on the image and edit or update accordingly.
Copy and paste URL or embed code from YouTube or Vimeo and set properties as required.
Importing extensions (also known as plugins) into WebPal is easy to do via a GitHub account.
- Start by logging into WebPal System Tools as seen below:
- Select "CMS Tools" > "Import Web"
- In the Import Web tab select "GitHub" in the Import From option
- Open the Palomino GitHub account which can be found at https://github.com/palominoinc
- Open the extension you would like to import. Click the "Clone or download" button and copy the extension URL.
- 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.
- 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.
- 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.
- Depending on the page, a window will pop up asking to verifying the changes you are publishing selected sites. The following options will appear:
Publish this page only. Publish the subpage only
Publish this page and all subpages. Publish both the root page and all subpages within the page.
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.
- 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.
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.
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.
This extension is needed for all sites and performs the core function of rendering site pages, routing, resource handling and caching. It also supplies a very basic CSS theme that assists in developing a new site from scratch.
This is a very basic site bootstrap theme, useful for creating a mobile-responsive web site from scratch.
This extension is the most simple form of a list. It maintains any number of list items in a simple table format, and displays these as an index page and click-through details pages.
A node extension that maintains a table of staff members, and renders these in a beautiful index and linked detail pages.
A news-list is a list of news items where all data is kept in an editable table with layout options
This extension provides an events node and creates a database table which is used to store events.
A WebPal extension that provides convenient interface functions to Freshbooks.com
Newslist with ability to manage categories, tags, and filter searches
A node for easy development of data-driven dashboard charts
Provides login for websites where users are maintained in a WebPal instance
This extension defines a product-store node which can be used to manage unlimited projects, using nested categories.
List of testimonials kept in an editable table view
Include a tree view into a page that displays the content of a WebPal folder, allowing for dynamic, online document libraries to be easily maintained
A WebPal node extension that creates nice looking Polaroid-style layoutboxes with a Ken Burns effect.
This node creates great-looking case study tiles with Ken Burns effect and click-through to a detailed case study page.
This node generates a beautiful image carousel for page banners, and allows users to maintain images and text without coding knowledge.
WebPal node extension integrating the Flex Slider image slider/carousel
A WebPal extension providing server details for search engines such as robots.txt and sitemap.xml. Best of all, fully automatic, without any manual editing!
This node takes a WADL-compliant Web API description and generates interactive online documentation pages from it. Can't get any easier.
A WebPal Node Extension, implementing a basic contact form with to-email submission.
This extension communicates via Twitter's API to pull latest feeds and display on any page.
Yet another slide show implementation, but this one rocks!
A very powerful sitemap implementation that allows to rank pages by priority and thus tailor the sitemap to specific SEO needs.
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
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.