Webteic 1.0
Administrator access is required. Working from an active cloned theme is recommended before making website-specific design changes.
Understanding the Frontend Designer
The Webteic Frontend Designer provides a visual way to create and edit public website pages.
Administrators can work directly with the page as it will appear on the website, adding sections, arranging content and changing individual elements without needing to edit the underlying code.
The designer also provides advanced tools for developers, including direct HTML access, responsive previews and page-version management.
This overview introduces the main parts of the Frontend Designer. Detailed tutorials will explain individual tools and design techniques later.
The designer workspace
The centre of the Frontend Designer displays the website page currently being edited. You can select content directly from this visual preview and make changes using the controls in the left panel.
The top toolbar provides access to page and editing tools, including:
-
Responsive device views.
-
Zoom controls.
-
Undo and redo.
-
Page preview.
-
Manage Pages.
-
The current Live Page.
-
Page Versions.
-
Save, Save Draft and Publish Live.
The left side of the designer contains the sections, blocks, components and settings used to build and customise the page.
Sections, blocks and components
The Frontend Designer uses three main types of page-building content.
Sections
Sections are larger areas of a page, such as a hero area, feature section, pricing section, call-to-action area or footer.
The Sections library contains ready-made layouts that can be added to the page. These are organised into categories such as:
-
Basic Layouts
-
Content Blocks
-
Content Features
-
Dynamic Blocks
-
Header and Navigation
-
Theme Blocks
-
Module Blocks
A complete section can be added and then customised with your own text, images, links and colours.
Blocks
Blocks are reusable groups of content that provide more structure than an individual element.
They can include combinations of headings, images, text, buttons, columns and other components. Blocks provide a quick starting point while still allowing each part to be edited separately.
Components
Components are the individual elements placed inside a page or block.
Available components include headings, paragraphs, images, buttons, links, lists, tables, icons, embedded content and code elements. Additional content and Bootstrap components are also available through their respective categories.
Components can be added to a suitable position and then customised through the designer.
Editing page content
Select an element on the page to open its available settings.
The selected element is highlighted within the visual editor, and its editing controls allow you to move, duplicate, modify or remove it.
The left panel separates the available options into areas such as Content, Style and Advanced settings.
For a text element, administrators can change the wording and adjust options such as:
-
Heading size.
-
Text alignment.
-
Font weight.
-
Line height.
-
Text colour.
-
Background colour.
-
Margins and spacing.
Buttons, images, links and other components provide settings appropriate to that element.
Changes can be viewed directly in the page while you work.
Adding and arranging content
Sections, blocks and components can be added to the page through the left panel.
The designer displays insertion points showing where new content can be placed. Existing content can also be moved to a different position, duplicated or deleted.
This allows a page to be assembled from reusable layouts and then refined one element at a time.
Before deleting a large section, it is sensible to save the page or create a draft so the earlier layout can be recovered if needed.
Images and the File Manager
When an image element is selected, the image can be replaced through the integrated File Manager.
The File Manager provides access to uploaded website and module files. Images are organised into folders so existing media can be reused without uploading another copy.
After selecting an image, its display settings can be adjusted through the designer. These may include its dimensions, alignment, alternative text, link and visual styling.
Alternative text should be added to meaningful website images to improve accessibility and provide information when an image cannot be displayed.
Responsive page views
The device controls in the top toolbar allow the page to be previewed at different screen widths.
These views help administrators check how the layout responds on desktop, tablet and mobile screens. The zoom control can also make it easier to work with a complete page or focus on a smaller element.
Responsive previewing is particularly useful when checking:
-
Navigation menus.
-
Multi-column sections.
-
Images.
-
Buttons.
-
Text wrapping.
-
Page spacing.
The responsive preview provides a useful indication of the layout, but important pages should still be checked on real mobile and desktop browsers before publication.
Styling and advanced controls
The Style settings provide visual controls for changing the appearance of the selected element.
Depending on the component, these controls can include typography, colour, backgrounds, spacing, alignment and sizing.
Advanced options provide additional control for experienced users who need to work beyond the standard content and style settings.
When making larger design changes, use the stylesheets belonging to your cloned theme. Avoid making website-specific changes directly to the bundled Default Theme, as future platform updates may include updated default theme files.
Code Editor
The Code Editor displays the HTML behind the current page.
Developers can use it to inspect the page structure or make changes that are not available through the visual controls. Changes made in the Code Editor are reflected in the visual page content.
Direct code editing is an advanced feature. Incorrect or incomplete HTML can affect the page layout, responsive behaviour or designer controls.
Save a draft or confirm that a previous page version is available before making substantial code changes.
AI text assistance
If an AI provider has been configured in System Settings, the Frontend Designer can use it to assist with website text.
In Webteic 1.0, AI is used for text suggestions within the designer. It can help create or refine draft wording before it is added to the page.
AI-generated text should always be reviewed for accuracy, tone and relevance before the page is published.
The Frontend Designer can be used normally without connecting an AI provider.
Saving and publishing
The top toolbar provides separate controls for saving and publishing page changes.
Use Save Draft when work is incomplete or needs to be reviewed before it appears on the public website. The Live Page option allows you to compare the published page with the content currently being edited.
When the page is complete and has been checked in the available responsive views, use Publish Live to make the updated content available on the public website.
This separation allows administrators to work on page updates without immediately changing what visitors see.
Page Versions
Webteic records page versions so previous content can be reviewed or restored.
The Versions window displays saved versions of the page, including their date, editor and current status.
Depending on the version, available actions can include:
-
Loading the version into the designer.
-
Activating an earlier version.
-
Deleting a version that is no longer needed.
Loading an earlier version into the designer allows it to be reviewed before deciding whether it should replace the currently active page.
Page versions provide additional protection when redesigning a page or making substantial content changes.
Managing website pages
The Manage Pages option returns to Website Pages Management in the Admin Dashboard.
From there, administrators can create pages and manage their names, addresses, access settings and other page information. A page can then be opened in the Frontend Designer for visual editing.
The Live Page option opens the currently published version so administrators can confirm exactly what website visitors can see.
Building pages safely
The Frontend Designer combines visual editing with direct control over the underlying page.
For a safe workflow:
-
Work from a cloned version of the Default Theme.
-
Save unfinished work as a draft.
-
Check desktop, tablet and mobile views.
-
Preview the current public page before replacing it.
-
Use the Code Editor carefully.
-
Retain useful page versions while making major changes.
-
Publish only after the page has been reviewed.
These tools allow non-technical administrators to update website content visually while still giving designers and developers access to the advanced controls they need.
