The Image Feature element lets you add an image with a headline and text. Use it for team member highlights or product and service highlights on your funnel and website pages. On the right side of the page, you'll find various customisation options for the Image Feature, which we'll cover below.

General Settings

Element Name/Title

In the General Settings tab, you'll first see the Element Name/Title. The default name is used as the element name. You can leave it as is or rename it for easier identification as you build your page.

Letter Spacing

The letter spacing option lets you spread out the letters in your text, or use a negative value to bring them closer together.

Background Color

To change the background colour of your Image Feature, select the content you want to adjust and click on it. From the options shown, you can pick a colour or enter a custom colour code if the exact shade isn't available. Type the code into the space provided and click Add colour.

Align

The Align option lets you position the text in your Image Feature box to the left, right, centre, or justified.

Typography Type

The Typography Type gives you three font options: the headline font, the content font you set up in settings, or a custom font selected from the dropdown menu.

Image Option

  • Image: Clicking the image icon on the right opens the storage page, where you can upload your image. Once uploaded, click the image and then click the "copy to clipboard" icon in the upper right corner, next to the "delete" icon, to copy the image URL. Click "Back" to return to the editor, then paste the URL in the space provided. Your image will appear in the editor.
  • Optimise Image Load: To optimise image load, toggle it off. A warning will appear; if you're sure you want to turn it off, click "Ok".
  • Warning: Turning off image lazy loading may affect your page speed. Optimising images for your website can reduce your total page load size by up to 80%. 
  • Width and Height (PX): Set the width and height by entering your desired size in the space provided.
  • Alt Text (For SEO): You can add the Alt text here.

Icon

To add an icon to your Image Feature, select from the list of available icons. If you have a specific icon in mind, type it into the search bar to narrow down the options. This icon appears next to the Image Feature headline text.

Desktop Headline Font Size and Weight

You can adjust the mobile and desktop headline font sizes of your Image Feature by moving the size bars. Font Weight determines the thickness of the text, letting you make the headline bold, semi-bold, or light.

Desktop Text Font Size and Weight

You can adjust the mobile and desktop text font sizes of your Image Feature by moving the size bars. Font Weight controls the text's boldness, helping to create a clear visual hierarchy.

Color Options

  • Headline Colour: Under Headline Colour, you can adjust the colour of the headline text for your Image Feature, for example, the Feature Headline text.
  • Text Colour: For the colour of the text itself, you can only adjust it under Text Colour when adding text to your Image Feature.
  • Link Text Colour: For the colour of link text within your Image Feature, you can only adjust it under Link Text Colour.

Spacing Options

Under Spacing Options, there are several ways to adjust the spacing of your image content.

  • Padding Left, Right, Top, and Bottom: You can adjust the content's placement by toggling the Padding Left, Padding Right, Padding Top, and Padding Bottom toggle bars. Each toggle bar moves the content either to the left, right, top, or bottom, depending on the bar clicked.
  • Margin Top and Bottom: To adjust the top or bottom margin of your content, use the Margin Top or Margin Bottom toggle bars.

Image Feature Options

  • Column Sizes: This lets you increase the size of the text and images.
  • Column Order: Choose whether to arrange your Image Feature as "text before the image" or "image before the text".

Actions

  • Image Action: Under Actions, the Image Action option lets you choose between Open the popup or Go to the website URL. If you select "Go to website URL", you'll need to select which website page to link to. You can also toggle on Open In New Tab to send visitors to a new tab when they click.

Advanced Settings

Under Advanced Settings, you can make more specific adjustments to your element box.

Shadow

Text Shadow: The Text Shadow option lets you add a shadow to your text. Options are light fade, mid-shadow, and strong shadow.

Line Height

Use the Line Height feature to adjust the height of the element box by moving the size bar to your preferred height.

Feature Image Border

For the Feature Image Border, there are different types of border options available to choose from. Once you select one, a settings menu appears.

Image Radius

You can adjust the border's curve using the Image Radius feature. Increasing the value makes the edges curvier.

Image Shadow

To add a shadow to your image, adjust its strength using the Image Shadow feature.

Image Effects

You can add an effect to your image by selecting from the options under Image Effects. Choose between Full Colour or Black & White.

Visibility

Under Visibility, choose whether the element appears on mobile devices, desktops, or both. Click the icon to select your preference.

Custom Class

For Custom Class, enter your preferred class in the space provided.

CSS Selector

To copy the Custom CSS, click the "Copy" icon on the right side of the reference code.

The Image Feature element is a versatile way to enhance your website or funnel pages with visually appealing content. With customisable text, colours, spacing, and effects, you can create a polished, engaging design that fits your brand.