Getting Started

| Welcome To Our Documentation Guide!
Last updated: July 18th, 2018

Download

WebTML is a Content Management System (CMS) that allows users to create, manage, and organize websites. In addition to creating and managing new websites, WebTML is eqipped to easily migrate existing sites onto the CMS. Gain familiarity with WebTML by following the introductory Workflow Documentation detailed below.

Setting Up for Beginners

WebTML offers many features within a highly-adaptable CMS. This particular section is designed to introduce the foundational elements of WebTML to help users create their first website within the system.

How To Upload Files

How to Upload Files?

Before beginning, the foundation of the website needs to be in place. The files that dictate a website's appearance and function need to be loaded so they can be later referenced. For example, stylesheets and Javascript files.

Images, videos, and additional assets can also be uploaded to to be used throughout the site.

  • Step 1: Click on the Manage Files button (located within the main control panel)
  • Step 2: Press Get Flash located in the top right corner (flash needs to be enabled in order for this feature to work)
  • Step 3: Once Flash has been enabled, an Upload button at the top right hand corner will appear. Click on the button and select the appropriate file/folder to upload.

Note

In order to upload folders successfully, folders must be compressed prior to their upload. Once the folder is uploaded to WebTML, right click the folder and select "Extract" to access all the files within the folder.

Deconstruct the Code

The HTML code that defines a website can be dissected into separate categories. The following declaration and elements compose a website: < !DOCTYPE html >, < html >, < head >, and < body >. The < !DOCTYPE html > informs the browser which version of HTML is being used. Within the < html > element are the < head > and < body > tags. The < head > tag hold external references and metadata. The contents of the head tag are not visible on the page. The content within the < body > element is visible on the page.

Within the WebTML Page Layout Screen the:

  • Body Field holds the attributes of the < body > tag
  • Layout Field holds the contents/structure of the < body > tag
  • Head Field holds the contents of the < head > tag
  • * < !DOCTYPE html >and metadata are automatically applied to the HTML by the WebTML system and do not need to be manually included

Starting with an Existing .html Document?

Copy the entire HTML code and paste it into the the Layout Field of the Page Layout Screen. Click out of the Layout field textbox and WebTML will automatically dissect the HTML code and arrange it into the appropriate field. For example, the contents of the body tag will appear in the Body Tag Field, the contents of the < head > tag will appear in the Head Field, and the content of the body tag will be separated into the Layout Field.

Additionally

To manually configure the Page Layout Screen, follow the steps below:

Configure Page Layout Screen

Every webpage has a design that dictates the styling of the elements on the page. In the WebTML system, these instructions (the HTML, CSS & Javascript references) are organized in the Page Layout Screen.

To build the first page, navigate to the Page Layout Button (located within the main control panel).

Head:

Within the Layout Field of the Page Layout Screen HTML and inline CSS can be written. In this case, < main >< /main > tags will be used as the container for the sections on the page. The Layout and Head Field can be changed at any time to reflect changes in the layout and design of the site.

Layout:
Adding WebParts

Now that the Page Layout Screen is setup, the body of the webpage can be added.
In order to be able to add sections to a page, a WebPart needs to be created. A WebPart informs the system that sections will be added, and that they will be included in the WebPart.


Creating Your First WebPart

  • Step 1: Navigate to the Layout field located inside of the Page Layout Editor
  • Step 2: Include some opening and closing < main >< /main > tags
  • Step 3: Click on the "New Section" box below the layout field, so that it copies the "new_section” tag to the clipboard
  • Step 4: Copy and Paste the code inside of the
    tags. The results in the layout should look like this:

  • Step 5: Press Save and Close
  • Step 6: If the WebPart has been successfully added, the Admin button should appear at the top left hand corner of the page
The Admin button indicates that individual sections can now be added to the WebPart. Admin buttons can also be found when individual sections and items are created.
Creating Sections

With the WebPart successfully created, individual sections such as header, promo, footer, and more can be added to the page. A WebPart can consist of as many sections as needed, and multiple WebParts can be added to a page.


Adding HTML to Your Sections

  • Step 1: Click on the Admin button
  • Step 2: Once the text cursor is visible, enter the name of the sections, separated by a space or comma, that are going to be included into the page
  • Step 3: Press enter to save the sections

The page should now be populated with the recently-entered sections. Each section will also have its own Admin button The Admin button offers a set of features to add, delete, move, and configure settings for each section that it’s associated with.


Once the sections are added onto the page, the layout and functionality for each one can be set by using HTML, CSS, and Javascript. To do so, hover over the Admin button of each section and select Edit Item Layout.

To add the layout of the section, simply type or paste in the HTML code within the Layout Field. Click "Save and Close” to see your page with the newly-edited sections.

Layout:

