Z-Pattern Layout
For use in Full-Width containers only.
Direct user attention effectively by arranging key content along the z-pattern layout, ensuring smooth navigation and engagement.
Z-pattern layout example
Find your favorite study spot
Relax at our gazebo, right next to the Clarke Historical Library, which has resources available to you. Enjoy campus while you study or unwind.
Explore our downtown
Take a walk or coast on a community electric scooter downtown and enjoy quaint shops and great local places to eat. Take a drive along Mission Street and find big-box stores and chain restaurants. There’s something for everyone in Mount Pleasant.
Visual demo
Layout standards
Do:
- Image size is 1600x900 or 800x450 (16:9 aspect ratio)
- Button (CTA) is optional
- Be mindful of copy length as extra copy and long H-tags will cause the images to stretch and skew the z-pattern balance.
- Videos are fine to be added in place of an image but be sure to use the YouTube Video Embed Widget instead.
Do NOT:
- Use two z-pattern layouts back-to-back
Written instructions
1. Navigate to your page. Click "Layout".
2. Scroll all the way down to "z-pattern-layout". Drag the layout into the full-width container.
3. Toggle back over to "Content".
Tip: Your page should look like this now!
4. Let's add content. Scroll down to "Content block" and drag and drop it into the correct area, labeled "Content Block Widget".
5. Scroll down to find "Image", and drag and drop it into the correct spot labeled "Image Widget".
Tip: Tip! If you would like to add a video to either of the "Image Widget" sections, use the YouTube Video Embed widget instead of the Image widget. Follow the usual process for the YouTube Video Embed widget here.
6. Click "Select image".
7. Click the "Search by title..." field.
8. Find your image! Ensure the image's title and properties/alternative text is filled in correctly. Your image should be 1600x900 or 800x450 (16:9 aspect ratio).
9. Click "Done selecting".
10. Click "Save".
11. Now let's switch gears to the content block. Click "Create Content" within the content block.
12. Add in your desired content and choose "heading 3" for the heading to be an H3.
13. If you would like to add a Call To Action, CTA/button, click the button icon here. This is optional!
14. To insert a button, make sure all of the following sections are filled in.
15. Click "Insert".
16. Click "Save".
17. You should see the button you added!
Tip: You have successfully filled in one set of an image and content block! Let's repeat the process for the other two sections to complete the z-pattern.
18. Click "Edit" on the content block to add content. Follow the same process above.
19. Click "Edit" on the Image widget to add an image. Follow the same process above.
20. Click "Save as Draft".
Save and send
- If you'd like to continue working on this page, but need to save your progress, click Save as Draft.
- If you're finished making changes to the page, and the page is ready for review, click Send for Approval.
