Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

Customize global styles

Last Updated

Global style settings make it easy to customize how your page or site looks and functions. In this guide, you’ll learn about the different style options that are available in the builder.


Where to find global styles

Each page or site has a set of global styles. You can access them in the builder’s left-hand sidebar, as shown below.

NOTE: Global styles are located in the same spot in the sites builder, however, font styles, favicons and custom CSS are the sole global styles for sites.

About global styles

Change the entire look of your page or site on the fly with different fonts, colors, and more in style settings. Below, learn more about what each setting controls:

Font Styles

Here, you can set a default font and color for headings, text widgets, and countdown timers on your page or site.

TIP: Any custom fonts you set for individual widgets will override global font styles.

Page Background

NOTE: Page Background and Page Width are Site Background and Site Width in the sites builder.

In this section you can set a background color or image for your entire page. Use the color picker to choose from your brand colors, the page template colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color for your background as seen below.

If you add an image background, you can customize its sizing and alignment as well. Keep in mind, you can also set a background color or image for individual sections and columns.

The image color overlay is helpful if you have text sitting above your image—adding a color can make it much more legible, as shown in the example below.

To add a color overlay, click the color picker next to Image Cover Overlay, then ADD next to "Recent Colors" as seen below.

Page Width

In this section, you can customize your page’s width. Choose between small, medium, and large—the size of widget elements will adjust accordingly.

Each option sets a specific pixel width that your content will fill at a maximum—your content on smaller devices won’t take up these full widths.

  • Small: 800 px
  • Medium: 960 px 
  • Large: 1140 px

Toggling the Extend Section Backgrounds option to “on” will cause section background images and/or colors of a page to expand all the way to the edge of your page. If you have the option toggled to the left (off), the background image or color section of a page will not expand to the edge.


In this section, you can set a small image to act as your page’s favicon, the icon that appears in the browser tab when someone visits your page or site. Learn more about favicons and how to change yours here: Customize a favicon

Custom CSS

If you want to get fancy, you can enable custom CSS on your page to code in any styling you’d like. Simply toggle the option in your page’s style settings, then add your CSS.

Your code will automatically get wrapped in <style> tags—no need to add them. Most CSS you add will affect your page immediately without the need to publish your changes or enter preview mode. However, you may need to preview or update your page for some styles to take effect.

WARNING: We do not provide support for custom CSS. If you experience any issues with your page, try disabling custom CSS.

Need more help?

You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗

Was this article helpful?
Powered by Zendesk