Website Builder (Drag-and-Drop Page Builder)

The Website Builder module provides a drag-and-drop interface to build web pages. On the left are pre-built components (elements, sections) you can add. On the right, you can adjust global styles (like fonts and colors) or the properties of individual components.

The Website Builder is the module that allows you to build complete web pages by dragging and dropping components, all without writing code. It’s essentially a visual editor for designing your website’s layout and style. This builder is great for assembling pages quickly using both pre-made components and any custom components you’ve generated or imported.

• Creating a Page: When you open Website Builder for the first time in a project, it might prompt you to create a new page (e.g., a homepage). You can usually have multiple pages in a project (like "Home", "About Us", "Contact", etc.). There might be a page dropdown or list (for example, a title like "My New Website – Home" at the top with an option to add new pages). Give your page a name if asked.

• Canvas and Drag-Drop: The center of the Website Builder is the canvas where you design the page. This area represents the webpage. To build your layout, you drag components from the left panel onto this canvas. Initially, the canvas might be empty or have a placeholder message like “Click on components from the left panel to add them.”

• Components Panel (Left Side): The left sidebar in the builder lists components you can add. They are usually grouped into categories:

  • Basic Elements: Simple building blocks like Headings (H1, H2, H3 text), Paragraph Text, Buttons, Images, etc. These are low-level elements you can use to construct custom sections.

  • Layout Components: Items that help structure the page, such as Containers (div blocks or section wrappers), Columns/Rows for layout, Navigation Bars, Footers, etc.

  • Pre-designed Sections: Higher-level composite sections like Hero Sections, Features Sections, Testimonials, Contact Forms, etc. These come with a mix of elements arranged in a typical pattern, so you can drop in a full section at once. For example, dragging a “Hero Section” might add a large banner with text and a button, which you can then customize.

  • Your Components: If Lunix Studio supports it, there may be a category for user-generated or saved components (for instance, components you created in the Code Generator might appear here for easy reuse).

• Adding Components: To add something, simply click it or drag it onto the page canvas. Components will snap into the page layout. You can drag elements above or below others to rearrange order, or into containers for nested layouts. As you select a component on the canvas, it may highlight and a bounding box shows its area.

• Editing Content: Once a component is on the canvas, you can usually edit its content in place. For text elements, click the text and type to change it (e.g., change “Lorem ipsum” to your actual headline). For images, there might be an image picker to choose an asset from your library or upload a new one. Buttons might let you edit their label and hyperlink.

• Component Properties (Right Side Panel): When a component is selected, the right-hand panel will show its properties or settings. For example, if you click a Button on the canvas, the right panel might let you set the button’s target URL, adjust padding, colors, or icon. If you select a section container, you might see options like background color or image for that section, alignment, spacing, etc. This panel is context-sensitive to the selected element.

• Global Styles: The builder also allows setting Global Styles that apply to the whole page or website. Typically, there is a tab or toggle in the right panel for “Global” vs. “Component” settings. Under global styles, you can define things like:

  • Theme Colors: e.g., Primary color, Secondary color, Background color. These might propagate to components (like buttons might use the primary color by default).

  • Font Settings: Set the base font family (e.g., choose from popular web fonts like Inter, Roboto, etc.) and maybe base font sizes for headings and paragraphs.

  • Global Spacing or Container Width: Some builders let you set the maximum width of content containers, default spacing scale, etc. By configuring global styles, you ensure consistency across your site. For instance, if you set Primary Color to blue, all components that reference the primary color will uniformly update to that.

• Responsive Design Preview: Often, website builders include toggles to preview the page on different screen sizes (desktop, tablet, mobile). In Lunix Studio, you might see icons (for a desktop, tablet, phone) near the top. Clicking these will adjust the canvas width to simulate those devices. This helps you ensure your design is responsive. You can adjust or hide elements per device as needed.

• Saving and Previewing: As you work, be sure to save your progress. There should be a “Save” button (often in the top right). Saving stores the page design in the project. You can also use “Preview” mode to see the page without the gridlines and editing handles – essentially how it would look to an end user. Preview mode might open the page in a new browser tab or within the studio with interactions enabled (like links clickable, etc.).

• Exporting or Publishing: Depending on Lunix platform capabilities, you might be able to export the page’s code (HTML/CSS/JS) or even host it via Lunix. The “Export to ZIP” in the Library (described later) suggests you can export assets, and possibly pages too. Check if there’s an Export or Publish option. If exporting, Lunix will package your page into a zip file with the necessary code and assets which you can then use in your own hosting environment or integrate into a larger project. If publishing (if offered), it might put the page live at a Lunix-provided URL or your connected custom domain.

• Using Generated Components: Remember those components you generated in the Code Generator? You might want to include them here. If the builder has a way to incorporate custom code, you could drag a “Custom Code” element or a placeholder then paste the React code. However, since this is a visual builder (and not a React app builder), another approach: re-create the design using the visual elements, or if Lunix Studio specifically supports injecting React components, use that feature. (This detail depends on whether Lunix’s builder is intended for high-fidelity prototyping or actual code integration. If it’s mostly for design prototyping, you’d use the generated code outside Lunix; if it’s fully integrated, there might be a special component for that.)

• Tips for Website Builder: Start with a rough layout by dragging larger sections (hero, content sections), then fill in details. Use global styles early on to set your typography and color scheme – that way, as you add components, they automatically match your theme. Make use of the alignment guides and container options to keep things neat. And preview on mobile view to adjust the layout for smaller screens (for example, a multi-column row might stack on mobile; you may want to check that it still looks good or adjust padding).

The Website Builder is ideal for putting everything together: content, components, and assets. It’s a playground where your analysis, code generation, and design ideas come to life as a cohesive webpage.