Alchemist Image Blocks
Images are an essential part of every experience commerce website to help customers visualise what you’re offering and get them excited to book. We recommend reading our guidelines for formatting and optimising images before getting started.
Jump to block:
- Single Image
- Gallery
- Gallery Grid
- Image with Text Overlay
- Image Grid with Text
- Single Image & Text
- Multiple Images & Text
Single Image
This block allows you to feature a single, large image.
Content Fields
| Image | Add the image you’d like to feature in the block. For the best results, upload a landscape image with a minimum width of 1920px. |
| Header | Add a catchy title for the block. |
| Text | Use the text editor to add a description under the header. 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
| Increase image size | Tick the checkbox to stretch the image across the full width of the screen. The height of the image will adjust automatically to preserve the image’s original aspect ratio. If toggled off, there will be padding around the image. |
Design Fields
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background 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 your site text colour. |
| Button colour |
Add a HEX code to change the border and text colour of the call to action button. By default, it is set to your primary colour. |
| Remove padding from top of block | Tick the checkbox to remove the spacing from the top of the block. |
| Remove padding from bottom of block | Tick the checkbox to remove the spacing from the bottom of the block. |
Gallery
The Gallery block allows you to showcase multiple images. The first four images will be displayed in the block, while the rest can be seen in a lightbox gallery slider when you click on one of the images or the call to action button (if displayed).
Content Fields
| Header | Add a catchy title for the block. |
| Text | Use the text editor to add a description under the header. This is best used to give your customers a snapshot of your brand and what experiences you offer. |
| Display button |
Tick the checkbox to display a button that opens the lightbox gallery. We recommend activating this if you have more than 4 images. |
| Button text |
Customise the label on the button that opens the lightbox gallery. |
| Gallery images |
Click the Add Image button and then upload an image with a width of at least 1200px for best results. You can add as many images as you like. To rearrange the order of the images, drag and drop the image fields by pressing the three-dot icon. We recommend uploading your best images in the first 4 slots. Note: that images will be displayed in their original aspect ratio. |
Design Fields
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background 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, text and button in the block. By default, it is set to your site text colour. |
| Remove padding from top of block | Tick the checkbox to remove the spacing from the top of the block. |
| Remove padding from bottom of block | Tick the checkbox to remove the spacing from the bottom of the block. |
Gallery Grid
This variation of the Gallery block contains the same fields but displays images differently. The Gallery Grid crops images into squares and displays all images in the block (rather than just the first 4). Users can click on the images to open the lightbox gallery and view them in a large format with the original aspect ratio.
Content Fields
| Header | Add a catchy title for the block. |
| Text | Use the text editor to add a description under the header. This is best used to give your customers a snapshot of your brand and what experiences you offer. |
| Display button |
Tick the checkbox to display a button that opens the lightbox gallery. We recommend activating this if you have more than 4 images. |
| Button text |
Customise the label on the button that opens the lightbox gallery. |
| Gallery images |
Click the Add Image button and then upload an image with a width of at least 1200px for best results. You can add as many images as you like. To rearrange the order of the images, drag and drop the image fields by pressing the three-dot icon. We recommend uploading your best images in the first 4 slots. Note: that images will be displayed in their original aspect ratio. |
Layout Fields
| Number of images per row | Toggle the slider to adjust the number of images to be displayed per row. There's a minimum of two images and a maximum of four images per row. |
Design Fields
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background 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, text and button in the block. By default, it is set to your site text colour. |
| Remove padding from top of block | Tick the checkbox to remove the spacing from the top of the block. |
| Remove padding from bottom of block | Tick the checkbox to remove the spacing from the bottom of the block. |
Image with Text Over
Show off a feature of your experiences with an image and a text overlay — a great way to introduce your experiences.
Content Fields
| Header | Add a catchy title for the block. |
| Subtitle | Add a subheading above the header. |
| Left-column text | Add a description text for the left-hand column. The text editor also allows you to insert hyperlinks and tables, style the text, and more. |
| Right-column text |
Add a description text for the right-hand column. Leave empty for Left-column text to fill the entire box. |
| 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. |
Design Fields
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background image, the background will default to the background colour – add a HEX code to customise the colour. |
| Remove box background image overlay | By default a dark overlay is added to the box background image. Tick this checkbox to disable the overlay. |
| Text box background image | Upload an image to override the 2-column text box's background colour. For the best results, upload an image with a minimum width of 1920px. |
| Text box background colour | By default the 2-column text box's background colour is set to your primary colour at 10% opacity. Add a HEX code to change 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 your site text colour. |
| Button colour |
Add a HEX code to change the border and text colour of the call to action button. By default, it is set to your primary colour. |
| Shorten padding below the block | Tick this checkbox to shorten the padding (i.e. empty space) below the box image. |
| Remove padding from top of block | Tick the checkbox to remove the spacing from the top of the block. |
| Remove padding from bottom of block | Tick the checkbox to remove the spacing from the bottom of the block. |
Image Grid with Text
The Image Grid With Text block is a great way to display your experiences or content in a visual way by category, such as location, theme or activity. Each image in the grid can also link out to other pages on your website (or external websites). You can as many images as you like. The grid will be displayed in rows of 3 and so, where possible, we recommend adding images in groups of 3 to ensure the image grid looks complete.
Content Fields
| Header | Add a catchy title for the block. |
| Subtitle | Add a subheading above the header. |
| Text | Add a description text using the text editor. We recommend keeping the text very short, up to 2 sentences. |
| 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. |
| Images To add images, scroll to the bottom and click Add Image. To remove images, click the bin icon. To rearrange images, click the three-dot icon and drag the image to its new position. |
|
| Title |
For each image in the grid, add a title to be displayed on top. |
| Image |
Upload the images to be displayed in the grid. We recommend uploading images in a square (1:1) format. |
| Image alt text |
Add a description for each image for accessibility and SEO. Note: This will not be shown on the website design. |
| Image link |
For each image, add the URL of the page you would like your customers to go to when they click on the image. 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. |
Layout Fields
| Align headers to the centre | By default, the header and text are displayed side by side in a 2-column layout. Tick this checkbox to center the header and text. |
Design Fields
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background 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 your site text colour. |
| Button colour |
Add a HEX code to change the border and text colour of the call to action button. By default, it is set to your primary colour. |
| Image text colour |
Add a HEX code to change the colour of the text on each image in the grid. By default, it is set to white (#FFFFFF). |
| Remove padding from top of block | Tick the checkbox to remove the spacing from the top of the block. |
| Remove padding from bottom of block | Tick the checkbox to remove the spacing from the bottom of the block. |
Single Image & Text
The Single Image & Text block allows you to display an image and text side-by-side in a horizontal layout. You have the option to position the image on the left or right side.
Content Fields
| Image | Add the main image for the block. We recommend uploading an image with a minimum width of 720px. Note that the image height will adjust according to the size of the text (i.e. a longer text block will increase the height of the image). |
| Header | Add a catchy title for the block. |
| Subtitle | Add a subheading above the header. |
| Text | Add a description text using the text editor. We recommend keeping the text very short, up to 2 sentences. |
| 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
| Display the image on the right | Tick this checkbox to position the image on the right side of the block. By default, the image is positioned on the left side with the text card on the right side. |
Design Fields
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background 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 your site text colour. |
| Card background image | Add a background image to be displayed on the text card. This will override the card background colour. |
| Card background colour |
Add a HEX code to change the background colour of the text card. By default it is set to transparent. |
| Card button and subtitle colour | Add a HEX code to change the colour of the call to action button and subtitle. By default, it is set to your primary colour. |
| Remove padding from top of block | Tick the checkbox to remove the spacing from the top of the block. |
| Remove padding from bottom of block | Tick the checkbox to remove the spacing from the bottom of the block. |
Multiple Images & Text
With the Multiple Images & Text block, you can add as many text and image cards as needed. You can configure the block to display 1 card per row, 2 cards per row or 3 cards per row. You also have the option to display the cards in a grid layout or a swiper.
Content Fields
| Header | Add a catchy title for the block. |
| Text | Add a description text using the text editor. We recommend keeping the text very short, up to 2 sentences. |
| Display button above cards | Tick the checkbox to display a call to action button above the cards. Make sure Display button below cards is unselected to display correctly. |
| Display button below cards | Tick the checkbox to display a call to action button below the cards. Make sure Display button above cards is unselected to display correctly. |
| 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 for 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. |
| Image & text cards To add cards, scroll to the bottom and click Add Card. To remove cards, click the bin icon. To rearrange cards, click the three-dot icon and drag the card to its new position. |
|
| Title |
For each image in the grid, add a title to be displayed on top. |
| Text |
Upload the images to be displayed in the grid. We recommend uploading images in a square (1:1) format. |
| Image |
Upload the images to be displayed in the grid. We recommend uploading images in a square (1:1) format. |
| Image alt text |
Add a description for each image for accessibility and SEO. Note: This will not be shown on the website design. |
| Button text |
Enter a button label for each card or leave blank to hide the button. |
| Button link |
For each card button, add the URL of the page you would like your customers to go to when they click on the 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. |
Layout Fields
| Number of cards per row | Toggle the slider to adjust the number of cards to be displayed per row. There's a minimum of one images and a maximum of three images per row. |
| Show cards in a carousel |
By default, all image and text cards are displayed in a grid layout, stacked on top of each other. Tick this checkbox to display the cards in a carousel format. This will collapse the cards into one row and customers will need to click the arrow buttons to see more. |
| Align cards to the center |
Tick this checkbox to align cards to the center if there is empty space in the row. For example, if you have selected Three cards per row and only have two cards in a row, this will position the two cards in the center. |
| Center content in cards | Tick this checkbox to align text inside the cards to the center. By default, it is aligned to the left. |
Design Fields
| Display square images | Tick this checkbox to display the images in a square format. By default, images are displayed in a rectangular, 3:2 ratio. |
| Background image | For the best results, upload a landscape image with a minimum width of 1920px. |
| Background colour | If there is no background 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 your site text colour. |
| Card background image | Add a background image to be displayed on the text card. This will override the card background colour. |
| Card background colour |
Add a HEX code to change the background colour of the text portion of the cards. By default it is set to transparent. |
| Card text colour | Add a HEX code to change the colour of the text in the cards. By default it is set to your site text colour. |
| Card button colour |
Add a HEX code to change the colour of the call to action button in the cards. By default it is set to your primary colour. |
| Remove padding from top of block | Tick the checkbox to remove the spacing from the top of the block. |
| Remove padding from bottom of block | Tick the checkbox to remove the spacing from the bottom of the block. |
Comments
0 comments
Article is closed for comments.