Adding Titles

Overview

When creating an email or a web page, you typically need to insert titles to establish a hierarchy in your content.

With BEE, you can create title blocks so that the output HTML will render those titles with heading tags (H1, H2, H3).

Using heading tags in HTML is important for two reasons:

• accessibility, as users that need a screen reader can navigate emails and web pages according to their headings, listen to a list of all headings, and skip to the desired heading to begin reading from that point;

• SEO for web content, since search engines use headings to better understand the content on a page and rank it properly in web searches.

To add a Title in BEE, use the Title block available in the Content tab of the editor.

Once dragged into the stage, a title block will be created.

As you can see, the block has a “lite” version of the text toolbar, similar to the one available for the Button block. Let’s have a look at the content properties for this block.

• The “Title” property is used to select the proper heading style (H1/H2/H3).

• The settings highlighted in red are the ones that are missing from the usual text toolbar and are applied to the whole block.

• The settings highlighted in green are applied to the whole block, unless the same setting has been changed for the whole block or for a part using the controls on the text toolbar. In that case, the color selected with the toolbar won’t be overridden.

Using different titles on desktop vs mobile

By using two separate Title blocks and applying the hide on desktop/mobile setting, you can have titles with the same title tag (e.g. H1) but with different font styling.

This comes super-handy if you need to differentiate title size and style on mobile and desktop, while keeping the same heading tag.

Back to top