Alchemist Hero Blocks
The Alchemist hero blocks are a great way to instantly grab customers’ attention and introduce your experiences. All hero blocks feature full bleed layouts with overlaying text and call to action buttons.
Jump to block:
Hero Video or Image
With the Hero Video block, you can display a background video or image. For best results, we recommend uploading a background image for mobile as some devices block autoplaying videos.
Content Fields
| Logo | Upload a logo to be displayed above the header text. Recommended minimum width 405px. |
| Header | Add a catchy title for the block. |
| Text | Use the text editor to add a description under the header text. This is best used to give your customers a snapshot of your brand and what experiences you offer. |
| Subheading text | Add a subheading to provide extra information, such as the location of your experiences. |
| Secondary subheading text | Add a secondary subheading to provide extra information, such as the dates of your experiences. |
| Display button |
Tick this checkbox to display a call to action button. |
| Button text |
Add a label for the call to action button, for example “Book now”, “Learn more” or “Buy tickets”. |
| Button link |
Add the URL of the page you would like your customers to go to when they click on the call to action button. This can be another page on your website or an external site. Tip: If linking to another page on your website, use the URL path instead (e.g. "/experiences" instead of "http://yourdomain.com/experiences"). This will ensure your links still work if you ever change your domain name. |
| Display popup video | If toggled on, an extra call to action button will be displayed on the block that will allow customers to watch a video via a popup. |
| Video popup button text | Add a label for the video popup button, for example “Watch trailer”. |
| Insert popup video iframe | Paste the iframe code for the video that will be displayed in the popup. Learn how to generate an iframe code for your videos here. |
| Display a background video |
Tick this checkbox to display a video in the block’s background. If toggled off, the background image or colour will be displayed instead. |
| Insert background video iframe |
Paste the iframe code for the video that will be displayed as the block’s background. Learn how to generate an iframe code for your videos here.
Tip: For best results, mute sound on autoplaying videos. |
Layout Fields
| Align text bottom left | By default, the block centers all text and buttons. Tick this checkbox to align text to the bottom left instead. |
| Increase block size to full screen | Tick this checkbox to have the background video or image take up the full height of your screen. |
Design Fields
| Remove dark overlay on background image | By default, a dark overlay is added to the background in order to make the text and buttons more visible and readable. Tick this checkbox to remove the overlay. |
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. The image will be displayed if you do not have a video iframe added or the Show video background field is toggled off. |
| Background colour | If there is no background video or image, the background will default to the background colour – add a HEX code to customise the colour. |
| Text colour | Add a HEX code to change the colour of the header and text in the block. By default, it is set to white (#FFFFFF). |
| Button colour |
Add a HEX code to change the background colour of the call to action button. By default, it is set to your primary colour (learn how to change site-wide colours here). |
| Button text colour | Add a HEX code to override the text colour of the call to action button. By default, it is set to white (#FFFFFF). |
| Increase size of logo | Tick the checkbox to increase the size of the logo in the block. |
Mobile Fields
| Hide video background on mobile |
By default, the background image will be displayed instead of the video on mobile devices as some devices block autoplaying videos. |
Hero Image
Similar to the Hero Video or Image block, the Hero Image block allows you to display header text, description and call to action button. However, you will not be able to embed a background video. You also have the option to display the Hero Image at a smaller height or full screen height.
Content Fields
| Logo | Upload a logo to be displayed above the header text. Recommended minimum width 405px. |
| Header | Add a catchy title for the block. |
| Text | Use the text editor to add a description under the header text. This is best used to give your customers a snapshot of your brand and what experiences you offer. |
| Display button |
Tick this checkbox to display a call to action button. |
| Button text |
Add a label for the call to action button, for example “Book now”, “Learn more” or “Buy tickets”. |
| Button link |
Add the URL of the page you would like your customers to go to when they click on the call to action button. This can be another page on your website or an external site. Tip: If linking to another page on your website, use the URL path instead (e.g. "/experiences" instead of "http://yourdomain.com/experiences"). This will ensure your links still work if you ever change your domain name. |
Layout Fields
| Align text to centre | By default, the block aligns all text and buttons to the bottom left. Tick this checkbox to align text to the centre instead. |
| Increase block size to full screen | Tick this checkbox to have the background video or image take up the full height of your screen. |
Design Fields
| Remove dark overlay on background image | By default, a dark overlay is added to the background in order to make the text and buttons more visible and readable. Tick this checkbox to remove the overlay. |
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background video or image, the background will default to the background colour – add a HEX code to customise the colour. |
| Text colour | Add a HEX code to change the colour of the header and text in the block. By default, it is set to white (#FFFFFF). |
| Button colour |
Add a HEX code to change the background colour of the call to action button. By default, it is set to your primary colour (learn how to change site-wide colours here). |
| Button text colour | Add a HEX code to override the text colour of the call to action button. By default, it is set to white (#FFFFFF). |
| Increase size of logo | Tick the checkbox to increase the size of the logo in the block. |
Hero Swiper
The Hero Swiper block has the same design as the Small Hero block but with the additional functionality of a swiper. Each slide can have its own background image, header, text and call to action button.
Content Fields
|
Slides To add slides, scroll to the bottom and click Add Slide. To remove slides, click the bin icon. To rearrange slides, click the three-dot icon and drag the slide to its new position. |
|
| Title | Add a catchy title for each slide in the swiper. |
| Text | For each slide in the swiper, use the text editor to add a description under the header text. |
| Button text |
For each slide in the swiper, add a label for the call to action button, for example “Book now”, “Learn more” or “Buy tickets”. Leave blank to hide the button. |
| Button link |
For each slide in the swiper, add the URL of the page you would like your customers to go to when they click on the call to action button. This can be another page on your website or an external site. Tip: If linking to another page on your website, use the URL path instead (e.g. "/experiences" instead of "http://yourdomain.com/experiences"). This will ensure your links still work if you ever change your domain name. |
| Open link in a new tab |
Tick the checkbox to open the button link in a new tab. |
| Background image | Add a background image for each slide in the swiper. For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | The slide will fallback to the background colour if no background image is uploaded – add a HEX code to change the colour. You can customise the background colour for each slide in the swiper. |
| Text colour | Add a HEX code to change the colour of the title and text in the block. By default, it is set to white (#FFFFFF). |
| Button background colour | Add a HEX code to change the background colour of the call to action button. By default, it is set to your primary colour (learn how to change site-wide colours here). |
| Button text colour | Add a HEX code to override the text colour of the call to action button. By default, it is set to white (#FFFFFF). |
Layout Fields
| Align text to centre | By default, the block aligns all text and buttons to the bottom left. Tick this checkbox to align text to the centre instead. |
| Increase block size to full screen | Tick this checkbox to have the background video or image take up the full height of your screen. |
Design Fields
| Remove dark overlay on background image | By default, a dark overlay is added to the background in order to make the text and buttons more visible and readable. Tick this checkbox to remove the overlay. |
| Enable autoplay on carousel | Tick this checkbox to enable the swiper to automatically change slides every 5 seconds. |
| Hide arrow buttons on carousel | Tick this checkbox to hide the arrow buttons on the swiper. Recommended to be used with auto scroll to create a slideshow effect. |
| Carousel arrow colour | Add a HEX code to customise the colour of the arrows. |
Comments
0 comments
Article is closed for comments.