Editing Section Specific CSS/JavaScript

Section-specific javascript code can be added within the Javascript field, and as well as any section-specific CSS and JavaScript references within the "References” field.

JS:

References:

The javascript field comes with a built-in validator. Script tags are also included by default, and do not have to be entered into the field. For javascript in the page layout, script tags are needed.

Page Content
Adding Dynamic Content

Further customizations can be applied to section layouts with WebTML’s predefined content tags. Content tags are a great way to replace certain elements within the section to make them easily editable through the edit menu later on. Examples of content tags include ##Header## and ##Body##. Content tags offer tremendous flexibility as they can be used in place of text, links, file names, numbers, and more.

For example, WebTML tags can be used to replace hard-corded elements such as the header.

Original Code
##Summary##
With WebTML Tags

In addition to the traditional and more common tags such as ##Body##, ##Header##, and Adding Dynamic Content, additional ##Generic## and ##Class## tags are provided to ensure greater flexibility.

A full list of WebTML content tags can be viewed above the layout field within the layout editor of a page, section, or item set.

How To Edit Content

The values of each content tag can be edited through the edit menu of a page, section or item set.

  • Step 1: Hover over the Admin menu within the page, section, or item set
  • Step 2: Click the Edit button
  • Step 3: Enter in the value(s) into the appropriate field(s). Click and toggle between tabs at the top to access different fields.
  • Step 4: Press "Save and Close"

Item Sets
Item Sets enable users to define a specific layout for one or multiple elements within a section. These elements could be something minor, such as the social media icons within the contact section. Or they could be something more advanced, such as the individual news articles within the news section, and contain multiple components of their own including images, texts, and links.

Once a layout and functionality have been defined in an Item Set, multiple items can be generated based on the code within the Item Set. These items will share the same layout and functionality, but can differ in their content. 


Nesting an Item Set within an Item

(need explanation for this section)

Creating an Item Set

By default, WebTML automatically generates an Item Set with each section that is created. This Item Set shares the same name as the section it’s in.

For example: the first item set within the section labeled "NewsBlock2” can be referred to by the tag ##NewsBlock2##.


When an Item Set has been created, items can be added and edited.

Adding Items

As mentioned earlier, Item Sets only provide the layout of the items associated to them. In order for the items to show, they must be added individually.

  • Step 1: Hover over the Admin button of the item set
  • Step 2: Click on the Add button
  • Step 3: The edit menu will appear, and you can fill in the fields as appropriate
  • Step 4: Click Save
  • Step 5: Repeat steps to add additional items
Rearranging Items

  • Step 1: Hover over the Admin button of the item set
  • Step 2: Click on the Order Items button
  • Step 3: Drag and move the items to the preferred order
  • Step 4: Refresh the page
Deleting Items

  • Step 1: Hover over the Admin button of the item set
  • Step 2: Click on the Delete button
Creating Additional Item Sets

There may be instances where a section requires more than one item set to complete its layout. A common example would be a footer, in which separate item sets could be made for the social media icons and the contact links. Adding additional item sets is easy and similar to how the first item set would be added.

 



  • Step 1: Within the section, hover over the Admin button
  • Step 2: Click on the Edit Item Layout button
  • Step 3: Below the layout field, click on *New ItemSet*
  • Step 4: Paste the recently copied code into the part of the layout where the second Item Set will be


  • Step 5: Replace "MyNewItemSet” with the Item Set name. Be sure to choose a name that is unique as using a name associated with another item set will result in generating the content from that item set into the current Item Set
  • Step 6: Press "Save and Close"
  • Step 7: With the Item Set initialized, the Admin button and its features should now be available

*Note:

When multiple item sets are generated and initialized, Admin buttons for each item can stack on top of each other. Visually, this may seem as if only one item set is initialized. To help resolve this issue, consider adding break tags next to the Item Set code within the layout field before you save and refresh the page.

Changing Sublists for Item Sets

In order for each Item Set within the same section to have its own unique content and layout, each must be assigned a unique sublist number.

  • Step 1: Hover over the Admin button for the item
  • Step 2: Select Edit Item Set
  • Step 3: In the sublist dropdown, assign a number to the item

  • Step 4: Repeat steps for the other items, ensuring that a different number is assigned to each item

The issue and categorization of different sublist numbers for Item Sets only remain true for individual sections. For example, sublist 1 can be used multiple times throughout the page provided that the item sets are in different sections altogether.

It is not necessary to change the sublist numbers for items within the same Item Set.

  Layout Builder

Learn How To Use WebTML's Layout Builder Here!

Layout Builder Docs

  Check Out Our Apps

Lorem ipsum dolor...

App Store

  Our Themes

Choose from a variety of themes/templates!

Themes

  WebTML Features

Read through the variety of features we have.

Features

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