> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kibocommerce.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Create Page
> Learn how to create a page in Kibo CMS Website Builder.
Kibo CMS Website Builder incorporates a drag-and-drop visual editor that allows you to easily create and edit web pages without requiring any coding skills.
In this tutorial, we will learn how to create a Page using the Kibo CMS Website Builder. As an example, we will create a page with the section shown in the image below:
We will do this in 12 steps:
* Step 1: Add a new Page
* Step 2: Add and edit a Box
* Step 3: Add and edit Rich Text
* Step 4: Add and edit a Grid
* Step 5: Add and adjust an Image
* Step 6: Add a complex custom Element
* Step 7: Use the Navigator
* Step 8: Review Settings
* Step 9: Preview the Breakpoints and adjust
* Step 10: Preview
* Step 11: Publish
* Step 12: Organize content in Folders
## Step 1: Add a New Page
1. From the **Side Menu**, click **Kibo CMS Website Builder** > **Pages**.
> The **Pages** screen opens.
2. Click **+ NEW PAGE**.
> The pop-up to select a Page type opens, e.g., Static Page.
3. Add the **Title** of the Page.
> The **Path** is automatically generated.
The path you set must be supported by your frontend application — your storefront must have a route that handles that URL for the page to render correctly. Coordinate with your development team before creating pages at new paths.
4. Click **CREATE**.
> The new Page edit screen appears.
## Step 2: Add and Edit a Box
1. Drag and drop a **Box** Element into the container and click on it to select it.
> The right-side **Element** and **Style** menus now control the selected Box element.
2. Explore the **Style** tab; you can change Layout, Margin & Padding, Background, and control the Visibility of the component.
3. Change the **Background** of the Box.
> The Box changes color in the Page area in the center of the screen.
**Note**: Boxes could be used as building blocks of a Page. A Page may be built with multiple Boxes to group Elements together easily share Style, move around together, or delete in one go. A Box can contain Elements like Grids, Images, Rich Text, etc.
## Step 3: Add and Edit Rich Text
1. Drag and drop a **Rich Text** Element to the Box.
> Placeholder text appears on the Page.
2. Select the text and, using the **Element** tab on the right, add and edit the text as needed. You can also open it in a larger pop-up for precise editing.
> Formatting reflects in the Page preview area.
## Step 4: Add and Edit a Grid
1. Add a **Grid** to the Box element and select it. Note: avoid adding the Grid to the **Main Content** area to keep the same Background and Style, it should be in the Box.
> The Grid shows with sample content in the main Page area.
2. In the **Element** tab layout options, click the **four-column-layout, single-row**.
> The Grid updates content in the main Page area.
3. Drag and drop **Rich Text** Elements into Column 3 and 4.
> Sample text populates in these Cells.
4. Populate and edit the text to explore the Rich Text editor.
**Note**: Grids are also powerful Page building blocks made of one or more Cells. Elements like Images and Rich Text can be placed inside their Cells.
## Step 5: Add and Adjust an Image
1. Drag and drop an **Image** Element.
> Placeholder Image element appears on the Page.
2. Select the Image from the **Element** tab by clicking **SELECT FROM LIBRARY**.
> File Manager screen pops up.
a. Find and click the desired Image.
> Selected asset adds to the Page.
b. OR click **UPLOAD**.
> File explorer opens to select the Image you want to use. Here is the image used in this example:
3. In the **Style** tab of the Image element, click **Layout** and adjust Width to 80%, for example. Then adjust Alignment to centered. Use Margin & Padding as needed.
## Step 6: Add a Complex Custom Element
1. Drag and drop a **Hero #1** element onto the Page.
> Complex element with child components appears.
2. Child elements are not editable in this example, but custom components can specify inputs like button labels, etc so this is completely customizable.
3. Adjust the **Style** for this element and the changes apply to the element as a whole and not to its individual parts.
## Step 7: Use the Navigator
1. From the **Navigator** tab on the left of the Page, click to access structure and components.
> Navigator opens.
2. Click parent Elements to explore children, e.g., Box > Grid > Column (first) > Rich Text.
> Element highlights on the Page for editing so that users can find it quickly and start editing it.
**Note**: Navigator excels for complex Pages with lots of components. Use it for precise selection of composites like Grids. Another way to make a precise selection is to use the bread crumb at the bottom of the screen. It allows you to go up the hierarchy in a single click.
## Step 8: Review Settings
1. Click the **SETTINGS** icon.
> **General Settings** tab in **Page Settings** opens.
2. In **SEO** and **Social** tabs, add info from the content on the Page itself or any test content.
3. Click **SAVE SETTINGS** before closing. Unlike the changes on the Page, which are automatically saved, here the user needs to actually save them to ensure no accidental changes are made.
> Page Settings are updated.
## Step 9: Preview Breakpoints and Adjust
1. At the top of the Page, you have some quick actions, click on the tablet or mobile icon to see how the content will look.
> Center preview updates to different sizes.
2. When you click on the Mobile, you will notice the content in the Grid is not showing properly. The Grid has a built-in functionality that you can use to quickly fix this. Select Grid, **Element** tab, set **Stack at breakpoint** to **Mobile**.
**Note**: Selecting **Tablet** stacks for tablets and all smaller size screens like Mobile automatically.
## Step 10: Preview
1. Click **PREVIEW** in a new tab.
> Page opens in new tab as on Next.js site so that you can check how it will look once published.
## Step 11: Publish
1. Click **PUBLISH**.
> The pop-up will ask you to confirm that you really want to publish this Page.
2. Click **YES, PUBLISH THE PAGE!**.
> Page goes live on website.
## Step 12: Organize Content in Folders
1. On Pages list, click **+ NEW FOLDER**.
> The pop-up will ask you to confirm the Title of the Page and the Slug will automatically be populated.
2. Use top Search to find the relevant records and multi-select the Pages, then use the top menu **Bulk Actions** > **Move** to target Folder, e.g., **Features**.
> A confirmation report in the end of the successful action. If there are any issues with the Move this report will inform you.
**Note**: If you want to build a hierarchy of Folders (nested in other Folders) then you could change the default **Home** location (the root folder) to whatever folder that already exists in your Kibo CMS Website Builder. Organizing your content in Folders can help end users find content quickly and efficiently, but keep in mind the **Search** functionality at the top can also help when looking for the right content.
