Image with text overlay

The “image with text overlay” section offers the opportunity to utilise the powerful strategy of image and text working together.

A strong image alone can be enough to strike a chord with customers, but by adding another layer to this in the form of text, you have an even higher capacity to influence behaviour..

Adding a Image with text overlay section

To add the “image with text overlay” section, head to your theme’s sections area:

  1. Admin

  2. Online Store → Themes → Customise

  3. Sections

  4. Choose "Add section"

  5. Select "Image with text overlay"

You will then be presented with the following options:

Settings

Background image

Image

When you first add the section, you will see something similar to this, with an empty image area and default text:

To add an image, choose “select image” and the section will update, similar to the below:

We recommend using an image which is 2000 x 1350 pixels.

For further information relating to images and aspect ratio, please take a look at our great help document here:

Learn more

Section height

Choose how high the section is for your image. You have the options of small, medium, large and original.

An example of small:

An example of large:

Overlay opacity

0%

50%

95%

Enable parallax effect

Parallax, also known as slip-scroll, gives the effect that your image is “underneath” your main website’s content, animated to look as though it is sliding along, whilst hiding under a top layer.

As you scroll up and down the page, more of this image is ‘revealed’, depending on the direction you scroll in.

This provides a sense dynamism to your page, but is not compulsory so we have provided the option to toggle it on and off.

An example of parallax:

Where to switch this on and off:

Heading

Adjust your section’s heading by editing the 'heading' text entry field.

This is plain text, so does not include bold or italic.

Tip

This is not a required field, so if you prefer not to have a heading, just leave the box blank.

Text

Add your main block of text here. You can use links, italic and bold to enhance your message.

An example of some placeholder text:

Text color

Choose from white, feature or dark.

White: Features a clean white, crisp look.

Feature: This pulls in your chosen color in ‘settings > colors’.

Dark: Features a subdued charcoal black look.

More information on your colors is available here:

Learn more

Text position

Choose from left, centre or right. Example videoHere

Text alignment

Choose from left, centre or right. Example video

Heading size

Choose a value from 12-50px, using the slider

Example video

Text size

Choose a value from 12-50px, using the slider. Video example

Button

Text

This will appear as button text, once you have also added a link to the button (shown in the step below - “link”). Video example

Link

Add a link by clicking in the entry field. Choose a link from the list which pops up, or add your own manually:

Here’s how your button will look, alongside the rest of the completed section components: