Button with Pop-up Content
The component to enrich your SharePoint intranet's pages without making navigation cumbersome.
Last updated
The component to enrich your SharePoint intranet's pages without making navigation cumbersome.
Last updated
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.
Explore the advantages of Intranet.ai Button with Pop-up Content 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 Hover Button to quickly find and select the Button with Pop-up Content web part, which is named IAI-Hover button.
Please note, the button takes up the entire size of the SharePoint section.
Therefore, you need to select the section size choosing from the different layouts, and the button size will adapt accordingly, as shown below:
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.
If you're not in edit mode already, click Edit at the top right of the page.
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.
You need to upload the icon in advance to a folder on SharePoint Online, specifically in the Site contents of the intranet, where all users have access (see below).
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.
If you're not in edit mode already, click Edit at the top right of the page.
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/>
Highlighted in yellow are the sections to be modified according to your preferences.
https://www.google.it/ = the link you wish to insert in your text.
Red = the color you want to appear in your text. You can change the color by writing the appropriate color in English.
Clicca qui = Call To Action inviting the user to access the link. You can modify the CTA text as you wish.
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.
It is not possible to customize the color of the back button title.
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.
