The Style menu is the command center for styling your landing pages. Each tab in the menu gives you access to many different style options, including colors, fonts, borders, and more. These styles will ultimately affect the look and feel of your page elements.

NOTE: Styles managed through the Style menu will take precedence over those created on individual page elements (e.g., heading styles are defined in the style fly-out menu and affect elements. Changes within the element will not affect the Style menu).

Access the Style Menu

Navigate to Landing Pages. Either create a landing page or edit an existing landing page.
Click the STYLE tab on the right.

Page Background

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, which you can access by clicking Open Asset Manager).

How to Upload a Background Image

Select Yes – Upload a Background from the Use Image menu.
Click Open Asset Manager. Here, you’ll select from your available Asset Manager images or upload a new one.

After selecting an existing image or uploading an image and selecting it, click Insert.

Your background image now appears behind your landing page content.

Image Options

Click the Repeat drop-down to select a CSS property for the background:

Repeat - The image repeats horizontally and vertically. This is sometimes called “tiling,” and works best with smaller images.
No repeat - The image does not repeat and displays at its uploaded size.
Repeat-x - The image repeats horizontally only.
Repeat-y - The image repeats vertically only.

Click the Size drop-down to select a sizing option:

Auto - This option displays the background image at its uploaded size. You can also use Repeat options.
Cover - Your browser covers the full background with the image, cutting off parts that do not fit in the browser window. Note that this is the most ideal option because it prevents any rendering issues when your landing page loads.
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. Additionally, you can use Repeat options.

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.

Important Design Considerations

Remember that your Landing Page (background included) projects your organization’s image to your subscribers. Therefore, make sure to consider the following design considerations during your design process:

Because most monitors are set to a resolution of 1920 x 1080, consider using images that aren't much larger. If so, it may take a few seconds to load on some devices. Also, note that using the Cover option might cause your image to become blurry or pixelated.
Always keep in mind that your background image is applied to both your Desktop and your Mobile versions.
Try to keep your image’s file size somewhere between 500 and 600 KB. Image editors can help you balance your file size and image quality.
Content is king, and the main focus of your landing page should always be the content. Try not to get too caught up making your background image perfect. Sometimes a smaller image that helps your landing page load quickly or prevents distraction is ideal. Remember that you can always “tile” smaller images, too, for aesthetic effect.

Layout Area

This is THE area behind all of your Landing Page content. You can use the available options to style the color of this area (including opacity), the border color, thickness, style, and radius.

Text and Headers

This is where you can style all of your text elements using 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.

NOTE: The system 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.

Input Fields

Here, you can use the following options to manage the style of your input fields (Personal Info, Demographic, Captcha, and Email):

Label Options - The label location for your input element (inside, above, or to the left of the element).
Line Height - The print lead in pixels.
Letter Spacing - The kerning (character spacing) between letters in the text.
Label Font - The label font, color, and style.
Input Font - The input font, color, and style.
Input Border - The input border size, color, and line type.
Input Box - The properties of the input box that surrounds the input field.

Checkbox Fields

Here, you can manage the style of your Interest or Demographic elements. This includes padding and font size, color, and style for both the Interest heading and checkbox items.

Button

Here, you can style the button that submits an input form on your Landing Page. For example, instead of an HTML button, you can upload an image.

Click Use Image to open the image upload option. If you want an HTML button, you can style the background, border, border radius, padding, font, line height, and letter spacing.

Validation Message

Use the Validation Message section to stylize the message for all required fields. You can modify the message location, background, border, padding, font, and font style.

An example of what the field looks like on your Landing Page is shown at the bottom of the tab.

Style Your Landing Pages