Styling your Page in Smart Builder

Follow

Smart Builder’s Style Guide allows you to change and format typography globally across the entire landing page.

Typography, or font combinations, refers to the formatting options applied to text to convey a brand’s message in a visual manner, such as font colors, sizes, styles, line spacing, and more!

In Smart Builder, you make changes to the typography and colors across the entire page via the Style Guide. Or, you can edit the typography for a particular section only, without changing the typography of other sections.

Updating Typography Across Entire Page (Global Edits)
Updating Typography within Specific Sections (Section-level Edits)

Updating Typography Across Entire Page

Gone are the days of editing all headings or texts one by one. Use the Style Guide to edit your page’s typography.

  1. Log in to Unbounce and launch your page in Smart Builder.
  2. Navigate to the Style Guide style-guide-icon within the left-hand side menu.
  3. Update the text styles for all headings, paragraphs, buttons, or links. This includes font weight, size, color, line height, and letter-spacing:
    updating-typography-with-the-style-guide
    These styles will apply across all alike text styles on the page. For example, adding a blue font color under the Heading 1 tab will update all text on the page formatted with Heading 1 to be blue.
  4. Toggle the drop-down arrow button to the right of the heading, paragraph, or button tab to hide or show the formatting options.

  5. Click the blue Save at the top-right hand corner when you’re happy with these changes.

Updating Typography within Specific Sections

Follow these steps to update the typography and text styles for certain sections only; this will apply the typography edits to that section or element only, not the entire landing page.

  1. Double-click an element, such as a heading, paragraph, or button, within a section.
  2. Click the pen icon pen-iconto launch the Design Settings.
  3. Update the typography or styling for that specific section only:
    updating-typography-with-the-design-settings-section-level
    Updating the typography within a particular section will not change or update the typography across the entire page. 
  4. When you’re happy with these changes, click the icon at the top corner to close the Design Settings, and be sure to Save your page.  

You're all set! See our documentation for more insight into editing & updating text in Smart Builder.   

Glossary

Typography: Formatting options applied to text on a page that corresponds to your brand in a visual way, such as fonts, font sizes, colors, line spacing, font formatting, and more. 

Related Articles

Working with Section Templates

Editing the Mobile Version of your Landing Page in Smart Builder

Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply