Paragraph
Efrelie
Last Update 4 months ago
The Paragraph element allows you to add text content to your page, helping to convey information clearly and effectively. Whether you're 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 letter 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 isn't 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's 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 icon. 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 every content in that Row will follow the command of what settings you make.
- 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
Border In the Advanced Settings section, you will find Border Options.
- Border: You can select from various border types or choose to remove borders altogether. After choosing a border, the border settings will appear for customization.
- Border Style: Under the Style option, you can choose from three different border styles: Solid, Dashed, and Dotted.
- Border Width: Under the Width option, you can increase the border thickness by increasing its width.
- Border Color: To change the border color, click on the color icon and select from the available color options or customize a color that matches your branding.
- Border Radius: Adjusting the Radius option curves the edges of the border. The higher the number you select, the more curved the border becomes.
Radius Edge: With the Radius Edge option, you can choose which corner of the border to curve. Select either top, bottom, or all edges.
Text Align
The text alignment editing feature enables you to effortlessly position your text in various ways, including left-aligned, centered, right-aligned, or justified. This customization allows you to arrange your content according to your design preferences and ensures an optimal reading experience for your audience.
Shadow
- Box Shadow: Add a shadow effect to the entire headline 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
Managing the visibility of your page across different devices is easy. To specify whether your page should be displayed on desktop, mobile, or both, simply choose the desired option under the Visibility settings. This allows you to tailor your content's presentation to suit your target audience's browsing preferences, ensuring an optimal user experience.
Custom Class
Adding a Custom Class is an easy process. Simply enter the class name you wish to use in the designated Custom Class field. This allows you to apply your preferred styling and design elements, creating a unique and tailored appearance for your content.
CSS Selector
To duplicate a CSS Selector, locate the copy icon situated to the right of the specific reference number you want to replicate. By clicking on this icon, you can effortlessly obtain an exact copy of your desired selector, streamlining your workflow and ensuring consistency in your design elements.
Animations
Entrance Animation
Add an entrance animation to your sentence 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.