> ## Documentation Index
> Fetch the complete documentation index at: https://docs.glowply.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Editing with the Builder

> The Builder is Glowply's drag-and-drop visual editor for your pages. Learn how to open it, add and edit elements, design for every screen, and publish your changes.

The **Builder (البلدر)** is Glowply's visual, drag-and-drop page editor. You design your pages by dragging elements onto the page and editing them right where they appear — no code, and what you build is what your visitors see. You'll find the Builder in your **site dashboard**, not your account portal.

<Info>
  The Builder edits one page at a time. To choose which page to open, start from **Pages (الصفحات)** in your site dashboard. For billing — your subscription and **Wallet** — use your **account portal** instead.
</Info>

## Open the Builder on a page

You open the Builder from the page you want to edit, so your changes always apply to the right page.

<Steps>
  <Step title="Open your site dashboard">
    Sign in to Glowply, open your **account portal**, and click **Glowply dashboard** on your site card. Your dashboard opens in a new tab.
  </Step>

  <Step title="Go to Pages">
    In the side menu, open **Pages (الصفحات)** and find the page you want to change — for example, your Home page.
  </Step>

  <Step title="Edit the page in the Builder">
    Choose the option to edit that page with the **Builder**. The page opens in the visual editor, ready to design.
  </Step>
</Steps>

<Tip>
  Starting a brand-new page? Build it faster with a ready-made design. See [Template library](/en/site/templates-library) to drop in a full page layout, then edit it to fit your business.
</Tip>

## Find your way around

The Builder has three main areas. Once you know what each one does, editing becomes quick and predictable.

<CardGroup cols={2}>
  <Card title="The canvas" icon="window">
    The live preview of your page in the center. You click, drag, and edit directly on it, and your changes appear instantly.
  </Card>

  <Card title="The elements panel" icon="shapes">
    A panel of building blocks — text, images, buttons, sections, and more — that you drag onto the canvas to build your page.
  </Card>

  <Card title="The settings panel" icon="sliders">
    The controls for whatever you've selected. Edit content, colors, spacing, size, and more for that one element or section.
  </Card>

  <Card title="The toolbar" icon="bars">
    The top bar with your responsive views, preview, and save controls — the actions you use most while you work.
  </Card>
</CardGroup>

<Note>
  Panels can be opened, closed, or moved out of the way so you have room to work. If a panel isn't visible, look for its icon along the edge of the screen to bring it back.
</Note>

## Add and edit elements

Everything on a page is an **element** — a piece of text, an image, a button, or a **section** that groups other elements together. You build a page by adding elements and editing each one.

### Add an element

<Steps>
  <Step title="Open the elements panel">
    Open the panel of building blocks, where elements are grouped to help you find them.
  </Step>

  <Step title="Drag it onto the page">
    Drag the element you want — such as text, an image, or a button — and drop it where you want it on the canvas.
  </Step>

  <Step title="Edit it in the settings panel">
    With the element selected, open its settings to change the content and styling. Your changes show on the canvas as you make them.
  </Step>
</Steps>

### What you'll add most

| Element     | What it's for                                                                                                               |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
| **Text**    | Headings and paragraphs — your page's words. Click to type, and style the size, color, and alignment.                       |
| **Image**   | A photo or graphic. Pick a file from your **Media library**, or upload a new one, then set its size.                        |
| **Button**  | A clickable call to action, such as "Shop now". Set its label and the link it opens.                                        |
| **Section** | A full-width band that holds other elements. Use sections to structure the page into clear blocks, and to set a background. |

<Tip>
  Think in sections. Build the page as a stack of sections — a hero, then features, then a call to action — and place your text, images, and buttons inside them. It keeps the layout tidy and easy to rearrange.
</Tip>

### Edit, move, duplicate, or delete

* **Edit** — select an element, then change its content and styling in the settings panel.
* **Move** — drag an element to a new spot, or drag it into a different section.
* **Duplicate** — copy an element you've already styled instead of building it again.
* **Delete** — remove an element you don't need.

