The Paragraph element lets you add text content to your page, helping you convey information clearly and effectively. Whether you're adding descriptions, instructions, or general content, the Paragraph element offers various customisation options to match your site's style and improve readability.

Adding a Paragraph

To add a paragraph to your page, drag and drop the Paragraph element into your desired location within the editor's workspace. Once placed, you can customise its appearance, font, and other attributes to suit your design preferences.

📌NOTE: A section and row need to be added first before the paragraph element can be added.

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 funnel 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 appear 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. Opacity ranges from None, Light, Half, to Heavy fade.

Line Height

You can increase the height of the element box by adjusting the size bar.

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 widely spaced your letters are 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 text isn't in bold form, you can only adjust its colour here.
  • Link Text Colour: If you have a link added to this element, you can only edit the link colour here.
  • Icon Colour: If an icon is added to this element, you can only edit the icon colour here. Only the icon colour will change regardless of the position it's placed.

If you can't find the colour you want, add a custom colour by entering the colour code and clicking the "add color" button.

Icon

You can add an icon to your page by selecting from the available icons. If you have a particular icon in mind, type it into the search bar to narrow down the options.

Styles

Spacing Option

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

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

Border Options

  • Border: You can choose the type of border you want. Once you select a border type, the border settings will appear.

  • Border Style: There are three (3) different styles for your border: Solid, Dashed, or Dotted.

  • Border Width: Increasing the border width increases the thickness of the border.

  • Border Colour: To change the colour of the border, click on the colour icon.

  • Border Radius: Adjusting the radius of your border curves its edges; the higher the number, the more curved it becomes.

  • Radius Edge: You can choose which corner of the border to curve: all edges, Top only, or Bottom edge only.

Text Align

You can position your text however you like: Left, Centre, Right, or Justified.

Shadow

  • Box Shadow: Add a shadow effect to the entire paragraph element. Adjust the shadow's blur, spread, and colour to create depth.

  • Text Shadow: Apply a shadow effect to the text itself, making it stand out against the background.

Visibility

You can make this element visible on both desktop and mobile, or select just one of the two by clicking on the option 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 the copy icon on the right side of the reference number you want 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, Bounce, and more to create a more engaging experience for your visitors.

By using the Paragraph element, you can improve your site's readability, customise text appearance, and optimise the user experience across different devices.