Page Builder App

What is Page Builder?

The Page Builder app is a complex, yet flexible application built using an extensive web builder framework. It allows content managers to build a wide range of structures and types of content that are both responsive and accessible. The Page Builder app can be used to build small single bits of content, or complete, full pages of various structures, layouts, and types of content. It's even possible to edit content at each supported mobile viewport in WCM (768, 640, 480, and 320) as well as style each individual component using Style Manager. There's a wide range of possibilities offered in the Page Builder app.

This app is no longer available to buy. However, existing users will receive our continued support.

---

User interface

The Page Builder interface is made up of three main components: 

• Canvas 
• Tool bar 
• Panel bar

Canvas

The canvas is where you drag and drop your content. The available content is represented as blocks. When you drop a block into the canvas, it's rendered as a component, or set of components, depending on the type of block. The components are outlined with a light-grey, dashed border when de-selected and with a solid blue border when selected. Select a component in the canvas by clicking on it with your mouse. You can drag and drop your content to rearrange it as needed, clone content, and remove contents from the canvas.

Tool bar

The tool bar gives you access to the Device Manager and action buttons.

The Device Manager allows you to change the canvas viewport to one of the five supported WCM mobile views: Desktop, 768, 640, 480, and 320. You can view and edit the content as needed for the currently selected view. All styles set for each viewport are saved and applied to the front-end website.

Description of content types in the menus

Tool Bar Icon	Description
	Take a Tour: Tour the Page Builder story interface. The tour takes you through the high-level items step-by-step and gives you a quick demo into using the app.
	Undo: Undo the previous canvas action.
	Redo: Redo the previous canvas action.
	View Components: Toggle component borders on and off. All components in the canvas are outlined with a light-grey, dashed border when de-selected.
	Preview: See the canvas content as if it were the front-end website.
	Full Screen: Set the editor to full screen mode.
	Export Canvas: Export all components and  component styles in the canvas as a zip file. Share your canvas with other content managers and use it as a template from one Page Builder app to another.
	Import Canvas: Import a canvas zip file. Importing a file replaces everything currently in the canvas with the contents of the zip file.  Using the Import Canvas button replaces everything in your canvas with the import file content. Using the Import Component button adds contents from the import file into your existing canvas.
	Import Component:  Import a canvas zip file. Importing a component adds the contents of the zip file to the existing content in the canvas. Using the Import Canvas button replaces everything in your canvas with the import file content. Using the Import Component button adds contents from the import file into your existing canvas.
	Clear Canvas: Removes everything in the canvas.

Panel bar

The panel bar gives you access to four panels.

Description of content types in the menus

Manager Type	Description
	Style Manager:  Set styles for the selected component in the canvas. Hover and focus states can also be styled. Styles cascade so styles set for Desktop apply to all viewports, 768 styles apply to the 768 viewport and below, 640 styles apply to the 640 viewport and below, etc. Yellow styles are the default styles for the selected component. Not all components have the same styling options.
	Trait Manager: Many components have settings that allow you to customize the component. For example, when an image components is selected in the canvas, the alt attribute for the image is found in Trait Manager.
	Layer Manager: The Layer Manager provides a visual tree of the canvas. You're able to toggle each component's visibility, and drag and drop to re-order or nest.
	Blocks: All of the available content is represented as blocks. Blocks are made up of one or more components. For example, the Accordion Item is a single block but is made up of an accordion item container component with accordion button and accordion panel components nested inside. Drag and drop blocks to place them onto the canvas and start building content. Some blocks can be dropped into other components in the canvas to make more complex components, layouts, or structures.

---

Rich text editor

The rich text editor is an inline toolbar that displays along the top or bottom edge of a text component. The available text options are:

• Bold: Bolds the selected text.
• Italic: Italicizes the selected text.
• Underline: Underlines the selected text.
• Line-through: Strikes through the selected text.
• Link: Converts the selected text to a link. Click on the link to open Trait Manager where you'll set the URL and target.
• Indent: Indents selected text and unordered and ordered lists.
• Outdent: Outdents selected text and unordered and ordered lists.

---

Asset Manager

Asset Manager is where you'll upload and apply your images. Double click on an image component in the canvas and the Asset Manager displays. You can upload images, paste a url to an external image, or choose an existing image in the list. The Asset Manager pulls in images from the section level files and folders and from the root directory, no subdirectories. 

