Direct Edit

​

Direct Editing and Moving Elements

In Trickle, there are two ways to adjust the details of AI-generated pages:

• Direct Edit: Quickly modify text, spacing, alignment, colors, and other styles.
• Move Element: Drag elements to change page layout.

These two methods complement each other, allowing you to make precise adjustments without relying on prompts. They do not consume credits, and all modifications are automatically converted into clean, production-ready code.

​

How to Use Visual Editing

Direct Edit allows you to visually edit any element on a Trickle page without entering prompts or consuming credits. It is the simplest way to fine-tune a site once generation is complete. This guide explains how Direct Edit works and the types of adjustments you can make.

​

When to Use Direct Edit?

Direct Edit is ideal for making small, precise adjustments, such as:

• Changing font size (increase or decrease).
• Adjusting alignment (left, center, right).
• Modifying spacing between elements (padding and margin).
• Editing text or background colors.
• Fine-tuning layout alignment to improve overall visual balance.

It is especially useful when your page is about 90% complete but still needs refinement.

​

Steps for Using Direct Edit

1. Open your Trickle project.
2. Click the Select to Edit icon below the Canvas.
3. Select any element on the page (text, images, blocks, buttons, etc.).
4. The Select and Edit panel will open on the left sidebar.
5. Use the panel’s controls to adjust styles, including:
   • Spacing (padding and margin).
   • Alignment.
   • Font settings (for text elements).
   • Colors.
   • Background.
   • Text content (where applicable).
6. Click Save, and your changes will apply immediately.

​

What Can Be Adjusted with Direct Edit?

The Select and Edit panel automatically adapts based on the type of element selected.

​

Common adjustment options include:

1. Spacing (Padding and Margin) You can control padding (inside spacing) and margin (outside spacing) separately for each side (top, bottom, left, right). Tip: Hold Shift while dragging, or press Shift + Enter after entering a value, to apply the same value to all four sides.

• Padding: The space inside an element, between content and its border.
• Margin: The space outside an element, between it and surrounding elements.

Proper spacing improves clarity, readability, and overall balance. 2. Alignment Alignment settings control how content is arranged within the current element.

• Text: Align left, center, or right.
• Blocks/Containers: Position child elements within the layout (left, center, right, or evenly distributed).

Good alignment makes pages more organized, enhances reading flow, and strengthens visual hierarchy for a professional look. 3. Font Settings (for Text Elements) You can adjust:

• Text Content (for static text only):
  • For static text, edit directly in the Text content field.
  • For dynamic text (from a database or variables), the field is locked. You’ll be prompted to edit through prompts instead, ensuring content stays consistent with its data source.
• Font Weight: Regular, bold, extra bold, etc.
• Font Size: Adjustable down to the pixel.

These settings help create clear visual hierarchy and improve readability. 4. Colors You can adjust:

• Text color.
• Background color (including transparency).

Consistent color usage reinforces brand identity and visual appeal. 5. Element-Specific Options Not all elements have the same adjustment options:

• Text blocks: Full typography settings available.
• Images: Spacing, alignment, and background adjustments.
• Layout containers: Alignment and spacing controls.

This ensures the editing panel stays simple and context-relevant.

​

Why Use Direct Edit?

AI generates pages quickly, but for detail adjustments (like font size, spacing, or alignment), re-entering prompts is inefficient. Direct Edit saves time and credits while giving you precise control:

• Adjust a heading.
• Fine-tune button spacing.
• Improve text alignment.
• Add whitespace between elements.

With Direct Edit, you can complete the finishing touches smoothly without breaking your creative flow—making pages look more polished and professional.

​

Move Element

In addition to style adjustments, Trickle supports Move Element for changing page layout. When to Use Move Element is useful when:

• You want to change layout structure, such as moving an image above text.
• You need to fine-tune the position of buttons or blocks.
• You want to adjust overall page arrangement to better match design expectations.

Steps

1. Click the Move Element icon below the Canvas.
2. Drag the target element to the new position.
3. Release the mouse to instantly apply the layout change.

All drag-and-drop operations are free and automatically converted into clean, production-ready code.