The Page Builder is the editing environment you will use to build and edit custom web pages and your home page. The Page Builder screen has three (3) sections:
- Header/Footer - Options to save the version, preview the custom page, maximize the editor and cancel your changes.
- Canvas - The blank slate you will use to build and edit your custom pages by adding rows, then adding text, photos and other content.
- Toolbar - All the editing tools you need to format content you add to your custom page.
Page Builder Toolbar
Select and hold the dotted section at the top of the toolbar to move the toolbar around the screen.
Configuring the Layout of Your Custom Page
The layout of your page is customized using Row Templates. Each row contains one or more cells of various widths. Later, you will add content to each cell. For a description of each Row Template.
In this section, we will add rows to create a layout, then add various types of content to the cells in each row, including different widgets, text and images. Steps 2-5 of this guide can be completed in any order.
In the Page Builder Toolbar, select Row Templates. A new pop-out menu will appear containing two tabs:
- Blank Rows - Rows containing blank cells. You can add your own content into these cells, including text, pictures and widgets.
- Combinations - Pre-configured combinations of commonly used content boxes.
Adding a Row
In the Row Templates menu, select the row to add and drag it into your canvas.
Repeat this action with as many Row Templates as you need to configure the layout of your page. In this example, we are creating a custom page for a Board President election with several different row combinations.
Quick Row Tools
The left-hand side of each row has a dotted section you can select and hold to drag the row to a new position, or to select a row for editing a style. Other rows in the canvas will automatically shift to accommodate the moving row. You also have a Visibility icon that allows you to quickly toggle through visibility settings for the row.
Row Visibility
The visibility of each row you add is initially set to Everyone by default. Select the Visibility icon (Everyone) to change to:
- Public - Only non-members and members who are not logged in can see this row.
- Members Only - Only logged-in members can see this row.
- Hidden - This row is only visible in when editing the page, or previewing the page as an administrator.
Add a Widget to a Cell
Each row you add contains one or more cells.
- Add a Widget to a Cell: Select a cell to view the Widgets pop-out menu in the Page Builder Toolbar. When you select a row or a cell, the item you select will have a light blue shadow to indicate it has been selected, and any changes you make will be applied to that row or cell.
- Select and drag the widget to the cell. In this example, we will add a Text Over Background widget to create a banner for the top of the custom page. For a description of each Widget.
- Configure the Widget Image The Cell Tools pop-out menu in the Page Builder Toolbar will appear. Use the Action tab to add and configure the content in the cell. In this example, we will add the image to be used as the background and the text that appears over the background image.
Select Add Image to select an image for the background.- A new pop-up window will appear allowing you to search through your Web Graphics, Photos or upload a new photo from your local hard drive.
- In this example, we will use a photo in our Web Graphics library. Select Show Web Graphics to see the images saved to Web Graphics. Select the image in the preview pane.
- Details of the selected image appear on the right-hand side of the pop-up window, including the image name, URL and Alt Text. Select Save to use the selected image as the background for the widget and return to the Cell Tools pop-out menu in the Page Builder Toolbar.
Alt Text and Accessibility
Alt Text is used to add a description to images for those who are visually impaired and using a screen reader to access your website. When the screen reader reaches the image, it reads the Alt Text assigned to the image to provide a description to the listener. Consider adding Alt Text to your website images to make your website more accessible to users with disabilities.
Web Graphics and Photos
Your Web Graphics library can be found in the Control Panel > Website > Setup. Your Photo library can be found in the Control Panel > Website > Admin Functions. When you select Upload New Graphic, the new image is added to your Web Graphics library.
- Configure the Widget Text: In the Cell Tools pop-out menu in the Page Builder Toolbar, select Insert/Edit Text to add the text that will appear over the image. The Formatted Text Editor popup window will appear. Enter the text to display over the image, including any formatting such as text size, style and color. Select Save to save your changes and return to the Cell Tools pop-out menu in the Page Builder Toolbar.
- Select Apply Changes to add the content to the selected cell.
Add Text to a Cell
Each row you add contains one or more cells.
- Add a Text Widget to a Cell: Select a cell to view the Widgets pop-out menu in the Page Builder Toolbar. When you select a row or a cell, the item you select will have a light blue shadow to indicate it has been selected, and any changes you make will be applied to that row or cell.
- Select and drag the widget to the cell. In this example, we will add a Text widget to add election information to the custom page. For a description of each Widget, see Widgets. For instructions on adding other widgets, see Widgets.
- Configure the Widget Text: The Cell Tools pop-out menu in the Page Builder Toolbar will appear. Use the Action tab to select the text editor you want to use to enter text in this widget. For a description of each text editor, see Text Editors. In this example, we will use the Formatted Text Editor.
- Select Insert/Edit Formatted Text to add text to the cell.
- The Formatted Text Editor popup window will appear.
- Enter the text to display in the cell, including any formatting such as text size, style and color. Select Save to save your changes and return to the Cell Tools pop-out menu in the Page Builder Toolbar.
Add a Submenu to a Cell
In this example, we have a submenu configured that links to three separate pages, containing the bio of each of our three board president candidates. We will add this submenu to our custom page to allow users to quickly navigate to each bio from within the Election web page.
Submenus are used to group like items together, for example, a Resources submenu might contain links to your Document Library, FAQ page and Contact Us page. Submenus can be placed in your top-level menu that sits above your website (or on the left-hand side, depending on your layout). A submenu in your top level menu would expand to show all items in that submenu when you hover over it. A submenu can also be placed on a custom page to link to other items related to that page. Submenus can be configured in the Control Panel > Website > Setup > Menus.
- Add a Submenu Widget to a Cell: Select a cell to view the Widgets pop-out menu in the Page Builder Toolbar. When you select a row or a cell, the item you select will have a light blue shadow to indicate it has been selected, and any changes you make will be applied to that row or cell.
- Select and drag the widget to the cell. In this example, we will add a Submenu widget to add links to candidate bio pages to the custom page.
- Configure the Widget Menu: The Cell Tools pop-out menu in the Page Builder Toolbar will appear. Use the Action tab to select the submenu to add in this widget from the Choose Submenu drop-down list. Optionally, you can set a width for the widget. The default selection is Container Width where the widget fills the cell entirely. Select Apply Changes to add the widget to the cell.
Submenu Cell Tools
Apply a Style to a Row/Cell
Styles allow you to add a background color, border and other items to the cell to customize the look and feel. You can apply a style to one cell by selecting the cell, or to a row (and all cells within that row) by selecting the row. In this example, we will apply a style to the row containing our submenu and text widgets.
- Select the Cell/Row to Style: Select the row you will apply a style to by selecting the dotted section to the left of the row. The selected row will have a light blue shadow to indicate it has been selected. The Row Tools Pop-out menu will appear in the Page Builder Toolbar.
- Configure the Cell/Row Style: In the Row Tools pop-out menu in the Page Builder Toolbar, select the Style tab.
- Configure your desired style, including text and background color, border size and color. For a description of all style options, see Styles Each style change will apply automatically to the row or cell you have selected, so you can view your changes immediately.
Preview the Custom Page
Preview your custom page as you make changes to view your Custom Page from multiple perspectives.
- Select Preview from the Page Builder Canvas header to open a preview of your Custom Page in a new tab in your browser.
- On the Page Preview screen, select the device to preview:
- Desktop
- Phone (portrait mode)
- Phone (landscape mode)
- Tablet (portrait mode)
- Tablet (landscape mode)
- Select the perspective to preview:
- Public View - View the page as a non-member, or someone who is not logged in to your website.
- Member View - View the page as a logged-in member.
- Admin View - View the page as an administrator.
Save the Custom Page
The Page Builder includes a versioning system that allows you to keep multiple previous versions of a page. Versions are useful for backup, and to allow you to create several different styles of the same page, for example, to show to your Board for review.
- Save a Version of Your Page: At the top or bottom of the Page Builder Canvas, select the appropriate option:
- Save New Version and Continue - Save any changes you have made as a new version and continue editing the Custom Page.
- Save New Version and Exit - Save any changes you have made as a new version and return to the Versions Manager screen for the Custom Page where you can see and manage any previous versions you have created.
- Save, Make Active and Exit - Save any changes you have made as a new version, make the current version active, and return to the Versions Manager screen for the Custom Page.
- Cancel - Exit the Page Builder screen without saving your changes.
Active Version
The active version of your Custom Page is the version that appears to the public or your members (or both) when you add it to a menu. You can only have one active version of a Custom Page at a time. You can configure another version of the same Custom Page to be the active mobile version.