[TUTORIAL] Boxes – 3 Boxes with Parallax Background
1. Click on the section you would like to add this component to. In this example, we will be inserting it into Main Content.
2. Next, click on the Insert Component icon.
3. Click on or filter by name for "1_Boxes – 3 Boxes with Parallax Background."
4. You'll see a preview of it appear on the right-hand side.
5. Click Insert.
6. The first thing you'll add is the image path for your parallax background in the Parallax Image field.
7. Click on the file chooser...
8. ...and it will open to the image library we have for parallax backgrounds. You can use any of these, or upload your own in your site's _images folder.
To learn more about how to upload your own images, see our help article in the Images section.
For this example, I'll select one already in the image library.
9. After you click Insert, you'll see a preview of the background. Note that because this is a background image and for decorative purposes only, an alt field is not provided to describe the image for screen readers.
10. The next field is a hidden heading. You will need to use this field to tell screen readers what this 3 Boxes section is about. You can describe the section for screen readers here.
11. Next, you'll select the heading H tag you would like to assign for that hidden headline. Unless you are using this section as the hero of your page, which is unlikely, you will probably want to keep this as the default H2.
For more information about when to use different H tags, see our article on our Help Guides section.
12. Now we will populate "Group 1" to fill in our first box. First, we'll fill in the link the button will go to.
13. You can paste a URL into the field or, if you're linking to another page on stonybrook.edu, select the file chooser...
14. ...navigate to the page you want to link to...
15. ...select it...
16. ...and click on CHOOSE FILE.
17. You'll see it populates a dependency tag in the field. Dependency tags are handy because Modern Campus uses them to automatically republish any connected pages, keeping shared content up to date without manual updates.
18. If you plan on using a call to action like "Learn More" on your button for this box, you'll need to add an ARIA label here. An ARIA label is hidden text added to a button that gives screen-reader users more context.
It clarifies what "Learn More" refers to, such as "Learn more about faculty research," so the button is understandable when read on its own.
19. So in link text, I'll type "Learn More"...
20. ...then go back up to the ARIA label and add "Learn more about faculty research."
21. I have the option in Link Target to have this link open in the current window or a new one.
Because this goes to an internal website, I'll select Same Window here, but you can set the target however you would like.
22. Now we'll add the heading in Box Heading. I'll call this "Faculty Research."
23. Next, I'll select the Box Heading H tag I want to assign to that headline. This will most likely always be an H3, especially if the invisible heading set earlier is an H2.
24. Box Content will populate the description under the headline. I'll add some placeholder copy about faculty research here for now.
25. That completes the first box! You would click "Add New Group" and repeat the same steps we did in "Group 1" in "Group 2" for your second card.
26. To add more cards, you can click "ADD NEW GROUP" and add as many as you would like. Each card after 3 aligns left and stacks in columns.
27. You can also rearrange cards with up and down arrows once you have a few set up.
28. You can add...
29. ...or delete cards as well.
30. When you're done, click "Save" to preview your work.
31. The component will first appear as a blue band.
32. Hit SAVE on the top of the page...
33. ...then Preview...
34. ...and scroll down to check my work and make sure my boxes are set up properly.
35. Great job!