Graphic Buttons
The component to highlight key contents and enhance the SharePoint site's aesthetics.
Last updated
The component to highlight key contents and enhance the SharePoint site's aesthetics.
Last updated
Graphic Buttons is a dynamic and visually appealing web part designed to attract the user's attention and enhance user engagement. The component allows you to create customizable buttons with eye-catching graphics and intuitive functionality. The key features of Graphic Buttons include:
Customizable design: you can add images to your buttons for enhanced visual appeal and recognition, as well as customize the color of the title.
Easy navigation: you can link your buttons to any internal or external URL, making it simple for users to navigate to important pages, documents, or resources. You can also configure buttons to open links in the same tab or a new tab.
Interactive elements: the web part includes hover effects and animations to create a more interactive and engaging user experience.
The Graphic Buttons web part can be used to present company values, promote significant initiatives, or highlight important actions, such as registering for events, submitting forms, or downloading materials.
Explore the advantages of Intranet.ai Graphic Buttons by clicking here to learn more.
If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
Click on it and, in the web part search box, enter Graphic to quickly find and select the Graphic Buttons web part.
In this section, you need to specify the list which serves as data source for this web part.
Enter the site URL: enter the URL of the site where the list is located.
Select the list where to take photos: select the Graphic buttons list from the drop-down menu, which shows you all the lists available on the site.
As mentioned above, you can associate each button to an internal or an external link, so that it takes you to a page, a document, or a resource. In this section, you can decide whether to open the links in a new page.
The default option is No, but you can switch it to Yes. This way, each link will be opened in a new page.
In this section, you can set a number of display options.
Do you want to activate scrolling?: if you activate this option, a scrollbar appears on the right-hand side of the web part. If you select Yes, the Enter webpart height option becomes available, which means that you can choose the height of the web part. This way, you can set a fixed height and scroll up and down to see contents. This may be useful if you have a lot of buttons and you don't want the web part to take up much space.
Enter webpart height: as described above, this option allows you to choose the height of the web part, which is measured in pixels.
Do you want to turn off the entrance animation?: by default, the web part includes an entrance animation, but you can deactivate it with this option.
As explained above, the Graphic Buttons web part retrieves information from the Graphic buttons list. This section describes the steps to fill in the Graphic buttons list.
First of all, click on the Settings icon on the top right of the page, then click on Site contents.
Scroll down and select the Graphic buttons list.
When you click on New, a panel appears with a number of fields to fill in. The fields marked with asterisks are the mandatory ones.
Title: enter the title of the button.
Order: enter a number to decide the order in which your buttons will appear.
Url: enter the link to the page or resource that will be opened by clicking on the button. In this example, the field contains the URL of a video.
Title position: choose the title position from the drop-down menu, which includes two options: top or bottom.
Card size: choose the button size from the drop-down menu, which includes three options: small, medium or large.
Short description: here you can write short description. You will see the description when mousing over the card.
Image: upload the picture that will be displayed on the card.
Visible: tick the checkbox to make the button visible.
Subtitle: here you can enter an optional subtitle. The subtitle will appear under the title.
Title color: thanks to this field, you can customize the color of the title. By default, the title is white, but you can enter the name of a different color here. Please refer to this list of HTML color names.
When you're done, click on Save.
You can add as many buttons as you like. The example below is taken from a departmental page: here, five Graphic Buttons are used to present the values of the department in an attractive way.
Click on the Edit button on the left of the web part to open the property pane, which has three sections: General settings, Photo settings, and Display settings. See below for more information on each of these sections.