---

---

Structure blocks

Columns

Description of content types in the menus

Tool Bar Icon	Description
	One column: Group of HTML elements
	Two columns: Group of HTML elements
	Three columns: Group of HTML elements
	Four columns: Group of HTML elements
	Five columns: Group of HTML elements

Editable: No, you can't edit the columns.

Droppable: No, you can't drop other blocks or components inside.

Component Tool Bar:

Parent Selectable: Yes, you can select parent element from component.

Draggable: Yes, you can drag this component to other locations in the canvas.

Copyable: Yes, you can copy component in the canvas.

Removable: Yes, you can delete this component from the canvas.

Trait Manager Settings: No

Default Styles (doesn't include default browser styles): Yes

• 10 pixel padding
• 10 pixel bottom margin

Child Components: Yes

• Columns:
  • Component: Custom div element.
  • Editable: No, you can't edit the component.
  • Droppable: Yes, you can copy this component in the canvas.
  • Tool Bar:
    • Parent Selectable: Yes
    • Draggable: Yes
    • Copyable: No
    • Removable: No

Unique Documentation: No

Stylable: Yes, when double-clicked, some options are available via inline rich-text editor. These Style Manager options are available:

• margin-top
• margin-bottom
• margin-left
• margin-right
• padding-top
• padding-bottom
• padding-left
• padding-right
• border-top-width
• border-bottom-width
• border-left-width
• border-right-width
• border-style
• border-color
• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius
• box-shadow

---

Weighted columns

Description of content types in the menus

Tool Bar Icon	Description
	25/75 columns: Group of HTML elements
	33/67 columns: Group of HTML elements
	25/50/25 columns: Group of HTML elements
	50 centered columns: Group of HTML elements
	67 centered columns: Group of HTML elements
	75 centered columns: Group of HTML elements

Editable: No, you can't edit the columns.

Droppable: No, you can't drop other blocks or components inside.

Component Tool Bar:

Parent Selectable: Yes, you can select parent element from component.

Draggable: Yes, you can drag this component to other locations in the canvas.

Copyable: Yes, you can copy component in the canvas.

Removable: Yes, you can delete this component from the canvas.

Trait Manager Settings: Yes

• Wrap Columns: Sets columns to wrap and stack at 100% width starting at the set viewport. Default is Don't Wrap.

Default Styles (doesn't include default browser styles): Yes

• 10 pixel padding
• 10 pixel bottom margin

Child Components: Yes

• Colums:
  • Component: Custom div element.
  • Editable: No, you can't edit the component.
  • Droppable: Yes, you can copy this component in the canvas.
  • Tool Bar:
    • Parent Selectable: Yes
    • Draggable: Yes
    • Copyable: No
    • Removable: No

Unique Documentation: No

Stylable: Yes, when double-clicked, some options are available via inline rich-text editor. These Style Manager options are available:

• margin-top
• margin-bottom
• margin-left
• margin-right
• padding-top
• padding-bottom
• padding-left
• padding-right
• border-top-width
• border-bottom-width
• border-left-width
• border-right-width
• border-style
• border-color
• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius
• box-shadow

---

Generic container

Description of content types in the menus

Tool Bar Icon	Description
	Generic container HTML div element

Editable: No, you can't edit the columns.

Droppable: No, you can't drop other blocks or components inside.

Component Tool Bar:

Parent Selectable: Yes, you can select parent element from component.

Draggable: Yes, you can drag this component to other locations in the canvas.

Copyable: Yes, you can copy component in the canvas.

Removable: Yes, you can delete this component from the canvas.

Trait Manager Settings: No

Default Styles (doesn't include default browser styles): Yes

• 5 pixel top padding
• 5 pixel bottom padding

Child Components: No

Unique Documentation: No

Stylable: Yes, when double-clicked, some options are available via inline rich-text editor. These Style Manager options are available:

• font-family
• font-weight
• font-size
• font-style
• line-height
• letter-spacing
• text-align
• color
• text-shadow
• margin-top
• margin-bottom
• margin-left
• margin-right
• padding-top
• padding-bottom
• padding-left
• padding-right
• border-top-width
• border-bottom-width
• border-left-width
• border-right-width
• border-style
• border-color
• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius
• box-shadow