Designer Use Guide

1. Generic Containers ( Div vs. Span )

Most of your design will be built using these two flexible elements.

• Block Text ( Div ): This is a "Block" level element. It naturally takes up the full width available and starts on a new line. Use this for wrapping sections, cards, or groups of elements.
• Inline Text ( Span ): This is an "Inline" level element. It only takes up as much space as the content inside it. Use this to style a specific word or phrase inside a larger paragraph.

2. Semantic Layout Elements

These elements behave exactly like a "Block" ( Div ), but they tell the browser exactly what part of the page they represent.

1. Column Grids (Horizontal Split)

Use these objects to create side-by-side layouts, such as a feature list or a split hero section.

• 1 Column: A full-width container ready for content.
• 2 & 3 Columns: Evenly divided spaces (50/50 or 33/33/33). These use Flex-Basis to ensure each column takes up the exact amount of room required.
• 3/7 Columns: A specialized "asymmetric" layout where the left side takes up 30% ( perfect for a sidebar ) and the right side takes up 70% ( perfect for main content ).

2. Row Grids (Vertical Stack)

Row grids are configured with a vertical direction, allowing you to stack distinct "Areas" on top of each other within a single container.

• 1, 2, & 3 Rows: These objects come pre-set with a specific height, making them ideal for stacked call-to-action boxes or vertical navigation segments.

3. List View & List Items

The List View is a powerful layout tool for repeating content like blog cards, team members, or gallery items.

• List View (Container): A wrapper that automatically enables Flex-Wrap. This means if you have too many items, they will neatly flow to the next line.
• List Item: The individual card or box inside the list. By default, these come with a placeholder Heading to help you visualize the hierarchy.

Tip: You can drag a single List Item into an existing List View to expand your grid at any time.

4. The Area Block

An Area is the most basic unit of a grid. It is an empty, styled "drop-zone" where you can place text, images, or even other grids. If you ever need to add an extra cell to your 2-column layout, simply drag an Area into the container.

1. Text Essentials

Use these objects for standard reading material and specialized text formatting.

• Text & Title: The standard elements for paragraphs and bolded titles.
• Quote & Cite: Use Quote for testimonials or pulled text, and Cite to credit the source.
• Bi-Directional ( BDO ): A specialized element for displaying text that reads from right-to-left.
• Inline Styles: Small specialized elements like <mark> for highlighting, <del> for strikethroughs, and <sub> for mathematical or chemical notations.

2. Headings & Separators

Proper heading structure is vital for both user experience and SEO.

• Heading 1-6: Use Heading 1 for your main page title. Work your way down (H2, H3, etc.) for sub-sections.
• Line: A horizontal rule used to create a visual break between different topics or sections.

3. Link Interactivity

These objects turn standard elements into clickable triggers.

• Link Block: A flexible container that makes everything inside it clickable.
• Link Button: A pre-styled button optimized for clicks. You can customize the background and border in Styles Panel.
• Link Image: An image that redirects the user to a new URL when clicked.

Tip: Once a Link is selected, head to the Properties panel to set the destination URL ( Href ).

4. Media & Images

Fliddo handles images with "Asset Intelligence" to ensure they load fast.

• Image: The standard image element. Dropping this onto the canvas automatically opens the Asset Manager.
• Image Text: A layout object that wraps text around an image, perfect for blog-style content.
• Image Frame: A professional container that groups an image with a Frame Caption. Use this for diagrams or photos that require a description.

1. Standard Lists ( UL & OL )

These are the most common list types used in web design for navigation menus, feature lists, or step-by-step guides.

• Unordered List: The classic bulleted list. Use this when the order of items doesn't matter ( E.g. a list of ingredients or features ).
• Ordered List: A numbered list. Use this when the sequence is important ( E.g. "Step 1, Step 2, Step 3" ).

Note: When you drop a List block, it automatically includes two List Items to get you started. You can add more by dragging additional items into the list container.

2. Data Lists ( Description Lists )

Data Lists are specialized containers used to pair a "Title" with a "Description." They are perfect for FAQs, glossaries, or technical specifications.

• Data List: The main wrapper that holds the data pairs.
• Title Item: The term or question being defined ( E.g. "Color" ).
• Data Item: The definition or answer ( E.g. "Midnight Blue" ).

3. Customizing List Markers

In the Styles, you can control how your list markers look:

• List Style Type: Change bullets to squares, circles, or roman numerals.
• List Style Position: Decide if the bullet sits "Inside" or "Outside" the text block's padding.

1. Table Presets

To save time, you can drag out a pre-structured table based on the amount of data you have. All presets default to 100% width of their container.

• 2x2 to 8x8 Tables: Quick start grids. These come pre-loaded with the corresponding number of rows and cells.

2. Table Anatomy (Nesting)

Because tables are hierarchical, you can use the Structure panel to select specific parts of your table for styling.

