Infinite Logos is a strip of images that scrolls continuously from right to left and never stops — when the last logo leaves the screen the first one re-enters. Each logo can link to a site, show a tooltip, and react to the pointer (reveal its colors, grow, or both).
What it is for
The classic use is a row of sponsor, partner or member logos on a home page or event page. It is a livelier alternative to a Carousel when the images are small and numerous and none of them needs a caption.
See it live on the example page APB Infinite Logos.
Structure
- The Infinite Logos component sets the box size, gap, hover behaviour and whether the strip spans the full page width.
- Infinite Logos Items — one per logo, with an optional second image for the hover state, a link and tooltip texts.
Every logo is drawn inside a box of the same size, so logos of different proportions line up. The image is scaled to fit inside the box without cropping.
Component settings
| Setting | Options | Default | What it does |
|---|---|---|---|
| Section Title / Show Section Title / Intro | — | — / No / empty | See Section Title and Intro Text. |
| Target Placement | Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3 | Body | See Target Placement. |
| Component Width | 25% … 100% | 100% | See Component Width. |
| Force Full Width | Yes / No | No | When Yes, the strip breaks out of the content column and scrolls across the whole browser window (Component Width is then ignored). |
| Show tooltip | Yes / No | Yes | Shows the item Title and Subtitle in a small bubble when the pointer rests on a logo. |
| Box width (px) / Box height (px) | number | 160 / 80 | Size of the box each logo is fitted into. Increase both for a bigger strip (the example uses 320×160 for the full-width variant). |
| Column Gap | 0 … 60px | 8px | Space between boxes. |
| Pause on Hover | Yes / No | Yes | Stops the scrolling while the pointer is over the strip so visitors can click a logo. |
| Hover effect | None, Reveal color, Scale up, Scale up + Reveal color | None | Reveal color shows the logo in grayscale and switches to color on hover (or to the Logo (custom color) image if one is uploaded). Scale up enlarges the logo slightly. |
| Custom Class | text | empty | See Advanced settings. |
| Container Settings | — | 32px bottom margin | See Container Settings. |
Infinite Logos Item fields
| Field | Required | What it does |
|---|---|---|
| Title | yes | Name of the organisation; first line of the tooltip and the image’s alternative text. |
| Subtitle | no | Second line of the tooltip (for example “Gold sponsor”). |
| Logo | no | The image shown in the strip. Transparent PNG or SVG-like PNG/WebP works best. |
| Logo (custom color) | no | Alternative image shown on hover with the Reveal color effects — for example a full-color version when the main Logo is monochrome. |
| Link | no | URL opened when the logo is clicked. |
| Description (internal) | no | Editor note; never shown. |
| Custom Class | no | Extra CSS class on this logo. |
How to use it
- Click Add Infinite Logos; type a Section Title such as “Our sponsors”.
- Choose the Box width and Box height. Logos are scaled to fit, so pick a box slightly wider than tall for typical logos.
- Pick a Hover effect and leave Pause on Hover on if the logos are linked.
- Click Add new Infinite Logos Item for each logo: Title, Logo image, Link; optionally Subtitle and a custom-color image. Click Create.
- Save and watch the strip. If it does not move, add more items — the loop only scrolls when the logos are wider than the available space.
Tips
- Prepare all logos with the same padding around the mark so they look the same size in the boxes.
- Force Full Width looks best on pages without sidebars; combine it with a container background color to create a band across the page.
- Keep the tooltip on when logos are linked; it tells visitors where the click leads.
For site builders
| Item | Value |
|---|---|
| Module | apb_pb_infinite_logos |
| Paragraph types | apb_pb_infinite_logos, apb_pi_infinite_logos |
| Requires | apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Image / Link / Options / Taxonomy / Text |
| Own vocabulary | apb_tax_hover_effect (none, reveal_color, scale_up, scale_up_reveal_color) |
| Shared vocabularies | apb_tax_column_gap, apb_tax_width, apb_tax_target_placement |
| Front-end | apb_pb_infinite_logos/frontend: Embla carousel with auto-scroll and Tippy tooltips (both from aero-page-builder-core), configured from data-apb-*. |
| Container settings | Full profile. |
| Example page | /apbuilder_examples/apb-infinite-logos |