3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

CampusPress Flex has been developed by the CampusPress team as an accessibility-ready theme with 100’s of layouts and customizations ideal for all sorts of sites including schools, departments, districts, organizations, magazines, and more using the block editor.

It includes several options for menus and navigation– including the ‘mega menus’ as well as built-in Google Translate integration and CoBlocks integration.

This guide shows how to create an elaborate website using CampusPress Flex and the block editor. CampusPress Flex is not intended to be used with a page builder like the Divi Builder as a page builder isn’t required and page builders can impact site accessibility.

Branding Elements

Flex provides complete control over all aspects of branding your site including your site title, tagline, logos, and more. The branding elements of Flex are changed using the Customizer.

To access the customizer go to Appearance > Customize or click on Customize in the admin bar.

Customize

Logo, Site Title, Tagline, Site Icon, and Site Title Font are changed or added using the General > Site Identity of the Customizer.

Site Identity

Once you are happy with the changes click Publish.

By default, no logo is set for your website. Instead, the Site Title and Tagline are displayed in the header.

Click Select Logo and choose an image from your Media Library or upload it from your computer. 

Select logo

Click Skip cropping to add the entire image or select the area of the image and click Crop image.

Click Skip cropping or crop image

Your Site Title and Tagline will be replaced by your Logo.

Logo added

The Logo Position and Logo Image Size is adjusted in Main Header in the customizer.

Logo position and logo image size

The background color behind the logo is adjusted in Main Header in the customizer.

Header

Under the Custom Background Color option.

Custom background color

A Secondary Logo could be used to display a Department logo when the main logo is used for the University logo.

Site Title

If you choose not to use a Logo, the text added to the Site Title field is displayed.

Site Title

Regardless of whether you use a logo or not, the Site Title should provide descriptive information about your website as this text is displayed in Google search results.

The site title text color, background color behind the Site title, and font size are adjusted in Main Header in the customizer.

Header

Using the Custom Background Color, Custom Logo Text Color, and Logo Font Size options.

Adjust text color, background and font size

Tagline

The Tagline is displayed by default if a logo isn’t added. The Tagline is displayed in a smaller font below the Site Title.

Tagline

Regardless of whether you use a logo or not, the Tagline should provide descriptive information about your website as this text is displayed in Google search results.

Site Icon / Favicon

The Site Icon (or Favicon) is used as an icon in browser tabs and as an image icon in the event that someone saves your website as a phone or desktop shortcut. The image should always be square and at least 512 x 512 pixels in size.

Site icon

Background Image

A background image can be added using General > Background Image.

Click Select Image and choose an image from your Media Library or upload it from your computer. 

Select background image

This image acts as the default background for your entire website anywhere that an image or color hasn’t been defined.

When Boxed Design is selected in General > Site Layout & Styling the background image is displayed outside of the boxed area.

Site Layout

Layout settings affect the site structure and width on desktop devices. All settings for layout can be found in Customize > General > Site Layout & Stylings.

site layout styling

Site Width

Settings for “Site Width” affect maximum width for Main Header, Footer, Pages, and Posts with a sidebar. It is recommended that Site Width be set between 860 and 1360 pixels.

Content Width

Settings for “Content Width” affect the maximum width on posts and pages without a sidebar. Width between 860 and 1360 pixels suits most visitors.

Layout Styling Content Width

Boxed Design

Enabling Boxed Design places the site content in a wrapper and displays the same widths for everything on the page, including Main Header, Secondary Header, and Footer. When enabled, a setting for maximum box width is shown.

boxed design

Roundness

The theme offers global settings for roundness on a few elements on the site. Roundness is applied to buttons, search icons, or certain widget items.

Roundness settings

Shadows

Various elements of the theme can also have blurred shadow effects and this setting affects the intensity of it. This is applied around the menu and footer, but also under buttons.

shadows setting

Animations

Animations can look great on certain websites, might be you like them! So, we included it. Once activated it applies different kinds of effects to elements as the element scrolls into view such as fade, flip, zoom, rotate, and so on.

Animation

Colors

CampusPress Flex simplifies the process of creating an accessible color scheme by automatically styling text and button colors when background colors are set. This makes it easier to set colors without having to worry about using the correct color contrasts.

The main color settings are changed in Customize > General > Colors.

Primary Colors

