> For the complete documentation index, see [llms.txt](https://help.pixfort.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pixfort.com/using-pixfort-builder/building-pages-using-page-builder.md).

# Building pages using Page Builder

First it is good to know that: 

* Each **Page** contains **Sections.**
* Each **Section** contains **Elements**.
* An **Element** contains components.

### 1. Pages <a href="#id-1-pages" id="id-1-pages"></a>

To start building your page, you can choose between 2 ways:

* Start with sections.
* Start with templates.

![](/files/-LmlI8KFqlGP1l0JhEh5)

\
To add or delete pages to your project, you can open **Pages manger** from left bar

![](/files/-LmlIByssBkwUvhSzHSC)

### 2. Sections <a href="#id-2-sections" id="id-2-sections"></a>

Pages in PixFort builder are composed of sections, you can create any order you want with these sections, and each section has its own settings (background, padding...), you can access to it by clicking on the **Settings icon** in the dark box on the left of each section.

![](/files/-LmlIEoGlJvkzkciLCjM)

### 3. Elements <a href="#id-3-elements" id="id-3-elements"></a>

Sections in PixFort builder are composed of elements. These elements contain all different components in your page (title, text, image, form, video...), and the element could contain more than one component (i.e. icon + title + text).

![](/files/-LmlIH-bUVDK2hmfLP_c)

The pages in PixFort builder are based on Bootstrap grid-system (12 columns), that means each element in the page has a specific size based on its columns, this size can be changed by adding or removing columns from the elements **(click on - or + icon in element's bar)**.\
\
The image below shows you the same element with different sizes (columns)

![](/files/-LmlIJuJV9fw1yH-p_Dg)

From the **Blue bar** of each element you can:

* Change element's position by continuous-clicking on **Move icon** (first icon).
* Change element's size **( - or + icons)**.
* Access to **element's settings** (background, animation, padding...etc).
* **Duplicate** element.
* **Delete** element.

To edit the components of an element:

* **Text:** just click on the text and start writing.
* **Image:** right-click.
* **Button:** right-click.
* **Font icon:** right-click.
* Special components like **forms**, **videos**.. can be edited via element's blue bar.