Using Paragraph Elements for Web Design

A paragraph element is designed to let you input sentences or create the main body of a webpage. Here’s how you can incorporate and customize it to fit your design.

Basic Customization

Adding paragraphs to your webpage is simple. Just choose the paragraph block, drag it to where you want it, and drop it in place within the workspace of your editor. Once you’ve positioned the paragraph, you can adjust its style and content to ensure it fits seamlessly with your website’s overall design and aesthetics.

Renaming Elements

You’ll find the editing toolbar for each element on the left side of the editor. You can change the default title or name of each section at the top of the screen, making it easier to navigate and organize your webpage as you build it.

Background Color

To modify the background color of any text block, highlight the section you want to change, and select your desired shade. If the available options don’t meet your needs, you can add a custom color by inputting the color code and clicking "add color."

Adjusting Opacity

You have control over the transparency level of your content, allowing for various levels of fade effects. The opacity can range from none (fully opaque) to light, half, or heavy transparency.

Adding Shadows

If you want to add a shadow effect to your text, select the thickness or intensity of the shadow to make your content stand out. 

Letter Spacing

This option lets you control how far apart each letter appears. Adjusting the spacing can create different visual effects depending on the style you want to achieve. 

Text Alignment

You can align your text to the left, center, right, or use the justify option to make sure it aligns evenly across the page. 

Font Size for Mobile and Desktop

Easily adjust the font size for both mobile and desktop views by using the provided sliders. You can switch between desktop and mobile preview modes to ensure that your content looks great on all devices. 

Typography

Choose from the available fonts or select a new one from the drop-down list to give your content a fresh look. 

Adding Icons

You can enhance your design by adding icons. Browse through the available options or type a keyword into the search bar to find a specific icon. 

Text Color Customization

• Standard Text: Adjust colors for non-bold text.
• Bold Text: Modify the color for bold text here.
• Italic Text: Apply a color to italicized text.
• Underline Text: Customize the color of underlined text.
• Link Text: Choose the color for any linked text.
• Icon Color: Only the color of the selected icon will change, regardless of its position on the page.

Content Spacing

There are several options to manage the spacing between elements on your page. These adjustments apply to specific sections, such as rows (highlighted in blue).

• Padding: Move content horizontally or vertically within its space.
• Margins: Increase or decrease the space around the top or bottom of your content.

Advanced Border Settings

Borders can be customized by type, style, width, color, and even radius, allowing for curved edges.

• Border Types: Choose from solid, dashed, or dotted styles.
• Border Width: Adjust the thickness to make your borders more pronounced.
• Color: Change the color using the color icon.
• Radius: Adjust to round off the corners, with higher values resulting in more curvature.
• Radius Edge: Decide whether to round all edges or only specific ones like the top or bottom.

Line Height

Use the slider to increase the space between lines, adjusting the overall height of the element box. 

Text Transformation

Easily switch between uppercase, lowercase, or capitalized text using the text transformation tool.

Visibility Settings

Control whether elements are visible on both mobile and desktop, or limit visibility to one platform. 

Custom Classes and CSS Selectors

You can assign a custom class by filling in the designated field or copy the CSS selector with a simple click for further customization.