Website-Building Overview
When you create a website using Sites at Northeastern, you will have a new WordPress site hosted on CampusPress. Your site will use a WordPress theme developed by CampusPress called “Flex” which has been slightly customized by Northeastern University.
During the site creation process you will choose one of several templates as a starting point. Once your website has been created, you will have full administrative control over the editing experience within WordPress. This includes content, layouts and imagery.
To create content and layouts on your site, you won’t need to use any code. Instead, the page-editing process in WordPress is based on visual “blocks” which is a modern approach to building websites in a content management system. WordPress sites include many blocks from which to choose when editing a page or post.
Northeastern has also introduced pre-designed “block patterns” which are included on all Sites at Northeastern templates. These patterns were used to build the layouts and content on all Sites at Northeastern templates and were designed to help users spend less time building custom layouts and focus on content.
Templates
The term “template” in CampusPress simply refers to a website representation of the Flex theme to use as model for creating your own website. Before creating your site, we would recommend previewing one of the several template offerings on Sites at Northeastern.
Though each template option has a slightly different appearance, each one uses Flex as its theme. For example, the “Business Unit” and “Lab” templates don’t look exactly the same, but they both use Flex. Once you select a template and create your site, you will see that your new site looks the same as the template you selected.
Block Editor
Your new WordPress site uses the block editor to create and manage content. This editor, part of any modern WordPress editing experience, is how you will create and update content on all pages and posts of your website.
With the exception of the Northeastern-branded header and footer which are embedded as part of the theme, you have editing control over the content, layouts, navigation menu, and imagery on your site.
Each page on your site is made up of individual elements called blocks. Through the block editor, there are blocks for Paragraphs, Images, Headings, Columns, and many more features. For a full list of WordPress blocks to choose from, please visit the WordPress block list page. For more detail on using the block editor, please visit the WordPress block editor page.
In addition to WordPress blocks, CampusPress has, by default, activated a plugin on all sites called Coblocks which adds over 20 additional blocks to choose from in the block editor.
Northeastern Block Patterns
To help you get started building your website, Northeastern has created block patterns which are included on every Sites at Northeastern WordPress site.
In WordPress, a block pattern is a reusable collection of blocks arranged together into a saved layout that can be included as a section on any given page or post. The template pages on Sites at Northeastern were built primarily using these patterns which are described in the Theme Pattern Library.
These patterns are in their own repository on your WordPress site and can be added to any page or post. You can also create your own patterns.
Northeastern Block Patterns and Page Editing
Editing a page or post in the WordPress block editor gives you access to Northeastern block patterns as well as standard WordPress blocks.
When a block pattern is added to a page, it can be edited like any other piece of content. You can edit the pattern on the page and it only affects that page without affecting the original saved pattern itself.
Summary of Terms
Theme
All new sites created via Sites at Northeastern use the Flex theme by default.
Templates
Within the Flex theme are several different templates from which to choose. Each template provides a different view of layouts and content
Blocks
Blocks are the individual pieces that comprise your pages and posts in WordPress. Examples of blocks include Paragraphs, Images, Headings, Columns and many more. For a full list of WordPress blocks to choose from, please visit the WordPress Block list page.
Block Patterns
A block pattern is a reusable collection of blocks arranged together into a saved layout that can be included as a section on any given page or post. Your site includes many pre-designed Northeastern block patterns that can be added to any page or post.
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 the Kernl theme. 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
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 “Update.”
Click on image to enlarge
