Chat with us, powered by LiveChat Skip to main content
Echo360 Status:

EchoInk: Styling and Creating Habitat HTML Patterns

Amanda Leibovich
  • Created:
  • Updated:

After you add a basic pattern to your content, you can style the pattern using one of the classes available in the breadcrumb bar.

For information about how to customize your project templates and patterns, see Understand Habitat HTML patterns in Using Habitat HTML Patterns.

Style an Element

  1. Click somewhere in the element you want to style.

    The element inspector appears as a blue box around the selected element.

  2. In the breadcrumb bar near the bottom of the screen, hover your mouse pointer over the selected element.

    A blue arrow will appear.

  3. Click the blue arrow and select the class style you'd like to apply to the element.

    The class name will appear in green at the top of the styles list.

  4. The element will be updated with the selected style.

You can select multiple class styles for some elements. For example, you can change the vertical alignment and display size for callouts / side notes.

To remove a style, click the X icon next to the green class name.

Some elements do not have preset styles. You will see the message No preset styles for this element.

Edit Pattern Code

To edit the snippet of HTML code within a pattern:

  1. Hover your mouse pointer over the pattern you would like to edit.
  2. Click Edit Pattern in the lower right corner. 
  3. Edit the code of the pattern.
  4. Click Apply at the bottom of the sidebar.

Create Your Own Patterns

You can create your own custom HTML patterns to help you work more efficiently in Habitat.

  1. At the bottom of the Add Pattern sidebar, click Create New Pattern.

  2. Enter the name of the pattern.

    The icon for the new pattern is labeled with the first two letters of the name's first word.

  3. Type or paste HTML code below the pattern name.
  4. Click Apply at the bottom of the sidebar. 

The icon of the new pattern appears in the More category at the end of the list of patterns.

The image below shows an example HTML pattern for a standard introduction section. It contains a heading, an introductory paragraph, a bullet list, and a closing paragraph.