Visual Page Builder Guide

Learn how to create beautiful, functional pages in Qödiak using the drag‑and‑drop Visual Page Builder. This guide walks you through every component, the editor workflow, reusable templates, custom CSS, and the underlying data format.

What Is the Visual Page Builder?

Qödiak’s Visual Page Builder is a WYSIWYG (What You See Is What You Get) editor powered by Puck, an open‑source visual editing engine. The interface lets you assemble pages by dragging components from a left‑hand sidebar onto a central canvas, then fine‑tuning each element through a properties panel on the right. Because changes are reflected instantly, you can preview the final look at any time without writing code.

Component Library – 57 Ready‑Made Building Blocks

The builder’s strength lies in its extensive component catalog, organized into logical categories. Below is a quick reference of every component you can use.

• Layout: Flex, Grid, Card – structure and align content.
• Typography: Heading, Text, Badge – add and style textual information.
• Navigation: Navbar, Footer – create site‑wide navigation elements.
• Interactive: Button – clickable actions with configurable event handlers.
• Media: Image, VideoPlayer, Carousel, PhotoGallery – showcase visual media.
• Form Inputs: Input, TextArea, Dropdown, Checkbox, Radio, Date, Time, DateTime, FileUpload, RichTextInput, Signature – collect user data.
• Data Display: DataGrid, DataCardGrid, Chart, Calendar, Table, Map, QRCode, Stats, CountdownTimer, Timeline, PricingTable, AnimatedCounter – present data in engaging formats.
• Animations: AnimatedGradient, ScrollReveal, TextHighlight, HoverScale, FloatingElements, ConfettiTrigger, SkeletonLoader, TextReveal, TypingAnimation, DecorativeDivider, HeroParallax – add motion and visual flair.
• Authentication: RoleGate – conditionally show content based on user roles.
• Advanced: Chatbot, ShoppingCart, GameCanvas, DataSourceSearch – specialized functionality for complex apps.
• Settings: PageRoot, AppSettings – configure page‑level and app‑level options.

How to Use the Visual Editor

Building a page in Qödiak follows a simple, repeatable workflow. Follow these numbered steps for a smooth experience.

1. Enter edit mode – Click the Edit button on any existing page or create a new page from the dashboard.
2. Browse the component sidebar – The left panel groups components by category (Layout, Media, etc.). Hover over an item to see a short description.
3. Drag onto the canvas – Click and hold a component, then drop it where you want it to appear. The canvas shows a live preview of the component.
4. Select the component – Click the newly placed element. Its properties appear in the right‑hand panel.
5. Configure properties – Edit text, colors, sizes, data bindings, and event handlers. For example, set a Button’s onClick action to navigate to a specific page.
6. Preview the page – Use the Preview button at the top to view the page as an end user would see it, including responsive breakpoints.
7. Save your work – Click Save to commit changes. Qödiak stores the page in the Puck Data format (see “Understanding Page Data”).

Tip: Frequently use the Undo (Ctrl+Z) and Redo (Ctrl+Y) shortcuts while arranging components. The visual editor tracks each drag‑and‑drop action, making it easy to experiment.

Section Templates – Speed Up Page Assembly

Qödiak ships with a library of pre‑built section templates such as hero banners, feature grids, pricing tables, and call‑to‑action blocks. These templates are stored in the database and can be inserted with a single click.

• Insert a template – Open the Templates tab in the sidebar, choose a section (e.g., “Hero”), and drag it onto the canvas.
• Customize instantly – Once placed, each element inside the template becomes individually editable. Change the headline, swap the background image, or adjust button links.
• Save your own templates – After designing a custom section, click the Save as Template button in the properties panel. Your template appears alongside the built‑in ones for future projects.

Custom CSS – Fine‑Tune the Look

Every component includes a Custom CSS field where you can write scoped CSS rules. This feature lets you go beyond the built‑in styling options without affecting other parts of the page.

1. Select the component you want to style.
2. Scroll to the Custom CSS section in the properties panel.
3. Enter standard CSS syntax. For example, to add a subtle hover lift to a Card:

   .card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

4. Click Apply to see the effect instantly on the canvas.

Note: CSS entered here is automatically scoped to the component’s unique identifier, so it will not leak onto other elements.

Understanding the Page Data Format

Behind the scenes, Qödiak stores each page in the Puck Data format, a JSON structure that captures the hierarchy of components, their properties, and optional zones for dynamic content.

{
  "content": [
    { "type": "Navbar", "props": { ... } },
    { "type": "HeroParallax", "props": { ... } },
    { "type": "Grid", "props": { ... }, "children": [ ... ] }
  ],
  "root": { "id": "page-123", "title": "Home" },
  "zones": {
    "header": [ ... ],
    "footer": [ ... ]
  }
}

Key points:

• content – An ordered array of top‑level components.
• root – Metadata about the page (ID, title, etc.).
• zones (optional) – Named areas that can be populated dynamically, useful for header/footer or user‑specific sections.

This format supports nested layouts (e.g., a Flex inside a Grid) and makes it easy to export or import pages programmatically.

Practical Example: Building a Landing Page

Below is a step‑by‑step illustration of how to assemble a typical SaaS landing page using the Visual Page Builder.

1. Start with a blank page and click Edit.
2. Add a hero section – Drag the “HeroParallax” component from the Animations category. In the properties panel, set:
   • Background image URL.
   • Heading text: “Welcome to Qödiak”.
   • Sub‑heading text: “Build powerful apps without code”.
   • Primary button label: “Get Started”.
3. Insert a feature grid – Use the pre‑built “Features” template (found under Templates → Sections). Replace the placeholder icons with Image components and edit each feature’s Heading and Text.
4. Show pricing – Drag a PricingTable from the Data Display category. Configure three plans, set price values, and link each “Select” button to the ShoppingCart component’s addItem action.
5. Add a testimonial carousel – Place a Carousel (Media) and inside each slide, add a Card with a Text component for the quote and a Badge for the author’s name.
6. Include a call‑to‑action – Drag a Button (Interactive) at the bottom, set its label to “Start Free Trial”, and bind its onClick to navigate to the sign‑up page.
7. Apply custom hover effect – Select the CTA button, open Custom CSS, and add:

   .button:hover { background-color: #0066ff; color: #fff; }

8. Preview and test responsiveness – Click Preview, then toggle the device icons (desktop, tablet, mobile) to ensure the layout adapts.
9. Save and publish – Click Save. The page is now stored in the Puck Data format and ready for end users.

Best Practices & Tips

• Start with a template – Even if you plan to customize heavily, a template gives you a solid structural foundation.
• Leverage zones for reusable content – Define a header zone once and reuse it across multiple pages.
• Keep CSS scoped – Use the component’s Custom CSS field rather than global styles to avoid unintended side effects.
• Test role‑based visibility – When using RoleGate, preview the page as different user roles to verify that content appears correctly.
• Document data bindings – If a DataGrid pulls from an external API, note the endpoint and field mapping in the component’s description for future maintenance.

Conclusion

The Visual Page Builder in Qödiak empowers anyone—from designers to business analysts—to craft fully functional, responsive pages without writing a single line of code. By mastering the component library, template system, custom CSS, and the underlying Puck Data format, you can accelerate development cycles, maintain consistency across your app, and deliver polished user experiences.