928-523-1741
marketing@nau.eduPanels block
When to use this block
The panels block is one of the most commonly used in the NAU25 theme. With a variety of settings combinations, it allows for a unique and functional display of information. With so many settings and features, the Panels block is highly customizable.
Below are a few examples of the Panels block utilizing different combinations of settings.
Examples of this block and its features
Panels: Accordion
See in this example how the Panels block is set to display as an “Accordion” with drop downs. While this isn’t the only avenue to achieve this functionality, it is a great choice especially if the content in question has multiple categories.
Panels: Text
You are currently viewing the Panels block set up to display information in text blocks. In this specific scenario, this block is set up to organize these different examples in a “grid” layout. Check out this page which similarly uses the “Text” panel type, but contrarily organizes their content in a “stack” layout.
Panels: Photo/Text
For a more visual effect, the Panels block can be set up to incorporate photos.
Here’s an example of a page that uses this feature in a “grid” layout.
Here’s an example of a page that uses this feature with the “Group Layout” set to “stack” and the “Panel Layout” set to “Photo/Text vertical”.
Panels: Other options
There are a few more ways to display information using the Panels block.
See this example of a page that uses Photo/Text Panel block with the “Group Layout” set to “Tabs”. You can see this block repeated multiple times on the page, but the first instance of can be seen just below the “Communication Sciences and Disorders” full-width image with text box block.
Video Tutorial
In the video below, we will discuss how to properly set up the panels block on your web page. The panels block is the most versatile block in the NAU21 theme, and we will demonstrate all of the block’s unique features.
Follow along as the video instructs on how to use this custom NAU block’s settings to offer a variety of ways you can display information. Below the video, find step by step instructions for a self-guided tutorial option.
Watch the video tutorial: Panels Block
Self-guided tutorial
Before you begin building a Panels block, consider following information.
This block can display in four different configurations:
- Stack: displays the panels one on top of the other
- Grid: presents as a grid with two columns and 1-5 rows
- Tabs: displays a quick preview of the panel title
- Slider: shows the first panel and uses arrows to click through the content
These panels are very efficient if there are multiple pieces of information that need to be displayed together, such as quick-links or stories.
Setting up your block
To begin, click the small plus sign to add a new block and search for “panels” in the search bar. Select Panels.
The block is large and presents many custom choices. We will break these down into three sections: Above block settings, Panel’s content settings, and breakpoint settings
The initial settings at the top are the Above block settings. These settings are optional: color scheme, layout options, headlines, headline level and alignment, and a brief headline text. For our example we will fill in a few to demonstrate how they display outside of the panels.
The middle section of the panels editor is where we will add our content. In this section, the Panel type, Color scheme, Panel title, and Panel content are required.
Adding panels
Click the blue “add panel” button. You can add as many panels as you need for your content. We recommend no more than 10 in a single block.
We added 4 panels for this example. As we begin adding content to our panels block, we again are presented with more display options for each panel.
Determining Panel Type
- Text Panel: The simplest of the three types of panels, the text block is perfect for 1-2 paragraphs of information where no photo is applicable.
- Photo/Text Panel: This option indicates you’d like to include an image with your written content.
- Accordion Panel: The accordion option is effective when there is a substantial amount of information that all needs to be in one place, such as quick links.
You can use any order or variety of these panel types in creating your panels block. It all depends on the content you wish to add. For this video, we will show an example of all three.
Panel one
Let’s start by adding an accordion to our first panel block.
Add the following information to the first panel:
- Panel type: Accordion
- Color Scheme: Twilight light background
- Panel Title: Quick links for students.
Add 3 accordions by clicking the “Add accordion section” button. And enter the below information. Be sure to hyperlink each bulleted item but clicking the chain-looking icon.
Accordion 1
- Section header: Learn
- Column 1: Tools to learn more at NAU
- Bookstore (Hyperlink: https://www.bkstr.com/northernarizonastore/home)
- Library (Hyperlink: https://nau.edu/library/)
- LOUIE (Hyperlink: https://in.nau.edu/louie/)
- Student resources (Hyperlink: https://in.nau.edu/academic-affairs/guide-to-student-resources/)
- Techsupport (Hyperlink: https://in.nau.edu/its/help/)
Accordion 2
- Section header: Live
- Column 1: Make connections on campus.
- Clubs and organizations (Hyperlink: https://in.nau.edu/dean-of-students/clubs-organizations/)
- Student government: (Hyperlink: https://in.nau.edu/asnau/)
- Dining (Hyperlink: https://nau.edu/experience/flagstaff/dining/)
- Housing (Hyperlink: https://nau.edu/experience/flagstaff/housing/)
- Recreation (Hyperlink: https://nau.edu/experience/flagstaff/recreation/)
Accordion 3
- Section header: Join in
- Column 1: Work and play in Flagstaff
- Career events (Hyperlink: https://in.nau.edu/career/career-events-overview/)
- Student jobs (Hyperlink: https://in.nau.edu/career/student-employment/)
- Events calendar (Hyperlink: https://events.nau.edu/)
- Sport clubs (Hyperlink: https://in.nau.edu/campusrecreation/sport-clubs/)
- Greek life (Hyperlink: https://nau.edu/experience/fraternity-and-sorority-life/)
Panel two
For our second panel, we will use the Text panel.
Add the following information into the second panel:
- Panel type: text
- Color scheme: True-blue Background
- Panel Title: Connect at NAU
In the Panel content section, copy and paste the following content:
Whether joining world-renowned faculty working in their laboratory, finding a friend to climb a mountain, or just asking a peer mentor for recommendations on a class, club, or coffee, you’re never alone at NAU. We are built on a foundation of support, where access and success are available to all Lumberjacks.
Here at NAU, you’ll enjoy proven programs and resources that empower you to carry on more than 100 years of our traditions—and make them your own. We invite you to get involved, drawing strength from your community as you build a better tomorrow. No matter who you are, you’ll find the people and projects on campus that nourish you.
Panel three
Add the following information into the third panel:
- Panel type: Photo/Text
- Color scheme: Gold
- Panel Title: Make an Impact
- Photo: 2479_Grand_Canyon_20190717
- Panel link:
- Type: Arrow
- Select Link: https://nau.edu/impact/
In the Panel content section, copy and paste the following content:
NAU makes an impact in Arizona and beyond through our groundbreaking research and innovation, involvement with local cultures, emphasis on sustainable practices, influential alumni, and more. When you are part of the NAU family, you engage with broader communities—and you make an impact too.
Panel four
Add the following information into the third panel:
- Panel type: Photo/Text
- Color scheme: Green
- Panel Title: NAU Stories
- Photo: 2017_10_24_NAU_ELEM_EDUC138
- Panel link:
- Type: Arrow with text
- Select Link: https://nau.edu/stories/
- Link text: NAU community stories
In the Panel content section, copy and paste the following content:
In hundreds of ways, NAU is a connected community—providing Arizona Teachers Academy scholarships for future educators, creating innovative ways to help students reach their goals where they are, and offering first-generation and undeclared student opportunities to be endless.
Breakpoints
Now that all of our content has been added, we will need to select the breakpoint display for each device type: mobile, tablet, desktop, and XL.
Group layout
This section is where you will select your Grid, Stack, Slider, and Tabs setting. You will need to make this selection for each device type. We recommend a stack display for mobile and tablet devices. It offers the most readability for the smaller screen sizes. Grid, Slider, and Tabs are great options for Desktop and XL screen sizes.
We will add stack for our mobile and tablet example. And Grid for our first preview.
Set Mobile and tablet to Stack, and Desktop and XL to grid
Photo size
In these settings, we also have the opportunity to set the photo crops for each device: 1:1 (square), 16:9, 4:3, 4:1, and 2:3. We recommend 16:9 for mobile and tablet.
Set Mobile and tablet to 16:9, and desktop and XL to 4:3.
Panel Layout
You can also customize the panel layout setting for each device size: Photo/text Vertical, Photo/Short text vertical, Photo/text horizontal, Photo/text inset corner, or Photo/text inset floating.
Set all device sizes to Photo/text vertical
The remaining settings can be kept to their default settings.
Now that we have added all of our content and entered our setting options, we should save our work and preview the block.
Preview your work
Save to draft and preview in desktop view.
We can see in our preview, the grids are displayed in a 2×2 grid. The accordion is in the first panel, the text only is in the second, and photo/text in the remaining two panels.
Adjust the size of your browser, making it a narrow as it will do, to mimic the display of a mobile device.
When displayed on mobile, the panels become stacked, one on top of each other, per the settings we established in the editor.
Let’s preview another display option for our content.
In the editor, leave the mobile and tablet displays as the recommended settings, but change the desktop and XL Group layout to Slider, and photo size to a 4:1.
Adjust the desktop and XL setting: Group layout to slider and photo size to 4:1
Save your work and preview this display option.
You can see that two simple changes in the settings can change the appearance of the panels on the page. The panel now displays the accordion first, and slider arrows that we can click through to see the remainder of the content.
