# The page builder

> Build store pages from rows, columns and elements — add, move and style them, preview phone and tablet, hide parts on some screens, and save sections to reuse.

Product: NijeesWeb online store builder · Source: https://www.nijeesweb.com/docs/ecommerce/design/page-builder · Updated 2026-10-06

The page builder is where you design a page. Every page is made of **rows**; a row holds **columns** side by side; a column holds **elements** — a heading, an image, a products grid.

![The page builder](https://www.nijeesweb.com/marketing/img/docs/ecommerce/admin/page-builder-1200.webp "The page builder: the page as customers see it, with the builder's controls on top")

Open it with **Builder** on a page's row in **Pages** (or straight after creating a page).

## Rows

- **Add Row** — adds an empty row.
- **Move row up** / **Move row down** — reorder rows.
- **Row settings** — the row's padding, margin, background and other design; **Visibility**; CSS classes and IDs; and **Custom CSS** and **Custom JS** for this row only.
- **Save this section to my library** — keep the row to reuse on other pages.

## Columns

- Add a column with **+** on the row.
- **Move column left** / **right**, and drag the divider between two columns to **resize** them.
- **Column settings** — padding, margin, background, and **Visibility**.

## Elements

1. Select the **+** inside a column. **Add an element** opens.
2. Pick an element: **Heading**, **Text**, **Blurb**, **Button**, **Single Image**, **Single Video**, **Banners**, **Products**, **Categories**, **Brands**, **Vid And Prod**, **Image Gallery**, **Video Gallery**, **Testimonials**, **Form**, **Blogs** or **Accordion**.
3. Its settings open with three tabs:
   - **Content** — what it shows (the words, the image, which products);
   - **Design** — how it looks (fonts, colours, sizes, alignment);
   - **Advanced** — spacing, visibility, CSS.
4. **Save changes**. Use **Move element up** / **down** to reorder.

Every element is described in [Store elements](https://www.nijeesweb.com/docs/ecommerce/design/store-elements).

## Phone, tablet and desktop

The buttons at the bottom right switch the preview between **desktop**, **tablet** and **phone**. Padding and widths can differ per screen: choose **Same As Big Screen**, or **Custom** to set them for that screen size.

**Visibility** on a row, column or element hides it on the screen sizes you untick — **Desktop** (992 px and up), **Tablet** (768–991 px), **Phone** (up to 767 px). It is removed from the page on those sizes, not just hidden. Use it for a phone-only banner, for example.

## Ready-made sections and your library

- **＋ Add section** — add a ready-made section, or one from your library, to this page.
- **⤓ Save page to library** — save the whole page, so new pages can start from it.
- **Save this section to my library** (on a row) — save one row.

Everything you save is under **Theme → My Library**. See [Design library](https://www.nijeesweb.com/docs/ecommerce/design/design-library).

## Saving

Select **Save Page** (top right) or **Save changes** in the bar at the bottom, or press `Ctrl` + `S`. Changes are live on your store as soon as they are saved.

> [!TIP]
> Before a big change to your home page, **Clone** it from the Pages list. If you do not like the result, drag the copy back to the top.