WaravelBuilder User Guide

Overview

WaravelBuilder is a powerful drag-and-drop page builder integrated directly into Waravel. It allows you to design custom page layouts using a variety of predefined blocks and templates without writing any code.

Features

• Drag-and-Drop Interface: Easily position elements on the page.
• Prebuilt Blocks: Includes essential blocks like typography, layouts, basic elements, advanced elements (sliders, accordions), forms, and more.
• Responsive Design: View and edit layouts for Desktop, Tablet, and Mobile breakpoints.
• Templates: Save and reuse custom layouts as templates.

UI Elements

1. Editor Canvas: The main area where you design your page.
2. Block Sidebar: Contains all available blocks categorized by type (Basic, Typography, Advanced, Layout, Forms).
3. Style Editor: Allows you to adjust properties such as colors, margins, padding, typography, and borders for the selected element.
4. Top Bar: Includes device toggles (desktop/tablet/mobile), undo/redo actions, preview, and save buttons.
5. Layer Manager: A tree view of all elements on the canvas for easy selection and reordering.