Callout
Overview
The Callout block is a part of the body that has the option to create text/content on various backgrounds, such as images or videos and add up to 3 content columns at the bottom of the block.
Sample Callout block
Background
You have several options to design the Callout block, first thing to do is to set your background.
Banner height Desktop
There are 5 different sizes you can use
- Small : this will display your Callout block at 1/4th of the screen
- Medium : this will use half of your screen
- Large : this will use 3/4 of your screen
- Full height : this will use the full height of your screen
- Fit content : this will fill the content of the block
Banner height Mobile
There are 5 different sizes you can use
- Small : this will display your Callout block at 1/4th of the screen
- Medium : this will use half of your screen
- Large : this will use 3/4 of your screen
- Full height : this will use the full height of your screen
- Fit content : this will fill the content of the block
Background types
There are 3 different types of backgrounds available for use:
- Image (static)
- Video
- None
Background media
Click the "Open Media Library" button to select an image from your media library.
Video autoplay
Set this switch "On" to start playing your background video automatically when someone visits your page. When set to "Off" a play button will be diplayed on top of the Callout block, visitors can start the video by clicking this button.
Show controls
Set to "On" or "Off" to show or hide video play/pauze controls.
Background mode
Choose either Full or Reduced. Full will fill the width of the screen. Reduced will display a smaller background.
Text
- Prefix : This will add a medium size text at the top of your Callout content
- Title : This is the main title in large text size
- Subtitle : This will be printed below the title in small text size
- Content width : Use 30%, 40%, 50% or 100% of the available block to display your content
- Horizontal content align : Choose Left, Center or Right
- Vertical content align : Choose Top, Center or Bottom
- Text color : Click the rectangular button to set your text color
Cards
Cards are used to define the extra colums at the bottom of the Callout block. You can add up to 3 columns which include a Title, Text and a Button.
Button style
Choose between 6 different button styles. Depending on the chosen style you will have to change the text color to make the button text visible on your screen/button.
Text alignment
Align the text to the Left, Center or Right side of the button.
Items per row
Here you can specify how many columns you want to add at the bottom of the Callout block. Maximum 3 columns can be added. Columns content is defined as Cards.
Cards
You can add maximum 3 columns (Cards), for this you need to press on '+ Add' icon.
Add a Title and Text content and a button.
a) URL, copy the chosen link, don't forget to insert it for every language.
b) Internal link, pick your page from a list of pages available in Hyper Builder, which in this case automatically will be chosen for every language.
Buttons
You can remove individual card buttons by switching on the "Override card buttons"
Override card buttons
When you switch this on, all existing buttons at the bottom of the Callout columns will be replaced by this new button(s)
Main button
You can add multiple buttons, for this you need to press on '+ Add' icon. You can also insert a link (internal or url):
a) Select a button style, there are 6 styles available
b) URL, copy the chosen link, but don't forget to insert it for every language.
c) Internal link, pick your page from a list of pages available in Hyper Builder, which in this case automatically will be chosen for every language.