Content Management

Overview

What are WebPal Sites?

A WebPal "site" (also called a "web") is a collection of hierarchically organised content pages. Each page is built from reusable nodes — structural elements such as chapters, HTML content blocks, images, lists, forms, and custom extensions. The site can be previewed at any time and published to a live web server.

Relationship Between Documents and Sites

Documents stored in the Document Manager and content pages in the Sites section are tightly integrated:

• You can link from a web page to a document — the link always points to the latest version of the document.
• You can attach a document to a page as a downloadable file.
• Images stored in the Document Manager can be inserted into web pages.
• WebPal automatically manages broken links when documents are moved or deleted.

Navigating to Sites

1. Click Sites in the top navigation bar.
2. The left panel shows a list of all sites assigned to you.
3. Click a site name to open it.
4. The site's content tree appears in the centre panel.

If you have no assigned sites, the centre panel will show an empty state. Contact your administrator to request access to a site.

The Content Tree

When you open a site, you see the content tree — a hierarchical representation of all the pages and structural elements in the website.

Tree Elements

Node Type	Description
Chapter	A page or section of the website. Can have a short title for navigation menus
HTML	A block of rich text content (WYSIWYG) within a chapter
Image	An image element linked to the Document Manager
List	A structured list (e.g., a product list, event list)
Form	An online form for collecting user input
Code View	A raw code/template view node
Settings	Web-level configuration (destination connectors, metadata)
Extensions	Application extensions (Laravel-based components)

Navigating the Tree

• Click a node to select it and view its content in the centre panel.
• Click the triangle/arrow next to a node to expand its children.
• Right-click a node to see available actions for that node type.

Creating a New Web

To create a new website:

1. Navigate to Server → Sites (admin access required) or click Sites and look for a New Site button.
2. Click Add or New Web.
3. Enter a name for the web.
4. Select a template (Basic or Clean Template) to pre-populate the structure.
5. Click Create.

After creation, the new site appears in the list. Assign users to the site from the administration panel.

Importing an Existing Web

If you have a previously exported WebPal site archive:

1. Click Import Web.
2. Select the archive file.
3. WebPal imports the web structure, pages, and settings.

Editing Content

Opening the Editor

1. Navigate to the site in the left panel.
2. Click the chapter (page) you want to edit.
3. If the chapter contains an HTML node, click it to open the WYSIWYG editor.

The WYSIWYG Editor (CKEditor)

The HTML editor provides rich text editing with a toolbar:

Tool	Description
Font Styles	Heading 1, Heading 2, Paragraph, etc. — uses styles from your site design
Insert Image	Upload from computer, select from Document Manager, or enter URL
Insert Video	Paste a YouTube or Vimeo URL or embed code
Insert Horizontal Line	Styled divider (site-specific design)
Insert Table	Create tables with mergeable cells, borders, and alignment options
Insert Link	Link to external URLs, other chapters, email addresses, or documents
Font Formatting	Bold, italic, underline, strikethrough, superscript, subscript
List Styles	Bulleted, numbered, and nested lists
Undo/Redo	Per-session undo history

Saving Your Changes

• Press Ctrl+S or click the Apply button.
• A red asterisk appears next to the chapter in the tree indicating unsaved or unpublished changes.
• Saving applies your changes to the WebPal server but does not yet update the live website.

Inserting a New HTML Node

If a chapter does not yet have an HTML content block:

1. Right-click the chapter and select Insert → HTML.
2. Enter a name and optional short title.
3. The HTML editor opens.

Inserting Images

There are three ways to insert an image in the CKEditor:

Option 1: From the Document Manager

1. In the editor toolbar, click Insert Image → Browse.
2. A file picker opens on the Document Manager.
3. Navigate to the folder containing your image and select it.
4. The image is linked from its location in the Document Manager.

Option 2: Upload from Computer

1. Click Insert Image → Upload.
2. Select an image file from your computer.
3. The file is uploaded to a designated folder in the Document Manager and inserted into the page.

Option 3: Enter a URL

1. Click Insert Image → URL.
2. Enter the image URL.
3. Set alt text and other properties.

Image Properties

After inserting an image, right-click it to access image properties:

• Width and Height — resize the image
• Alignment — left, right, center, or inline
• Alt Text — for accessibility and SEO
• Border and Padding — spacing options

Linking to Documents

To link from a web page to a document stored in the Document Manager:

1. Select the text you want to turn into a link.
2. Click Insert Link → Browse (or Document) in the toolbar.
3. A file picker opens. Navigate to the document and select it.
4. The link is created. On the live site, clicking the link downloads (or views) the document.

