928-523-1741
marketing@nau.eduPanels lite
When to use this block
The “Panels lite” block could be considered a simplified version of the “Panels” block. It offers a similar display result but lacks all of the nitty gritty settings that may feel overwhelming for some content. It’s used to display information that includes a heading, paragraph, image, and link – all are required for the use of this block.
Below is an example of the block applied to this page, and it’s content includes links to other useful examples of varying ways “Panels lite” displays information.
Examples of this block and its features
Example 1
Follow the link to see an example of a page that stacks two separate “Panels lite” blocks. With this layout choice, these panels are only viewed as “stacked”. Another unique setting here is that the top “Panels lite” block is set to “Switch horizontal layouts” which alternates the horizontal order of photo and text.
Example 2
If you follow this link, you can see an example of a “Panels lite” block that utilizes it’s maximum number of panels in one block (4), and is set to “Link Panels” which displays a vertical orientation of photo and content.
Video Tutorial
In this video, we will discuss the implementation and use of the Panels lite block.
Watch the video tutorial: Panels lite block
Self-guided tutorial
Setting up your block
To begin building your panels lite block, first open the block by selecting the small black box with a plus sign and search for and select “Panels lite.”
You will be presented with multiple customization options for the panels.
Panel type
First, you may decide whether you would like a “Link Panels” format or an “Article Panels” format.
The Link Panels format is a horizontal display, with the image on the left and copy box on the right. In the horizontal format it spans the width of the right side content container. This format is great for one or any odd number of panels.
The Article Panels format is a vertical display, with the image on the top of the copy box. The vertical display is great for two or any even number of panels.
In this example, we will demonstrate both display types. Let’s select “Link Panel” for now.
Headline
You may also include a headline for the panels. Headings help users and search engines to read and understand text on your page. You can customize the headline further by selecting the appropriate headline level (h2, h3, or h4). Please note that these do not replace panel titles, as you may input a title in the textbox beneath the headline level selection.
Layout Options
In the Layout option, there are a couple of options for you to consider:
- Reduce space below this block and
- Switch horizontal layouts
The “Reduce this space below this block” indicates whether you’d like 40 pixels of spacing below your block. An unchecked box will add 40 pixels of space, so a checkbox will reduce the space between this block and the next block.
The “Switch horizontal layouts” is a stylization decision. An unchecked box will display your images all left of the text. A checked box will display images switching from left to right of the text box.
Let’s check both boxes for our initial example.
Initial Panel Color
Finally, you can select a color you would like your text box to be. We will select twilight blue.
Now that our block is set up, let’s start adding our content!
Content section
Here we will add the title, sentence or paragraph content, a link, and an image.
- Add “Title 1” in the title box
- Add Lorem Ipsum in the paragraph box: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”
- Add www.nau.edu to the link and add “Learn more” to the link text
- Select an image for the block
- Repeat the above steps 2 more times
Review your work
Don’t forget to click Save Draft to save your work and preview your edits.
You can see in this example the image is to the side of the text box and flips from right to left every other panel. The panels are displayed stacked one on top of the other on a desktop and tablet screen size, but on the mobile screen size, the image automatically disappears, but the blocks to stay stacks one on top of each other.
Adjust the browsers size to show the display from desktop to mobile.
The desktop, tablet, and mobile breakpoints are dynamic and automatically adjusts its display based on the device screen size in order to streamline the experience for both publishers and users.
Adjusting your settings
Now let’s see how the display changes when we select “Article Panels” and uncheck the switching horizontal layouts.
Select the Article Panels toggle and uncheck the “Switch horizontal layouts” checkbox. Click save draft and preview in a desktop.
You can see that the Article Panels setting features a vertical panel display, with the image on top of the text box in the desktop view. But as we adjust the screen size to a tablet, [adjust the browser size to tablet] the panel’s lite block automatically adjusts to a horizontally stacked display. And we will see another adjustment for mobile. [Adjust the browser size to mobile]. The block automatically shifts to a vertical slider offering a better display for the smaller screen size.
Once a decision is made on your preferred display for your page, save and submit your work to the Workflow.
