Adding and Editing Text

Great copy is key to building landing pages that convert. Lucky for you, text is super easy to edit and customize in the Unbounce Page Builder. You have a variety of options for adapting text, such as editing text within templated text boxes, or dragging and dropping your own text widget to enter text in a new place. Once your text has been entered, you can size it, link it, style it, and more.

This article will help you out with:

  • Identifying text areas in your landing page template.
  • Inserting text areas onto your page using the text widget.
  • Formatting/branding your text.
  • Creating links in your text fields to direct visitors to other pages.


Adding and Editing Text

  1. Double-click existing text to edit it.

OR

  1. Drag and drop the Text widget from the Widget Panel on the left to add a new text box.

  2. Add your copy into the text box as desired.
  3. Format the text using the Properties pane on the right (including font face, font size, text and highlight color, formatting (such as bold, italics, and underline), text alignment, and line spacing.)

When adding a <span> tag within the source, the <span> tag cannot be empty.


Creating a Link in the Text Editor

  1. Select the text you'd like to become a link.
  2. Click "Action" from the Properties pane on the right.
  3. Paste your link into the "URL" field.
  4. Press Enter to activate the text link.

Removing the Underline from Your Text Links

You can easily remove the underline from page links with a bit of CSS magic.

To set this up:

  1. Click the Stylesheets button at the bottom left of the Page Builder.
     
  2. Name your Stylesheet Link Styles.

  3. Paste in the following code: 

That's it! The CSS will exert its super powers in preview and at the published URL.  

For more information on customizing page links with CSS, have a gander at this tutorial.


Using Google Fonts on Your Landing Page

With some copying, pasting, and a little bit of CSS code, you can easily add Google Web Fonts to your Unbounce landing page.

Keep in mind, Web Fonts are not compatible with all browsers.

  1. Visit www.google.com/fonts and click the + icon to select the font you would like to add to your landing page. 
  2. Open the "selected" window at the bottom of the screen
  3. In the Embed Font section, toggle to "@IMPORT" and copy the code.
  4. Return to your Unbounce landing page and paste this code into the "Javascript" tab. From the Placement drop-down menu, be sure to choose "Head", then click Done.
  5. Return to Google Fonts and copy the code from the "Specify in CSS" section
  6. Back in Unbounce open the "Custom CSS" dialog box and paste the following code (with the font code you copied from Google Fonts replacing the bolded section):
  7. <style type="text/css">
    h1 * {
    paste_font_webcode_here
    }
    </style>

    Note: the 'h1' tag affects the text style this font is applied to.  'h1' applies this font to the 'Heading 1' style but this tag can be changed accordingly (e.g. h2 = Heading 2, h3 = Heading 3 etc.)

    To specify a font weight, add this CSS before the closing bracket of h1:

  8. font-weight:300 !important;

    replace '300' with the font weight you wish to use

  9.  Highlight the text for which you would like to change the font and select "Heading 1" from the Style drop-down menu in the Properties pane on the right.

  10.  Save and publish your page to see your action in action!

You'll notice that you cannot see CSS changes in the Page Builder. To double-check the appearance of your CSS code, you'll have to re-publish your page and check it out at the published URL.


Using Custom Fonts on Your Landing Pages

If there’s a specific font you'd like to use:

The first thing you'll want to do is check free web font sites like Google Fonts and Adobe Edge Web Fonts. If you find your font on one of these sites, you’re in luck! Embedding that font just involves adding some custom JavaScript and CSS to your landing page, which they’ll tell you how to do.

Google Fonts has a large library, and some fonts are very similar to popular paid fonts. For example, Montserrat is a great free alternative to Gotham. We have a complete guide to using Google Fonts in Unbounce landing pages, which is included above.

If you can't find the font you're looking for on sites likes these, you’ll need to buy a license for that font.

Sometimes, the font’s license will allow it to be directly included on web pages using @font-face. If it does, and you have access to a webserver, follow the instructions at farther down this section to upload the font and embed it onto your landing page using @font-face.

Otherwise, if the font is available on Adobe Typekit, that’s usually the easiest way to use the font on your landing page in a way that complies with the font’s license terms.

Even if it isn’t on Typekit, the foundry that licenses the font may still allow it to be used with Typekit. If they don’t, you’ll need to ask the foundry what other solutions they have for web fonts – if they have one, chances are good that it'll work with Unbounce.

Once you’ve got the font included on your Unbounce landing page, see below for how to apply it to parts of your page.

How to use your company's bespoke font

If your company uses its own bespoke font, your options are slightly different. The simplest way to embed the font on your page is to host it on a webserver and use @font-face to include it on your landing page.

This will, however, make your font freely accessible to anyone with a little technical know-how. While there are certain steps you can take to make this more difficult, there’s no way to entirely protect a font when using @font-face.

For enterprises, Typekit may be a better solution. They'll host your own fonts and serve them to your landing pages in an easier and much more protected way.

How to use @font-face to include your fonts

To do this, your font will need to be licensed for @font-face use, and you’ll need access to a webserver to host the font.

  1. Upload the font to your server
    • The more formats you have the font in, the better - for maximum compatibility aim for .eot .woff . ttf and .svg
  2. Ensure that your fonts are served with a Access-Control-Allow-Origin: * header
  3. Click Stylesheets at the bottom of the Page Builder
  4. Paste the following CSS, adding your font's URLs:
  5. Follow the steps below to apply the font elements on your page.

I’ve included my font — now how do I apply it to parts of my page?

Once you have included the font, either through Google Fonts, Typekit or @font-face, you can apply it to elements on your landing page using CSS selectors like these:

  1. Click Stylesheets at the bottom of the Page Builder
  2. Paste in the selectors you need from the CSS code above
  3. Replace ‘MyFontName’ with the name of your web font and ‘Fallback’ with a web-safe font that's your second-best choice

Supported Languages

Unbounce can support any language, so long as it has a character set. By default, the text editor is set up for left-to-right languages. To write in a right-to-left language, you’ll need some custom code. Take a look at this post in our community for a step-by-step guide on how to set this up.


Glossary

Conversion copywriting: the practice of writing web copy with the goal of converting leads. Check out some of our resources on conversion copywriting at the link below.

The Conversion Marketer's Guide to Landing Page Copywriting

 

Back to: Building Your Landing Pages >>

Powered by Zendesk