Identifying the default editable regions in InContext Editing

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

InContext Editing is a browser-based interface that allows you to edit and update the editable regions of your web pages. It is an integrated feature in the Admin Console, so you can use it without installing or launching any other software. Best of all, you can enter regular text to update page content---no coding is required.

Getting started with InContext Editing

Follow these steps:

  1. Use your email and password to log into your site's Admin Console.
  2. Choose Edit Mode.
  3. Click Start Editing in the welcome screen that appears.
  4. The welcome screen disappears and your site is displayed. Dashed lines around areas represent the editable regions that contain content you can change.

By default, when no Editable Regions have been defined, the system scans for potential areas of the page that can be editable, based on the page layout and included page elements. The same scan is done for the template that the page is based on. The available areas are highlighted using the dashed lines.

There are 3 categories of html tags, from InContext Editing's perspective:

  • tags that can be directly marked as editable: <div>, <td> and <th>
  • tags that are not directly editable: <p>, <span>, <h1>, ... , <h6>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, etc.
    • If they are enclosed in a <div> tag marked as editable, their content can be edited
  • tags that cannot be edited at all (not directly, and not enclosed in an editable <div>) also known as forbidden tags:
    • <iframe>, <frame>, <noframe>, <script>, <map>, <area>, <object>, <embed>, <video>, <audio>, <noscript>, <style>, <applet>, <form>, <input>, <hr>, <select>, <textarea>.

When a page is loaded inside InContext Editing, the system will automatically make selections of adjacent elements of the page that don't contain forbidden tags, or Business Catalyst modules. These selections will be marked as Editable Regions.

Defining your own Editable Regions

If you're not happy with the default highlighted Editable Regions, and you want more control over which sections of the page or template are editable, check out this article:

How to define Editable Regions using any code editor