Custom Style Blocks

A custom style block enables different, multiple styles to be used within a single article. 

For example, the style applied to a particular article may have a white background and black text. By using a style block it allows these to be overridden for sections of the article. This is useful when trying to highlight or stylize important inline content.

Working with Custom Style Blocks

Custom Style Blocks offer many of the same styling options are the same as an article style, with the addition of being able to use background images.  Each custom style block is style specific and there are no limits to the number of style blocks that can be created or applied.

Creating a Custom Style Block

  1. From the Style manager, select the style you want to create a custom style block for.
  2. Scroll to the 'Custom Blocks' section at the bottom of the style builder and select '+Create Block

  3. Click the the text components you want to customise and make the required changes.
  4. To change background properties and padding, click the 'paintbrush' button.

  5. Once finished, click 'Save' on the top right and then return to your article.

Editing a Custom Style Block

To make changes to an existing style block click the component you wish to change and apply the changes.

Rename / delete Custom Style Block

Click the 'More Options' button to rename or delete a custom style block.

Applying a Custom Style Block

Style blocks are applied to to content within an article and can only be applied to columns.

  1. Access the article to which you want to apply a style block.
  2. Select 'Layouts' in the article builder menu and drag any column onto the article.
  3. Hover the column and click the 'paintbrush' button to display the column properties panel.
  4. From the drop down menu, select the name of the custom style block you want to apply.
  5. The style block has now been applied. Any text components you add into this block will inherit the styling.
  6. Save the article to commit the change.

Using the Custom Style Block as a Hero Image

Using the Background Image property of a Custom Style Block it's possible to use it as a hero image. Simple apply a custom style block to a layout component, then add text components which will sit in front of the image.

Custom Style Blocks overview video

The below video provides a top level overview of how to create, customise and apply a new style block to content in an article.

Notes:

  1. Padding applied to style blocks is in addition to the existing canvas padding.
  2. Font Type, Font Size and Bold/Italics of the text style you're working in will be inherited by the Custom Block text components.
  3. There is no limit to the number of times a Style Blocks can be used. 

Still need help? Contact Us Contact Us