When you add a modern page to a site, you add and customize web parts, which are the building blocks of your page.
This all-in-one package is designed for organizations seeking to maximize productivity, streamline communication, and enhance user experience. Whether you’re building a corporate intranet, team site, or client portal, the Ultimate Web Parts Bundle provides the essential tools to make your SharePoint site stand out.
- Anniversaries
- Announcement PopUp
- Announcement Ticker
- Banner With News
- Banner With Text
- Employee Directory
- Employee Spotlight
- Forms & Templates
- Header
- Image Carousel
- List To Cards
- List to FAQs
- Org Chart
- Personal Greetings
- Timeline
- Video Carousel
- Video Stream
- WordPress News
Anniversaries: Celebrate Your Team’s Milestones
The Anniversary web part is designed to foster a positive workplace culture by recognizing and celebrating your team’s work anniversaries. This engaging web part automatically displays a list of employees who have anniversaries on the current date, making it easy to acknowledge their contributions and strengthen team morale.
Key Benefits:
- Team Recognition: Highlight and celebrate the achievements of your employees, fostering a sense of appreciation and belonging.
- Automatic Updates: The web part pulls data from a SharePoint list, ensuring the list is always current and accurate
Setup
The Anniversaries web part picks information from a SharePoint list. The list should have 3 columns
- Title – Line of text column type for anniversary description
- Person – Person column type to store the celebrant
- Date – Date time column type to store the anniversary date
Read more on how to create a SharePoint list.
Configuration
Add the Anniversaries to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the Site where the list is located.
- List
- Select the List you created previously.
- Celebrant Column
- Select the column for the celebrant
- Anniversary Date Column
- Select the column for the date
- Anniversary Description Column
- Select the column for the anniversary description
- Initial number of items to show
- Enter the maximum number of people to show initially
Announcement PopUp: Capture Attention with Dynamic Pop-Up Announcements
The Announcement PopUp web part is the perfect tool for making sure your important messages get noticed. This dynamic web part creates eye-catching pop-up announcements using information from your SharePoint announcement list, ensuring that critical updates reach your audience immediately.
Key Benefits:
- Instant Visibility: Pop-up format guarantees that your announcements are seen, even by the busiest users.
- Dynamic Content: Automatically updates from your SharePoint announcement list, so your pop-ups are always current.
- Customizable Timing and Design: Control when and how the pop-up appears, and tailor its look to match your site’s branding.
Setup
If the site you intend to have the Announcement PopUp on is a communication site, you must enable the SharePoint announcement list app.
- Click on Settings icon
- Select Site information, then View all site settings
- Go to Manage site features under Site Actions
- Click enable button for Team Collaboration Lists feature
1. Go to site contents, click New -> Add.
2. Click on the classic experience link
3. Find the Announcement app and click on the icon.
NB: For communication sites, read this article on how to enable announcement list app.
Type the name you want to give to your announcement app and click on Create
Configuration
Add the Announcement PopUp to your modern page and configure the following Web Part properties in the Property Pane section as needed: (Ensure the web part is placed at the top or close to the top of the page. SharePoint renders web parts as they come into view on the screen. Positioning the web part at the top guarantees it is rendered when the page initially loads.)
- Site
- Select the Site where the Announcement list is located.
- List
- Select the Announcement List you created previously.
- Title
- Set the title of the ticker
- Speed
- Specify the speed in millisecond. This is how long it takes to cycle through list items
- Make items clickable.
- Whether announcement items should be clickable
- Filters
- Sort by
- Select the field to sort by
- Select the direction to sort the items by
- The delay before the popup will open (in milliseconds).
- How long should it wait before it pops up
- How often should popup display when user visits this page
- Every time
- Once a day
- Scroll Speed
- Specify the speed in millisecond. This is how long it takes to cycle through list item
- Width (px)
- Width of popup in px
- Height (px)
- Height of popup in px
Announcement Ticker: Keep Everyone Informed with Scrolling Updates
The Announcement Ticker web part is your go-to solution for ensuring important updates and announcements never go unnoticed. This dynamic web part displays your announcement lists as scrolling text, making it easy for users to stay informed at a glance. Ideal for highlighting company news, project updates, or urgent notices, the Announcement Ticker adds a touch of interactivity and ensures that critical information is always front and center.
Key Benefits:
- Visibility: Ensure important messages are seen by everyone with a prominent scrolling display.
- Dynamic Content: Automatically pulls from your announcement lists, keeping the ticker up-to-date without manual effort.
- Customizable: Tailor the ticker’s appearance to match your site’s design, ensuring a seamless look and feel.
Setup
If the site you intend to have the Announcement Ticker on is a communication site, you must enable the SharePoint announcement list app.
- Click on Settings icon
- Select Site information, then View all site settings
- Go to Manage site features under Site Actions
- Click enable button for Team Collaboration Lists feature
1. Go to site contents, click New -> Add.
2. Click on the classic experience link
3. Find the Announcement app and click on the icon.
NB: For communication sites, read this article on how to enable announcement list app.
Type the name you want to give to your announcement app and click on Create
Configuration
Add the Announcement Ticker to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the Site where the Announcement list is located.
- List
- Select the Announcement List you created previously.
- Title
- Set the title of the ticker
- Speed
- Specify the speed in millisecond. This is how long it takes to cycle through list items
- Make items clickable.
- Whether announcement items should be clickable
- Filters
- Sort by
- Select the field to sort by
- Select the direction to sort the items by
Banner With News: Centralize Your Updates with a Powerful Banner
The Banner With News web part combines your welcome message, announcements, and news into a single, impactful banner. This web part enhances visibility and engagement by prominently featuring essential information in an eye-catching format, ensuring your users are always in the know.
Key Benefits:
- Comprehensive Display: Show welcome messages, key announcements, and news updates all in one visually appealing banner.
- Enhanced Engagement: Capture attention and drive interaction with a unified, easy-to-read format.
- Customizable Content: Tailor the banner to reflect your site’s branding while delivering your most important updates.
Setup
This web part does not have any setup
Configuration
Add the Banner With News to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Add personal greetings. You can use the following placeholders
- {greetings} – This will be replaced with Good morning, Good afternoon or Good evening depending on the time of day
- {firstname} – The first name of the user who is logged in
- {lastname} – The last name of the user who is logged in
- {fullname} – The full name of the user who is logged in
- Banner Image URL
- The URL of the image to use as a banner background
- Message Title
- The title of the welcome message
- Message Text
- Text for the welcome message
- Learn More Button Text
- The text for the welcome button
- Learn More Button Link
- The link the button should point to
- Message Image URL
- The URL of the image to use as the welcome message
- Select Sites for news
- Select the sites you want to pick news item from
- Greetings Top & Button Padding
- Specify the top & button padding for the top greetings section
Banner With Text: Highlight Key Announcements with Stunning Visuals
The Banner With Text web part is designed to make your important announcements and news stand out. This versatile web part displays a banner with a background image, header, text, and a call-to-action button, ensuring that your messages are both visually appealing and highly engaging.
Key Benefits:
- Eye-Catching Design: Combine impactful visuals with compelling text to capture your audience’s attention.
- Enhanced Engagement: Prominently feature announcements or news, driving users to take action with a clickable button.
- Customizable Layout: Tailor the banner’s appearance to align with your site’s branding and communication goals.
Setup
There is no setup for Banner With Text
Configuration
Add the Banner With Text to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Add personal greetings. You can use the following placeholders
- {greetings} – This will be replaced with Good morning, Good afternoon or Good evening depending on the time of day
- {firstname} – The first name of the user who is logged in
- {lastname} – The last name of the user who is logged in
- {fullname} – The full name of the user who is logged in
- Background Image
- The URL of the image to use for background
- Text
- Text for the welcome message
- Text Alignment
- The alignment of the welcome text
- Text Color
- Color of the welcome message
- Button Text
- The text for the welcome button
- Button Link
- The URL the button should point to
- Banner Height
- Set the height of the banner
- Content Width
- Set the width of the welcome message content
- Left Margin
- Set the eft margin of the content box
Employee Directory: Effortlessly Connect with Your Colleagues
The Employee Directory web part simplifies the process of finding and connecting with colleagues across your organization. With its powerful search capabilities, this web part allows users to quickly locate contact information, department details, and more, fostering better communication and collaboration within your team.
Key Benefits:
- Quick Search: Instantly find colleagues by name, department, or role, streamlining internal communication.
- Organization-Wide Access: Easily navigate your entire organization’s directory from one centralized location.
- Enhanced Collaboration: Improve teamwork by making it simple to connect with the right people, whenever needed.
Setup
There is no set up for this web part
Configuration
Add the Employee Directory to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Web Part Title
- Enter the title for the web part
- Email of users to exclude
- Enter the emails of the users to exclude. Separate emails with a :
- Max. Peers to show on load
- The maximum number of logged in user’s peer to show when the web part loads
- Order search result by
- Select the column to order the search results by
Employee Spotlight: Showcase Your Team’s Talent
The Employee Spotlight web part is designed to highlight your team members by showcasing their profiles, skills, and interests. This web part randomly selects a user from the SharePoint User Profile Store, giving your team the recognition they deserve and helping colleagues get to know each other better.
Key Benefits:
- Team Recognition: Feature individual team members, celebrating their contributions and expertise.
- Build Connections: Encourage collaboration by sharing insights into your team’s skills and interests.
- Dynamic Display: Automatically rotates through different profiles, ensuring everyone gets a moment in the spotlight.
Setup
There is no setup for this web part
Configuration
Add the Emplyee Spotlight to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Title: Enter the name you want to give to the web part.
- OData Filter: Use this field to refine the users that are included in the spotlight rotation. The following OData properties are supported
- Created
- Department
- FirstName
- JobTitle
- LastName
- MobilePhone
- Modified
- Notes
- Office
- OtherMail
- Title
- UserName
- WorkPhone
EMail eq 'userEamail@domain.com'
You can learn more about OData filter here. - Design Template: Enter any of the following desired User Profile properties enclosed in curly braces. You can specify HTML tags and CSS styles to format your text.
- AboutMe
- Birthday
- CellPhone
- Department
- DisplayName
- FirstName
- HireDate
- Interests
- JobTitle
- LastName
- PastProjects
- Manager
- Office
- PictureUrl
- School
- SkillsWork
- Phone
Example:<strong>{DisplayName}</strong>
<p style='margin-top:5px;margin-bottom:5px'>{JobTitle} - {Department}</p>
{AboutMe}
<div style='padding:5px;margin-top:5px'>
<strong>Office Phone:</strong> {WorkPhone}<br>
<strong>Cell Phone:</strong> {CellPhone}
</div>
- Text Layout: Specify how text is wrapped around the profile picture.
– Wrap
– Right
- Background Color: Select the background color.
- Show new user every: How often should web part rotate user.
– “On page refresh” a new user is displayed every time the page is refresh
– “Daily” displays a new user every day
– “Weekly” displays a new user every week. New user is selected every Monday - Hide web part when no user is found: Indicate if web part should be hidden when no user is found based on your OData filter.
Forms & Templates: Streamline Access to Forms with an Enhanced Library
The Forms & Templates web part transforms your SharePoint document library into a user-friendly and searchable form library. This tool makes it easy for users to find, access, and utilize forms and templates, improving efficiency and organization within your team.
Key Benefits:
- Enhanced Searchability: Quickly locate forms and templates with a powerful search feature, saving time and reducing frustration.
- User-Friendly Interface: Organize your document library into an intuitive form library, making it easy for users to navigate and find what they need.
- Improved Efficiency: Streamline workflows by ensuring that essential forms and templates are always accessible and easy to use.
Setup
If the document library has folders, they will be organized into pills below the search bar. We recommend organizing files into folders.
NB: Pills will use the color of the folder
Configuration
Add the Forms & Templates to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the Site where the Announcement list is located.
- Document Library
- Select the Document Library that contains your templates.
- Max. number of items to show per folder
- Enter the maximum number of items to show per folder
- Search Placeholder
- Enter the placeholder for the search field
- Show Preview
- If one, a preview will be shown when users hover over the file name
- Pill Size
- Set the height of the pills
- Pill Border Radius
- Set the border radius of the pills
- Content Height
- Set the height of the file list content
Header: Add a Customizable Header to Your SharePoint Site
The Header web part allows you to display a customizable header on your SharePoint page, giving you control over the weight, color, and size. Perfect for creating visually distinct sections or emphasizing important content, this web part ensures your headers align with your site’s branding and design.
Key Benefits:
- Full Customization: Easily adjust the weight, color, and size to create headers that stand out.
- Enhanced Readability: Improve content organization by adding clear, bold headers that guide users through your page.
- Brand Consistency: Match the header’s style with your site’s overall look and feel for a cohesive user experience.
Setup
There is no setup for this web part
Configuration
Add the Header to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Font Size: The font size
- Font Weight: The font weight
- Color: The font color
Image Carousel: Bring Your Site to Life with a Rotating Gallery
The Image Carousel web part showcases a rotating gallery of images, adding a visually appealing and interactive element to your SharePoint site. Perfect for displaying company events, team photos, and more, this web part helps you capture attention and create a dynamic visual experience.
Key Benefits:
- Visually Engaging: Enhance your site’s aesthetics with a smooth, rotating display of your most important images.
- Interactive Experience: Keep users engaged with a lively gallery that invites exploration.
- Versatile Display: Ideal for highlighting company events, team photos, product images, or any visuals that matter to your organization.
Setup
There is not setup for this web part
Configuration
Add the Image Carousel to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the Site where the document library list is located.
- Document Library
- Select any document library.
- Filters
- Enter max. items to return
- The maximum items to fetch
- Legend Field
- Select the column to be used as the legend to display on the image
- Auto Play
- Set whether carousel to change slide automatically
- Show Thumbs
- Whether thumbnails should be shown
- Show Arrows
- Whether the arrows should be shown
- Show Indicators
- Whether indicators should be shown
- Stop on Hover
- If carousel should stop when you hover over a slide
- Image Width
- The width of images
- Image Height
- The height of the image
- Center Slide Percentage
- Current item will be centered and the width set to what is specified
List To Cards: Convert Your Data into an Engaging Card Layout
The List To Cards web part transforms your SharePoint list into a visually appealing card view. This intuitive layout makes it easy for users to view, interact with, and navigate through the data, enhancing the overall user experience on your site.
Key Benefits:
- Visual Appeal: Present list items in a beautiful card layout, making data more engaging and accessible.
- Improved Usability: Simplify data interaction with an intuitive, user-friendly card format.
- Flexible Display: Perfect for showcasing any list-based content in a more dynamic and visually attractive way.
Setup
Create a SharePoint list with the following column
- Title – Single line of text column for title of card
- Description – Multiline of text column for description of card
- LearnMore – A hyperlink column for learn more
- Image – An Image column to use for card
The web part uses folders to organize the list items. If the list has folders, they will be organized into pills below the search bar. We recommend organizing items into folders.
To turn on the ability to create a folder
- Go to List settings > Advanced settings > Folders.
- Under Make “New Folder” command available?, select Yes.
- Select OK.
Configuration
Add the List To Cards to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the Site where the Announcement list is located.
- List
- Select the list that contains your templates.
- Title column
- Select the column to be used as the title of the card
- Description column
- Select the column to be used for the description of the card.
- Learn more column
- Select the column to be used as learn more link
- Image column
- Select the column to be used as the image column
- Max. number of items to show per folder
- Enter the maximum number of items to show per folder
List To FAQs: Simplify Information Access with a Dynamic FAQ Page
The List To FAQs web part makes it easy to create a comprehensive FAQ page by loading items from any SharePoint list. This flexible tool allows you to organize and display frequently asked questions, helping users quickly find the answers they need and reducing the burden on support teams.
Key Benefits:
- Easy Setup: Automatically generate an FAQ page from any SharePoint list, saving time and effort.
- Streamlined Information: Provide users with quick access to commonly asked questions and answers, improving efficiency.
Setup
Create a SharePoint list to use for your FAQs.
The search features rely on the global search feature. Make sure your list has been indexed.
Configuration
Add the List to FAQs to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the Site where the list is located.
- Document Library
- Select the List you want to use.
- Field for Title
- Select the field you want to use for title
- Field for Content
- Select the field you want to use for content. You can use the multiline text field column type and turn on “Use enhanced rich text” to embed hyperlinks in the content of the FAQ answer.
- Filters
Org Chart: Map Out Your Organization with Clarity
The Org Chart web part allows you to visualize your organization’s structure, displaying hierarchical relationships in an intuitive and interactive format. This tool makes it easy for users to understand reporting lines, team structures, and roles, enhancing transparency and communication across your organization.
Key Benefits:
- Clear Visualization: Display your organization’s hierarchy in a straightforward, easy-to-understand format.
- Interactive Navigation: Allow users to explore the organizational structure, helping them connect with the right people.
- Customizable Layout: Tailor the org chart’s appearance to match your site’s design and organizational needs.
Setup
There is no setup for this webpart
Configuration
Add the Org Chart to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Top Person
- Select the person you want to be on top of the chart
- Max, Depth
- The maximum depth to go in the chart
- Select View Type
- Select the view type you want
- Card Size
- Select your preferred card size
Personal Greeting: Add a Personal Touch to Your SharePoint Site
The Personal Greeting web part lets you display personalized greetings on your SharePoint page, creating a welcoming and engaging user experience. Whether it’s a simple hello, a motivational quote, or a customized message, this web part helps you connect with users on a personal level.
Key Benefits:
- Personalized Experience: Greet users by name or with tailored messages, making your site feel more welcoming and user-centric.
- Customizable Content: Easily configure the greeting to match the tone and style of your site.
- Enhanced Engagement: Boost user interaction and satisfaction by creating a more personalized and friendly environment.
Setup
There is no setup for this webpart
Configuration
Add the Personal Greeting to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Add personal greetings. You can use the following placeholders
- {greetings} – This will be replaced with Good morning, Good afternoon or Good evening depending on the time of day
- {firstname} – The first name of the user who is logged in
- {lastname} – The last name of the user who is logged in
- {fullname} – The full name of the user who is logged in
- Top & Bottom Padding
- The padding around the greeting text
- Width
- Set the width of the web part
- Margin Top
- Set the top margin of the web part
- Margin Left
- Set the left margin of the web part
Timeline: Transform Events into a Stunning Visual Journey
The Timeline web part converts your SharePoint Event List into a beautiful, interactive timeline. Perfect for showcasing project milestones, company history, or upcoming events, this web part helps users visualize the sequence of events in an engaging and easily understandable format.
Key Benefits:
- Visual Storytelling: Display events in a chronological timeline, making it easier to follow the progression of important milestones.
- Interactive Navigation: Allow users to explore past and upcoming events with an intuitive, scrollable layout.
- Customizable Design: Tailor the timeline’s appearance to match your site’s branding and specific needs.
Setup
There is no setup for this web part
Configuration
Add the Timeline to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the Site where the Event list is located.
- List
- Select the Event List you.
- Filters
- Sort by
- Select the field to sort by
- Select the direction to sort the items by
- Layout
- Select the timeline design layout you want
- Event Text color
- Set the color for text
- Event background color
- Set the background color for events
- Circle color
- Set the color for the circle
Video Carousel: Engage Your Audience with a Rotating Video Gallery
The Video Carousel web part showcases a rotating gallery of videos, adding a dynamic and interactive element to your SharePoint site. Ideal for displaying company events, team videos, training sessions, or promotional content, this web part captivates users with a seamless and engaging visual experience.
Key Benefits:
- Dynamic Display: Present videos in a smooth, rotating carousel that grabs attention and keeps users engaged.
- Versatile Use: Perfect for showcasing a variety of video content, from company events to product demos and more.
- Interactive Experience: Encourage user interaction with an easy-to-navigate video gallery that enhances content accessibility.
Setup
There is no setup for this webpart
Configuration
Add the Video Carousel to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Video Items
- Enter the list of video items by clicking the button.
- Video Width
- The width of images
- Video Height
- The height of the image
- Auto Play
- Set whether carousel to change slide automatically
- Show Thumbs
- Whether thumbnails should be shown
- Show Arrows
- Whether the arrows should be shown
- Show Indicators
- Whether indicators should be shown
- Stop on Hover
- If carousel should stop when you hover over a slide
- Center Slide Percentage
- Current item will be centered and the width set to what is specified
Video Stream: Create a Video Sharing Hub on Your SharePoint Site
The Video Stream web part transforms your video library into an interactive video sharing platform, where users can watch, like, and comment on videos. Perfect for training materials, company updates, or team showcases, this web part encourages engagement and fosters a collaborative video experience.
Key Benefits:
- Interactive Platform: Enable users to watch, like, and comment on videos, fostering interaction and feedback.
- Centralized Content: Organize your video content in one easy-to-navigate library, making it accessible to your entire organization.
- Enhanced Engagement: Turn passive video viewing into an active experience, encouraging users to participate and share their thoughts.
Setup
This video walks through setting up a document library. We recommend using document library in a Team site to store your videos (this is because the rating feature for lists & libraries is not available for communication site by default. If you still want to use communication site, read this link on how to enable it using PowerShell). You can however install the web part itself on any sites including Communication sites and pull the videos from the team site.
Configuration
Add the Video Stream to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Site
- Select the site the document library is located.
- Document Library
- Select the document library that contains your videos.
- Sort playlist by
- Select the field to use to sort your playlist (folders) and the direction to sort it by
- Sort videos by
- Select the field to use to sort your videos and the direction to sort it by
- Select video player
- Select the video player you want to use. Microsoft Stream video player or Browser native player
WordPress News: Seamlessly Integrate WordPress Posts into Your SharePoint Site
The WordPress News web part allows you to display posts from any WordPress site directly on your SharePoint page. Choose from a variety of layouts, filter posts, and select specific categories to ensure the content is perfectly tailored to your audience.
Key Benefits:
- Versatile Layouts: Display WordPress posts in multiple layout options, enhancing the visual appeal of your site.
- Customizable Filters: Filter posts by category, date, or tags to showcase the most relevant content for your users.
- Seamless Integration: Effortlessly pull in content from your WordPress sites, keeping your SharePoint page fresh and dynamic.
Setup
There is no setup for this webpart
Configuration
Add the WordPress News to your modern page and configure the following Web Part properties in the Property Pane section as needed:
- Title: The Title of the web part
- This is the title that is shown on top of the web part. You can leave it blank
- WordPress Site URL: The URL to the WordPress site
- Enter the URL of the WordPress site. E.g. https://www.example.com
- WordPress App. Username
- Application username if your site requires Application authentication
- WordPress App Password
- Application password if your site requires Application authentication
- Categories: The category to show posts from
- Select the categories you want posts from. This shows the categories the WordPress site has.
- Sort by: The sorting order of the posts
- Select which attribute to sort the posts by
- Order Direction: The sort direction of the post
- Select the direction in which the posts should be sorted.
- Show see all link: The link to see all posts from the WordPress site
- Indicate whether the See All link should be shown. Clicking on it will open the WordPress site in a new tab.
- Layout: The layout to use for the web part
- Choose from different layout to display your posts
- Default Featured Image URL
- The image to use when a post does not have featured image.