> ## 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.
# KIBO CMS - Website Builder
> Video guide: KIBO CMS - Website Builder
export const GuiddeEmbed = ({playbookId, mode = 'videoAndDoc'}) => {
return
;
};
"Website Builder" is the visual, drag-and-drop pillar of KIBO CMS, alongside Content Modeling and File Manager — where standalone pages actually get assembled and published. Rather than writing code, we build a page out of reusable elements and components: "Boxes" for grouping and styling, "Grids" for multi-column layouts, "Rich Text", "Images" pulled straight from File Manager, and pre-built KIBO components like "Product Recommendations".
In this video, we'll create a new age from scratch, build it out with a few of these element types, configure its settings, show how to preview it across device sizes, and publish it. We'll also take a quick look at the rest of the Website Builder menu — "Redirects", "Settings", "Integrations", "Workflows", and "Configure Next.js" — rounding out everything that lives in this section of the KIBO CMS navigation. "Website Builder" is the visual, drag-and-drop pillar of KIBO CMS, alongside Content Modeling and File Manager — where standalone pages actually get assembled and published. Rather than writing code, we build a page out of reusable elements and components: "Boxes" for grouping and styling, "Grids" for multi-column layouts, "Rich Text", "Images" pulled straight from File Manager, and pre-built KIBO components like "Product Recommendations". In this video, we'll create a new age from scratch, build it out with a few of these element types, configure its settings, show how to preview it across device sizes, and publish it. We'll also take a quick look at the rest of the Website Builder menu — "Redirects", "Settings", "Integrations", "Workflows", and "Configure Next.js" — rounding out everything that lives in this section of the KIBO CMS navigation. To navigate to the KIBO CMS, in the Admin UI, on the "MAIN" tab, we'll click "Content", then click "Page Builder". To navigate to the KIBO CMS, in the Admin UI, on the "MAIN" tab, we'll click "Content", then click "Page Builder". This will open the KIBO CMS Admin page.
We discussed this page in-depth in a previous video. This will open the KIBO CMS Admin page. We discussed this page in-depth in a previous video. When we first access the KIBO CMS Admin page, it opens on the "Pages" menu, which is where we need to be to create and manage website pages. However, if we find ourselves in another area of the CMS Admin, we can always click either the "Home" or "Pages" menu options in the left nav to navigate back to the "Pages" menu. When we first access the KIBO CMS Admin page, it opens on the "Pages" menu, which is where we need to be to create and manage website pages. However, if we find ourselves in another area of the CMS Admin, we can always click either the "Home" or "Pages" menu options in the left nav to navigate back to the "Pages" menu. This is the "Pages" menu located in the Website Builder section of KIBO CMS. We'll discuss all sections.
On the left is a folder tree, for organizing individual Pages. To the right of the tree is the Pages list, which will display a list of existing Pages and folders. This list will change depending on the folder we're currently in. Right now, this is displaying the top-level "Home" folder, which also lists any sub-folders directly underneath it. This is the "Pages" menu located in the Website Builder section of KIBO CMS. We'll discuss all sections. On the left is a folder tree, for organizing individual Pages. To the right of the tree is the Pages list, which will display a list of existing Pages and folders. This list will change depending on the folder we're currently in. Right now, this is displaying the top-level "Home" folder, which also lists any sub-folders directly underneath it. At the top of the page, there is a "Search" bar that allows us to find a "Page" directly by name. At the top of the page, there is a "Search" bar that allows us to find a "Page" directly by name. We can also "Filter" the page list using several filter options, which can be useful once a Site has more than a handful of Pages. We can also "Filter" the page list using several filter options, which can be useful once a Site has more than a handful of Pages. Clicking the "Ellipses" next to a folder gives us folder-level actions, similar to what we saw in Content Modeling's "Groups". Clicking the "Ellipses" next to a folder gives us folder-level actions, similar to what we saw in Content Modeling's "Groups". Clicking the "Ellipses" next to an individual "Page" gives us Page-level actions from right within the list, without opening the Page itself. Clicking the "Ellipses" next to an individual "Page" gives us Page-level actions from right within the list, without opening the Page itself. At the bottom of the Pages tree navigation are three quick links: "Trash", "Content Reviews", and "Scheduled Pages". At the bottom of the Pages tree navigation are three quick links: "Trash", "Content Reviews", and "Scheduled Pages". "Trash" holds recently deleted pages, giving us a safety net before anything is gone for good. The "Ellipses" menu for each Trash item allows us to "Restore" or permanently "Delete" pages. "Trash" holds recently deleted pages, giving us a safety net before anything is gone for good. The "Ellipses" menu for each Trash item allows us to "Restore" or permanently "Delete" pages. "Content Reviews" is where review requests across all pages can be tracked in one place.
Note, we'll dig into the "Review" workflow in a subsequent video. "Content Reviews" is where review requests across all pages can be tracked in one place. Note, we'll dig into the "Review" workflow in a subsequent video. "Scheduled Pages" lists any pages set to publish automatically at a future date and time. The "Ellipses" menu for each entry allows us to "Cancel" the schedule. "Scheduled Pages" lists any pages set to publish automatically at a future date and time. The "Ellipses" menu for each entry allows us to "Cancel" the schedule. To start building a new page, we'll click the "New Page" button on the top right. To start building a new page, we'll click the "New Page" button on the top right. A modal window will open, where we'll select what kind of page we're creating. The default value is "Static Page", which we'll use for this example. A modal window will open, where we'll select what kind of page we're creating. The default value is "Static Page", which we'll use for this example. We'll set the required page "Title", and the "Path" will automatically populate based on that. This can be changed, however, so we'll edit it to show "company" instead. We'll set the required page "Title", and the "Path" will automatically populate based on that. This can be changed, however, so we'll edit it to show "company" instead. When we have configured all fields as needed, we'll click "Create". When we have configured all fields as needed, we'll click "Create". This is the Page Builder's blank canvas — everything from here is built by dragging "components" in from the "Insert" panel on the left, and each component can be configured and styled from the "Element" and "Style" panel on the right. We'll discuss all sections.
There are a few things that should be noted: First, at the top and bottom of the canvas, there is a "header" and "footer" already in place. These aren't elements we can select or edit here — they're part of the site's overall layout, shown so we can see our page content in context as we build it. This is the Page Builder's blank canvas — everything from here is built by dragging "components" in from the "Insert" panel on the left, and each component can be configured and styled from the "Element" and "Style" panel on the right. We'll discuss all sections. There are a few things that should be noted: First, at the top and bottom of the canvas, there is a "header" and "footer" already in place. These aren't elements we can select or edit here — they're part of the site's overall layout, shown so we can see our page content in context as we build it. Secondly, developers can build Custom Components that can be used as drag-and-drop elements here.
For more information on building and registering Custom Components, visit KIBO's documentation linked here. Secondly, developers can build Custom Components that can be used as drag-and-drop elements here. For more information on building and registering Custom Components, visit KIBO's documentation linked here. The "Insert" panel has its own Search bar, useful once a Page has a lot of components to choose from. The "Insert" panel has its own Search bar, useful once a Page has a lot of components to choose from. We can also toggle how components are displayed in this panel — as a "list", which is default and shown here, or as "icons". We'll switch to the "icon" view. We can also toggle how components are displayed in this panel — as a "list", which is default and shown here, or as "icons". We'll switch to the "icon" view. As mentioned earlier, we build Pages by dragging components from the left panel, and dropping them onto the Page Builder canvas, located in the center of the page.
We'll start by dragging a "Box" component onto the canvas. As mentioned earlier, we build Pages by dragging components from the left panel, and dropping them onto the Page Builder canvas, located in the center of the page. We'll start by dragging a "Box" component onto the canvas. When we have added the component, we'll click on it to select it. This will activate the two "Element" and "Style" panels on the right. When we have added the component, we'll click on it to select it. This will activate the two "Element" and "Style" panels on the right. There is no "Element" for a Box component, so we'll start with the "Style" panel, which is where we'll configure our "Box" component. We'll discuss all sections.
Important Note: clicking the "Ellipses" menu next to "Box" allows users to "Clone" or "Delete" the component. There is no "Element" for a Box component, so we'll start with the "Style" panel, which is where we'll configure our "Box" component. We'll discuss all sections. Important Note: clicking the "Ellipses" menu next to "Box" allows users to "Clone" or "Delete" the component. Under "Layout", we can change the size and alignment of the component. Under "Layout", we can change the size and alignment of the component. "Margin & Padding" controls the "spacing" around and inside the Box. "Margin & Padding" controls the "spacing" around and inside the Box. "Border" controls "width", "radius", "style", and "color" for the Box's edge. "Border" controls "width", "radius", "style", and "color" for the Box's edge. "Background" lets us set a background "color" or "image" for the Box. "Background" lets us set a background "color" or "image" for the Box. We'll set a background color here to visually show the boundaries around everything we'll add inside the Box component. We'll set a background color here to visually show the boundaries around everything we'll add inside the Box component. "Visibility" toggles whether this component renders at all — useful for hiding something without deleting it. "Visibility" toggles whether this component renders at all — useful for hiding something without deleting it. Next, we'll drag a "Rich Text" component into the Box. Next, we'll drag a "Rich Text" component into the Box. Again, selecting it will open its own "Element" and "Style" panel, and is pre-filled with placeholder text. Again, selecting it will open its own "Element" and "Style" panel, and is pre-filled with placeholder text. In the "Element" panel, we can edit the text with basic formatting controls — "bold", "italic", "underline", and "alignment". In the "Element" panel, we can edit the text with basic formatting controls — "bold", "italic", "underline", and "alignment". For more room to work, an expand icon opens a larger "Text Editor" modal, with more editing options. For more room to work, an expand icon opens a larger "Text Editor" modal, with more editing options. Next, we'll drag a "Grid" component into the Box to lay out content in columns. Next, we'll drag a "Grid" component into the Box to lay out content in columns. Again, selecting the Grid opens its own "Element" and "Style" options. Again, selecting the Grid opens its own "Element" and "Style" options. On the Grid's "Element" tab, we'll choose the column layout we want to use by selecting a visual tile. The current layout is highlighted.
Other fields include "Row Count", "Row Gap", and "Column Gap", along with a "Stack at breakpoint" setting and a "Reverse columns when stacked" toggle — we'll come back to breakpoint stacking later in this video. On the Grid's "Element" tab, we'll choose the column layout we want to use by selecting a visual tile. The current layout is highlighted. Other fields include "Row Count", "Row Gap", and "Column Gap", along with a "Stack at breakpoint" setting and a "Reverse columns when stacked" toggle — we'll come back to breakpoint stacking later in this video. Next, we'll drag an "Image" component into the right Grid column. Next, we'll drag an "Image" component into the right Grid column. Again, selecting the Image opens its own "Element" and "Style" options. Again, selecting the Image opens its own "Element" and "Style" options. We'll click the "Select From Library" button in the Element panel. We'll click the "Select From Library" button in the Element panel. This will open the CMS "File Manager" menu inside Page Builder. Here, we can Search and Filter for Images, or click through folders to locate the image we want to use, exactly like navigating the File Manager menu.
We discussed "File Manager" in a separate video. This will open the CMS "File Manager" menu inside Page Builder. Here, we can Search and Filter for Images, or click through folders to locate the image we want to use, exactly like navigating the File Manager menu. We discussed "File Manager" in a separate video. After we select an Image, "Title" and "Alternate Text" will auto-fill from the file name by default. We can edit these fields as needed. After we select an Image, "Title" and "Alternate Text" will auto-fill from the file name by default. We can edit these fields as needed. We can edit the Image's "Style" similarly to what was done for the Box component. We can edit the Image's "Style" similarly to what was done for the Box component. Lastly, we'll drag in a more complex "pre-built" KIBO modeled custom component — in this example, the "Product Recommendations" component. Lastly, we'll drag in a more complex "pre-built" KIBO modeled custom component — in this example, the "Product Recommendations" component. Dropped onto the page, it shows placeholder guidance: "Use the 'Products' field in the panel on the right to select products from the Kibo catalog". This will be configured in the "Elements" panel. Dropped onto the page, it shows placeholder guidance: "Use the 'Products' field in the panel on the right to select products from the Kibo catalog". This will be configured in the "Elements" panel. That panel gives us a "Section Title" that defaults to "Recommended Products", a "Products" field, and a "Shop All URL". That panel gives us a "Section Title" that defaults to "Recommended Products", a "Products" field, and a "Shop All URL". We'll fill in a comma-separated list of product codes in the "Products" field.
Important Note: Products from the KIBO Catalog render immediately, with live pricing and imagery — this isn't placeholder data, it's pulling from the same Catalog we'd manage in KIBO Admin. We'll fill in a comma-separated list of product codes in the "Products" field. Important Note: Products from the KIBO Catalog render immediately, with live pricing and imagery — this isn't placeholder data, it's pulling from the same Catalog we'd manage in KIBO Admin. In the left panel, we can switch from "Insert" to "Navigator", which shows this page's full element hierarchy at a glance: "Product Recommendations" and our "Box" — containing the "Rich Text" and "Grid" we just built — as siblings. In the left panel, we can switch from "Insert" to "Navigator", which shows this page's full element hierarchy at a glance: "Product Recommendations" and our "Box" — containing the "Rich Text" and "Grid" we just built — as siblings. Clicking any item in Navigator — like our "Image", nested under "Grid" and "Column" — selects it on the canvas and opens its properties, exactly like clicking it directly. Clicking any item in Navigator — like our "Image", nested under "Grid" and "Column" — selects it on the canvas and opens its properties, exactly like clicking it directly. Next, we'll click the "Settings" icon on the top right of the toolbar. Next, we'll click the "Settings" icon on the top right of the toolbar. This opens the "Page Settings" panel, landing on its "General" tab. We'll discuss each section. All required items are noted with a "red star". This opens the "Page Settings" panel, landing on its "General" tab. We'll discuss each section. All required items are noted with a "red star". "General" covers the page's core details: the required "Page title" and "Path", an optional "Snippet", a representative "Image", and "Tags" for rendering or filtering.
Important Note: every one of these fields stays fully editable after a page is created — to demonstrate that, we'll change the "Path" from "company" back to "about-us". "General" covers the page's core details: the required "Page title" and "Path", an optional "Snippet", a representative "Image", and "Tags" for rendering or filtering. Important Note: every one of these fields stays fully editable after a page is created — to demonstrate that, we'll change the "Path" from "company" back to "about-us". The "SEO" tab covers "Title", "Description", custom "Meta Tags", "Canonical URL", plus "No Index" & "No Follow" toggles for search engines.
Important Note: For the SEO data configured here to reflect on the page, the Storefront App has to use the data & render it. There is a small change required to make that info visible. Please contact KIBO Support for more information on how to set this up. The "Social" tab controls how the page previews when shared — its own "Title", "Description", "Image", and Open Graph "Meta Tags". The "Social" tab controls how the page previews when shared — its own "Title", "Description", "Image", and Open Graph "Meta Tags". Lastly, the "Schema" tab is where structured data markup gets added, to enhance how the page can appear in search results. Lastly, the "Schema" tab is where structured data markup gets added, to enhance how the page can appear in search results. When we've configured all "Page Settings" as needed, we'll click the "Save Settings" button on the bottom right. When we've configured all "Page Settings" as needed, we'll click the "Save Settings" button on the bottom right. In the top toolbar, next to "Settings", a "Version" dropdown is where every past revision of this page can be found and reviewed. In the top toolbar, next to "Settings", a "Version" dropdown is where every past revision of this page can be found and reviewed. Next to the "Version" dropdown, the "Wand" icon opens "AI Content Generation", which can draft page content for us directly inside Page Builder. We'll discuss AI Content Generation in a subsequent video. Next to the "Version" dropdown, the "Wand" icon opens "AI Content Generation", which can draft page content for us directly inside Page Builder. We'll discuss AI Content Generation in a subsequent video. At the top and middle of the page, there are three icons that switch the canvas preview mode between "Desktop", "Tablet", and "Mobile". At the top and middle of the page, there are three icons that switch the canvas preview mode between "Desktop", "Tablet", and "Mobile". Switching to "Mobile", we can see our Grid's two columns have stacked into rows. Selecting a component here is how we'd adjust its behavior for this specific size. Switching to "Mobile", we can see our Grid's two columns have stacked into rows. Selecting a component here is how we'd adjust its behavior for this specific size. Back on the Grid's "Element" tab, the "Stack at breakpoint" dropdown controls exactly when that stacking kicks in. Here, we've switched it to "Mobile", which moves the Image to below the Text for all Mobile views. Back on the Grid's "Element" tab, the "Stack at breakpoint" dropdown controls exactly when that stacking kicks in. Here, we've switched it to "Mobile", which moves the Image to below the Text for all Mobile views. Note the banner reading "This item is not under review. You can request review." — with its "Request Review" button. This is part of the KIBO CMS Content Review workflow, which we'll cover fully in a subsequent video. When we've configured the Page as needed, we'll click "Publish" on the top right. If your user role in KIBO CMS does not give you "Publish" permissions, you would click the "Request Review" button. A modal window will appear where we can add a "revision description" and confirm that we would like to publish the page. Once published, the page will show a live, "Published" status. We can always revise the published page by clicking the "New Revision" button on the top right. After publishing, we get a URL for the new page as well as a separate set of options on the far right. Those options are "Refresh Preview", "Copy Preview Link", and "Preview Page in a New Tab".
Important Note: Hover click interactions will work in the preview URL, or when its a "published" page. When viewing a "draft" page from the CMS Admin, the hover interactions are disabled. After publishing, we get a URL for the new page as well as a separate set of options on the far right. Those options are "Refresh Preview", "Copy Preview Link", and "Preview Page in a New Tab". Important Note: Hover click interactions will work in the preview URL, or when its a "published" page. When viewing a "draft" page from the CMS Admin, the hover interactions are disabled. Clicking "Preview Page in a New Tab" opens the page in a new browser tab, rendered exactly as it will appear on the live Next.js storefront. Clicking "Preview Page in a New Tab" opens the page in a new browser tab, rendered exactly as it will appear on the live Next.js storefront. Back on the KIBO CMS Pages screen, we'll click the "back" button on the top left. On the Pages list, similar to "File Manager", we can create folders to keep related pages organized. To do that, we'll click either "New Folder" button shown here. On the "Create a new folder" modal, we'll add a required "Title", modify the generated "Slug" as needed, confirm the "Parent folder", then click the "Create folder" button. The folder now appears in the folder tree, ready to hold pages. Next, we'll select one or more pages to move into our new folder, and then click the "Move" button. This opens a "Select folder" modal where we can choose the destination folder, or create a new folder if needed. When we've selected a folder, we'll get a confirmation dialog where we can "Confirm" or "Cancel" the move. After clicking "Confirm", a confirmation modal reports the result of the move. After clicking "Confirm", a confirmation modal reports the result of the move. The moved pages now appear inside their new folder instead of their original location. Quickly rounding out the rest of the "Website Builder" section: "Redirects" is where we point an old URL to a new one — useful whenever a page's path changes and we don't want existing links or search results to break. To create a "Redirect", we'll click the "New Redirect" button, filling in "Redirect From", "Redirect To", and selecting a "Redirect Type" of either "Permanent" or "Temporary". The "Is Enabled?" toggle will turn on the redirect.
Important Note: "Redirects" need the Storefront App to query these Redirects & rout them accordingly. To create a "Redirect", we'll click the "New Redirect" button, filling in "Redirect From", "Redirect To", and selecting a "Redirect Type" of either "Permanent" or "Temporary". The "Is Enabled?" toggle will turn on the redirect. Important Note: "Redirects" need the Storefront App to query these Redirects & rout them accordingly. Like we just saw with Pages, Redirects can also be organized into folders — worth setting up if a site accumulates many of them over time. "Settings" holds a single field: "Preview Domain", the URL that "Page Builder" uses to render its live preview. "Settings" holds a single field: "Preview Domain", the URL that "Page Builder" uses to render its live preview. "Integrations" is where the connection to KIBO Commerce itself is configured — "Api Host", "Auth Host", "Shared Secret", and "Client Id" — the credentials that let Website Builder pull real catalog and site data, like the products we added to "Product Recommendations" earlier. "Integrations" is where the connection to KIBO Commerce itself is configured — "Api Host", "Auth Host", "Shared Secret", and "Client Id" — the credentials that let Website Builder pull real catalog and site data, like the products we added to "Product Recommendations" earlier. As mentioned earlier, "Workflows" is where a page's approval steps get defined — by default, "Draft" moves straight to "Published", but custom steps like a "Content Approval" stage can be inserted in between. We'll discuss Workflows and Content Approval in a subsequent video. "Configure Next.js" is where a developer retrieves the values needed to connect this tenant to the KIBO CMS Next.js starter kit — an API key, API host, tenant ID, and admin host.
Important Note: this is developer-facing configuration, not something a content editor would typically touch.