The Paragraph element allows you to add text content to your page, helping to convey information clearly and effectively. Whether you are adding descriptions, instructions, or general content, the Paragraph element provides various customization options to match your site’s style and enhance readability.

Adding a Paragraph #

To integrate a paragraph into your page, simply drag and drop the Paragraph element into your desired location within the editor’s workspace. Once placed, you can customize its appearance, font, and other attributes to align with 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 create your funnel page.

Typography Type #

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

Mobile and Desktop Font Size #

You can modify font size for mobile and desktop devices by using 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 decide the extent to which you want your text/content to fade in 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.

Text Transform #

In the Text Transform, you can decide to change the text to Uppercase, Lowercase, or just capitalize each word.

Letter Spacing #

You can decide how wide apart you want your letters to be by clicking on this option.

Color Options #

• Background Color: To change the background color of your paragraph, select the content you want to adjust and choose the desired color.
• Color: When a text is not in bold form, you can only adjust its colors here.
• Link Text Color: If you have a link added to this element, you can only edit the link color here.
• Icon Color: If an icon is added to this element, you can only edit the icon color here. Only the icon color will change regardless of the position it is placed.

If you cannot find the color you prefer, add custom colors by entering the color code and clicking the “add color” button.

Icon #

You can add an icon to your page by simply selecting from the available icons. If you have the desired icon in mind, you can 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 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 make.

• Padding Left, Right, Top, and Bottom: These four 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 #

• Border: You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up.
• Border Style: There are three different styles for your border: Solid, Dashed, or Dotted.
• Border Width: When you increase the border width, it increases the thickness of the border.
• Border Color: To change the color of the border, click on the color icon.
• Border Radius: Adjusting the radius of your border curves the edges; the higher the number you select, the curvier it becomes.
• Radius Edge: You can decide the corner of the border you want to curve, either all edges, Top only, or bottom edge only.

Text Align #

You can move your text in different positions as you deem fit; you can position it to the Left, Center, Right, or as Justified.

Shadow #

• Box Shadow: Add a shadow effect to the entire paragraph element. Adjust the shadow’s blur, spread, and color 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 page visible on both desktop and mobile, and you can also select just one of the two by simply clicking on the one you want to activate.

Custom Class #

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

CSS Selector #

Click on the copy icon located 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, Bounce, and much more to create a more engaging user experience.

By using the Paragraph Element, you can enhance your site’s readability, customize text appearance, and optimize the user experience across different devices.

Frequently Asked Questions #

How do I add a Paragraph element? #

Drag and drop the Paragraph element into your workspace. Note that a section and row must be added first before you can place the paragraph.

Can I adjust paragraph font size separately for mobile and desktop? #

Yes. Use the separate size bars for mobile and desktop, and toggle between views in the top left corner to preview each.

How do I change the spacing between letters? #

Use the Letter Spacing option to set how wide apart your letters appear.

How do I align paragraph text? #

Use the Text Align option to position your text Left, Center, Right, or Justified.

Can I make a paragraph appear with an animation? #

Yes. Under Animations, add an Entrance Animation such as Fade, Slide, or Bounce so the paragraph appears dynamically on page load.

How do I hide a paragraph on mobile or desktop? #

Use the Visibility setting to display the element on desktop, mobile, or both by selecting which to activate.