| Table of Contents |
|---|
About the Content Quadrant Web Part
The Content Quadrant Web Part displays visual icons and information in a clean, grid layout. Configure multiple sections of information - easily filterable by tabs. The Content Web Part has different style options and customizable features to best match your community’s visual identity and brand.
Key features:
Easily display multiple sections with filters
Offers easy-to-configure styling
Supported in all types of views
Setup and Configuration
Add the Content Quadrant 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 Content Quadrant 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.
Configure the Content Quadrant
Configuring the Tabs
Configure multiple tabs for a content quadrant - to do - set a system name (used for configuration reference) and a display name (what is actually displayed to users). Please see the image below for an example of a configured Content Quadrant.
You are not required to save after editing each section, but we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.
Configure the Quadrants
Configure multiple quadrants - to add additional quadrants please click on add quadrant
For each new quadrant be sure to include:
Title - The title of your quadrant (to be displayed on the front end)
System Title - The title of your quadrant to be used for reference.
Description Text - The description to be displayed under the title.
Tab - Select the tab to be associated with the specific quadrant.
Learn More Button Link - Insert a link to be redirected to another area at the bottom of the quadrant.
Link Area - Select either a manual/ custom link with the associated text to be displayed or search and select a piece of internal content from your site.
Image Source - Select the type of image source you would like to use for your quadrant - either a custom URL to an image or no image.
Image Custom URL - If you choose to display an image - please enter the URL of the image to display.
Content Links Policy - Select if you would like the links to open in a new window or the same window.
Limit View by Custom Profile Field - Enter if you would like the specific quadrant to be limited to individuals with certain profile fields. This can be done with a combination of AND as well as OR statements.
Configure the Theme
Main Colors
Header Colors
Tab Colors
Quadrant Colors
Configure the Advanced Settings
Advanced Settings Configuration Menu
Set your Title Header. This title will be displayed at the top of the quadrant tile..
Set your Greeting Text This is the text to be displayed under the header
Check the box to ensure that this message displays - otherwise leave it unchecked if you would not like the message to be displayed.
Enable/ Disable the Collapsible Content Section and set a title.
Enabled/ Disable to Allow Linking to a Specific Tab. When checked, you can create a link from another page to open up a specific tab of the Content Quadrant tile by adding “?activeQuadrantTab={systemName}” to the URL. If the name is {career}, the tab with this system name will open when that link is accessed.
Enable/Disable to Allow Linking to a Specific Quadrant. When checked, you can create a link from another page to open up a specific quadrant of the Content Quadrant tile by adding it's system title to the URL: “?activeQuadrantTab={number}&activeQuadrant={systemName}” to the URL.
Enable/ Disable to Show the Header Image. This header image - if enabled to be displayed will be at the top behind the title and description. If this is not enabled - a color inherited from the default theme will be placed in the background.
If this is enabled - please enter an image URL
Configure Fonts
Select Fonts from the web part menu.
Select a Font method from the below options for the following accordion components:
Component
Regular Font
Bold Font
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
Migrate Configuration
To copy an already configured Content Quadrant and paste it onto another page (to avoid having to reconfigure) - please click on the migrate configuration tab and click on copy to clip board under the copy current config.
To paste in your Content Quadrant code - navigate to a new page where you would like to add a new Content Quadrant 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 aprt 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).
Support
Need support or want to talk to us? Please send an email to: