The Slider Web Part displays visual content and text in a responsive and dynamic slide layout. Users declare the importance of each slide by assigning the order in which the slides appear. The Slider Web Part has different style options and customizable features to best match your community’s visual identity and brand.
Key features:
Easily display multiple slides within a site
Offers easy-to-configure styling for each slide
Supported in all types of views
Add the Slider Web Part to a Page
In the top right of your page click on edit
Click the plus button where you would like to add another section where you can add more web parts.
Please select either a section or a template to add within the new section.
Hover over the top area of the section until a gray line and plus symbol show and then click on it
Search for and select the Slider by Social Edge web part
Click in the section and click on the pencil icon
A menu will open on the right-hand side, please click open config panel.
Add as many slides as desired. Each slide supports a slide title, action button text, action button URL, and slide image URL. Please see the image below for an example of a Slider configuration.
To Add New Slides - click “Add Slide”
Slide Title - Set a title to display on your slide.
Action Button Text - Enter text to display for the call-to-action button within the slide.
Action Button URL - Enter the URL for the button - where the user will be redirected to once they click on that button, or anywhere within the slide.
Slide Image URL - Enter an image URL for your slide - this will be displayed behind the text and buttons on a slide.
Open Link in New Window - Please enable this if you would like the link for the button to be opened in a new window.
Advanced Settings Configuration Menu
Set your interval time. This is the number of seconds that a slide is displayed before a transition occurs..
Set the transition time. This is the number of seconds that each transition to a new slide will take.
Set the desktop height. This is the height in pixels that the slider will display on a desktop.
Set the mobile height. This is the height in pixels that the slider will display at on a mobile device.
Set the accent color. This is the color that will be displayed within the two buttons on your slide.
Set the background opacity. This will affect how opaque your background image will be on a slide.
Select Fonts from the web part menu.
Select a Font method from the below options for the following slider components:
Font selection
Basic Font: Choose from the browser default fonts (serif, sans-serif, cursive, and monotype) and global web-safe fonts used in your SharePoint community. If you select a Basic font, you can also configure the script type (Bold, Italic, etc.).
Google Font: you can select a font from those provided by Google. Begin typing to search for a specific Google font. Browse and preview the Google Fonts database here: Google Fonts.
Custom Font: you can import your own custom font by supplying hosted links to your font files. For cross-browser compatibility, please specify at least a woff or ttf font file.
Note: You are responsible for licensing and paying for that font
To copy an already configured Slider Web Part and paste it onto another page (to avoid having to reconfigure) - please click on the migrate configuration tab and click on copy to clipboard under the copy current config.
To paste in your Slider code - navigate to a new page where you would like to add a new Slider web part - add it to the page and click to edit the web part. Once you are editing the web part - enter your code within the add new config tab and click apply.
Publish the Page
When you are done making all changes scroll down and click save all within the web part configuration.
In the top right corner of your page you will then click publish (if your page has not been published yet) or you will click republish (if your page has already been published and you are making changes and want to republish).
Need support or want to talk to us? Please send an email to:
support@socialedgeoncuslting.com