HyperBuilder
...
Blocks
Documentation Draft
Contact banner
6min
You can use this 'Contact banner block' to provide your visitors with ways to get in touch with your business.

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

Contact Banner Live preview
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:

Contact Banner - Text settings
- Subheader : This is the first text line in the first column (small fontsize)
- Header : This is the main title in the first column
- Text : This is the content in the first column

Contact Banner - Text settings second column
For adding your contact details, please choose the 'Second text' section and list your contact information there.
- Second Header : This is the header in the second column
- Second Text : This is the content in the second column
Click the "buttons" tab to add or edit the button and text link settings.

- Button text : Text visible on the button
- Button url : Click the Globe icon to add an internal or external link
- Link title : This is the text link visible at the bottom of the first column
- Link url : Click the Globe icon to add an internal or external link
Set the second column background color and make the block sticky or not.

Contact Banner - General settings
- Accent background color : click the rectangular box to pick a background color
- Enable sticky animation : When enabled this will keep the contact banner stick at the top of your screen.
Updated 06 Aug 2024
Did this page help you?