What can I do in the WebRes HTML Editor?

What can I do in the WebRes HTML Editor?


You must be logged in as an Administrator level user in order to access this feature

How to access the HTML Editor

To access the HTML Editor, you will need to be logged in as an administrator-level user. Once logged in, navigate to a page with an "HTML Page" type Feature Module and select the Advanced Edit option, found above the top right section of the module (example picture below).
Notice the Advanced Edit HTML button in the top right

Basic Tags

Basic Tags contains exactly that, all the basic HTML tags that you'd need to get up and running with some content on a page. Below is a breakdown of each of the Tags offered, with both label and the matching HTML tag. Selecting one of these items will insert the desired tag (both opening and closing where applicable) at the cursor's current location within the editor.

Headings

Item Name
HTML Tag
Heading 1
<h1>
Heading 2
<h2>
Heading 3
<h3>
Heading 4
<h4>
Heading 5
<h5>
Heading 6
<h6>

Content

Item Name
HTML Tag
Paragraph
<p>
Strong
<strong>
Small
<small>
Image
<img>

Breaks

Item Name
HTML Tag
Line Break
<br>
Horizontal Break
<hr>

HTML Templates

HTML Templates are pre-configured common templates to help you create boilerplate pages with minimal effort. Selecting one of these items will insert the desired HTML Template at the cursor's current location within the editor.

General

Padded Container

  1. <div class="container-fluid">
  2.     <div class="container">
  3.         <div class="row">
  4.             <div class="col-12">
  5.                 <h1>Lorem ipsum.</h1>
  6.                 <hr>
  7.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  8.             </div>
  9.         </div>
  10.     </div>
  11. </div>

Full-Width Container

  1. <div class="container-fluid p-0 mt-5">
  2.     <div class="row">
  3.         <div class="col-12 p-0">
  4.             <h1>Page Title</h1>
  5.             <hr>
  6.             <p>Paragraph of text.</p>
  7.         </div>
  8.     </div>
  9. </div>

50-50 Container

  1. <div class="row">
  2.     <div class="col-12 col-md-6 p-0">
  3.         <p>Left paragraph of text.</p>
  4.     </div>
  5.     <div class="col-12 col-md-6 p-0">
  6.         <p>Right paragraph of text.</p>
  7.     </div>
  8. </div>

Brochure

Single Brochure

  1. <div class="container-fluid">
  2.     <div class="container">
  3.         <div class="row">
  4.             <div class="col-12">
  5.                 <h1>Brochure Title</h1>
  6.                 <hr>
  7.                 <p>Text</p><br><img class="w-100 mb-3" src="/images/brochures/filename.jpg" />
  8.             </div>
  9.         </div>
  10.     </div>
  11. </div>

Double Brochure

  1. <div class="container-fluid">
  2.     <div class="container">
  3.         <div class="row">
  4.             <div class="col-12">
  5.                 <h1>Brochure Title</h1>
  6.                 <hr>
  7.                 <p>Text</p><br>
  8.                 <div class="row">
  9.                     <div class="col-12 col-md-6"><img class="w-100 mb-3" src="/images/brochures/filename.jpg" /></div>
  10.                     <div class="col-12 col-md-6"><img class="w-100 mb-3" src="/images/brochures/filename.jpg" /></div>
  11.                 </div>
  12.             </div>
  13.         </div>
  14.     </div>
  15. </div>

Triple Brochure

  1. <div class="container-fluid">
  2.     <div class="container">
  3.         <div class="row">
  4.             <div class="col-12">
  5.                 <h1>Brochure Title</h1>
  6.                 <hr>
  7.                 <p>Text</p><br>
  8.                 <div class="row">
  9.                     <div class="col-12 col-md-4"><img class="w-100 mb-3" src="/images/brochures/filename.jpg" /></div>
  10.                     <div class="col-12 col-md-4"><img class="w-100 mb-3" src="/images/brochures/filename.jpg" /></div>
  11.                     <div class="col-12 col-md-4"><img class="w-100 mb-3" src="/images/brochures/filename.jpg" /></div>
  12.                 </div>
  13.             </div>
  14.         </div>
  15.     </div>
  16. </div>

Placeholders

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Medium 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Beautify Code

Code Beautifiers are commonly used tools designed to increase the readability of code. In code terms, this relates to the indentation of lines of codes, as well as their correct termination. Clicking the Beautify Code button will trigger this process, and reformat all code currently in the editor to make it as clean as possible. Below are two examples of code editors, one that hasn't been beautified (left), and one that has (right).
Code that hasn't be beautified

Code that has been beautified

Temporary Back-up

The Temporary Back-up is a feature that allows you to store a copy of the editor's contents in the local storage of your browser. The most common use for this is before making a change you're unsure about, you can save the functional and original code, attempt the modification, then immediately roll-back should things not go to plan.
The stored contents are only available to load into the module that they were saved from. This means you cannot back-up an HTML module on one page, and restore the contents into another.
There are 3 slots available by default, with which you can perform 4 basic actions; Save, Load, Preview & Erase, all of which are detailed below.

Save

Selecting this option will commit all the contents of the editor to the browsers local storage. Once saved, the Empty message under the slot will change to the date and time that slot was saved to.
As it is local storage that is being used, you can only access saved contents from the machine on which they were saved. For example, if you edit a Page's HTML in the evening on your laptop and save a back-up, you won't see that back-up when accessing the site from your machine in the office the following day.

Load

Once a slot has been saved to, you can load the stored contents directly into the window you're currently editing.
This will overwrite the contents of the edit module once selected. The cleared contents can only be accessed via the undo function, so cannot be retrieved after leaving the editor.

Erase

Selecting Erase will clear the slot and all saved contents within permanently.

Options

Toggle Dark Mode

Selecting this option will change the editor's theme between the two pre-configured themes, allowing the user to select an option that reduces eye-strain.


    • Related Articles

    • Prerequisites for WebRes connections

      Before WebRes can be configured to connect to your Tour Booking System (t3/t4), your Windows server will need to have the actions below carried out. Currently, we only support Windows 11 Professional/Windows Server 2012R2 or newer. If this is to be ...

    • Adding Itinerary Items

      What Are Itinerary Items? This article assumes you’re already comfortable with adding itineraries – if that’s not the case, check out this article: Create An Itinerary Items act as blocks of content for your itinerary pages. They can display ...

    • Extracting Customer Emails from WebRes

      Extracting Customer Emails from WebRes If you need to download a list of customer data, this can be done in /admin. The data is in four parts and is comma delimited. Data included in the extract: Title Initials (or first name if your website uses ...

    • Sitemap Management

      What is a Sitemap? A sitemap is a blueprint of your website that helps search engines find, crawl and index all of your website content.  Managing your Sitemap Log into /admin and head to the sitemap page below: Generate Sitemap – This button will ...

    • Customer Management

      Customer Management To manage a customer account in WebRes, log into /admin and head to this page: Type the customer email into the input box and click 'SEARCH'. This can be just part of their email address too. If their account isn't in here, they ...