Max Addons Scroll Image element for Bricks Builder lets you create engaging and interactive image effects that grab attention. You can display an image inside a device frame and control how it scrolls (Horizontally or Vertically) into view using various triggers and directions.
Getting Started#
How to Add the Scroll Image Element to a Page#
- Open an existing page or create a new one in the Bricks Builder editor.
- In the search bar, type "Scroll Image".
- Add the element into your layout.
- Look for the "Max" label on the element to confirm it's part of Max Addons.
- Once the element is added, you'll see customization options available under two tabs: Content and Style.
Let's walk through the options available under the Content tab.
Content Tab Options#
The Content tab is divided into four sections:
- IMAGE
- SETTINGS
- OVERLAY
- ICON
Here's a breakdown of what each section offers:
IMAGE#
This section helps you configure the main image.
- Select Image: Upload or choose an image from the media library.
- Custom Alt Text: Add alt text for accessibility and SEO purposes.
- Loading: Choose how the image should load: Lazy or Eager.
- Show Title: Enable or disable the display of the image's title.
- Stretch: Toggle to stretch the image within its container.
Link To: You can make the image clickable. Set it to:
- None
- Other (then define the link)
After selecting "Other," you can choose the Link Type, which includes:'
- Internal post or page
- Taxonomy
- Dynamic data
- Lightbox (image or video)
- Custom URL
FRAME: Wrap your image in a device-style frame to enhance presentation. Choose from:
- Phone
- Tablet
- Laptop
- Desktop
- Window
SETTINGS#
This section allows you to define how and when the image scrolls.
- Trigger: Choose what triggers the scroll animation. Options include:
- Hover
- Click
- Scroll
- Viewport.
- Scroll Direction: Select the direction of the image scroll:
- Top to Bottom
- Bottom to Top
- Left to Right
- Right to Left
- Scroll Speed: Set the speed at which the image scrolls.
- Frame Width: Adjust the width of the device frame around the image.
OVERLAY#
Use this section to add an overlay to the image.
- Image Overlay: Add color or gradient overlays for better visual effect.
- Overlay Visibility: Control when the overlay appears: Always Visible, Show on Hover, and Hide on Hover
ICON#
Add an optional icon on top of the image and customize its appearance.
- Choose Icon: Select an icon from the library.
- Size, Width, Height: Adjust icon size and spacing.
- Color & Background Color: Customize the icon's colors.
- Border & Box Shadow: Add styling effects around the icon.
- Icon Visibility: Choose when the icon appears.
- Transition Duration: Set how smoothly the icon appears or disappears.
So, this was a detailed overview of the Scroll Image element. I hope the doc helps you understand the features and functionalities of the element.