Logo Slider

Show Section Heading

Controls whether the section heading area (badge h6, title h2, description p) appears above the logo track. Turn off when the logos sit directly under a hero or another heading row and you want the slider to render bare.

Heading Alignment (Desktop)

Text alignment for the heading area on desktop (993px and above).

• left Left-aligned
• center Centered (default)
• right Right-aligned

Heading Alignment (Tablet/Mobile)

Text alignment for the heading area on tablet and mobile (below 992px). Set independently from desktop.

• left Left-aligned
• center Centered (default)
• right Right-aligned

Heading Max Width (Desktop)

Caps the width of the heading area on desktop so long titles wrap into a tidy block instead of stretching edge to edge. Set to 0 to remove the limit and let the heading fill the container.

Scroll Speed (seconds)

Duration for one full loop of the logo track. Lower numbers scroll faster; higher numbers scroll slower. Keep between 25-45s for most layouts so the motion reads as gentle ambient movement rather than a busy ticker.

Scroll Direction

Which direction the logos scroll across the screen. Use Right when you have two logo sliders stacked on top of each other and want them moving in opposite directions for visual rhythm.

• left Left (default)
• right Right

Pause on Hover

Pauses the scroll animation when a visitor hovers over the logo track, so they can read a specific logo without it sliding away. Recommended on when logos are clickable.

Disable Scroll Animation

Renders the logos as a static centered grid with no scroll animation. Use when you only have a handful of logos that all fit on one row, or when the page already has heavy motion elsewhere and you want this section to sit still.

Section Heading

The badge + title + description block above the logo track. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep copy short so the heading doesn't dwarf the logo row.

Logos

The list of logos that scroll across the section. Each item is an image with an optional link. The track duplicates the list internally so the loop looks seamless. Aim for 5-12 logos of similar visual weight and similar height for the cleanest result.

Tip: Upload SVG or transparent PNG with the same target height. Mixed formats and wildly different aspect ratios make the track look uneven even with the Logo Height control.

Fade-In Animation

Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a slide from the chosen direction plus opacity.

• none No animation (default)
• bottom Fade Up (from bottom)
• top Fade Down (from top)
• left Fade from Left
• right Fade from Right
• fade Fade Only (no slide)

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

CSS ID

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links and JS targeting.

CSS Class

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Logo Height

Height of each logo image. Width adjusts automatically to preserve the aspect ratio. 40px reads as a tasteful trust strip; 60-80px makes the logos a hero element of the section.

Gap Between Logos

Horizontal spacing between each logo on the track. Wider gaps let each logo breathe but slow the perceived density of the row; tighter gaps look like a packed brand wall.

Logo Opacity

Resting opacity of each logo (100 = fully visible). Logos animate to 100% opacity on hover. 50-70% gives a refined, understated feel; 100% is loud and competes with surrounding content.

Grayscale Logos

Renders logos in grayscale at rest and animates to full color on hover. Useful when the brand logos have clashing accent colors and you want a uniform look until a visitor focuses on one.

Edge Fade Width

Width of the left/right gradient overlay that fades the logos into the section background as they enter and exit the track. Set to 0 to disable the fade entirely (logos will appear and disappear with a hard edge).

Show Badge Styling

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. The badge color and border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

Picks the badge tier. Colors are configured in Theme Settings > Badge.

• badge-primary Primary (default)
• badge-secondary Secondary
• badge-three Three
• badge-four Four
• badge-five Five
• badge-six Six

Top Divider

Decorative shape at the top of the section. The shape is rendered as an inline SVG matching the Top Divider Color you choose.

• none No divider (default)
• wave-1 Wave 1 (Gentle)
• wave-2 Wave 2 (Sharp)
• wave-3 Wave 3 (Multi)
• wave-4 Wave 4 (Smooth)
• wave-5 Wave 5 (Layered)
• tilt Tilt (Angled)
• curve Curve (Arc)
• triangle Triangle

Top Divider Color

Color of the top divider SVG. Set this to match the background color of the section directly above so the divider visually blends into it.

Top Divider Height

Height of the top divider shape. Taller values exaggerate the curve; shorter values flatten it.

Angle Height (Top)

Height of the angled divider, used only for the Tilt shape. Larger values create a steeper angle.

Flip Top Divider

Mirrors the top divider shape horizontally.

Bottom Divider

Decorative shape at the bottom of the section. Same 9 shape options as the top divider.

• none No divider (default)
• wave-1 Wave 1 (Gentle)
• wave-2 Wave 2 (Sharp)
• wave-3 Wave 3 (Multi)
• wave-4 Wave 4 (Smooth)
• wave-5 Wave 5 (Layered)
• tilt Tilt (Angled)
• curve Curve (Arc)
• triangle Triangle

Bottom Divider Color

Color of the bottom divider SVG. Set this to match the background color of the section directly below.

Bottom Divider Height

Height of the bottom divider shape.

Angle Height (Bottom)

Height of the angled divider, used only for the Tilt shape.

Flip Bottom Divider

Mirrors the bottom divider shape horizontally.

Divider Under Content

Puts the bottom divider behind the section content so buttons or links that overlap the divider area remain clickable. Turn on when a CTA in the section sits low and the divider is tall.

Background (Image, Video, Color, etc.)

The Background Type dropdown drives which sub-controls appear:

• none No background (default; section inherits the page bg)
• color Solid Color - reveals Background Color picker
• gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
• image Background Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The group label says "Image, Video, Color, etc." but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

Controls the max width of the heading area. The scrolling logo track always extends edge-to-edge regardless of this setting; the width only affects where the heading text wraps.

• standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
• slim Slim (narrower variant, also set in Theme Settings)
• custom Custom - reveals a Container Width number input (600-1920px, default 1200)

Spacing (Around Content)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes top/bottom/left/right inputs. Defaults:

• desktop 80px top, 80px bottom, 0 left, 0 right
• tablet 60px top, 60px bottom, 0 left, 0 right
• mobile 40px top, 40px bottom, 0 left, 0 right