TMMDemoSupport

HTML Block

Article Topic: Blocks, Design

Overview

The HTML Block allows you to insert custom HTML directly onto your pages. This gives you complete control over layout, text, and design elements that may not be possible with any other blocks.

This makes the HTML block ideal for adding custom headers or sections, while still supporting dynamic naming through replacement variables.

HTML Block Settings

Details Tab

Use the details tab to set a internal display name and description for the block. This will help keep your Block Library organized. You can also set the block to be Enabled or Disabled, which will show or hide the block (respectively) across all pages that the block is used on.

Settings Tab

The Settings tab allows you to connect the block to a data source and apply special filtering. This is very useful when looking to display dynamic data associated with any metadata, models, and even content sets.

  • Data Source - Choose the type of data the block should pull from, from any metadata, models, and even content sets.

  • Special Filtering - Apply filtering to dynamically receive an ID or slug in the URL, or provide a specific ID.

Design Tab: Block Design and Content

All blocks contain Block Design and Block Content settings. These control how the block fits into the page itself. This may include:

  • Adding background colors, padding, classes, or IDs to the block

  • Changing the width of the block, and how it fits into your page

More information about Block Design and Block Content settings can be found here.

HTML Field

The HTML Tab contains a field where you enter your custom HTML. This can include any valid HTML, tags, and even styling/style tags.

You do not need to include HTML5 document tags (<!DOCTYPE html>), head tag, or even body tag since the block itself will already be loaded within your app.

Please Note: You can not place JavaScript into an HTML block.

Replacement Variables & Replacement Examples Tab

HTML Blocks may contain any valid HTML, tags, and styling. You can also load dynamic data, like the Area Name or Member Username, using Replacement Variables.

For Example, you can add an <h1> tag and a replacement variable like so:

<h1 class="text-center center"> Welcome to <b>{{area.name}}</b></h1>

The {{area.name}} is a replacement variable that dynamically pulls the Area's name into the header.

A large amount of data is automatically exposed to the HTML block, regardless of any settings you may have set on your Settings Tab.

  • Tour, Member Area, and Theme details associated with the area and theme you are viewing.

    • This may include Area Name, active theme ID, etc, Design Variables, etc

  • When working with an HTML block in a member area, the CMS has exposed almost all data associated with the logged-in member.

    • This may include the Member's name, if they are a Trial member, etc

Depending on what you have set in your Settings Tab, additional data may have been exposed to the HTML. For example:

  • All the details about a Set

  • All the Details about a Model

  • All the details about any Metadata type

TMM Tip: Learn more about replacement variables on our Replacement Variables article.

Related Articles

Block Types
PreviousMetadata List BlockNextDesign

Last updated

Was this helpful?