What Are Widgets and How Are They Used?

Written By Jake Picken

In this video, we will discuss what a website widget is and how they are used on your website by providing an example of adding a list widget on a page.

&nbsp;

What are website widgets?

Widgets are elements in a content management system that are the building blocks for a web page.

When adding content to a page, most content management systems will have several widget options that you can drag and drop onto a page.

Widgets are used to display text, images, lists or videos and they also add functionality to a web page like navigation, forms, and even login widgets that prompt users to enter a username and password.

Often, the content that is displayed on a page through a widget, is created in another area of your CMS, which makes a widget a great choice for displaying items that require organization and structure like lists, documents, employee directories, or business locations.

How are Widgets Used on Your Website?

Let’s look at one way a widget can be used on your website.

In this example, we are going to cover the list widget in Sitefinity CMS.

More about the list widget in Sitefinity

This is a built-in widget available with Sitefinity out-of-the-box. You can also create custom widgets in Sitefinity. Custom widgets allow you to extend the functionality of your CMS.

The list widget is placed on a page and allows you to display a structured list from content that is managed in the backend of your CMS.

First, let’s look at a page to see what a list looks like for users visiting our website.

This is our expertise page and on this page, you will see a list of FAQs that are only displaying questions that are specific to website development. You can see this list has a really nice design on the page and you can drill down on each question and see the answer by clicking on the down arrow.

Adding a List Widget in Sitefinity

Let’s go and look at this list in the backend and walk through the process of adding the list widget to a page on our site.

In Sitefinity, from your dashboard, you will go to content and then lists.

Here is the list we created called FAQs.

You can see some of the questions we have here are about general website development and some are more specific to our DXP offering called DXFusion.

Let’s open this item first. First, you will add a title, so in this case, it would be the question we want to be displayed. Then in the content field, you will add the answer to the question. So if you remember, this content will show when someone clicks on the down arrow.

You can see that this item is tagged with the category for website development. Which will be important in our next step.

I'll go ahead and open another item that was tagged within a different category. So here is a question that is specific to DXFusion, and you can see that it was tagged with the name of the category.

So first, we will go to our expertise page to add this list widget.

So, I will drag and drop the list widget into this container I just added to the page.

I will click on “Set which list widget to display”.

Then I will select the list I want to display on this page, which is the FAQs list we just looked at, and then select the template so it is in the design we want it to be.

Now, if I were to just save this and add it to the page as is you will see that I also have DXFusion FAQs on here too, but I only want the questions that are specific to website development displayed in this list.

This is where the categories and tags come in. So, we will go back and edit the list properties and you will see this option to filter the items in your list. I will then find and check the category for website development, which is what we tagged the questions as in the backend module.

I will hit save and now only the questions that were tagged in the category for web development will be displayed here.

With this method, I only need to have one list for all FAQs on my site and then I can customize what I want to be displayed on a page using categories and tags in the list widget settings.

Now, this is just a quick overview of what a widget is and how it functions on your website. To learn more about the built-in widgets available to you in Sitefinity, you can visit the documentation on Progress.com. And if you want to learn more about how to use widgets or what it would look like to create a custom widget for your website, then reach out to our team.