# How to add banner to individual event page

**URL:** <https://community.elfsight.com/t/how-to-add-banner-to-individual-event-page/68564>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [September 2, 2024, 7:54am UTC](https://community.elfsight.com/t/how-to-add-banner-to-individual-event-page/68564 "2024-09-02T07:54:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [September 2, 2024, 7:54am UTC](https://community.elfsight.com/t/how-to-add-banner-to-individual-event-page/68564/1 "2024-09-02T07:54:54Z")

</div>

You can follow these steps to add banner to individual event page in Squarespace

**#1.** First, add this code to **Code Injection** \> **Footer**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/e/4e0e786be0741dfa945e4c20509c63b8689a6bf5.png)

**#2.** Next, hover on Event Page \> Click **Gear icon**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/c/fc04a7fe0a60b99d3616d39f8f64a70608786d78.jpeg)

Click **Page Header Code Injection**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/6/06c8d65e41a745f85f4c65911681b48a9a7d1217.png)

**#3.** Paste this code

```auto
<div data-wm-plugin="blog-post"></div>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/9/3933ea97381ac87cb4049ce2013504d3a3ecdca3.png)

**#4.** Use this code to Custom CSS box

```auto
/* Individual Event Banner */
.section-background.wm-blog-banner>div:not(.section-background-image) {
    display: none;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/a/baf64226d0d501bd862bb8363db3aa16556af4c6.jpeg)

**#5.** Result

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/c/8ca7847f0e07904534bcda6418bec0b0c7515c1f.jpeg)

The code will get Event Featured Image/Thumbnails and make it to banner image.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/7/97013c62637fccc97bbc62903b7323e244224688.jpeg)

**#6.** To reduce banner image height, use this code to Custom CSS box

```auto
div.section-background.wm-blog-banner {
    min-height: 50vh !important;
}

```

![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/0/506d16a10097b8f246ab685a8a472ebd9e63f5f2.png)