🥳 Celebrate Our Launch With a $200 LIFETIME Discount OFF The Premium Plan Use: BIRTHDAY2024
This offer expires 9/30/2024, at 11:59 PM EST
How to Use an Image Element in the Funnel Builder
Add images, style them fast with themes, make them clickable with actions, and fine-tune sizing for mobile—so your funnels look clean and convert better.
Using Images to Improve Visual Flow and User Engagement
Images help break up content, reinforce messaging, and guide attention across funnels and websites, especially when visitors are scanning pages quickly on mobile devices.
The Image Element in BizStackPro allows businesses to upload visuals, apply styling themes, control sizing and spacing, add click actions, and optimize image behavior across desktop and mobile layouts.
Poor image sizing, inconsistent styling, or unoptimized mobile layouts can create cluttered pages, slower user experiences, and visuals that distract instead of supporting the page content.
This guide explains how to add image elements, configure styling and themes, apply image actions, manage advanced controls, and optimize images for responsive layouts inside BizStackPro.
Before adjusting image styles and mobile sizing, it helps to understand how the Image Element is structured inside the BizStackPro builder.
Overview
The Image element in BizStackPro lets you upload or select images from your media library, control spacing and alignment, apply borders/shadows, and set optional click actions. You can also adjust sizing per device to keep your pages responsive.
Good to know: Consistent image styling (radius, border, and shadow) makes your funnels look more “designed” and helps important visuals stand out without clutter.
Step 1: Add an Image Element
- Open the funnel or website page you want to edit.
- Launch the page editor.
- Click the + icon on the left to open the element list.
- Search for Image, then drag and drop it onto your page.
Example: Name the element “Hero Image” or “Logo” so it’s easy to find later in the layers panel.
Step 2: Configure Image Settings
Select the image element to open the settings panel. You’ll typically see three tabs: General, Themes, and Advanced.
General
- Name: Label the element for organization.
- Spacing: Adjust padding/margins for clean alignment.
- Background + opacity: Useful for framed or layered layouts.
- Alignment: Control left/center/right positioning.
- Image source: Choose from the Media Library, upload a file, or use a URL (if available).
- Height & width: Set precise sizing values.
- Image action: Add click behavior (optional).
Tip: If the image includes small text (like a badge), avoid shrinking it too far on mobile—readability matters.
Themes for Fast Styling
Use Themes to apply consistent styling quickly—especially helpful when multiple images should share the same look.
- Rounded corners for a modern, friendly feel
- Borders to separate images from backgrounds
- Drop shadows to add depth and focus
Image Actions (Click Behavior)
Image actions make images interactive—great for logos, product shots, or feature graphics that should lead somewhere.
- Open URL (internal page or external link)
- Open popup (lead capture, offer details, booking prompt)
- Scroll to element (jump to a specific section)
- Call / email actions (where available)
Best practice: If an image is clickable, make it obvious—pair it with a button, or place short text nearby like “Tap to learn more.”
Advanced Controls
- Border radius: Fine-tune rounding.
- Borders: Set thickness/style/color.
- Shadows: Control depth and emphasis.
- Visibility: Show/hide on desktop or mobile.
- Custom CSS class: Helpful for consistent design systems (if you use custom CSS).
Mobile-Specific Image Editing
Mobile sizing lets you keep images sharp and well-positioned on smaller screens.
- Switch the builder to Mobile View.
- Select the image you want to adjust.
- Set mobile height and width values using units like px, %, rem, or em.
Quick check: Preview the page and confirm the image doesn’t overflow, crop awkwardly, or push key content too far down the screen.
Build cleaner pages with better visuals
Use image elements to support your message, guide attention, and keep your funnel looking professional across desktop and mobile.
Opens in a new tab.
Frequently Asked Questions
How do I add an image element to my funnel or website?
Open the page editor, click the + icon on the left, search for the Image element, then drag and drop it onto your page.
What settings are available for customizing an image?
You can adjust spacing, background/opacity, alignment, sizing, themes, radius, border, shadows, visibility, and custom classes.
Can I apply themes to my images?
Yes. Themes let you quickly apply preset styling like borders, shadows, and rounded corners.
Does BizStackPro support mobile-specific image editing?
Yes. Switch to mobile view and set unique height/width values using px, %, rem, or em for mobile optimization.
What are image actions?
Image actions add click behavior such as opening URLs, launching popups, or scrolling to an element.
Make your funnels look professional on every device
Clean image spacing, consistent themes, and mobile sizing controls help your pages load well, look polished, and keep visitors focused on the next step.
Better design. Better conversion flow.
Disclaimer: This site is NOT endorsed by Google, Facebook or YouTube in ANY WAY. All trademarks & Logo / branding are the property of their respective owners. Please Note: This site was created in BizStackPro by Ken George II (An Affiliate of BizStackPro) and may contain affiliate links.
Copyrights 2024 | AllAboutBizStackPro.Com | Pricing | About | Features | All Rights Reserved.