Note
This guide is intended to help/guide beginner users in gaining familiarity with the WebTML environment, and understanding how exactly this Content Management System works.
N00b Alert! Layout not Found (Probably Deleted)
A Beginners Guide
WebTML offers a powerful content management system (CMS) that caters to any business needs. Built with simplicity in mind, learn the concepts of WebTML to get started on building and customizing your site today.
Download
To learn more about the WebTML development environment, feel free to download our entire Beginners Guide down below:
Getting started with WebTML is quick and easy. At its core, WebTML is based on two main concepts: pages and items. The layout and content of both are editable and customizable to the user’s preferences. Therefore, any kind of site can be easily created and deployed with WebTML.
Items and Pages
| Items
*Include an image to describe "items"
| Pages
*Include an image to describe "pages"
Just like with any site, pages in WebTML are webpages, a document which can be displayed in a web browser. Each page can have its own layout and content. The different pages of a site can be configured to share an identical layout, a similar layout (consisting of some repeating elements), or a new layout entirely.
Pages Example 1
Image Goes Here
Image Goes HereThe image on the left is a contact page for a Real Estate company. Contact pages often consist of specific elements, such as: forms, maps, and general contact information of a company. As such, their overall layout often differs quite significantly from the other pages on the site.
In WebTML, a new page and page layout can be used to create this contact page. In doing so, it provides a dedicated space on the website to place the contact information, while also maintaining its unique design and functionality.
Pages Example 2
Image Goes Here
The same can be applied to other pages on the site. Within the listings page of the same site, a different layout can be created and used to organize the content.
Within WebTML, a new layout can be created for the purpose of displaying the listings page. The same layout can then be easily reused when more listing pages are added to the site. This particular listings page layout can also be
Note
A Step-By-Step guide on how to create pages and configure a page layout can be found here.
In WebTML, items are known as the "building blocks” of a website. Any web component found on a website can be thought of as an Item. Just like with pages, Items have their own content and layout.
Items are essential to WebTML as they provide the following advantages:
- Ability to create distinctive layouts and added functionality
- Add multiple, similar items with ease to ensure a more streamlined and automated workflow
- Greater flexibility and control when managing different elements of a page
Item Example 1
![]()
Image Goes Here
Just like with any web component on a page, the individual listing block on the left can be a item. It has its own unique layout, content, and functionality.
In order to create an item, an Item Set must be created and defined. An Item Set acts as a base template of code for an item’s layout and functionality. With the code from a single Item Set, unique items and items that share similar a similar layout and functionality can be easily generated.
Item Set Example 1![]()
Item Set Consists Of = Code of This:
Image Goes Here
Why Item Sets?
Once the structure of the ItemSet has been defined, CSS and Javascript can then be used to apply styling and functionality to the item.
The benefits of using Item Sets extend beyond creating a single item. Its base template of HTML, CSS, and Javascript code can be reused to create multiple items that share the same layout and functionality, but display different content. When an Item Set has been defined, this process can be done easily through the Edit menu, and without the need to write any extra code.
Image Goes Here (change to better quality)
As per the individual listing described earlier, its Item Set can be applied and reused to create more listings. Each one has its own unique content, but their appearance and functionality are identical.
Item Sets can also be created and nested within existing items. In doing so, users can continue to utilize the associated benefits with working with items, but at a more granular level.
Note
Visit the How To Create Your First Item Set Section for a step-by-step guide on how to go about creating an Item Set.
Altogether, the items on the page form the individual, unique sections of a page. These sections are identical to web components, such as headers and galleries, which are seen across many websites. These sections, therefore, define the page’s overall layout.
It’s important to note that although they may be referred to as sections, theoretically, sections are still items with their own unique item sets. Aside from the page itself, any element created with a specific layout and functionality is considered to be an item, and can be referred to as so.
~ A Brief Tour of the WebTML Control Panel
The WebMTL main control panel offers a set of tools and features to allow users to add, edit, and maintain their site. Any changes made with the main control panel will be applied at a page or site-wide level only.
As one continues to build their site on this CMS, they will notice that individual sections and items also have their own control panel (called the Admin panel).
Note
Depending on the user’s permission level, certain buttons and/or features may not be accessible. See the WebTML Reference Page for more information.
To Learn more about the WebTML Main Control Panel, read the documentation written below:
Edit This Page
The Edit This Page button allows user to a screen where they can edit or add content to the current page.
For more information about the specific features of this screen, visit this page (link to screen and tabs - section: Edit This Page). It covers the details on how a designer can go about navigating this specific screen.
Add a Page
The Add Page button enables users to add more pages to their website.
| To Create a New Page:
- Step 1: Click on the "Add Page" button
- Step 2: When the Add Page screen appears, type in the name of the page within the Name field
- Step 3: Press Save and Close
| To Check if Page is Created:
- Step 1: Type in your URL (e.g. www.webtml.com)
- Step 2: Add a Slash /
- Step 3: Append the name that was chosen (e.g. www.webtml.com/chosen_name)
Note
Any spaces added within the Name Field will be replaced with an underscore ( _ )
Delete a Page
The Delete This Page button allows users to delete the current page they are on.
This option is not available for the home page of the site. Hence, this feature within the home page will be grayed out.
Order Pages
| To Reorder Pages on a Site:
- Step 1: Click on the Order Pages button
- Step 2: Drag and drop the pages in the preferred order
- Step 3: Refresh the page to see the results
Up One Level
The Up One Level button redirects users to the parent of the current page.This feature is very beneficial to have with huge sites, which tend to have a lot of pages.
Note
This feature is not available on the home page as the home page is considered to be the uppermost level with no parent. Hence, the top-level button will be grayed out.
Edit Tables
The Edit Tables button provides a database of tables with a complete overview of all available users, item sets and pages within the entire site. It also provides a sense of functionality because it contains permissions which allow one to edit/delete their pages, page layouts, items, and item layouts.
Note
For a more detailed overview on how to navigate the Tables Editor, refer to the documentation on Database of Tables.
Manage Files
The Manage Files button outlines the site’s file structure, and provides access to the site’s files, images, and assets. Users can also upload their own assets, files, or folders so that they can eventually be used throughout the site.
Note
If you’re uploading a folder through the "Manage Files” Screen, it must be uploaded as a zipped folder and then later extracted within the system. Learn more about
Site Settings
The Site Settings button provides access to the sites configuration settings.
- Step 1: Import any Website into the System
- Step 2: Force Admin
- Step 3: App Embeds (for instance: Google Maps, an Instagram Feed, or YouTube videos can all be embedded into the content section of one’s website)
Depending on the user’s permission level, certain settings such as the built-in jQuery configuration tool may not be available to the user.
Note
For more information on the Site Settings screen, see the documentation for Screens and Tabs - Site Settings for more information.
Empty Cache
The Empty Cache Button clears the site’s cache. This feature is useful during development in which users may not see their changes immediately due to WebTML’s cached pages feature.
Edit Page Layout
The Edit Page Layout Button allows users to define the general layout of the current page, and as well as include references and Javascript code that are applicable to all pages of the site.
Note
For more information on the Edit Page Layout screen, see the documentation for Screens and Tabs - Edit Page Layout.
Set Password
The Set Password Button allows users to configure user-specific settings, such as passwords, for their account.
Note
For more information on the details of this screen, visit the Set Password - For Screens and Tabs page.
Logout
The Set Password Button allows users to configure user-specific settings, such as passwords, for their account.
Admin Button
The admin button provides a host of features that make it easy for the user to edit and configure their items. The admin button is available to all items (including sections) on the page.
The Admin button is denoted by the following icons: 
Admin Panel
Users can access the admin panel by hovering over the Admin button. The admin panel provides a set of similar features as the main control panel, but is specific to the Item Set it’s associated with. Learn more about the features of the admin panel below.
Edit Button
The Edit Button leads to a screen which allows users to set certain properties to the Item, (including the: parent, name, and content). Learn more about the Edit Screen Here.
Add Item
The Add Item button allows users to add additional items based on the code within the Item Set.
The ability to add more items in your section becomes available once the first item has already been created. The easiest way to go about adding more items is by:
(1) Hovering Over the Admin Button of the Item You'd Like to Add
(2) Clicking on the "Add Item" Button
(3) And then, Pressing "Save And Close"
Note
Even after adding an Item, the ability to edit its content/images/icons will always be available.
Duplicate Button
The Duplicate Button provides users with the ability to duplicate an existing item.
If the contents of the duplicated item (ex. text, images, links, etc…) are reflected by WebTML tags within the Item Set layout, users can change these values within the newly-duplicated item.
Set as Favourite
The Set As Favourite Button enables users to select certain items, and group them into a category known as Favourites
This category of Items can then be displayed if another Item Set is created and is filtered to show Items from the Favourites category.
Order Items
The Order Items Button allows users to reorder the placement of the Items on the page.
Note
This button is not available for Items that are filtered by the Item Set configuration of "Get Element By ID”. This includes items that were added from the Layout Builder.
Show Table
The Show Table button provides an overview of all of the Items that were created within the site.
Edit Item Set
The Edit Item Set Button allows users to configure properties for the current Item Set.
Launch Your . . .
Premium Website with WebTML
Need a Website?
Get a custom, secure, and easy-to-use website today from Web on Demand. Our advanced WebTML Content Management System (CMS) provides elegant and intuitive web solutions to meet your growing business needs.
- Web Design
- Search Engine Optimization
- Templates
- E-Commerce
- Website Upgrade Plan
- Domain Name Registration
- Access to Site Statistics
- Protected Access to Our CMS
- Extensive documentation
- Video tutorials