Image with text overlay

Show text over a featured image for greater impact.

Overview

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.

Leverage the strength of text and image used in conjunction and you have a winning formula.


How do I add the 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:

Note

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

Tip

For further information relating to images and aspect ratio, please take a look at our great help document here:
docs.wetheme.com/faqs/what-sizes-should-I-upload-my-images


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 an extra sprinkling of dynamism and magic to your page, but is not necessarily to everyone’s taste, 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’

More information on your colors is available here:

https://docs.wetheme.com/envy/general-settings/colors

Dark: Features a subdued charcoal black look.


Text position

Choose from left, centre or right.


Text alignment

Choose from left, centre or right.


Heading size

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


Text size

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


Button

Text

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

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:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.