Image Overlay addon is a fun element that can be used to layer an image with a Color Overlay as well as a Title and Subtitle. This works particularly well for headers, banners, etc. with its eye-catching structure.

How to Add Image Overlays

Open the Addons Panel by clicking on the Addons button on the Sidebar or using the plus icon found within a Row. Scroll to the Media section and drag & drop the Image Overlay addon onto your canvas.

Image Overlay Settings

Now it’s time to customize the Image Overlay Settings. Open this window by clicking on the Image Overlay icon on the inline editor.

Image

Choose Image: Opens the Media Manager from where you can select the Image you want to use.

Image URL: If the Image you want is online, you can simply paste its URL into the text field beside the Upload button.

Upload: Also opens Media Manager and from here you can click on the Upload Files option to upload your Image.

Height: Define the Height of the Image.

Animation: Select the Animation style of the Image.

Open Image In Lightbox: Enable this option to open this Image within a Lightbox.

Title

You can also give your Image Overlay a Title. Go to the Title tab on Image Overlay Settings to access this option. 

Title: Enter the text for the Title

HTML Element: Set the HTML element hierarchy as H1, H2, H3, etc.

Icon: Choose an icon to appear beside the Title.

Margins: Set the Margins of your Title.

You can further customize your Title’s style using the options from the Color and Typography menus on the Title tab. For more information check out their dedicated documentation.

Link

From the Link tab, you can link your Title to something.

URL: Choose this option to add an outbound link or link using a URL.

Menu: Choose this option if you want to link to a Menu Item from this website. Select the one you want to link to from the following dropdown list.

Pages: Choose this option if you want to link to a Page from this website. Select the one you want to link to from the following dropdown list.

Open in New Tab: Open the added link in a new tab.

No Follow: Tell search engines to ignore this link.

Subtitle

You can also give your Image Overlay a Subtitle. Go to the Subtitle tab on Image Overlay Settings to access this option. 

Subtitle: Enter the text for the Subtitle

HTML Element: Set the HTML element hierarchy as H1, H2, H3, etc.

Icon: Choose an icon to appear beside the Subtitle.

Margins: Set the Margins of your Subtitle.

You can further customize your Subtitle’s style using the options from the Color and Typography menus on the Title tab. For more information check out their dedicated documentation.

Content

Content is the Title, Subtitle and Button grouped as one. The following settings can be found on Content > Image Overlay Settings.

Position: Select the position of the Content. Options include Top Left, Top Center, Top Right, and Vertical Center Left.

Show Content On Hover: Make content only visible only when hovered over.

Padding: Set the Content’s padding.

Color Settings

Change the Image Overlay’s Background color from Color Settings > Normal.

Background: Choose the Background type. Options include None, Color, Gradient.

None: Select this option so that no background color is applied.

Color: Select this option to apply a solid color background.

Background Color: In Solid Color mode, select the color you want your background to be.

Gradient: Select this option to apply a gradient color background.

Color 1: Select the first Color for the Gradient.

Color 2: Select the second Color for the Gradient.

Start: Define how far the first color will spread.

End: Define how far the second color will spread.

Type: Select if the Gradient type will be Linear or Radial. A Linear Gradient is in a straight direction whereas a Radial Gradient is in a circular direction.

Angle: Set the Angle of the Gradient

Additionally, you can also customize the colors of the Image Overlay when in Hover mode from Color Settings > Hover.

Button Settings

An Image Overlay comes with a Call-To-Action Button, which comes in handy if you want to easily redirect your prospective customers to a page. To start customizing this button to suit your purposes open the Button Settings by clicking on the Button icon on the inline editor.

Under the Basic tab, set the button text in the Label field. The button may not be visible until after this is set. You can also set the Style, Appearance, and Shape from here. Define the Button’s destination link from the Link tab. 

For a more in-depth guide to Button Settings, check out its dedicated documentation.