Typed Text Element
In the context of web design, "typed text" refers to a captivating text animation effect that mimics the appearance of real-time typing. This effect injects dynamism and engagement into your webpage, making it more interactive and visually appealing. It's often employed to highlight headlines, quotes, or critical messages in a unique manner.
Here's a step-by-step guide to using the typed text feature in your web builder:
Step 1: Begin by dragging the "Typed Text" icon into your desired section within your layout.
Step 2: To make edits, simply click on the typed text wrapper, which will also trigger the settings bar to appear.
Typed Settings: This option allows you to input the text or content you want to display using the typed text effect.
Font: Within the Options Field, click the "A" icon to access font settings. Here, you can choose your preferred font style, size, and other text attributes to create a visually consistent design.
Color: In this section, you can pick the color for your typed text, with an option to modify the hover effect color as well.
Adjust Layout: Access the gear icon in this field to configure the size, gap, and padding of your typed text:
-
Size: Modify the dimensions (width and height) of individual elements on your webpage.
-
Gap: Define the spacing between rows and columns in grid or flex layouts.
-
Padding: Set the space between an element's content and its border.
Transform: The transformations property can be used alongside transitions to create visually appealing interactions.
Animation: Employ this feature to infuse dynamic and visually engaging moments or changes into elements on your webpage. It captures user attention, enhances the user experience, and makes your website more interactive and attractive.
Toggle Free Form Drag Positioning: This enables you to move elements by clicking and dragging them with a mouse cursor. The term "freeform" indicates that users have greater flexibility and control over the positioning of these elements, often without predefined alignment or snapping.
Center Alignment: This option allows you to align your text to the left, right, center, or justify it.
Select Parent Element: Use the "Arrow Up" button to select the parent element, targeting the container or enclosing element that holds a specific HTML element within the webpage's document structure.
Move: Utilize the icon resembling a cross with an arrowhead to relocate an element to your preferred location within the section of your layout.
Clone: Easily duplicate or copy your text element.
Trash Bin Icon: Delete a specific element when it's no longer needed.
These comprehensive instructions and explanations should empower you to effectively utilize and customize forms within the Web Builder for your project.