The primary color settings control the colors used in three areas of your site:

  1. Primary Background: The background color used in the main content area.
  2. Primary Accent: The color used to style various site elements like buttons.
  3. Highlight Accent: The color used to highlight important elements like primary buttons.
primary colors

A new color option is displayed in the Primary colors section if the “Box Design” is enabled in Customize > General > Site Layout & Stylings.

Secondary Background: The background color used under the main content area.

secondary background

Alternative Colors

The alternative color settings control the colors for:

  1. Alternative Background: The color used for your site’s header and footer.
  2. Custom Accent For Alternative Background: This color setting overwrites the primary accent color in areas that are using the Alternative Background color.
alternate colors

Other Colors

Content Boxes Background: This sets a background color for elements in boxes like Sidebars.

content box background

Other color customization can be set under the Main Header, Secondary Header, and Footer sections.

Main Header

The main header color is changed in Customize > Main Header.

Main Header

There are two color options for the Main Header:

  1. Custom Background Color: Changes the background for the Main Header.
  2. Custom Logo Text Color: Changes the color of the site title and tagline.

Secondary Header

The secondary header color is changed in Customize > Secondary Header.

customizing secondary header

Below is an example of a main header and secondary header being used with CampusPress Flex.

Header example

Footer

Footer colors are changed in Customize > Footer using the Background/Overlay color option.

Fonts

Available fonts are limited because loading too many fonts has a negative impact on site speed. CampusPress Flex includes some of the most popular web fonts chosen based on easy-to-read and works well on all screen sizes.

Default Font

The Default Font Family and Default Font Size for your site is set in Customize > General > Site Layout & Stylings.

This is where you can adjust your default font size.

Site Title Font

The font used for the Site title and tagline is set in Customize > General > Site Identity.

Font type

The font size of the Site Title is changed in Customize > Main Header using Logo Font size.

Navigation Font

Navigation Font Family and Navigation Font Size for your site are set in Customize > Main Header.

Headings Font

The font family and font size for your site’s headings are set under Customize > Elements > Headings.

Hero

If a Featured Image is added to a page or post it is automatically applied as the Hero Image.

By default, the hero image is displayed below the main header behind the post/page title.

Hero image

The Hero Image style is customized in Customize > Hero.

Customization options include Style, Content Align, Background Color, Featured Image Opacity, Main Header Opacity, Default Hero Image, and Breadcrumb Styling.

Sidebars and Widgets

Sidebars

Sidebars appearance and behavior is changed in Customize > Elements > Sidebars.

Sidebars

Design options are:

  1. Sticky Sidebars – Activating Sticky Sidebars will stick the sidebars to the top when scrolling. This will only work if the sidebar content can fit in the browser window.
  2. Boxed Design – When Boxed Design is enabled the sidebar content area will be enclosed in a box. The background can be customized in Customize > General > Colors under ‘Content Boxes Background’.

Widgets

Widgets can be added using the Customizer (Customize > Widgets) or via Appearance > Widgets.

In Appearance > Widgets you have access to all three widget areas. The Right sidebar widget area is used by default with single posts and pages that are listing posts. The left sidebar is used by default on pages.

The widget area displayed in the Customizer is controlled by the page you are viewing when adding widgets. For example, if you navigated to a page on your side while using the Customizer it would display an option to add widgets to the left sidebar and footer full widget area. If you were viewing a post or a blog post page you would see the option to add widgets to the right sidebar and footer full widget area.

Footer

Your footer area is used for content you would like to show at the bottom of all your pages such as a copyright notice, disclaimers, privacy notice, contact information.

The Footer is changed in Customize > Footer and includes an option to set Background/Overlay Color, background image, add a Reusable Block and add Custom Footer Text.

Background/Overlay Color

Here you are given the option to set a Background/Overlay Color, as well as a Background Image for the footer area if required.

Reusable Block

Another useful setting related to your Footer Area is the ability to add a Reusable Block from the dropdown menu under ‘Include Reusable Block’. 

With Reusable Blocks, you can expand your footer to include a visually rich content area that will display after any widgets used.

You can create a Reusable Block from your dashboard under Reusable Blocks > Add New.

Add new reusable block

Custom Footer Text

In the ‘Custom Footer Text’ field, you are able to add media content, as well as a text field for basic content.

Menus

Your navigation menus can be created by setting up a custom menu in Appearance > Menu.

Display Locations

CampusPress Flex includes the option to display custom menus in five different locations providing greater control and customization of your navigation menus.

