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.
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:
Buttons
You can easily apply global primary and secondary button styles to your entire page or website by using the Buttons tab.
Global button styles can be applied to button, form and checkout widgets. New widgets of these types will have the primary button style by default when added to your pages.
In this menu, you can choose between a flat, outline, or gradient style of button. You can also choose between square, rounded, or pill corners for your button.
The color picker allows you to choose from your brand colors, recent colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color for the background of your button and text.
Formatting options for font, size, line spacing, and style of your button text are also available.
You can also format your text in bold, italics, underline or strikethrough as well as set button text color.
Under each "Primary Button" and "Secondary Button" heading, you'll see a preview of your button as you make changes to these global button styles. To see your changes reflected on your page's buttons, click Save.
To learn more about how to make buttons on your page primary or secondary, click here.
Fonts
Here, you can set a default font and color for headings, text widgets, and countdown timers on your page or site.
Set default font styles for:
- Headline 1
- Headline 2
- Headline 3
- Normal text
Click on any one of the drop-down menus for each type to set your defaults. Here you can set the font-family, color, size, spacing and break margins. You can also apply bold and/or italic defaults to your text type.
For fonts, you can select from the dropdown or start typing to search for a specific font. Click the color selector to choose a new font color.
Updating your global font styles
There are a few ways to update the default settings for your global font styles.
From the left-hand sidebar select Styles, click the Fonts tab, and make the desired changes.
Or from the text widget, click Edit Styles, which will open the Fonts tab so you can make changes.From a custom text type in the text widget, click Update to replace your existing styles for this text type with your custom settings. The Fonts tab will open to show you the new text settings and all text of the matching type will automatically be updated to match your new defaults.
Changed your mind or made a mistake? Simply click undo or redo at the top of the builder.
Page Background
In this section you can set a background color, image, or video for your entire page. If using an image, you will also have a chance to adjust your background image's sizing, positioning, and whether you would like it to repeat in the background.
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 color overlay feature is helpful if you have text sitting above your image or video background —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 Cover Overlay below your image or video thumbnail, then ADD next to "Recent Colors" as seen below.
Page Width
Staying under the Background tab, 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.
Favicon
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
If the favicon doesn't appear after updating your site, ensure to clear your browser's cache. This article in our Knowledge Base shows you how to do that on the most popular browsers: How Do I Clear My Browser Cache.”
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.
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 ↗