Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Styling Cover Pages

Use the Style panel to customize the look of your Cover Page. In the Style panel, you can:

  • Change fonts and colors.
  • Choose button shapes and colors.
  • Position text over background images.
  • Adjust the size and appearance of social icons.
  • Set the color that appears as your Cover Page loads.
  • Customize layout-specific features, like maps, audio players, and videos.
Cover Pages aren't available in version 7.1.

Before you begin

  • To change your layout, follow Cover Page layouts before using the Style panel tweaks.
  • All Style panel settings are specific to the layout.
  • If you change your layout, all font, color, and size settings reset to the layout’s defaults. If you switch back to a previously used layout, the style tweaks also reset.
  • To prevent overlap and preserve the layout on different devices, Cover Page elements like text, logos, and buttons won't enlarge past a certain width.

Change style tweaks

In the Cover Page Menu, click Style.

Use the style tweaks to customize your Cover Page. As you make changes, the page preview updates. We recommend experimenting until you achieve a design you like.

Here's a list of common Cover Page tweaks:

  • Positioning - Position the content on the page. Depending on your layout, the options are Left, CenterRight, or Top, MiddleBottom.
  • Branding - Set the font and color.
  • Headline - Set the font and color.
  • Body - Set the font and color.
  • Background - Set the background color (visible if not using an image or video) and the page border options.
  • Media (not available in Location layouts) - Set Style as Full or Grid and customize Grid appearance. Check Auto Overlay Color and Auto Loading Color, or uncheck and set colors for each. See more about Loading Color below.
  • Buttons - Set the font, style, and color of any buttons.
  • Social Icons - Set the style and color of social icons.
  • Audio Controls (Audio layouts only) - Set the style of the player and the font and color of the tracks.
  • Video Controls (Video layouts only) - Set the style and color of the player.
  • Map (Location layouts only) - Set the map style.
  • Twitter (Twitter layouts only) - Set the font, style, and color of tweets (Body) and Twitter handle (Name and Meta) text.

Background imagery

Most layouts include Full and Grid imagery options. 

Select Full to fill the entire background of your Cover Page with a single image. If you upload multiple images, they will display one image at time as a slideshow.

Select Grid to create a background grid of repeating images. If you have one image, the grid will repeat that image to fill the space. If you use the Montage layout, the content bar may cover some of your images.

Use the tweaks that appear below to set the aspect ratio, image orientation, and more.

Note: The Grid option isn’t available on the Focus, Flagship, Harbor, or Monocle layouts.

Loading color

Most Cover Page layouts offer a loading color option, which lets you display a separate background color while your regular background color or image loads. You may also see this color when transitioning through images in a slideshow.

Note: The Flagship, Focus, Harbor, and Monocle layouts don’t offer a loading color.

By default, your layout uses the Auto Loading Color. This means the color is based on the background color for your image or video. If you have multiple background images, the loading color is based on the first image in the Media panel. 

To choose your own color, uncheck Auto Loading Color and set a new one by clicking Custom Loading Color.

To disable the loading color, click Custom Loading Color and check the Transparent option.

Overlay color

All layouts except Harbor offer an overlay color option, which adds a tint to your background image or color. By default, your layout uses the Auto Overlay Color. The automatic color is usually a shade of gray complementing your demo image.

To use a custom overlay color, uncheck Auto Overlay Color, click Custom Overlay Color, and choose a new color.

To use the Custom Overlay Color as a form background color, but hide it from the rest of the page, use the opacity slider to make the color transparent.   

Mobile styles

Since Cover Pages are built with responsive design, they’ll look a little different on a mobile device. You can preview how your page will appear on mobile using Device View.

Was this article helpful?
33 out of 91 found this helpful