CampusPress Flex Quick Start Guide

Using the CampusPress Flex Dashboard

Your Sites at Northeastern site comes with Flex, a visual page builder that works within WordPress to allow users to build sites without the use of code. The following section describes some of the basic features of the Flex builder.

Edit page from front end

Editing your site on the front end is not only easier, but it also helps you visualize how your site might look when published. Navigate to the page you want to edit and click on the Edit Page button to open the Visual Editor to start editing on the front end.

Click on image to enlarge

Adding blocks

The Flex Theme is based off of WordPress’s Gutenberg editor. By hovering over the page you will trigger a “+” icon. This affordance is used to add the preexisting blocks to your page. you can also add blocks by clicking on then large blue “+” icon in the upper left corner (example B).

Click on image to enlarge

Example A

Example B

Adding design patterns

Patterns are predesigned components that mimic those found in Northeastern’s design system, kernl(). The Flex theme uses patterns to help you quickly build pages that fit design best practices and Northeastern’s branding guidelines.

Click on image to enlarge

Previewing your work

Designing on the front end using the block editor is the best way to see how your site will look once published, but some components will vary between the editor and the live page. Before publishing your page, use the preview feature to see how it will look on desktops, tablets, and mobile phones.

Click on image to enlarge

A note on Editor vs Live views

The editor view can quite often be a much different visual representation of the design block than what you will see on the public facing site.

Click on images to enlarge

Editor View
Live View

Saving your page

Your webpage draft will automatically save as you make edits, but it will not be published and publicly viewable until you click “Publish” (or “Update” if editing an existing page).

Click on image to enlarge