Page Builder

Create stunning custom pages for your store using Mozhe's visual page builder. Build landing pages, about pages, promotional content, and more without writing code.

Overview

The page builder allows you to create and edit pages using a drag-and-drop interface. Each page is composed of reusable sections that you can customize to match your brand.

Creating a New Page

To create a custom page:

1. Navigate to Content > Pages in the dashboard
2. Click the Create Page button
3. Enter a title for your page
4. Set the URL handle (e.g., about-us for /about-us)
5. Click Save to create the page

Page Settings

When creating a page, configure these settings:

• Title - The page title shown in browser tabs and search results
• Handle - The URL slug for the page (auto-generated from title, editable)
• Status - Draft or Published
• Is Homepage - Set this page as your store's homepage

Working with Sections

Pages are built from sections. Each section represents a distinct content block on your page.

Adding Sections

To add a section to your page:

1. Open your page in the builder
2. Click Add Section at the bottom of the page
3. Choose from available section types:
   • Pre-built templates from the library
   • AI-generated custom sections
   • Empty code sections for custom HTML

Section Types

The builder supports several section types:

Reordering Sections

Drag and drop sections to reorder them:

1. Hover over a section to reveal the drag handle
2. Click and hold the handle
3. Drag the section to its new position
4. Release to place the section

Editing Section Content

Each section has editable content areas called "translations":

1. Click on any text in the section to edit it
2. Make your changes in the editing panel
3. Click outside or press Save to apply changes

Content is automatically saved per language, supporting your store's multilingual setup.

Section Settings

Configure section appearance in the settings panel:

• Background Color - Set the section's background color
• Text Color - Choose the default text color
• Padding - Control vertical spacing (compact, default, spacious)
• Custom CSS - Add custom styles (advanced users)

Using Templates

Save time by using pre-built templates.

Section Templates

To use a section template:

1. Click Add Section
2. Browse the Templates tab
3. Preview templates by hovering over them
4. Click a template to add it to your page

Creating Your Own Templates

Save a section as a template for reuse:

1. Edit a section you want to save
2. Click the More menu (three dots)
3. Select Save as Template
4. Enter a template name and description

Page Templates

Create a page template from an existing page:

1. Navigate to Content > Pages
2. Click the More menu on the page you want to save
3. Select Save as Template
4. Configure template settings and save

To create a page from a template:

1. Click Create Page
2. Select From Template
3. Choose your template
4. Customize the content for your new page

AI-Powered Section Generation

Generate custom sections using AI. See the AI Content Generation guide for details.

To generate a section with AI:

1. Click Add Section
2. Select the AI Generate tab
3. Describe what you want (e.g., "hero section with dark background and centered text")
4. Optionally upload reference images
5. Click Generate
6. Review and customize the generated section

Responsive Design

All sections are designed to work on desktop, tablet, and mobile devices.

Preview Modes

Test your page across devices:

1. Click the device icons in the builder toolbar
2. Choose Desktop, Tablet, or Mobile
3. Verify your content looks good at each size

Mobile Optimization Tips

• Keep headlines short and impactful
• Use single-column layouts for mobile
• Ensure buttons are large enough for touch
• Test image scaling across devices

Managing Pages

Publishing a Page

To make your page live:

1. Open the page in the builder
2. Review all sections and content
3. Click Publish in the top toolbar
4. The page will be immediately available at its URL

Setting a Homepage

To designate a page as your store's homepage:

1. Open the page you want as your homepage
2. Go to Page Settings
3. Toggle Set as Homepage
4. Click Save

Note: Only one page can be the homepage. Setting a new homepage automatically removes the designation from the previous one.

Page SEO

Configure SEO settings for better search visibility:

1. Open your page in the builder
2. Click the SEO tab in the settings panel
3. Set the meta title (max 60 characters)
4. Set the meta description (max 160 characters)
5. Preview how your page will appear in search results

Working with Images

Adding Images to Sections

1. Click on an image placeholder in a section
2. Choose from:
   • Upload - Select an image from your computer
   • Library - Use an existing image from your media library
   • URL - Enter an image URL
3. Set the image alt text for accessibility

Image Optimization

Images are automatically optimized for web:

• Converted to efficient WebP format
• Resized to appropriate dimensions
• Compressed for fast loading
• Served from a global CDN

Code Sections

For advanced customization, use code sections with custom HTML.

Creating a Code Section

1. Click Add Section
2. Select Code Section
3. Write your HTML in the code editor
4. Use Tailwind CSS classes for styling
5. Preview your changes in real-time

Translation Keys

Make content translatable by using translation keys:

<h2>{{t:heroTitle}}</h2>
<p>{{t:heroDescription}}</p>

The builder will automatically create translation fields for each key.

Asset Keys

Reference images using asset keys:

<img src="{{asset:heroImage}}" alt="Hero banner" />

Configure assets in the section's assets panel.

Multi-Language Support

Pages support all languages enabled for your store.

Editing Translations

1. Switch languages using the language selector in the toolbar
2. Edit content in the selected language
3. Repeat for each language

Translation Tips

• Always translate SEO metadata for each language
• Review button text and calls-to-action per language
• Verify image alt text is translated

Next Steps

• Blog Posts - Create blog content for your store
• AI Content Generation - Use AI to create sections and content
• Site Branding - Configure colors and fonts