Designer Use Guide

Last Updated: 2026-01-14 22:41:52

The top panel provides global controls for your project. It allows you to manage history, test your design across multiple device sizes, and toggle the editor's interface for an unobstructed view.

1. History & Persistence

Located on the left side of the toolbar, these buttons ensure you never lose progress and can experiment freely with your layouts.

Undo & Redo: Quickly step backward or forward through your design changes. This includes style updates, component movement, and logic dot configurations.
Save: Saves your current canvas state and syncs content with the server.

2. Responsive Devices

Because Fliddo is built for modern web design, you can instantly resize the canvas to test how your components and menus behave on different screens.

Desktop: The default full-width view.
Tablet: Scales the canvas to standard portrait tablet dimensions.
Mobile: Narrows the viewport to test mobile styles, such as menu transitions.

Pro-Tip: Use these toggles in conjunction with the Style Panel to apply device-specific CSS ( Media Queries ).

3. Editor Modes & Fullscreen

Manage how you interact with the interface to focus on either the fine details or the big picture.

Fullscreen: Toggles the browser into fullscreen, removing distractions and providing the maximum possible space for the canvas.
Preview: Temporarily hides the editor's UI, including element outlines, to show how the site will render in a browser.
Outline: Shows or hides the thin blue lines around <div> containers and spans that might not have visible borders.

4. Global Actions

On the far right, you will find actions that affect the entire page:

Clear Canvas: A "Reset" button to wipe the current page and start fresh.
Export View: View the raw Html and Maple syntax generated by your visual design.

5. Canvas Visibility Toggles

These tools allow you to strip away the "editor-only" visuals to focus on your design or the underlying logic.

Outline	Toggles the blue borders around all Html elements. Turn this off for a "clean" design view.
Hide Maple Syntax	Toggles the visibility of the ● Orange, ● Red, and ● Blue Logic Dots. Use this to see your layout without the programming anchors.
Toggle Images	Temporarily hides all images on the canvas, replacing them with placeholders. This is useful for focusing on typography and spacing without visual distractions.
Preview	Enters a read-only state, hiding all editor UI elements to simulate the live website experience.
Fullscreen	Expands the editor to fill your entire screen, maximizing your workspace for complex designs.

The right panel is your primary toolkit for building and organizing your page. It houses the Html5 element library, managed objects, and the panels for styling and hierarchy.

1. Html5 Elements

This section contains the core building blocks of the web. These are "raw" Html tags that allow for total structural freedom.

Semantic Elements: Drag in <section>, <article>, or <aside> to maintain clean, SEO-friendly document structures.
Inline Elements: Access spans, labels, and strong tags for precise text formatting.
Grouping: Use standard <div> blocks for general-purpose layout containers.

2. Themeable Structures

These are pre-constructed Html structures designed for efficiency. Unlike Html elements, these structures are "Themeable," meaning they respond to global style changes while maintaining a complex internal hierarchy.

Pre-Built Objects: Common structures like Card Groups, Media Objects, or Hero Units can be dragged onto the canvas in one move.
Theme Consistency: These objects are built to inherit styles from a selected theme in the Properties panel. This is excellent as a starting point for your webpages and ensure that font families, spacing, and colors stay consistent.
Structured Editing: While they are complex, you can still select individual Html elements to refine specific parts of the structure.

3. Utility Panels

Switch between these tabs at the top of the panel to manage the active elements on your canvas:

Styles: The CSS control center. Modify colors, margins, flexbox settings, and transitions for the selected Dot.
Structure: A vertical tree view of your project. This is the best place to see how your { Logic Dots } wrap around your Html5 objects.
Properties: Manage non-style attributes, such as IDs, titles, and link destinations.

The left panel manages the engine room of your website. It controls what data is fetched from the Fliddo API, which plugin objects are available, and how template partials are imported into your project.

1. API Management (Advanced Data)

For advanced users, the API section allows for custom data fetching. Data requested here is imported during the Live Rendering of the webpage.

Maple API Syntax: { api /path/to/resource as variable_name }

List APIs: Displays all active data calls currently attached to the page or set of pages ( E.g. templates imports ). You can manage or delete existing calls from this list to clean up unused data streams.
Add New Call: Opens a configuration form. You must provide the API Path (e.g., /api/blog/category/list/1/10/desc) and the Variable Name you wish to use to access that data (e.g., categories).

Note: Most plugin objects handle these calls automatically behind the scenes, thus, this is for advanced users who fully understand how the Fliddo template api and syntax work.

2. Importing Partials

The Import button allows you to pull external Maple files into your current canvas. This is divided into three categories:

Regular Templates: Custom .maple files created specifically for your website such as home and landing pages.
System Templates: Core Fliddo fragments that are shared across the platform ( e.g., a standard contact_footer.maple ).
Plugin Templates: Specific files provided by an active plugin ( e.g., the index.maple which renders lists for the Blog and Q&A plugins ).

3. Plugin Integration

Fliddo is a plugin-based platform. If you have installed plugins like a Blog, Q&A, or Documents, you manage their visual Html objects here.

Show Plugin Blocks: Browses the library of available objects provided by your installed plugins.
Import Plugin Blocks: Drag-and-drop these blocks onto the canvas. These are objects that often come pre-configured with the necessary API calls to display their content ( like a "Recent Posts" list for the blog plugin ).

The element selection toolbar adapts to the type of component you select, providing specific actions for Images, Maple Logic, and User Security.

1. Context-Sensitive Buttons

Depending on the tag or logic dot selected, the toolbar will reveal specialized tools:

Images: Selecting an <img> component adds an Edit Image button, which triggers the image manipulation software.
Maple Dots (Logic):
- Syntax: Opens the values popup for Conditions, Loops, and Variables. ( Note: Includes ( imported templates ) are managed separately and can be moved around via the Include Dot ).
- Loop/Iteration Syntax: A specialized button that lets you adjust how many "Mock" items appear on the canvas. Use this to test your grids and lists.

Design Rule: In a Loop, only the first iteration is editable. All other items rendered via the "Iteration" button are read-only previews to help you visualize the final design.

1-1. Loop Iterations & Rendering

When an Loop Dot ( Orange ) is selected, you can control how many mockup items appear on the canvas to test your layout.

The Rendering Workflow:

The Editable Master: Only the first item in a loop is editable. All subsequent items are read-only previews.
Manual Update: Style changes made to the first item do not sync in real-time to prevent performance lag.
Applying Changes: To see your updates reflected across all iterations:
1. Click the Orange Loop Dot.
2. Click the Iterations button in the toolbar.
3. Click Apply. The engine will then re-render the entire section with your updated styles.

2. Security & Role Wrapping

You can control the visibility of any element or container based on the viewer's status ( Member Plugin Only ). These buttons "wrap" the selected Html elemeny in a specialized Condition Dot.

Is Logged In: Wraps the Html so it only appears if the user has an active logged in session.
Has Role: Wraps the Html and opens a popup to select a specific role (e.g., "Special Purchase", "Subscriber"). The element will only be visible in the live rendering if the user satisfies that role requirement.

3. Standard Structural Tools

Every toolbar includes the primary DOM management icons:

Select Parent	Move up one level in the hierarchy ( e.g., from an Html element to its wrapping parent ).
Move	Drag handle to reposition the element or logic dot.
Clone	Duplicate the selected structure immediately.
Delete	Remove the element and its children from the canvas.

Was this guide helpful?