The Scroll Accordion widget for Elementor brings a unique interactive scrolling effect to your website, allowing sections to expand as users scroll through. This visually engaging widget is perfect for showcasing content in a structured yet dynamic way, whether it’s images, text, or other media. With smooth animations and customizable styling options, it enhances user experience while keeping the design modern and fluid.
Let’s look at each of the options in the Scroll Accordion widget for Elementor below.
Add a Scroll Accordion Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Scroll Accordion”
- Hover over the widget in the search results and click install
- Add the “Scroll Accordion” widget to any Elementor Page
Source Settings
The Scroll Accordion widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
Posts
Display WordPress posts dynamically in scroll accordion, including custom post types and fields for maximum flexibility.
WooCommerce Products
Use this to showcase WooCommerce product images, names, prices, and descriptions in the scroll accordion.
Meta Field
Use Meta as an item source for your scroll accordion to dynamically display and manage content from your Meta data.
JSON or CSV
Load your scroll accordion with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for your scroll accordion to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your scroll accordion to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the scroll accordion to dynamically display and manage menu items in a visually engaging layout.
RSS
Fetch and display items from an RSS feed. This is perfect for showcasing updates or content from external blogs.
API Integrations
Integrate an API into your scroll accordion to dynamically fetch and display data from external systems or services.
General Settings
Sticky Position Bottom Space
Set the space (in pixels) between the sticky element and the bottom of the viewport. Adjust this to control how far the sticky element should stay from the bottom when scrolled.
Accordion Card Gap
Set the spacing between accordion cards. Set to zero for no gap or adjust as needed for design preferences.
Accordion Space
Determine the spacing (in pixels) within the accordion items for better visual alignment.
Enable Scroll Motion
Toggle the scroll motion effect. When enabled, animations or transitions related to scrolling are applied to the element.
Hover Transition Duration
Control the duration of hover transitions in milliseconds. Use this to make hover effects smoother or snappier.
Item Image Size
It allows you to select the size of the item images. The size can be adjusted to predefined settings-
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
RTL
Turn on for Right-to-Left (RTL) layouts, useful for languages like Arabic or Hebrew.
Layout Settings
Show Title
You can toggle the visibility of the title. Set it to Yes to display the title or No to hide it.
Title HTML Tag
It allows you to specify the HTML tag for the title (e.g., div, h1, h2, etc.). This is useful for defining the semantic structure of your page.
Show Description
By this, you can toggle the visibility of the description text. Set it to Yes to display the description or No to hide it.
Show Button
You can toggle the display of the button. Set it to Yes to display the button or No to hide it.
Button Text
Type text for button.
Button Hover Style
Select the hover style for the button.
- Slide From Up
- Slide From Bottom
- Slide From Left
- Slide From Right
- Zoom In
- Zoom Out
- Diagonal Slide
Show Image
Show or hide the image.
Show Graphic Element
Show the graphic element from given options.
- Icon
- Image
- Text
Graphic Element Image Size
It allows you to choose the size of the graphic element image.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Testing and Tools Settings
Show Errors in Frontend
This option lets you toggle the display of error messages on the frontend. Set it to Yes to show errors for debugging.
Hide Sections In Editor
This option allows you to manage the visibility of sections in the editor.
Performance Settings
Disable "Section ID" Source JS/CSS
This option allows you to disable JavaScript and CSS associated with the "Section ID" source. Enable this only if you are not using the section ID as a source for items. Activating this feature removes unused JavaScript and CSS from the page, improving performance. However, disabling it may impact functionalities that rely on section ID source items.
Items Setting
Manage the items of the Scroll Accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Heading
Set the accordion heading, icon and background color.
Content
Select the content source, content title, description, link, and image.
Graphic Image
Choose graphic image, image size, icon and text.
BG
Set the background color.
Scroll Accordion Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Accordion Styling
Set the accordion heading alignment, padding, border, background, typography, and text color.
Accordion Card Styling
You can set the accordion card width, height, background color, box shadow, border radius, border, and padding.
Content Styling
Set the content width, padding, alignment, and background.
Graphic Element Styling
You can set the graphic element width, height, icon size, background color, border radius, and box shadow.
Title Styling
Style the title typography, color, text shadow and gap.
Description Styling
Here, you can set the typography, color, text shadow, and gap of description element.
Button Styling
Set the button width, text alignment, padding, typography, gap, background, border and box shadow.
Image Styling
You can set the image positioning, alignment, width, height, border radius, padding, and border.
Scroll Accordion Design Examples For Elementor
Here are some live use cases for the Scroll Accordion Widget.
Product reviews with scroll accordion.
Process steps with scroll accordion.
We hope this guide has helped you understand the Scroll Accordion Widget’s features and how it can elevate your website’s content presentation. Whether you’re highlighting key sections or creating an immersive storytelling experience, this widget offers endless possibilities. Explore its settings, experiment with different styles, and make your website more engaging. If you need further assistance, feel free to reach out
