Managing Your Page Properties in the Classic Builder

Looking to change the dimensions of your landing page in the Classic Builder? Or hoping to add useful meta tags such as a page title and keywords?

You can adjust these settings, and more, within the Page Properties tab in the Classic Builder. 

See this video to help you get started:

You can find the Page Properties tab on the right side of the Classic Builder: 

Think of it as the control center for all your page’s high-level data. Here you can make changes to:

1. The high-level appearance of your page (dimensions, background colors, universal text styles, etc.), and 
2. How your page appears in search engines.

The Geometry Section

Use the Size field to adjust the width of your page manually.

Change the Top Margin to determine the space between the top edge and the content of your page.

The Default Text Style Section

Access the Text and Link Color selectors to determine the default colors for your text and link styles on your page.

The Title & Meta Data Section

Your meta title and description are typically shown when your landing page shows up in search engines.

The Title is the first thing your visitors are likely to see in search results—their introduction to your page. Make sure it's descriptive of what's on your page, while also grabbing their attention.

Keywords are an important part of search engine optimization and help drive the right kind of traffic to your landing page. You want to pick keywords to acquire the correct target market.

Enter your keywords in this field, separated by commas.

Add a Description of your landing page to this field. Your description will appear in search results and can help visitors anticipate what they'll find on your page.

Upload a Favicon from your Unbounce image library. Your favicon appears on browser tabs and can be a powerful extension of your brand. (For more information, see How Do I Add a Favicon in the Classic Builder?)

Some information about extra options:

• Unbounce gives you the option to add Dynamic Text Replacement to your Title, Keywords, and Description fields.
  • You can pass through dynamic text values through your page’s URL; this is useful for increasing message match and quality scores for your PPC campaigns.
• Select the Hide my page from search engines option to prevent Google from indexing your page; this works well if you’re running only PPC campaigns.

The Open Graph Meta Data Section

The Open Graph protocol lets you provide additional meta data to control how your landing page shows up when shared on social media websites or in places like Slack—the “social card” of your page, or how your page “unfurls” if someone shares the link.

Set the Type of content for your page. (A full list of Open Graph content types can be found here.) For Landing Pages, you can set Type to "website", which will insert this meta data in the HTML of your page:

<meta property="og:type" content="website" />

Your Title indicates the headline shown when a link to your page is shared. Choose something both descriptive and attention-grabbing. Open Graph titles should be no more than 60 characters.

Similarly, the Description lets you provide additional information about your page, appearing just below your title. Open Graph descriptions should be under 160 characters.

You can choose an Image to appear alongside your page title and description when shared. Enter the URL of your preferred image and it will be automatically pulled into your social card. Open Graph images should be at least 1200 x 630 pixels.

To learn more about Open Graph meta data, see How to Add Open Graph Meta Data to Your Page.

The Background Section

Use the Style drop-down menu to determine what type of background you’d like to apply to the entire page.

From the drop-down, select any of the following options:

1. Solid Color: Choose the color and opacity of a background color for the entire page. 
2. Pattern: Upload an image that will repeat and create a patterned effect for your background.
   • You can also change the position and tiling of your pattern by expanding the Advanced Settings.
3. Gradient: Select three colors to create a gradient effect on your background.
   • Choose the base, top, and bottom colors to create your effect.
4. Video: Select a video source and play that video in the background of your page.
5. Image: Upload an image you’d like to use as the background image for the entire page. 

Advanced Settings within the Background Section

For some background styles, the Classic Builder provides extra options to select by clicking the Advanced Settings option:

For example, a Parallax effect affixes the background on the page and keeps the image in place while the rest of your page scrolls past the image.

Fitting the image to the container will constrain the image within the dimensions of your page section.

Color Overlay/Underlay and Opacity allows you to add a 'tint' effect to your background image using a color of your choice. A color overlay of 100 will thoroughly saturate the page section with your selected color.

The Page Image Quality Section

Use the JPG Image Quality slider to set the default compression settings for all the JPG images on your landing page.

Select Compress all PNG images on this page to change the compression of all your PNG images from 24 bit to 8 bit.

Check out our documentation to learn more about using Auto Image Optimization.