<Tip>
  Made a change you don't like? Undo it and try again. Nothing you do in the Builder affects your live site until you publish.
</Tip>

## Design for every screen

Your visitors arrive on phones, tablets, and computers, and your pages should look right on all of them. The Builder lets you preview and fine-tune each screen size.

<Steps>
  <Step title="Switch the screen size">
    Use the responsive views in the toolbar to switch between desktop, tablet, and mobile. The canvas resizes so you see your page at that width.
  </Step>

  <Step title="Adjust for that view">
    Change things like text size, spacing, or alignment for the screen you're viewing, so each one looks its best.
  </Step>

  <Step title="Check the others">
    Switch back through the views to confirm your page looks good everywhere before you publish.
  </Step>
</Steps>

<Note>
  Most of your design carries over from one screen size to the next, so you usually only need to adjust a few things for smaller screens — not rebuild the page.
</Note>

## Save, preview, and publish

While you work, you save your progress; when you're happy, you publish to make your changes live.

<Steps>
  <Step title="Save your work">
    Use the save control in the toolbar to keep your progress. Save often so nothing is lost.
  </Step>

  <Step title="Preview the page">
    Open the preview to see the page exactly as a visitor will, without the editing panels.
  </Step>

  <Step title="Publish when you're ready">
    Publish the page to push your changes to your live site.
  </Step>
</Steps>

<Note>
  Your changes go live only when you publish. Until then, you can edit freely — your visitors keep seeing the current version of your site.
</Note>

<Warning>
  Want to redesign a page without visitors seeing a half-finished version? Turn on **Maintenance mode (وضع الصيانة)** first, then publish and switch it off when you're done. See [Maintenance mode](/en/site/maintenance-mode).
</Warning>

## Tips for a smooth start

<AccordionGroup>
  <Accordion title="Start from a template instead of a blank page">
    A ready-made design gives you a complete, good-looking layout in seconds. Add one from the **Template library**, then swap in your own text and images. See [Template library](/en/site/templates-library).
  </Accordion>

  <Accordion title="Reuse your own designs across pages">
    Once you've built a section or block you like, save it to your **Builder library** and drop it onto other pages, so your site stays consistent. See [Builder library](/en/site/builder-library).
  </Accordion>

  <Accordion title="Prepare your images first">
    Upload your photos and files to your **Media library** before you start, so they're ready to drag in while you design. See [Media library](/en/site/media).
  </Accordion>

  <Accordion title="My change isn't showing on the live site">
    Make sure you **published** the page, not just saved it. Saving keeps your progress in the editor; publishing pushes it live. Then refresh the live page in your browser.
  </Accordion>

  <Accordion title="Fine-tune which elements are available">
    The set of elements you can add is managed in the **Elements manager**. If you can't find an element, it may need to be enabled there. See [Elements manager](/en/site/elements-manager).
  </Accordion>
</AccordionGroup>

## Where to go next

<CardGroup cols={2}>
  <Card title="Start from a template" icon="layer-group" href="/en/site/templates-library">
    Drop a ready-made page or section into your site, then make it yours.
  </Card>

  <Card title="Reuse your designs" icon="bookmark" href="/en/site/builder-library">
    Save your own sections and blocks to reuse across pages.
  </Card>

  <Card title="Manage your elements" icon="shapes" href="/en/site/elements-manager">
    Control which building blocks are available in the Builder.
  </Card>

  <Card title="Manage your pages" icon="file-lines" href="/en/site/pages">
    Create, rename, and organize all the pages on your site.
  </Card>

  <Card title="Add images and files" icon="photo-film" href="/en/site/media">
    Upload to your **Media library** so they're ready to drag in.
  </Card>

  <Card title="Hide work in progress" icon="screwdriver-wrench" href="/en/site/maintenance-mode">
    Turn on **Maintenance mode** while you redesign a page.
  </Card>
</CardGroup>

<Info>
  Looking for billing instead? Your subscription, **Wallet**, and account details live in your **account portal**. See [Site dashboard overview](/en/site/dashboard-overview) to get oriented with the rest of your dashboard.
</Info>