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

  1. In the Unbounce Builder, double-click your text boxclick the Family drop-down menu arrow within the Font section, and click "Add/Remove Font".
    Click_Add_Remove_Font.png
  2. Find the font family you'd like to add (by browsing or using the search function) and click the + button in the top right corner.
    Click_the_Plus_Button.png
    Note: You can also remove a font family in this window by hovering over its check markclicking the remove symbol that appears, and clicking "Done".
    Delete_a_Font.png
  3. Once you see a check mark in place of the + symbol, click "Done".
    Click_Done.png
  4. Back in the Builder, apply your Google Font by clicking the font family and selecting your desired style from the list that will appear under it.
    Select_Your_Google_Font.png
  5. You're done!
    You_re_Done.png

If you would like to use a Google Font on more than one page, you will need to repeat these steps for each landing page individually, as added fonts will not sync between pages.


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 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.

If you can't find the font you're looking for on a free web font site, 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: * headerHere’s a guide that covers this (without the header, it won’t work in Internet Explorer or Firefox).
  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:

  • Click Stylesheets at the bottom of the Page Builder
  • Paste in the selectors you need from the CSS code above
  • 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 >>

Was this article helpful?
2 out of 6 found this helpful
Powered by Zendesk