[TUTORIAL] Component: Buttons – Circular Button Icons with Titles
1. First, select which area you would like to add this component into. In this example, we'll use Main Content.
2. Click on Insert Component.
3. Click on or filter by name for "1_Buttons – Circular Button Icons with Titles."
4. You'll see a preview of the component appear on the right-hand side.
5. Click on INSERT.
6. You will need to add an invisible section title to the top of this section for screen readers. Enter a headline that describes what kind of links a user should expect to find in this section. I'll enter "Exciting Experiences for Students" as an example.
7. Next, you'll select the heading H tag you would like to assign that headline. Unless you are using this section as the hero of your page (unlikely), you will likely want to keep this as the default H2.
8. In Link URL, I'll enter the first link that will show in the first row in First Group > Group 1.
9. You have the option to have this link open in the current window or a new one. We recommend any link going to the same site open in the same window, and any external link go to a new window, but you can set the target however you'd like.
10. We will now set up the background image in this first circle. You'll want to use an image that's at least 325x325. Click on the image chooser...
11. ...then navigate to an image I already uploaded to the website. If you need to learn more about how to upload images, please see our other help guides.
12. You'll see a preview of your image in the modal.
13. Click on INSERT.
14. In the image Alt Text field, add the alt text that describes the image. This should briefly describe its essential content and purpose that a user needs to know if they aren't able to see it.
15. The Title field will populate the text that overlays the image. Here, I'll type "Student Life."
16. That completes the first circle in the first row. Repeat the same steps from "Group 1" in "Group 2" for your second circle.
17. The "Second Group" section starts the second row of circle links.
18. Repeat the same steps as above to populate the two circles in this row ("Group 1" and "Group 2").
19. Finally, you'll populate the Explore Circle. This circle has a set background and should link to the main hub of your other links.
20. Since my links are all student life-focused, I'll link this to Student Affairs' main site in the Link field.
21. You have the option to have this link open in the current window or a new one. Because my example goes to another page on SBU, I'll select Same Window here, but you can set the target however you would like.
22. "Main Link for Section" is where you'll enter the text for the first line in this circle. I want my circle to say "Explore Campus Life," so I'll write "Explore" here...
23. ...and add "Campus Life" on the second line.
24. You can also rearrange circles within their respective rows (First Group, Second Group) with the up and down arrows.
25. You can add or delete circles in the row as well, but we recommend two circles in First Group and two circles in Second Group, plus the Explore circle. You'll see in this example that adding too many circles can cause formatting issues.
26. You can add a third circle in First Group, but the circles will not be staggered and as nice-looking as when you only have two circles in this row.
27. After completing all of your circles, click SAVE at the bottom of the window...
28. ...then SAVE again in the upper right of the page.
