Image Feature Element in Funnel and Website Builder
The image feature element allows you to easily place text and image side by side in one element for when your text describes your image.
In This Article:
To add the Image Feature element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Blocks section, select the Image Feature element and drag it to the desired location on the page.
General Options
From the right hand options panel, you can rename the element, set the letter spacing across all text, set a background color for the element, set the text alignment and the font for the element.
Image Options
Within General Options of the Image Feature is an Image Options box.
- In the image box, you can paste in an Image URL or click on the image icon to upload an image or choose from your media library.
- The image by default will come in at full width or at the size of the column it is in. You can set a specific width or height to make the image the size you want. Generally, you will only want to set one of these dimensions to prevent distortion as once one is set, FG Funnels will adjust the other dimension to be proportional.
- You can add Alt Text which is important for both SEO and accessibility purposes. This should describe the purpose of the image.
- There are additional image styling options under the Advanced Options tab.
Text Options
In order to change the text in the box, you can click into the text already in the box and remove and start typing your text.
Underneath the Image Options in the General Options panel, there are a number of options for the text in the Image Feature element.
- You can choose an icon to be displayed before the text.
- You can set the font size, font weight and font color for both the headline and the text color.
Styling Options
From the General Options panel there are a few styling options to further customize the look of your Image Feature Element.
- You can manage the margin and padding for spacing adjustments. Margin will add spacing outside of the survey element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
- Under Image Feature Options, you can choose how much of the space you want the image to take up and how much of the space you want the text to take up.
- You can also choose whether you want the order to be image first, then text or text first then image.
Image Actions
Finally, you can set your image actions as to what happens when the image is clicked on. There will be an actions box with an Image Actions option which defines what happens when a user clicks the image. By default, this is set as none, but you can change it to:
- Open popup: When image is clicked, the popup for the page will open.
- Website URL: This option allows you to add a URL of a page that the user will be sent to when the image is clicked.
- Hide Elements: This option allows you to select elements on the page that are visible but should be hidden when the image is clicked.
- Show Elements: This option allows you to select elements on the page that are hidden but should become visible when the image is clicked.
- Scroll to Element: This option allows you to select an element on the page that will be scrolled to when the image is clicked. For example, if someone clicks an image, it might scroll them right to the offer stack.
- Step: This option allows you to select a step in the funnel that the visitor will be directed to when clicking the image.
Next step: This option will take the visitor to the step directly underneath the current step in the funnel overview tab. You can quickly check that step by clicking on the name of the page in the middle of the middle row in the top toolbar, this will bring up the pages menu. The page listed right under the current page is the "Next Step".
- Call: This option allows you to enter a phone number that will be called via the device upon image click (this is very useful for mobile devices but may not work on computers).
- SMS: This option allows you to enter a phone number that will be texted via the device's default messaging service upon image click (this is very useful for mobile devices but may not work on computers).
- Email address: This option allows you to enter an email address that will be filled in a new blank email through the device's email client upon image click
Advanced Options
- You can set a text shadow for your text under text shadow.
- Line height will increase or decrease the spacing between lines.
- You can choose to add a border to the image, round the corners with image radius, add a shadow to the image or choose between black and white and full color.
- Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
- Custom class and CSS selector allow you to make CSS adjustments that target this element.