Text and Gallery

The Text and Gallery module combines an image gallery with a text panel. The images change, but the text remains the same. See an example below:

Image of the text and gallery module

Enabling / Disabling

Like all modules, this module can be enabled / disabled. Please see the corresponding section of the documentation to find out more about this functionality.

Text Panel

Image of the text panel of a text and gallery module

  • Header Text: This is the header within a text and gallery module:

Image of the text panel of a text and gallery module

  • Body Text: This is the body text within a text and gallery module:

Image of the text panel of a text and gallery module

Please note that this is a rich text field. More info on that here. On desktop resolutons, this field has a height limitation, to ensure clean layouts, which is why the character limit is 450.

Tip

You can leave any text field blank, and the website builder will adjust the layout to make the remaining text elements fit. You could even leave all text out, if desired.

  • Background / Font Colour: You can control the background colour and text colour of text and gallery modules using these controls.
Tip

If a small or large module-gap was selected, the text and gallery module takes this into account, see Module Spacing in Essentials for more information.

Image of the gallery module's images

Here you may add / re-order / remove images from your gallery. Please note that the images start out in a compact state, like this:

Image of the gallery module's image list items, compact form

These items expand when clicked:

Image of the gallery module's image list items, expanded form

Selecting the ‘collapse'-button will make the item compact again. Image of the collapse button

Image of the gallery module's image fit option

The image fit option allows you to specify whether your gallery should try to ‘fit' the whole image into the space of the gallery (‘cover'), or shrink the image within the space. This is easiest to see visually:

Cover

Image of the gallery module online

Scaledown

Image of the gallery module, scale-down option

Image of the gallery module's auto scroll option

By default, a gallery automatically scrolls through its images at a set interval.

Image of the gallery module's scroll interval option

You can define how quickly the images of the gallery change, in milliseconds. Therefore, 4000, for example, is equivalent to 4 seconds.

Image of the gallery module's background colour option

You may customise the background colour shown when using ‘scale down' as an image fit option.

Image of the gallery module's marker options

  • Enabled / Disabled: You can turn off the markers entirely, if desired.

  • Background Style: There are three options for the marker backgrounds. None: Image of the gallery module's marker option 'transparent background' / opaque (with a customisable background colour): Image of the gallery module's marker option 'transparent background' and ‘gradient', which you can see above.

  • Dot Colour: This allows you to change the colour of the dots in their initial state (in above images, that is white).

  • Selected Dot Colour: This allows you to change the colour of whichever dot corresponds to the image that is currently showing.

  • Dot Rollover Colour: This is the colour of any dot that the user's mouse is hovering over.

Image of the gallery module's navigation arrow options

  • Show Arrows:

You can enable or disable the arrows. Here is an example without arrows:

Image of the gallery module with disabled arrows

  • Arrow Colour:

Image of the gallery module's navigation arrows online

Button

Please refer to the CTA / Button section for more info about the button.

Tip

Please do not forget to hit one of the save buttons, to make sure the changes you have made are actually saved. Why not keep a window with your preview open, to see the changes in realtime?