The Image Feature allows you to integrate an image with a headline and descriptive text. It's ideal for showcasing team members or promoting products and services on your funnel and website pages. On the left side of the editor, you’ll find various customization options for your Image Feature, which we’ll explore below.
General Settings
Element Name/Title
In the General Settings section, you will notice the Element Name/Title field. By default, a name will be assigned to the element, but you can rename it for better organization and easy reference as you work on your page.
Text Shadow
This feature enables you to apply shadow effects to your text. You can choose from options such as light fade, mid-level shadow, or strong shadow effects.
Letter Spacing
With the letter spacing tool, you can adjust the space between individual letters. You can either increase the spacing or use a negative value to reduce the space and bring the letters closer together.
Background Color
You can change the background color by selecting the specific content you want to modify and choosing a color from the palette. If you need a specific shade, you can manually input the color code.
Text Alignment
The Align option allows you to position your text as you like within the Image Feature box, choosing between left, right, center, or justified text alignment.
Typography Settings
With the typography options, you can select from the headline or content fonts defined in your settings or opt for a custom font from the dropdown menu.
Image Settings
Image Upload
Clicking the image icon on the right side of the image placeholder brings you to the storage page where you can upload an image. Once uploaded, you can copy its URL by clicking the clipboard icon next to the delete button. Then, return to the editor and paste the URL to display the image.
Optimize Image Loading
For better page performance, you can optimize image loading by toggling this feature. However, disabling it may affect page speed, so use caution. Image optimization can significantly reduce page load times.
Dimensions (Width & Height)
Input custom width and height for your image by entering values in pixels in the respective fields.
Alt Text for SEO
Adding Alt text helps with SEO, so be sure to input a relevant description of your image.
Icon and Color Customization
Add Icon
To enhance your image feature, you can add an icon next to the headline. Search for an icon by name, or browse through the available options.
Color Settings
You can modify the colors of different elements:
- Headline Color: Adjust the color of your headline text.
- Text Color: Customize the text color for the body of your content.
- Link Text Color: Specify the color for any links within the text.
Spacing and Layout
Padding and Margins
You can fine-tune the positioning of your content using padding controls (left, right, top, bottom) and margin adjustments (top and bottom).
Column Configuration
Adjust the column sizes to make the text or image larger. You can also change the order in which the image and text appear, choosing either “text before image” or “image before text.”
Actions
Image Actions
Decide what happens when someone clicks on the image. You can choose to open a popup or redirect users to a website URL. If you select a URL, you can also enable the option to open it in a new tab.
Font and Theme Adjustments
Font Size (Desktop & Mobile)
Adjust the headline and body text font sizes for both desktop and mobile views to ensure your content is responsive.
Themes
Select a pre-designed theme for your image feature. However, keep in mind that choosing a theme may override some of your previous customizations.
Advanced Settings
Height Line Adjustment
This tool allows you to control the height of your element’s container by adjusting the size bar.
Feature Image Border & Radius
You can apply a border to your feature image and customize its appearance. Additionally, you can control the curve of the image border by modifying the image radius setting.
Image Shadow and Effects
If you wish to apply shadow to your image, the Image Shadow feature allows you to adjust its intensity. You can also apply effects like Full Color or Black & White.
Additional Customization
Visibility Options
Choose whether the element should be visible on mobile devices, desktops, or both by toggling the visibility settings.
Custom Class and CSS Selector
For advanced styling, you can enter a custom class name and copy the corresponding CSS code if needed.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article