Design

The article, ‘An introduction to the page builder editor in your ProudCity powered government website‘ helps you understand the editor in detail. There are many ways to design a page with the page builder editor and we do not cover those in the article, but if you want preformatted pages, the ‘How to use pre-built layouts to quickly build a page’ article might help best.

1. Hover over the ‘Hero unit (page builder)’ widget and click edit.
   • 
2. Simple heading displays a clean design and is good for landing pages
   • Select the ‘simple heading’ bullet
   • Leave the ‘Text’ field as <h1>How do I add a simple style background to the page header?<h1/>
   • Click ‘Done’

Customizing colors on your ProudCity powered government website is easy. Here’s how.

Customizing fonts on your ProudCity powered government website is easy. Here’s how.

Use the document list widget to display documents as a list on a web page. The document list widget allows to list documents by document type.

1. Navigate to an existing page or create a new page
   • Note: You should know you are on a page when the admin bar on top states ‘Edit page’
2. Click ‘Edit page’
3. Enable page builder by clicking on the ‘Pagebuilder’ tab , if there is no option to click on the tab, the pagebuilder layout is enabled.
   • Note: In order to use the document list widget, pagebuilder has to be enabled
   • 
4. Click on the ‘Add widget’ icon tab
   • 
5. Add page title by selecting the ‘Page title’ widget
   • Note: You can scroll through the widgets or type in the widget name on the search bar.

   • 

6. Click on the ‘Add widget’ icon tab
7. Add the ‘Documents list’ widget
   • 
8. Hover over the document list widget and click edit
   • Add widget title
     • This can be ‘Documents’ if it is a department document page, since the page title widget will display the title as [Department] documents.  For example, The Administration department will have the page title ‘Administration documents’ therefore naming the list ‘Administration documents’ is redundant.
   • Pick the category(ies) to display
     • If the parent category is selected, it will also display all its corresponding  sub categories
   • Select display style
     • Documents are commonly  displayed in the ‘List View’ style but you can always go back and change the style that best matches your ProudCity site.
   • Insert a number of post to show in the ‘Number of post to show’ field
     • Enter 0 for all documents to show  under the selected category type  or select specific amount to list.
   • Pick ‘Sort By’
   • Select sort order, either ‘Ascending’ or ‘Descending’
   • Click done
   • 
   • 
9. Click ‘Update’
10.  Click ‘View Page’ on the top admin bar or  the permalink to view page
    •  Note: To go back into the page admin functionality click on ‘Edit Page’ on the top admin bar.
11. Finished, your documents will now be listed on the page!

Color is often an overlooked aspect of web accessibility, especially for brands and particularly governments, that have designed style guides and color palettes prior to accessibility becoming a priority. Learn more »

When choosing fonts and typography for your government website, it’s important to account for aesthetics and accessibility. Learn more »