An introduction to the page builder editor

Overview

ProudCity Pagebuilder is an advanced editor that allows you to design and structure your content by adding widgets and elements to a page. We also have a layouts option that has pre-built pages. The pre-built layouts are organized based on the page destination or purpose and can be customized with the page widgets to suit your specific needs.

Visual editor vs page builder

The visual editor has text and embedded media which is the extent of the page element customization.  The most common way of identifying if the page is built with the page builder editor is if there are recognizable uses of widgets, such as icon sets, image sets, document list, and so on.

Visual editor –

• Example page: City council meeting video

Page builder editor

• Example page: Community

Example

In our ProudCity demo site, our home page is built using the Page builder editor. To view a full list please read the Pre-built page layouts article, it teaches you how to use the function of the layout while listing all the pages that use the page builder editor.

Steps

1. Go to the dashboard
2. Click on ‘Pages’ on the left navigation bar or the ‘Pages’ icon
3. Click ‘Add New’
4. Add page title
5. To enable the page builder editor click on the ‘Page Builder’ tab.
6. If you do not have the option to click on the ‘Page Builder’ tab, the editor has been enabled.
7. Get to know the interface

Add Widget	Widgets are blocks of content that can have specific styles and functionalities.
Add Row	Rows add structure to your page.
Layout	Pre-built page layouts can easily be inserted into a new or existing web page. The page widgets in each layout can then be customized to suit your specific design and content needs.
History	Lets you restore the previous version of the page.

 

Construct the structure of your page

The add row bottom constructs the layout of the row, it can be split into a number of columns. This allows you to reserve blocks of spaces on the page to then customize with widgets based on your designed structure.

1. Click on the ‘Add Row’ button the page builder editor bar
2. Insert the number of columns in the first field
3. Select from the drop-down menu, the ratio of your columns
   • Notice how your columns alter in size with the different ratio options to help you visualize the exact size of each column.
4. Pick the direction in which the ratio split should be applied from the drop-down menu with the default text ‘Left to Right’.

Use widgets

In order to use the widgets, they all require you to enable the page builder editor.