• Header: Use this for the top row of your table. It typically contains Header Cells which are bolded by default to represent column titles.
• Footer: Useful for summary data or totals at the bottom of the grid.
• Row: A horizontal container that holds your cells.
• Cell  vs. Header Cell: Cells are for standard data, while Header Cells are used for labels and titles within the table.
• Caption: A special element that acts as a title for the entire table, usually appearing centered at the top.

3. Growing Your Table

Tables in Fliddo are living structures. You don't have to stick to the preset size:

• Adding Rows: Drag a Row block into an existing row.
• Adding Columns: Drag a Column element into an existing Row.

Tip: Select the table in the Structure panel to apply global styles like Border Collapse or Cell Spacing in Styles Panel.

1. The Foundation: Nav & Menu Bar

For a standard header, you will typically use these two objects together.

• Navigation: The container that tells browsers and search engines, "This area contains site links."
• Menu Bar: A pre-styled horizontal container specifically designed to hold multiple menu items.
• Menu Item: The individual link. When you drag this in, it acts as a smart link where you can customize the text and set the destination URL in the Properties panel.

2. Advanced & Mobile Navigation

Modern websites require different navigation styles for mobile devices and complex app-like interfaces.

• Burger: The classic three-line icon used for mobile menus. It is pre-configured to toggle visibility of your menu on smaller screens.
• Popup Menu: A specialized object that stays hidden until triggered. Perfect for "Contact" overlays or secondary navigation.
• Tidy Menu: A pre-configured navigation set that comes with three sample links, ideal for quickly setting up a footer or sidebar list.
• Twoway Menu: A sophisticated layout that splits your navigation into two distinct groups ( E.g. Left aligned links and Right aligned "Login/Sign Up" buttons).

3. Styling Your Links

Menus use Base Styles to ensure they remain functional, but you can override them in Styles:

• Hover States: Use the "State" selector in the Styles to change the color of a Menu Item when a user moves their mouse over it.

1. Video Embed

The Video object is a container for streaming content. It is optimized to handle common video providers and local files while maintaining the correct aspect ratio.

• Source: Select the video object and use the Properties panel to input your YouTube or Vimeo Urls.
• Styling: The default height is set to 400px, but you can adjust this in the Style Panel to create cinematic full-width backgrounds or small sidebar clips.
• Autoplay & Controls: Toggle playback settings directly within the element settings to customize the user experience.

2. Dynamic Maps

The Map object allows you to embed a fully interactive map, perfect for "Contact Us" pages or event locations.

• Location: In the Properties panel, simply type in the address you want to display.  Fliddo handles the geocoding to center the map correctly.
• Interaction: Users can zoom, pan, and switch between "Map" and "Satellite" views directly on your published page.
• Sizing: Like the video object, the map defaults to a 400px height to ensure visibility across all device types.

3. Performance Tips

Embedding external media can sometimes impact page load speeds. To keep your site fast:

• Use the Style Panel to set a specific Width and Height to prevent "Layout Shift" while the media loads.
• Consider placing heavy media blocks inside a Section to maintain structural integrity.

1. Code Box & Clipboard Box

These elements are designed for multi-line code snippets like JavaScript, Css, or Html.

• Code Box: A pre-formatted container that preserves your spacing and indentation, making it ideal for large blocks of code.
• Clipboard Box: An enhanced version of the Code Box that includes a "Copy" button. When users view your live site, they can click the icon to instantly copy the code to their clipboard.

Designer Note: The Clipboard icon is positioned absolutely to the top-right of the box. You can customize the background and padding of these boxes in Styles.

2. Inline Technical Blocks

Use these elements to highlight specific technical terms within a sentence or a smaller section of your page.

1. The Form Wrapper

The Form element is a special container that must wrap all your inputs and buttons to ensure data is sent correctly.

• Method: By default, Fliddo sets this to POST for secure data handling.
• Action: Use the Properties panel to define where the form data should be sent ( E.g. /contact/message if you're building a contact form).

Note: Dragging the Form element onto your canvas provides a pre-built layout including a label, textarea, and submit button to get you started faster.

2. Input Fields

These elements collect different types of information from your users.

• Input: A single-line field. Use the Properties panel to change its type to Email, Password, or Number and set its Id.
• Textarea: A multi-line box designed for longer messages or comments.
• Select: A dropdown menu. You can add multiple "Option" values in the Properties panel.
• Label: Vital for accessibility. Labels tell both users and screen readers what each specific input is for.

3. Selection & Buttons

Use these for "Yes/No" choices or triggering the final submission.

• Checkbox: Used when a user can select one or more options from a list.
• Radio: Used when a user must pick exactly one option from a group. ( Tip: Ensure all Radio buttons in a group have the same "Name" in the Properties panel so they work together. )
• Button: The trigger that submits the form. You can style this like any other button in the Styles panel.