Links to documents always point to the latest version of the document. If you upload a new version, all existing links automatically serve the new version.

Link Types

• External URL — link to any web address
• Chapter — link to another page within the same website (creates a site-internal link that survives URL changes)
• Email — creates a mailto: link
• Document — link to a file in the Document Manager

Publishing Your Site

Publishing sends your saved content to a live web server (the configured publish destination).

Prerequisites

1. A publish connector must be configured by an administrator (see Admin Guide → Sites).
2. You must have edit/publish access to the site.

Publishing a Single Page

1. Navigate to the chapter (page) you want to publish.
2. Click the Publish button in the action bar.
3. Confirm that you want to publish the changes to the live site.
4. WebPal sends the updated content to the configured web server.

Publishing the Entire Site

1. Navigate to the root node of the site (the top-level node in the tree).
2. Click Publish in the action bar.
3. All changed pages are sent to the publish destination.

Previewing Before Publishing

Before publishing, always preview your changes:

1. Click the Preview button in the right panel, or look for the preview arrow in the action bar.
2. Choose to preview in a popup or new tab.
3. The preview shows the page rendered with your current (saved but unpublished) changes.

SEO Techniques

Page Titles and Short Titles

Each chapter has two title fields:

• Name (full title) — used as the <title> tag and <h1> heading
• Short title — used in navigation menus where space is limited

Meta Descriptions

Some node types allow you to set a meta description for the page, which appears in search engine result snippets.

URL Structure

WebPal generates clean URLs based on the chapter hierarchy. For example, a chapter named "Products" inside a chapter named "About" gets the URL /about/products.

Heading Hierarchy

Use the Font Styles dropdown to apply proper heading hierarchy (H1, H2, H3, etc.) rather than making text large with font-size settings. Correct heading hierarchy improves accessibility and SEO.

Multi-Language Content

WebPal supports publishing a website in multiple languages.

Language-Specific Content

Content can be maintained separately for each configured language. The compilation system generates separate route files for each language:

• routes.en.php for English
• routes.fr.php for French
• etc.

Language Switching

Users on the live site can switch between language versions via a language selector (if your site design includes one).

For details on setting up multilingual content, contact your WebPal developer or refer to the Application Development section.

Organizing Nodes

Moving Nodes

Drag and drop nodes in the tree to reorganise the page structure:

• Drag a chapter to a new position among its siblings to change the menu order.
• Drag a chapter onto another chapter to nest it as a child page.

Undo Operations

The CMS maintains an undo history per editing session:

• Ctrl+Z or the Undo button to reverse the last node-level action.
• Each HTML editor (CKEditor) also has its own undo history for text changes.

Copying and Pasting Nodes

Right-click a node and select Copy. Right-click the destination and select Paste. The full node, including its content and child nodes, is duplicated.

Collaboration with Others

Multiple users with access to the same site can edit it simultaneously. WebPal uses a locking system to prevent conflicting edits:

• When you open a node for editing, it is locked to you.
• Other users see the node as locked and cannot edit it while you hold the lock.
• Locks expire automatically after a period of inactivity (typically 15–30 minutes).
• If your lock expires while the editor is open, you will be prompted to re-acquire the lock.

Best Practices for Collaboration

• Save your work frequently (Ctrl+S).
• Release locks by navigating away from a node when done.
• Coordinate with your team on who is editing which pages to avoid waiting on locks.

Backup and Restore

Exporting a Web

To create a backup of a site:

1. Navigate to the site in the administration panel.
2. Click Export.
3. A backup archive is downloaded to your computer.

Importing from Backup

To restore a site from a backup archive:

1. Click Import Web.
2. Select the backup archive file.
3. WebPal restores the site structure and content.

Application Development

WebPal sites can be extended with custom Laravel-based extensions for advanced functionality. Extensions can add:

• Custom page types (database-backed, API-connected, etc.)
• Custom data schemas (tables, forms with database storage)
• Custom routing and controllers
• Custom Blade views and templates

Extensions in the Web Tree

Extensions appear as a node in the web tree. Right-click the Extensions node to add a new extension. Give it a name and you can then add:

• Controllers — PHP controller classes
• Models — Eloquent model classes
• Views — Blade view templates
• Routes — URL routing definitions
• Database Schema — table definitions that are created/updated in the database automatically

Using the Code Editor

Extension files (PHP classes, Blade templates) are editable directly in the WebPal code editor. Changes are applied immediately and can be previewed through the site's preview function.

For details on developing extensions, see the architecture documentation at doc/architecture.md and the developer guide at doc/add-cms-plugin.md.