TABLE OF CONTENTS
Introduction
Znode includes a Page Builder that allows content managers to configure pages using drag-and-drop components and set component configurations without developer support. This article provides an overview of the Page Builder, explains the available components, and demonstrates how to configure them when building and customizing pages.
Components Overview
The Page Builder provides four main types of components:
- Layout Components: Control page structure and spacing. They define how content is arranged horizontally, vertically, or across multiple columns. Examples include Flex, Column, and Vertical Space.
- UI Widgets: Standard website elements such as text, headings, and buttons.
- Znode Widgets: Components that display Znode-specific data and visual styles, such as product sliders and banner sliders.
- Custom Widgets: Components created specifically for unique business needs. Initially, no custom widgets exist, but custom theme development may add them.
Using the Page Builder
To open the Page Builder when editing a page, select the “Page Builder” button in the upper-right corner.
- The left panel lists all available components, starting with Layout Components, followed by UI Widgets and then Znode Widgets. At the bottom of the left panel is the “Outline,” which displays components in a hierarchical format as they are added to the page.
- The center panel shows the styled page preview, including the header and footer (which are non-editable).
- The right panel shows the configuration options for a select widget in the center panel.
All components in the Page Builder are responsive and adjust automatically for desktop, tablet, and mobile displays.