---
description: Updated on February 17, 2022  Bluesky Team
---

# Banner

### Overview

Blueskytechco Page Builder provides a lot of functions for creating content by dragging-and-dropping pre-built controls. One of them is Banner Module. The following information will guide you how to work with Page Builder - Banner.

### Introduction to PageBuilder - Banner

Learn how you can create **Banner** with PageBuilder :

{% embed url="https://youtu.be/oCKroUU8ALc" %}

### How to Configure

#### 1. Appearance <a href="#bannerpg-howtoconfigure-1" id="bannerpg-howtoconfigure-1"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FpG1iWtyjZWFhc8HynfMp%2Fbannersetting.png?alt=media\&token=65d1af61-38cc-4317-9565-42c31bdac6b7)

* First, select the layout of banner.
* In the **Minimum Height** field: Specify minium height of banner. Minimum height can be a single number with any valid CSS unit (50px, 50%, 50em, 50vh) or a calculation (50% + 50px).
* In the **Vertical Alignment** field: Vertical alignment controls how the child blocks of this container will be positioned. Set minimum height in order to use vertical alignment.
* In the **Hover Effects** field: Specify the effects when hover over banner.

#### 2. Background <a href="#bannerpg-howtoconfigure-2" id="bannerpg-howtoconfigure-2"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FXz5T0GQDZ7EU7WYU0Atp%2Fbnbg1.png?alt=media\&token=c1a761fc-064f-4e29-b3bb-0109963889a7)

* In the **Background Color** field: Specify the color of banner background.
* In the **Background Type** field: Select types of banner: Video or Image.
* In the **Background Image** field: Upload Image of banner.
* In the **Background Mobile Image** field: Upload Image of banner on mobile device.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FyYe0cNBQr1S9qjTvDRR9%2Fbnbg2.png?alt=media\&token=393b2d1d-3927-4775-8979-34425d97b291)

* In the **Background Size** field: Specify size of background banner.
* In the **Background Position** field: Select positions of background in banner.
* In the **Background Attachment** field: Select Attachment: Fixed or Scroll.
* In the **Background Repeat** field: **Enable** if you want to repeat background of banner.

#### 3. Co <a href="#bannerpg-howtoconfigure-3" id="bannerpg-howtoconfigure-3"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FsglIP9yXpWpgfizrpqok%2Fbncontent.png?alt=media\&token=ed200182-0338-4518-90fc-913d8c21c7f3)

* In the **Message Text** field: Add message text to banner.
* In the **Link** field: Specify url of banner.
* In the **Show Button** field: Specify status of button on banner.
* In the **Button Text** field: Specify name of button on banner.
* In the **Button Type** field: Specify type of button on banner.
* In the **Show Overlay** field: Enable to show overlay.
* In the **Overlay Color** field: Specify color of overlay.

Copyright © 2022 [Blueskytechco.com](https://blueskytechco.com/). All Rights Reserved.
