You can set a variety of style options and properties that control the default appearance of your Landing Pages. These are set on the STYLE tab which flies in to and out of the design canvas when clicked.

Notes - default Style settings

• The styles and properties that you set on the STYLE tab will be applied to all Landing Pages.
• You can override some of the default settings as you create individual Landing Pages.
• Style and formatting overrides on individual Items do not update the established STYLE menu settings. The default settings can be changed only on the STYLE tab.

Access the STYLE menu sections

1. Access the Admin interface.
2. Navigate to Landing Pages and either edit or create a Landing Page.
3. In the Landing Page Designer, the STYLE and ITEMS tabs display on the right; click STYLE.

The STYLE tab has several sub-tabs.

4. Click a sub-tab to expand the section.

You can review and customize the options as described in the sections that follow.

Page Background

You can set a background to display for all Landing Pages. Images of different sizes make it possible to have either a full-width or a tiled background.

• If you choose to not use a background image, you can set a background color.
• If you choose to use a background image, you have two options:

• Yes - Choose a background - scroll through the preloaded images and simply stop at the one you want to use, as shown below.

• Yes - Upload a background - upload an image from Asset Manager as described below.

Upload a background image

1. Select Yes - Upload a background from the Use Image dropdown.

TIP: It's only necessary to click Open Asset Manager if you want to replace an existing background image.

Asset Manager opens.

2. Select or upload an image and click Insert.
3. Refer to the table below to set the Repeat and Size properties for the background image.

The image displays behind your Landing Page content.

Image display properties

• Click the Repeat and Size dropdowns to set the background image display properties.

Some images may not be ideal as background images. The CSS will ultimately dictate the image's behavior, and the browser size can affect the image.

Design considerations

Your Landing Page (content, layout, colors, background, etc.) projects your organization's unique "image" to your subscribers, so consider the following points during your design process.

• Most monitors are set to a resolution of 1920 x 1080 (pixels), so consider using images that are roughly this size. Larger images may take a few seconds to load on some devices. Also, using the Cover option might cause your image to be blurry or pixelated.
• The background image is applied to desktop and mobile devices, so be sure it looks good on a variety of devices and screen sizes.
• Best practices indicate that an image file of between 500 and 600 KB is ideal. Use an image editor to manage your image file's size and quality.
• Content should be the main focus of your Landing Page. Try not to get too caught up making your background image perfect.
• A small image that loads quickly and isn't a distraction is a good idea. Remember that you can "tile" small images for aesthetic effect.

Layout Area

This is the area behind your Landing Page content (the "fill"). If you apply a color and/or border, make sure that it complements the colors that you plan to set in your Text and Headers settings.

• Color - set the "color bed" of the Landing Page.
• Border - set the thickness, color, and style of the border; set to 0px if you don't want a border.
• Border Radius - set the "sharpness" of the corners; the higher the number, the more "rounded" the corners.

Text and Headers

Use this section to set the default properties of your text elements.

• The selected Font will be applied to all text on the Landing Page.

• Font Size - set the size, color, and formatting options for first- and second-level headings and the body text elements.
• Line Height - set the height for lines of headings and text (i.e., the "space" between the lines).

NOTE: If the size of heading or paragraph text is increased while designing the Landing Page, the system automatically adjusts the line height accordingly. This adjustment is applied to only that instance of the text element.

• Letter Spacing - set the spacing between letters in the headings and text.
• Hyperlink - set the default color of all hyperlinks and whether they are underlined.

Input Fields

Use this section to manage the properties of fields that solicit user input (Personal Info, Demographic, Captcha, and Email).

• Label Option - set the location of the field labels (to the left, above, or inside) in relation to the user-input fields.
• Label/Input Font - set the size, color, and formatting options for field labels and input fields.
• Line Height - set the height for field labels.
• Letter Spacing - set the spacing between letters in the field labels and input fields.
• Input Border - set the thickness, color, and style of the border for input fields; set to 0px if you don't want a border.
• Input Box - set the radius (the the "sharpness" of the corners; the higher the number, the more "rounded" the corners), the color, and the padding (space between the text and the border) for input fields.

Checkbox Fields

Use this section to manage the properties of Personal Info, Demographics, and Interests fields on Landing Pages.

• Vertical Padding - set the padding to be applied above and below the text.
• Font - set the size, color, and formatting options for the text.
• Heading Font - set the size, color, and formatting options for headings.

NOTE: If the Message Categories feature is enabled, an additional configuration section, Message Category Description Styling, displays; see Landing Pages Items.

Button

Use this section to manage the properties and appearance of the button that submits your Landing Page.

• You can specify your preferred label/text of the button by clicking into it while working in the designer.

NOTE: You can use an image as a button but keep in mind that the entire image will be used which could make the button very large.

Click Use Image and select Yes to open Asset Manager to choose an image.

• Background - set the color (i.e., the "fill") of the button.
• Border - set the thickness, color, and style of the border for input fields; set to 0px if you don't want a border.
• Border Radius - set the "sharpness" of the corners; the higher the number, the more "rounded" the corners.
• Padding - set the padding (space between the text and the border) for the button label/text.
• Font Size - set the size and color of the button label/text.
• Line Height - set the vertical position of the button label/text.
• Letter Spacing - set the spacing between the letters of the button label/text.

Validation Message

Use the Validation Message section to format the message that displays when the "submit" button has been clicked and there are empty/blank required fields.

• The default message text cannot be customized.
• As you set the properties, preview your settings in the Example at the bottom of the section, which updates in real time.

• Location - set the location of validation messages in relation to the field (to the right, above, or below).
• Background - set the background color (i.e., the "fill") of validation messages.
• Border - set the thickness, color, and style of the border for validation messages; set to 0px if you don't want a border.
• Padding - set the padding (space between the text and the border) for validation messages.
• Font - set which font to use for validation messages.
• Font Style - set the size, color, and formatting for the text of validation messages.

Related articles

• Manage Landing Pages
• Landing Pages Items
• Landing Pages Best Practices