{"id":5105,"date":"2026-10-12T14:53:05","date_gmt":"2026-10-12T18:53:05","guid":{"rendered":"https:\/\/www.airsupervision.com\/wp-r\/docs\/organization-staff\/pages-design-center\/building-page-content\/"},"modified":"2026-10-12T14:53:05","modified_gmt":"2026-10-12T18:53:05","slug":"building-page-content","status":"publish","type":"docs","link":"https:\/\/www.airsupervision.com\/wp-r\/docs\/managers\/pages-design-center\/building-page-content\/","title":{"rendered":"Building page content"},"content":{"rendered":"\n

The HTML content<\/strong> tab is where you build the page itself, block by block. This article explains the toolbar, how to add blocks, and how to edit text and blocks with the right-click menus.<\/p>\n\n\n\n

Toolbar<\/h2>\n\n\n\n
Button<\/th>Purpose<\/th><\/tr><\/thead>
Blocks<\/strong><\/td>Opens or closes the block library (left side panel)<\/td><\/tr>
List view<\/strong><\/td>Shows every block of the page as a tree. Click an item to jump to it; hover to highlight it<\/td><\/tr>
Outline<\/strong><\/td>Shows statistics (words, characters, reading time, paragraphs, headings, blocks) and the heading structure. A red heading icon warns about an incorrect heading level<\/strong> (for example, H1 followed directly by H3)<\/td><\/tr>
Media<\/strong><\/td>Opens the media library to upload or manage files<\/td><\/tr>
Desktop Preview<\/strong><\/td>Opens the current (even unsaved) version in a new browser tab as on a computer<\/td><\/tr>
Mobile Preview<\/strong><\/td>Same, using the mobile layout<\/td><\/tr>
Status button<\/strong> (Publish<\/em>, To be reviewed<\/em>, or Switch to draft<\/em>)<\/td>Changes the page status (see the article Saving, review and publishing<\/strong>)<\/td><\/tr>
Save button<\/strong> (Save draft<\/em> or Update Content<\/em>)<\/td>Saves the page content<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"HTML<\/a>
HTML content toolbar<\/figcaption><\/figure>\n\n\n\n
\"List<\/a>
List view panel listing the blocks of the page<\/figcaption><\/figure>\n\n\n\n
\"Outline<\/a>
Outline panel with statistics and heading structure<\/figcaption><\/figure>\n\n\n\n

Adding blocks<\/h2>\n\n\n\n
    \n
  1. Click Blocks<\/strong>. The library opens, organized by category: Text<\/strong>, Media<\/strong>, Widget<\/strong>, Transport Canada<\/strong>, AirSupervision<\/strong>.<\/li>\n\n\n
  2. Hover over a block to see a preview thumbnail (when available).<\/li>\n\n\n
  3. Click the block. It is added at the end of the page<\/strong>. Some blocks first open a small dialog for settings (URL, number of rows, and so on). Click Insert<\/strong> to confirm.<\/li>\n<\/ol>\n\n\n\n

    To insert a block at a specific place<\/strong>, right-click an existing block \u2192 Block<\/strong> \u2192 Insert a new Block before<\/strong> or Insert a new Block after<\/strong>, then choose the block in the library.<\/p>\n\n\n\n

    \"Block<\/a>
    Block library open on the left of the editor<\/figcaption><\/figure>\n\n\n\n

    Editing text<\/h2>\n\n\n\n

    Most text blocks are edited directly: click inside and type. Pressing Enter<\/strong> inserts a line break inside the same block. To start a new paragraph block, insert a new Paragraph<\/strong> block.<\/p>\n\n\n\n

    Text right-click menu<\/h3>\n\n\n\n

    Select some text and right-click:<\/p>\n\n\n\n

    Menu<\/th>Options<\/th><\/tr><\/thead>
    Style text<\/strong><\/td>Bold<\/strong>, Italic<\/em>, Underline, Strikethrough<\/s>, Subscript, Superscript, Inline code, Typography manager<\/strong> (font family, size, weight, colour, background colour, and so on)<\/td><\/tr>
    Insert inline<\/strong><\/td>Inline image from the media library, inline image with data URI, inline link to a media library file, inline link to an E-course<\/strong>, inline link to an E-training<\/strong>, inline code, Insert a link<\/strong> (URL, classes, new window), Insert list<\/strong>, Insert a Badge<\/strong>, Insert a Star<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \"Style<\/a>
    Style text menu on selected text<\/figcaption><\/figure>\n\n\n\n
    \"Insert<\/a>
    Insert inline menu on selected text<\/figcaption><\/figure>\n\n\n\n

    Block right-click menu<\/h3>\n\n\n\n

    Right-click any block and open Block<\/strong>:<\/p>\n\n\n\n

    Option<\/th>What it does<\/th><\/tr><\/thead>
    Align left \/ center \/ right \/ justify<\/strong><\/td>Aligns the block content<\/td><\/tr>
    Insert a new Block before \/ after<\/strong><\/td>Chooses the insertion position for the next block<\/td><\/tr>
    Copy \/ Cut \/ Paste \/ Duplicate<\/strong><\/td>Copies or moves blocks<\/td><\/tr>
    Up \/ Down<\/strong><\/td>Moves the block one position<\/td><\/tr>
    Tab Left \/ Tab Right \/ Reset all Tabs<\/strong><\/td>Indents the block<\/td><\/tr>
    Manage classes<\/strong><\/td>Adds CSS classes to the block (space-separated), then click Set classes<\/strong><\/td><\/tr>
    Grey block<\/strong><\/td>Displays the block on a grey background panel<\/td><\/tr>
    Set anchor<\/strong><\/td>Gives the block a name so a link can jump to it with #anchorname<\/code><\/td><\/tr>
    Remove block<\/strong><\/td>Deletes the block<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Two more items are available on any block: Edit as HTML<\/strong> (see Edit as HTML<\/strong> below) and Up block \/ Down block<\/strong>.<\/p>\n\n\n\n

    \"Block<\/a>
    Block right-click menu<\/figcaption><\/figure>\n\n\n\n
    \"Manage<\/a>
    Manage classes dialog<\/figcaption><\/figure>\n\n\n\n

    Media library<\/h2>\n\n\n\n

    Click Media<\/strong> (or choose an image\/file block) to open the media library.<\/p>\n\n\n\n