NAU Gutenberg web theme FAQ

This comprehensive FAQ page was developed to address the most commonly asked questions regarding the NAU Gutenberg editor. This resource is designed to help you navigate and utilize the custom editor efficiently, and to ensure you have all the support you need to manage your site effectively and confidently.

As dedicated site stewards, you play a vital role in maintaining the integrity and quality of Northern Arizona University’s online presence. It is imperative that you follow the university’s web policies, procedures, and standards. By continuing to log in, you affirm your commitment to these guidelines.

To further support you, University Marketing’s web team is offering personalized 1:1 working sessions. These sessions provide an excellent opportunity for hands-on assistance. Whether you have specific questions, need clarification on certain aspects, or require help with complex tasks, we are here to assist you.

Page template questions

When should my page be info/internal versus a hybrid page?

The NAU Gutenberg theme websites have three templated pages:

Homepage: The homepage template is the site’s main landing page. Please note that there is only one per site. This is the only page without left navigation, and the homepage primarily uses full-width blocks to display its information. The homepage is the highest-level page on your site and should include information and links to other sections of your site, like Resources, About, and Degrees, for example.
Hybrid: Hybrid pages are considered a tier below a homepage and serve as another directional page for users to find the information. These pages use a combination of full-width blocks, left navigation, and indented right-side content. On hybrid pages, the left-nav floats over some of the full-width content. It is okay for the left nav to float over images in the full-width block, but it should never cover up any text.
Info/internal: Info/internal pages are the most common page style on NAU websites and are most often the page type you will be working on. Info pages are considered a tier below hybrid pages and provide users with the desired content they’re looking for. They always include a left navigation and all content is built within the indented right-side content block.

For more information about building a templated page and examples, visit Page Layouts.

What types of blocks can be used on which page?

There are various NAU and Gutenberg blocks that can be used on pages on the website.

The following blocks can be used on any template: homepage, hybrid, and info/internal.

Full-width image with text box block
Panels
Simple article with text
Combined stat block
Testimonial
Panels lite

The following blocks display and function best on hybrid or info/internal page templates:

Headline image wysiwyg
Tables
Gravity forms

I have multiple links as part of my content. Which blocks can I use for more than one link?

If you have multiple links that you would like to include as part of your content, there are a couple of block options you can use:

Full-width image with text box block has a link bank setting that can support 2-8 links. In addition, these links can be accompanied with short descriptions for additional context and information.
The full-width image with text box block can support two buttons.
Image wysiwyg blocks can support up to three buttons.
Panel blocks support one arrow link per panel, but the block can support up to ten panels.
You can add up to three call-to-action buttons on your page.

Page layout questions

Should I use separators or spacers in between content on the page?

The web theme was designed to incorporate automatic spacing between content features and blocks. It will be a rare occurrence for you to need a spacer or separator block.

If adding white space to your page is required, please use spacers instead of separators.

Spacers indicate a natural break between different content sections and make the page easier to read and scan, especially on homepage and hybrid templates.
Separators represent breaks between paragraph-level elements, not headings.

Left navigation block questions

What is the “request info” button in the left navigation block?

The request info button plays an important function in Northern Arizona University’s recruitment efforts. The “Request Information” button is included on every page. The purpose of the button is to ensure that no matter where a prospective student (undergraduate or graduate) is navigating on the website, they can click the “request info” button to contact enrollment management to get the additional information they need.

Please do not remove this button.

Is the contact phone number and email address customizable?

Yes. Phone numbers and email address can be customized on each web page’s left navigation.

If you have a specific email address and phone number you want to use, click the toggle button “Customize contact details” and input the desired telephone number and email address into the text fields.

If you do not toggle on the custom setting, the default contact phone number and email address will automatically populate the Admissions contact information.

How do I set manual anchors in the left nav?

In the left navigation block is comprised of anchors on the page. These anchors can be set up to function Automatically and Manually.

The Automatic setting pulls all the H2s on the page and automatically populate in the left nav and sets the anchors.
The Manual setting allows you to set custom left nav anchors. You’ll be required to manually add all left nav items and set all anchor links on each block. Be sure the HTML anchor you use is the exact same; otherwise, the link won’t work. The anchor fields are case sensitive.

Site stewards are highly encouraged to use the automatic setting for the left navigation.

Forms questions

Can I use Microsoft or Google forms on my website?

No. Microsoft and Google forms do not meet NAU’s web requirements.

Gravity forms is NAU’s preferred forms platform. Gravity forms is a WordPress plug-in that meets the security and accessibility standards. Gravity forms is user-friendly, mobile-optimized, and is highly customizable.

In addition, Gravity Forms collects and stores all form submissions directly in your WordPress site editor, making tracking convenient and offers easy editing.

For more step-by-step instructions on how to create a form or how to add one to a page, review the Web User Guide Forms for more information. Schedule a 1:1 session to learn how to view your form data and analytics.

