Custom HTML areas (templates)

For power users, H5mag also allows you to write your own custom areas (templates) using HTML. By creating your own templates you have ultimate freedom in the way your content is presented. In fact, when we develop new areas, we use the same exact system!

To add a custom HTML area, open H5 Studio and use the menu to navigate to the templates screen.

Here you can add new area templates:

  • A template is simply a snippet of HTML with placeholders. Use these placeholders for user-editable HTML content. A placeholder takes the form of: {{title}}.
  • A slot between two tags will transform into an element slot where the user can edit text.
  • A slot within a tag will transform into an attribute in the halo. Usage example: <a href="{{link}}" title="{{link title}}">Read more</a>.
  • A slot within the src attribute of an image will trigger an image picker. Usage example: <img src="{{photo}}" />.

Styling your custom templates using CSS

Besides adding HTML, your custom areas might also need custom styling. For each template, you can add CSS which will be prefixed and only be applied to that area template.

Last modified: