# Featured Content Carousel

The **Featured Content Carousel** **Widget** is used to create the custom slider with featured content.

### Using the Featured Content Carousel widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Featured Content Carousel** widget from the menu bar on the left-hand side of your screen then drag and drop it in the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FZ7vZBzXxqfIe3jIdi4aG%2FCompanion%20-%20FCC%20add.png?alt=media\&token=1095abd2-2db2-45c5-ad0e-9f0c7da0306f)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. It will give you two options add items and Slider settings.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F71Px8MMhqzI4TnJcBZpV%2FCompanion%20-%20FCC%20content.png?alt=media\&token=3ca9524b-ea46-49e1-a2bc-03af6e63ef04)

In **General settings**, you can add the slider items and add content to its body:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FkFmyW1piAriWcukV6CVH%2FCompanion%20-%20FCC%20general.png?alt=media\&token=39fa9f14-c448-4494-b0c9-18c59b0c0fca)

Hit on the **Add items** to add/delete items.

In the **Slider Setting** section, you can configure the slider behavior:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2Fx0gT07gb94Z8xA0JauFb%2FCompanion%20-%20FCC%20slider%20settings.png?alt=media\&token=c76309d2-bba5-484a-a436-d5af80bfb549)

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, and many more for Slider items:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FtdYwqDHFcL0obIpf1cMY%2FCompanion%20-%20FCC%20slider%20style.png?alt=media\&token=54d7d130-dce3-4032-b420-037a1c164570)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F6opjITy5soHIqqLRug8v%2FCompanion%20-%20FCC%20slider%20adv.png?alt=media\&token=38f253f0-1269-4ffd-8d88-49d126ea5a6b)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FYJtu78FcNVwcQuuatLUC%2FCompanion%20-%20FCC%20slider%20final.png?alt=media\&token=a81a9a61-f6c5-48d9-9f34-66ead0f195c1)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FuQPHnWDXRqfaD8M7YUL1%2FFeatured%20Content%20Carousel.gif?alt=media\&token=8d5a1852-a171-4d0e-ace1-88b2b9dbfeb0)