Text is key in conveying to customers who you are, what you offer, and how to contact you. The words you use matter just as much as how they're presented, so here's how to use the Rich Text element for advanced formatting control.

Using The Element

First, navigate to the Funnel or Website builder and edit one of your pages.

Drag and drop the Rich Text Element from the element options.

Start writing your text. You can use the following shortcuts to modify your text:

  • Writing something between two backticks ( \` ) will turn it into code.
  • Adding three backticks ( \\\` ) then clicking the space bar will create a code block.
  • To add a quote type ">" then click the space bar.
  • To create a list, you can add a "-" for bullets or a number immediately followed by a dot (1.) then a space to create a list. To nest elements inside the lists, click Tab.
  • To stylise the text, click Control plus b for bolding, i for italics, and u for underlining.

If you've already added your text, you can stylise it by selecting it with your mouse and choosing one of the options at the top.

General Settings

Element Name

You can rename the default name or title displayed at the top of the screen for easier navigation as you build your page.

Typography Type

You can select the paragraph or content font previously chosen from the settings, or pick a new typography font from the drop-down menu.

Mobile and Desktop Font Size

You can adjust the font size for mobile and desktop devices using the size bars for each text or content element. Toggle between mobile and desktop views in the top left corner of your funnel builder to see how your edits will look on each platform.

Font Weight

Adjust the thickness of your text by selecting options like Light, Normal, Thin, Medium, Bold, or Extra Bold.

Opacity

You can control how much your text or content fades within each element box. The opacity varies from None, Light, Half, to Heavy fade.

Line Height

You increase the height of the Element box by adjusting the size bar.

List Item Spacing

Use this size bar to adjust the space between items in bullet lists.

Text Transform

In the Text Transform settings, you can change the text to Uppercase, Lowercase, or capitalise each word.

Letter Spacing

You can control how far apart your letters appear by clicking on this option.

Colour Options

  • Background Colour: To change the background colour of your paragraph, select the content you want to adjust and choose the desired colour.
  • Colour: When a text isn't in bold form, you can only adjust its colours here.
  • Link Text Colour: If you have a link added to this element, you can only edit the link colour here.

Style Settings

Spacing Option

There are different spacing options available to adjust your content. Depending on the Edit option you are working on, the settings will only apply to that option. For example, if you are editing a particular Row (the BLUE box), only the content in that Row will follow the settings you apply.

  • Padding Left, Right, Top, and Bottom: These four (4) different toggle bars move the content to either the left, right, top, or bottom, depending on the toggle bar you click on.
  • Margin Top and Bottom: You can adjust the top or bottom margin of your content by toggling its bars.

Border Options

  1. Border: You can choose the type of border you want. Once you select any of the border types, the settings for the border appear.
  2. Border Style: There are three (3) different styles for your border. It can be a Solid, Dashed, or Dotted border.
  3. Border Width: When you increase the border width, it increases the thickness of the border.
  4. Border Colour: To change the colour of the border, click on this colour icon.
  5. Border Radius: Adjusting the radius of your border curves the edges; the higher the number you select, the more curved it becomes.
  6. Radius Edge: You can choose which corner of the border to curve, either all edges, Top only, or bottom edge only.

Text Align

You can position your text as you see fit; Left, Centre, Right, or Justified.

Shadow

  1. Box Shadow: Add a shadow effect to the entire paragraph element. Adjust the shadow's blur, spread, and colour to create depth.
  2. Text Shadow: Apply a shadow effect to the text itself, making it stand out against the background.

Visibility

You can make this page visible on both desktop and mobile, or select just one of the two by clicking on the one you want to activate.

Custom Class

To add a Custom Class, fill in the Custom Class field with your desired class name.

CSS Selector

Click on the copy icon on the right side of the reference number you wish to copy to copy the CSS Selector.

Animations

Entrance Animation

Add an entrance animation to your paragraph to make it appear dynamically when the page loads. Choose from effects like Fade, Slide, or Bounce, and click Adjust Animation once selected to customise it and create a more engaging experience for your visitors.

Use this element to build the perfect website, with integrated code and minimal need for external support to create branded content that helps your audience navigate your site.