The Style Flyout Menu (Part 1)

The style flyout menu is the command center for styling your landing page. Each tab in the menu gives you access to many different style options, including colors, fonts, borders, and so forth. These styles will ultimately affect the look and feel of your page elements. Note that styles managed through the style flyout menu will take precedence over those created on individual page elements (e.g. heading styles are defined in the style flyout menu and affect elements. Changes within the element will not affect the style flyout menu).

This article will cover accessing the style flyout menu and the Page Background, Layout Area, and Text & Headers tabs. The other tabs will be covered in Part 2.

Accessing the Style Flyout Menu

Navigate to Marketing Automation > Landing Pages. Either create a new landing page or edit an existing landing page.

Click the STYLE tab on the left of the screen to open the style flyout menu.

Page Background Tab

On this tab, you can change the default background of the page by selecting a background image from the gallery or uploading your own (selected from the asset manager).

Click the Repeat dropdown list to select a CSS property for the background:

  • Repeat: repeat/tile the pattern both horizontally and vertically
  • No repeat: display the background image once
  • Repeat-x: repeat the background image horizontally
  • Repeat-y: repeat the background image vertically

Click the Size dropdown list to select a sizing option:

  • Auto: display the image at its native size
  • Cover: stretch the image to cover the entire background without repetition
  • Contain: the window height determines the background size. The image will reduce height if the window is not tall enough to accommodate the native size. Note that the image’s aspect ratio is maintained, and the resulting width may become too small with this setting.

Some images may not be ideal choices for background image designs. The CSS will ultimately dictate the image’s behavior, and the browser size can affect the image.

Layout Area

The layout area is the area behind all of your landing page content. You can style the color of the layout area (including opacity), the border color, thickness, style, and radius.

Text & Headers

All text elements are styled in the Text & Headers tab.

You can select the following options:

  • Font: The font used for the entire landing page.
  • Line Height: The print lead in pixels.
  • Letter Spacing: The kerning (character spacing) between letters in the text.
  • Paragraph: The paragraph font size, color, and style.
  • Heading 1: The H1 font size, color, and style.
  • Heading 2: The H2 font size, color, and style.
  • Hyperlink: The Hyperlink style and default color.

Informz automatically updates the line height of a text element to be equal to or greater than the font size when the font size increases to a size greater than the original height (the line height is always greater than the font size - it cannot be set any lower than the font size). This applies individually to H1, H2, and Paragraphs. Affecting one style does not affect the others.

There’s More Where That Came From!

Because the style flyout menu is so chockfull of features, you’ll want to check out Part 2 (and the related articles) to see what other styling options you have available!