# Case Banners

The **Case Banners widget** is used to display Cases post type on your website in beautiful banners view.

### Using the Case Banners widget

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

### Step 1:

Select the **Accordion** 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%2F0qUmBDYnDgj1ZE2Ae8QD%2FCompanion%20-%20case%20banner%20add.png?alt=media\&token=3ac1d755-4935-4ade-906c-6601ac7db7b2)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. It will give options to set banner title, add banner items and set the background image.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FqLWRakr7DyN62VOE48XE%2FCompanion%20-%20case%20banner%20content.png?alt=media\&token=9029cc8d-43ad-413f-b625-c0ed7451cbbe)

In **General settings**, you can add the title to the Case studies items, select the number of the banners to show, and add new items:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FvfePBN908RYgXwpLm35i%2FCompanion%20-%20case%20banner%20add%20new%20item.png?alt=media\&token=f163721b-45d9-4ae9-9d0f-5e4626123cff)

In the **Banners** option, you can edit all banner items one by one. You can add title, content, button text, and choose the icon from the Icons library:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FtieaX2YZzyU9Bc6KngME%2FCompanion%20-%20case%20banner%20settings.png?alt=media\&token=ba05f528-30be-43eb-9c32-4f24cf4b1f3d)

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

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, border, size, and many more for Banner title, Item title, Description, and Button.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FuQLUXRD06DX0Z8EfdHi5%2FCompanion%20-%20case%20banner%20styles.png?alt=media\&token=c5be814d-350e-4559-ab50-3b0b3ec6c17f)

### 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%2FP1NXNSksyPNtc0IncItM%2FCompanion%20-%20case%20banner%20advanced.png?alt=media\&token=ee53a5c4-9453-4502-a62c-c80b47a799aa)

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%2FCyBXu321BAobc5HyJ7XX%2FCompanion%20-%20case%20banner%20final.png?alt=media\&token=425db99f-3b04-4ddc-a8fb-a4158da6dae4)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FQTnDiy3zUlr8vha21p1D%2FCase%20Banners.gif?alt=media\&token=e42ac0d1-f5cd-43a4-9c32-0cef6e4e7a81)