Salado Slider (alonepro/salado-slider)
The Salado Slider is AlonePro's signature hero section block. Built for conversion and storytelling, each slide features a split two-column layout (content, CTA buttons, and social proof avatars on the left; hero photography on the right) with GSAP 3D word-by-word text animations and progress-bar pagination.
Features
- Split 2-Column Structure: Clean left-to-right hierarchy optimized for fundraising calls to action.
- GSAP 3D Text Entrance: Word-by-word 3D flip animation for heading copy and smooth zoom-blur transitions on hero images.
- Progress-Bar Pagination: Visual duration bar indicating slide progress alongside previous and next navigation arrows.
- Donor / Supporter Avatar Group: Display a compact row of supporter avatars and social proof text (e.g., "Joined by 15,000+ donors").
Adding Slides
- Insert the Salado Slider block into your template or page.
- In the block inspector (right sidebar), locate the Slides tab.
- Click Add Slide.
- Configure the fields for each slide:
- Subheading: Short category or badge text (e.g.
URGENT APPEAL). - Heading: Primary bold headline with 3D animation support.
- Description: Explanatory mission text.
- Button Text & Button URL: Primary call-to-action button.
- People Avatars Image: Small horizontal avatar strip image.
- Hero Image: Right-column featured photograph.
- Subheading: Short category or badge text (e.g.
Block Inspector Settings
| Setting | Type | Default | Description |
|---|---|---|---|
speed | Number | 500 | Transition duration in milliseconds. |
autoplay | Toggle | true | Automatically advance through slides. |
autoplaySpeed | Number | 5000 | Delay between slides in milliseconds. |
pauseOnHover | Toggle | true | Pause autoplay when user hovers over the slider. |
loop | Toggle | true | Seamless infinite loop from last slide to first. |
enableScrollAnimation | Toggle | true | Trigger GSAP entrance animation when scrolling into viewport. |
Color Customization
The Salado Slider provides granular color controls in the block sidebar. Each color setting accepts preset slugs from your active Style Variation:
- Subheading Color & Background:
subHeadingColor,subHeadingBg - Heading & Description:
headingColor,descriptionColor - Primary Button:
buttonTextColor,buttonBgColor,buttonTextColorHover,buttonBgColorHover - Social Proof Text:
peopleTextColor - Navigation Controls:
navBgColor,navIconColor,navBgColorHover,navIconColorHover - Progress Bar:
progressColor,progressBgColor
Troubleshooting
- Slides appear unstyled: Verify that AlonePro is the active theme in Appearance → Themes (not Nextora directly).
- Images cropped unexpectedly: For optimal display, use consistent aspect ratios across all slide hero images (recommended:
16:9or4:3with minimum dimensions of1200x900px).