Image Element in Funnel and Website Builder
Images are one of the most commonly used elements in funnels and websites. Images have a number of options for actions and customizations.
In This Article:
To add an Image 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 Media section, select the Image element and drag it to the desired location on the page.
Image Options
Towards the middle of the options panel on the right side, there will be an image options panel:
- 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.
Image Actions
Underneath, 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
Customizing Image Options
Under the options panel on the right side, there are a number of different settings and styles for images.
- At the top, you can rename the image 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.
- You can set a background color and transparency for the image.
- You can align the image within it's container.
Animations Options
Selecting the animation tab will allow you to preview entrance animations and select an animation that will be applied to the text when the page is opened.
Advanced Options
- Under the advanced tab you can add a box shadows to your image. This has different settings to make it more/less prominent, adjust placement and adjust colors.
- You can make your image into a circle or have rounded corners under image radius.
- You can add a border to your image under image border.
- You can make your image black and white under image shadow.
- You can 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 classes and CSS selectors can be used for CSS changes.