Thrive Knowledge Base

How to use the Landing Page Fonts Option

With Thrive Landing Pages you can now set custom fonts to all the headings and paragraphs of a Landing Page.

You can do this quickly and easily in Thrive Landing Pages with the following steps:

While you're editing your landing page, you can go to the bottom of the editing control panel and click on "Page Setup":

You can then click "Landing Page Settings":

Select the "Landing Page Fonts" options: 

This is how the settings of the feature look like:

For instance, we'll click on the "Paragraph" item and go through all of the available options: 

Font Face

The Font Face option will allow you to change the actual font of all the paragraph elements found on the Landing Page.

The option works exacty as in the case of the Paragraph/Text element font face option. You can find out more in-depth information in this tutorial: How to use the Paragraph/Text element

As you can see, you will be able to either inherit the theme fonts, use web safe fonts, or choose between a variety of Google fonts. 

Color

In the "Paragraph" item, if you select the color indicator, you will be able to change the color of all the paragraph elements on the page, at once:

Font Size

You can change the font size of the custom font that will apply on the landing page, by using a slider (1) or by giving it an exact value (2):

Line Height

Same as for the font size, you can also change the line height of the paragraph/headings:

Clear Custom Font

If for some reason you want to remove a certain custom font, from a heading or paragraph, you can do that by using the "Clear Custom Font" button, which will set the paragraph/heading to revert to the font of the landing page.

For both the font size and the line height you can use px or em:

  • ​px - generally thought of as the smallest single component of a digital image;
  • em - is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.

Apply To All Headings

In the case of the headings, you also have the option to apply a setting to all of the headings found in the Landing Page. For exameple, if you change the font face to the "Heading 1" item and then click on "Apply To All Headings", all the headings from the page will inherit the respective font face.

Hyperlink Settings

Apart from the settings available for the paragraphs and headings on the page, you can also apply settings to the hyperlinked text from the Landing Page: 

First of all, you can bring modifications to the default hyperlinked text, or to the hover state. The hover state means that the options made there will be visible only when the user will hover over a hyperlinked text. 

For example, we'll consider a blue hyperlinked text - But in the hover state, we'll change the color to red, leaving the other options the same as the default ones: 

This is how the user experience will look like now, when he will hover over a hyperlink text:

If you found this article useful, don't forget to rate it, below. However, if you have any further questions, please let us know, by leaving a message.

>