1. Click the ‘Add Widgets’ tab on the top editor bar
2. Select from the list of widgets.
3. Once selected, hover over the widget and click ‘Edit’.
4. Below is a table of the widgets and the steps to take.
   •  Please note that some widgets serve to display content that was created in a different admin functionality. For example, events, news, documents, and contacts require creating categories and items for the categories, which will then appear on the page when using a list widget. The steps covered are here to help you understand what to fill out when selecting the widget to make it visible on the page. Feel free to check the articles listed to understand the full cycle of creating documents, events, news, and contacts.
     • Document list widget- How to create and list a document
     • News list widget – How to create a news post
     • Event list widget – How to create  events
     • Contact list widget – How to create contacts

 

	Add widget title Select the answer categories to display on the page Select display style Select sort By Select sort order Click ‘Done’ This widget is used For a detailed guide, read the ‘How to create and list answers’.
	Add audio title Click ‘Add Audio’ Select from the media library Click ‘Done’
	Prints out page header information above with breadcrumb. Important! if placed as the first item in a page with this checked, the normal page header region and sidebar menu will be hidden. Checkmark ‘Yes’ Click ‘Done’
	Add widget title Checkmark which event categories to display Click ‘Done’
	Add widget title Add Code – usually the code is wrapped in <iframe> </iframe> tags. Click ‘Done’
	Add widget title Select the ‘Stacked’ or ‘Pills’ format Select the contact categories to show Insert the page that lists the contacts information for Agencies Insert the page that lists contacts, including a filter for categories
	Add widget title Checkmark the contact category to display Select the display style Insert a number of posts to show in the ‘Number of post to show’ field. Enter 0 for all staff members to show under the selected category type or select a specific amount to list. Select sort by Click ‘Done’ For a more detailed guide, please read the article, ‘How to create contacts’.
	This widget is used in conjunction with the ‘Content list filters’ widget Add a title to the content list widget Select the content type from the drop-down menu Select ‘Display style’ Insert the number of posts to display, if all should display, insert 0 Click ‘Done’ Now add the ‘Content list filter widget.
	The content list filter is used in conjunction with the ‘Content list’ widget. Before adding the widget, make a row with 2 columns, with a ratio of thirds and going from right to left. Place the content list filter on the left column and the ‘Content list’ widget on the right column.
	Add widget title Type in the contact name in the ‘Contact Name’  field Insert the ‘Contact email or form’ Insert the ‘Contact phone’ Insert ‘Contact FAX’ Insert the ‘Contact hours’ Add social media links in the ‘Social Media Networks’ section
	These widgets are placeholders for the department template. To create a department please read the article ‘ How to create a department in your ProudCity powered government website’.
	Add a title to the department list widget Select ‘Display style’ Insert a number of posts to show in the ‘Number of post to show’ field. Enter 0 for all departments to show. Select sort by option Select the sort order Click ‘Done’
	Add document widget title Pick the category(ies) to display Select display style Insert a number of posts to show in the ‘Number of post to show’ field. Enter 0 for all documents to show under the selected category type or select a specific amount to list. Select sort order, either ‘Ascending’ or ‘Descending’ Click done To add a document and the document category follow the steps in the ‘How to create documents’ article.
	Add document name on the widget title field. Add document URL to the ‘Document ID’ field.
	Add widget title Select the event categories to display Select the display style Insert a number of posts to show in the ‘Number of post to show’ field. Enter 0 for all events to show under the selected category type or select a specific amount to list. Click ‘Done’ To learn how to create an event and more details as to how to use the event list widget, please read the article ‘How to create events’.
	Add a title to the Facebook page embed widget Add Facebook Page URL Checkmark the tabs to display Insert height, start with the default of 2000 and then resize to your liking.
	Select form from the drown down menu. Checkmark if the form should display as a drop-down This widget is only to display a form not create one.
	Add a title to the gallery widget Click ‘Add Images; Click on the ‘Uploads files’ tab or the ‘Media Library’ and add images. Select the images for you gallery Click on ‘Create a new gallery’ Add captions  Click ‘Insert into Gallery’ Click ‘Done’
	For a detailed guide on how to use the Hero unit, view step 10 on the ‘How to create a department’ article’.
	Add link title Add link URL Add icon Click ‘Done’
	Add widget title On the Icons 1 tab, add Link title Link Url Select Icon Select Add Another Repeat steps 2-5 until you have finished your set Click ‘Done’
	Click on the ‘Choose Media’ or ‘Image Search’ and insert image Select image size Select image alignment Select title alignment Add alt text If the image needs to be linked to a page, add a destination URL Check/Uncheck, ‘Open in a new window’, ‘Bound’, ‘Full Width’ Click ‘Done’
	Add the title for the image set in the ‘Widget Title’ field Select display type Select the column across option (How many columns to display) On the image item 1 tab, insert link title Insert URL for the link Click ‘Select image’ Click ‘Add Another’, and repeat steps 4 -6, until you have inserted your set Click ‘Done’
	Add a title to the job list widget Checkmark the job categories that should display Select the display style Insert a number of posts to show in the ‘Number of post to show’ field. Enter 0 for all jobs to show under the selected category type or select a specific amount to list. Click ‘Done’
	Add a title to the meeting list widget Checkmark the meetings categories to display Select the display style Insert a number of posts to show in the ‘Number of post to show’ field. Enter 0 for all meetings to show under the selected category type or select a specific amount to list. Click ‘Done’
	Add a title to news post list widget Checkmark the news post categories to display Insert a number of posts to show in the ‘Number of post to show’ field. Enter 0 for all news posts to show under the selected category type or select a specific amount to list. Select sort by option Select sort order option Click ‘Done’
	Drag the widget to the first row of the page builder layout.  This widget does not have any editing options because it pools the information from the page title field above the permalink.
	Select either ‘Google’ or ‘WordPress’ Select zoom level from the default zoom level dropdown  Checkmark the ‘Render map with fullscreen options?’ ( Checking this box will allow users to click on the map to enter full-screen mode.)
	Enter the RSS feed URL Give the feed a title (optional) Select from the drop-down the number of items to display Checkmark the option to, display item content, item author if available or item date.
	Checkmark the tabs that should display on the Service center application Checkmark the ‘Answers’ content that should display Click ‘Done’
	Add a title to the submenu widget Select the ‘Menu to use’ by clicking on the drop-down option Select format Click ‘Done’
	This visual editor is your standard WYSIWYG editor and the simplest editor for just adding content to a page. A quick detailed guide on how to structure content
	Add a title to the twitter widget  Add handle – @username. For example,  @getproudcity. Insert height, start with 2000 and then adjust to your liking. Click ‘Done’
	Add a title to the video widget Click ‘Add Video’ Click on ‘Insert from URL’ tab and insert the video URL. Click ‘Add to widget’

Pre-built layouts

We have an article on how to use Pre-built layouts. Provided is a list of the pages that can be created using the pre-layouts.

• Homepage
• Landing page
• Connect page
• Directory page
• Contact page
• Events page
• News page
• Government page
• Services page
• Service page
• Watch live page
• Division
• Department document page
• Department FAQ page
• Department staff page
• Public meeting category homepage
• Public meeting category archive

Do’s and don’ts

Do

• Add page title widget.
• Label each widget with a  title to structure your content.
• Use the ‘text’ widget if you want to add text content with your familiar visual editor tools

Don’t

• Forget to save the page after you’ve customized a widget detail.
• Add department widgets to a page.
• Forget to configure your widget details if you use prebuilt layouts.
• Add Department hours, Department menu, Department social media to a page, these belong to the ‘Department’ template.

Resources

• A quick guide to government website content structure
• A quick guide to government website images
• Content style guide
• Conscious style
• Pre-built page layouts
• How to use pre-built layouts to quickly build a page
• Page builder documentation
• List of how-to articles
• How to create a news post
• How to create events
• How to create contacts
• How to create documents