Button with Pop-up Content
The component to enrich your SharePoint intranet's pages without making navigation cumbersome.
Last updated
Was this helpful?
The component to enrich your SharePoint intranet's pages without making navigation cumbersome.
Last updated
Was this helpful?
This web part facilitates the promotion of corporate initiatives, showcases intranet features, and ensures convenient access to external websites through captivating new graphics.
You can personalize button icons to offer clues about their content, enticing users to explore further without navigating away from the current page. By hovering the cursor over the graphics, hidden information is unveiled.
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 Hover Button to quickly find and select the Button with Pop-up Content web part, which is named IAI-Hover button.
In this section, you can configure the icon and the title associated to the button.
Buttons are strategically crafted to grab users' attention, enticing them to delve into hidden content. The titles and icons are there to guide them to the information they seek, saving time that would otherwise be spent searching or navigating various pages on the website.
This section includes the following fields:
In the first field, copy and paste the link of the icon you want to use to illustrate the title.
Click on the Settings icon at the top right of the page, and then on Site contents.
Select the folder where you want to upload your icon (e.g., Site Assets) and upload the picture.
Select the image and click on the Info icon on the right of the top bar.
Go back to the page with the Hover button web part and insert the path of the icon in the required field.
Below is an example of an icon added to a button:
In the Title field, write the title of the button. The title appears to the right of the icon, as shown in the example below:
This section allows you to enrich your button with additional information, enabling users to explore further.
Here you can input the title of the back button and a text with additional information. Users will be able to read this text by hovering their cursor over the button. See an example below:
For further customization, a hyperlink can be added to the back button paragraph. This will encourage users to click the link and explore content. To insert a hyperlink, take the following steps:
First of all, write your text in the Paragraph field.
Choose where you want to insert the link (at the beginning, in the middle or at the end of the text) and copy and paste the following code:
<a href="https://www.google.it/" target="_blank" style="color:red; text-decoration:none">Clicca qui<a/>
Below is an example of custom text with a link using the following code: <a href="https://www.google.it/" target="_blank" style="color:red; text-decoration:none">Clicca qui<a/>
Alternatively, you can copy and paste an internal or external link into the Button url field. Users will simply need to click the button to access the link and explore content. Thanks to the Open on a new tab field, you can choose whether to open the link on the same tab or a new tab.
This section allows you to customize the different button colors. If you want more possibilities with respect to your graphic theme, you can modify the colors of the text and the background both in the front button and in the back button.
Do you want to customize colors?: this option allows you to choose and customize the colors of the front button. You can select the background and the text color by using the color picker or by entering a specific hex code.
See an example below with red background and black text:
Customize hover colors? : this option allows you to customize hover colors, that is to say the colors of the back button. You can select the background and the text color by using the color picker or by entering a specific hex code.
See an example below with green background and pink text:
When you are done, don't forget to publish your edits by clicking on Republish at the top right of the page.
Click the Edit button on the left of the web part to open the property pane and set options such as Front Button, Back Button and Colors settings. See below for more information on each of these options.
Select the Hover Button web part, then click Edit web part on the left side of the Hover Button web part.
Scroll down the window and copy the image path by clicking on the Path icon .
Select the Hover Button web part, then click Edit web part on the left side of the Hover Button web part.
= the link you wish to insert in your text.