---
title: Contact banner
slug: contact-banner
docTags: 
createdAt: 2024-05-13T11:52:10.524Z
---

## Overview

You can use this "Contact banner block" to provide your visitors with ways to get in touch with your business. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/KQ-J067GJF8e6Wm4sAAD1_image.png" size="44" width="316" height="46" position="center" caption="Contact Banner block - Page structure" alt="Contact Banner block - Page structure" darkWidth="316" darkHeight="46" showCaption="true"}

## Sample Contact Banner Block

You can add a title and some text content to this block, this is how it will look: 

![Contact Banner Live preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/L7nYx9Sh0hczdQE3QVdM7_contact.jpg "Contact Banner Live preview")

### Text

To set up a banner message (as shown on the left), you need to choose the '*Text*' block on the right of the builder page and type your message there: 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/GbWg5vTs3jIKGp0aTXemI_text-for-contact-banner.jpg" size="52" width="339" height="764" position="center" caption="Contact Banner - Text settings" alt="Contact Banner - Text settings" darkWidth="339" darkHeight="764" showCaption="true"}

1. **Subheader **: This is the first text line in the first column (small fontsize)
2. **Header** : This is the main title in the first column
3. **Text **: This is the content in the first column

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/yHqit3BXjAnL07NWPHR9E_second-text-contact-banner.jpg" size="42" width="318" height="279" position="center" caption="Contact Banner - Text settings second column" alt="Contact Banner - Text settings second column" darkWidth="318" darkHeight="279" showCaption="true"}

For adding your contact details, please choose the '*Second* *text'* section and list your contact information there.

1. **Second Header** : This is the header in the second column
2. **Second Text **: This is the content in the second column

### Buttons

Click the "buttons" tab to add or edit the button and text link settings.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/xtoC5Yw5H9hjFDB_MhvIH_image.png" size="44" width="343" height="433" position="center" caption="Contact Banner" alt="Contact Banner - Buttons" darkWidth="343" darkHeight="433" showCaption="true"}

1. **Button text** : Text visible on the button
2. **Button url** : Click the Globe icon to add an internal or external link
3. **Link title** : This is the text link visible at the bottom of the first column
4. **Link url** : Click the Globe icon to add an internal or external link

### General

Set the second column background color and make the block sticky or not.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/SJLmYYqQ1iYJ4X0a7AY2__image.png" size="44" width="350" height="268" position="center" caption="Contact Banner - General settings" alt="Contact Banner - General settings" darkWidth="350" darkHeight="268" showCaption="true"}

1. **Accent background color **: click the rectangular box to pick a background color
2. **Enable sticky animation **: When enabled this will keep the contact banner stick at the top of your screen.