Right toolbar editor questions

How do I access the right-side toolbar in the editor?

At the top right corner of the editor, click the gear icon to hide or view the right-side toolbar. This will enable you to toggle between the right-side toolbar settings and the Oasis Workflow settings. By default, the right-side toolbar should appear when you open the editor.

Image questions

The image on my page isn’t displaying correctly. How do I fix it?

If an image isn’t displaying correctly on the page, it could be due to a couple of reasons:

The image crops aren’t set.
The image cache is saving a different crop of the image.

There are a few ways to fix this:

Set/check the crops in the media library.
Empty your cache and hard reload.

For a step-by-step how to, please follow the How to crop images instructions in the Site Steward Channel.

How do I add an image to the top of the page?

The image at the top of a webpage is called the Featured image. This image displays at the top of the Page or Post ahead of the pages title/H1.

Featured images are required for all pages, and strongly encouraged for posts. To add an image, navigate to the right-side toolbar and click the button “Set Featured Image.”

Some tips for featured image photo selection include:

Photos used on NAU websites MUST come from the NAU Widen Collective.
Prioritize photos where subjects fit the frame. If a photo is too zoomed in, or if there isn’t sufficient clear space, people’s heads and faces will get cropped out of the frame on webpages. This is most severe on tablet displays.
Densely-populated images of people are often at risk of being cropped by image containers or floating boxes. Be sure to preview your page and check the photo display!

How do I add alt text to my image?

In accordance with accessibility guidelines and standards, it is required by law to add alt text to images on the website. You can add alt text to images either through the Media Library or by clicking the pencil icon on each image on your page.

How do I set image crops?

To set image crops, click the “Crop Featured Image” button in the right toolbar. Please consult the directions on the Site Steward Channel for additional details.

Panel block questions

Can I have multiple hyperlinks embedded in the panel block?

No. Panels block is designed to only support one link per panel and can no longer support multiple hyperlinks in the body copy. Instead, you can insert one hyperlink using the Panel Link field.

If you want to list multiple links for readers, there are a few other blocks you can use instead:

NAU simple article block quote
NAU headline image wysiwyg
NAU full-width link bank
Gutenberg bulleted list

What are the default panel breakpoint block settings?

Breakpoints need to be set for the panels block.

For mobile and tablet, panel breakpoints should be set to Stack, 16:9.
For desktop and XL, panel breakpoints should be set to Grid 4:3.

While there are exceptions, these defaults guarantee that the panels will resize and display correctly across various screen devices.

Full-width image block questions

How do I make the block full-width?

To ensure the full-width block spans across the entire screen, add the block outside of the left nav section blocks. For a hybrid page template, be sure to select “desktop right” in the display settings and 2/3 size so the block’s content does not get covered by the floating left nav.

Blog questions

How do I add an excerpt?

An excerpt provides a preview of each post on the main news/blog list page. This gives readers a preview of the news/blog story and entices them to click on the post to read the full story. If the excerpt is not filled out, it will auto-populate the first paragraphs from the post.

To add the excerpt, navigate to the right toolbar and scroll down to the “Excerpt” tab. The excerpt should be short yet descriptive and incentivize readers to click on the post to learn more.

SEO questions

How do I change the meta description?

To modify the meta description, scroll down to the bottom of the page editor to the SEO General settings. Meta descriptions work best when they are 160 characters (including spaces) or less. The SEO General settings are color-coded green to indicate you’re in the ideal character range, yellow if it’s slightly over, and red if it’s far too long.

By default, the meta title and meta descriptions will try to auto-populate the fields, but it may not select the most relevant content or it may cut off words or sentences.

Miscellaneous questions

How do I check how the page looks?

Click the Preview button. This will show you what the page looks like before being published. You can preview your page in desktop, tablet, or mobile views. This is also a way to check that your images are cropped and ensure the blocks are formatted correctly.

Can I hardcode code into blocks?

No. Adding code into the blocks can break them and negatively impact the display and functionality.

Can I change the block styles?

We encourage you to use the default block styles in the right toolbar, including color and font. The defaults provided follow NAU’s brand guidelines, as well as accessibility best practices.

How do I make hyperlink text descriptive?

Making hyperlink text descriptive is important because it tells users what to expect when they click on the link. Avoid using verbiage such as “click here” because it is not descriptive. It doesn’t prepare users for where the link will take them, and users may be hesitant to click on it.

Example: “Click here to learn more.” This link goes to the Department of Physical Therapy website, but this is not clear based on the sentence.

Instead, it should be written as: “Visit the Department of Physical Therapy to learn more.”

Can I use Zoom links on the website?

As part of best practices in collaboration with ITS, do not post public Zoom links on the website. Please use either Handshake, Eventbrite, or events.nau.edu to list your events. If you are not using the three listed platforms, then your Zoom room must have a registration page associated with it.

Please refer to the articles below for additional information.

ON THIS PAGE