Webpage Buildr User Guide

The interface consists of three main sections:

• Toolbox (Left sidebar) - Contains all available elements
• Canvas (Main area) - Where you build your page
• Page Controls (Top and bottom) - Manage pages and export your work

1. Space

Adds vertical spacing between elements. Customize width and colors.

2. Paragraph

Drag to add text content. Customize:

• Alignment (Left, Center, Right)
• Text size
• Font family
• Text color
• Background color
• Width

3. Link

Two types:

• External URL (links to external websites)
• Page Number (links to other pages in your project)

Customizable styling similar to paragraphs.

4. Image

Three ways to add images:

• Enter direct image URL
• Search Unsplash images
• Drag and drop local images from your computer

5. Flex Container

Creates a flexible container for layout. Options:

• Direction (Row/Column)
• Justify content
• Align items
• Responsive behavior

6. Div

Basic container element. Customizable width and colors. Can nest other elements inside.

7. Grid

Creates a responsive grid layout. Choose number of columns (1-4). Automatically responsive on mobile.

8. Iframe

Embed external content. Supports:

• Maps
• Videos
• Other web content

Customizable height.

9. Card

Pre-styled component with:

• Header
• Paragraph
• Optional image
• Hover effects

Fully customizable styling.

10. Icon

Add FontAwesome icons. Can be linked. Customizable size and color.

Page Management

• Click "Add Page" to create new pages
• Use page tabs to switch between pages
• Delete pages (except when only one remains)
• Create links between pages

Element Manipulation

1. Adding Elements

Drag elements from toolbox to canvas. Drop into containers for nesting.

2. Editing Content

Click to edit text. Double-click containers to select them. Use the universal style controls for formatting.

3. Undo

Click the "Undo" button to remove last action. Each page has its own undo history.

HTML Export

1. Click "Download HTML"
2. Receives a zip file containing:
• HTML files for each page
• Images folder
• Required tailwindcss

Next.js Project Export

1. Click "Download Next.js Project"
2. Receives a complete Next.js project with:
• Page components
• Images (public folder)
• Required dependencies
• Ready to deploy

Layout Structure

• Start with containers (Flex/Grid)
• Add content elements inside
• Use spacing elements for fine-tuning

Responsive Design

• Use responsive grid layouts
• Test different screen sizes
• Use flexible width values

Image Management

• Optimize images before upload
• Use appropriate image sizes
• Consider using Unsplash for professional photos

Navigation

• Plan your page structure
• Add clear navigation links
• Test all links before exporting

Common issues and solutions:

1. Element not dropping

• Ensure you're dropping into a valid container
• Check if container is selected (blue outline)
• New element wil be in green outline

2. Styling not applying

• Make sure element is selected
• Check if parent container is affecting styles

3. Export issues

• Verify all images are loading
• Check for broken links
• Ensure all pages are complete