Z Pattern
For use in Full-Width containers only.
Direct user attention effectively by arranging key content along the z pattern, ensuring smooth navigation and engagement.
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
Widget 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.
Do NOT:
- Use two z patterns back-to-back
Written instructions
1. Open the page you want to add the Z Pattern to.
2. Click on +Add widget.
3. Find the Z Pattern under CMU widget and click "Select."
4. Click "Create content."
5. To add your first image, click on the + under the Top Left Image field.
6. Click "Select an image from library."
Note: Your image should be either 1600x900 or 800x450 (16:9 aspect ratio).
7. Find the image you want to add to your page and click on it.
8. Click "Use selected."
9. Add your text to the Z Pattern by clicking on the content field under Top Right Content.
10. Repeat the process to add text to the Bottom Left Content area.
11. Add an image to the Bottom Right Image section by clicking on the +.
12. Once you've added in your second image, click on "Save."
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.