Menu location

Once you’ve created a new custom menu select the display location and then click Save Menu.

Select display location

Google Translate

Google Translate can be added to your site using your navigation menu as follows:

1. Click on the drop-down arrow next to the Custom Links menu item in Appearance > Menus.

Custom links

2. Add # for the URL and Select Language for the Link Text and click Add To Menu.

Custom links

3. Open up the menu item settings for Select Languages and select Open Translate Dropdown from under the Custom Action On Click dropdown menu.

Select Open Translate dropdown

4. Select the Display location and click Save Menu once you’ve finished customizing your custom menu.

Menu Icons

CampusPress Flex includes an option to add an icon to your menu items.

You add an icon by clicking on Add/Edit next to the icon on the menu item setting for the item you want to add an icon to.

Add icon to menu item

A Choose Icon window launches. Select the icon you want to use, select if you want to hide the label so only the icon shows in the menu, place the icon before or after the label, the icon color, and icon background color then click Save.

Reusable Blocks Menu item (Mega Menu)

Reusable Blocks allows you to expand a menu link into a full-width visual display with images, video content, text and links to create a mega menu.

The About link in the custom menu in the image below was added using a reusable block.

Menu menu collapsed

When a site visitor hovers over About the mega menu loads.

Mega menu expanded

A Reusable Block menu item is created as follows:

1. Go to Reusable Blocks > Add New.

Go to Add New Reusable block

2. Add your title, add your blocks and click Publish.

Create your block

3. Go to Appearance > Menu.

Go to Appearance > Menu

4. Click on the drop down arrow next to reusable blocks menu item.

Reusable blocks menu item

5. Select the reusable block you want to add.

Select the reusable block menu item

6. Select Display location and click Save Menu once you’ve finished customizing your custom menu.

Pages and Posts

CampusPress Flex is designed for the block editor and includes co blocks plugin integration which adds over 20 extra blocks to the WordPress block editor. For best results we recommend pages and posts are created using the block editor.

Avoid using page builders like the Divi Builder as these can impact the accessibility of your site.

Sidebar Visibility

Sidebar settings for each post/page can be overwritten regardless of what is set on the customizer using the “Overwrite Sidebars Visibility” under the “Customizations” option in the block editor.

Only the footer area is displayed if Yes is selected for “Overwrite Sidebars Visibility” and no sidebar selected.

Sidebar visibility

Disable Page Title/Hero Area

You can disable the Page Title and Hero Area on a page or post in the block editor by selecting Yes in “Disable Page Title/Hero Area” under the “Customizations”.

Turn off hero image

Disable Top/Bottom Margins

You can disable the Top and Bottom Margin on pages and posts in the block editor by selecting “Remove Spacing” from the dropdown under “Custom Top Margin” or “Custom Bottom Margin” in the customizations options.

Remove spacing

Directory

CampusPress Flex includes the custom post type Directories that use to build staff directories, building directories, academic program directories.

You create a staff directory as follows:

1. Go to Directory > Add New.

Directory > Add New

2. Add the person’s name and their information, their phone number, their email address, assign the category and click Publish.

Add directory entry

3. Repeat the process to create a directory entry for each staff member using Directory > Add New.

4. Create a new page for your directory using Page > Add New once you’ve added all directory entries.

Create Staff directory page

5. Add your directory to the page using the Directory block.

Directory block

6. Click on the block to choose the filters to display and the fields to display and then click on Publish.

Customize the directory

CampusPress Flex is designed to work well with Advanced Custom Field Pro. Activating Advanced Custom Field Pro allows you to add as many custom fields as you want to the directory custom post type.

The alternative directory option is to add using Advanced Tables plugin.

Alert Notifications

Alert Notifications is used to a message that can be dismissed to the top of your site. This is very useful if for displaying alerts or messages.

Alerts are added using Customize > Content > Alerts.

Alerts

Content

In the Content container, you have the option to Add Media, as well as basic styling and a custom background color for the alert bar.

Alert content

Allow Dismissal

Toggling the ‘Allow Dismissal’ switch gives the option to dismiss the alert. The alert will reappear if a visitor has dismissed it if the content changes.

Allow dismissal

Popup With Alert

You also have the option to use a Reusable Block to display as a dismissible popup alert, by selecting the Reusable Block from the drop-down menu. Any content that is changed in the block will result in the popup showing up again.