Every layout, and how the logos are sized

A Logo Showcase is a list of logos and a set of settings per screen. This guide walks the editor top to bottom: the four layouts and what each one does with motion, how a logo's size is decided, color, hover, the header and button, and the rules the widget keeps so nothing is ever cut off.

The editor Layouts Sizing Color Hover Header, button, width Per screen The rules it keeps

The editor, tab by tab

Templates puts a ready made look on the widget and keeps your logos. Logos is the list: add artwork (upload it, or pick it from Your files, the pictures you have uploaded before for any of your widgets), name each logo, give it a link, and set a size of its own if one logo needs it. Layout is the layout and its motion, and any titles, text and buttons you add, each placed exactly with the sliders under Where it sits. Design is how the widget looks: sizing, color, hover, header, button, background. Settings is the name, the embed code and the odd things (custom CSS, custom JS). Every card in Layout and Design has an Undo that puts back its last ten changes, and the preview follows every change at the size of the screen chosen above it.

Drafts survive a closed tab. Nothing reaches your site until you press Publish changes at the top right; then every page embedding the widget updates within a minute. The window that says Your widget is live has your embed code with Copy code and the steps for your website builder; the same code is in Settings, under Copy embed code.

The four layouts

Ticker

One strip, moving without end, left or right. Set Scroll speed, Gap between logos and Edge fade width. Pause on hover stops the strip while the pointer is over it; visitors can also drag it. Middle size grows logos as they pass the center.

Multi-row ticker

Several strips, one above another, each travelling its own way. Choose the Number of rows and, with the row picker, which logos go on which row; every logo is on one row. Arch bends the rows into a curve, peak or dip in the middle. Rows nest into each other's curve on purpose, so tighten Space between rows as far as you like: only the logo answers the pointer, never the space around it.

Carousel

Steps one logo at a time. Logos per slide sets how many fit across; with arrows off, that width is spread over the logos and no room is left where the arrows were. Arrow size, Arrow position and the four arrow colors (shape, arrow, hover shape, hover arrow) style them; a transparent shape leaves just the arrow. Autoplay steps on its own with a pause you set. Middle size makes the middle logo the biggest.

Grid

A wall of even cells, Columns across, with three kinds of Movement:

Still. Nothing moves. Every logo is whole and inside the widget, always.
Columns scroll up and down. Each column is a vertical strip, alternate columns travelling opposite ways, set by Column height and Scroll speed. A logo slides through the top and bottom edges; it never pops.
Step along a path you draw. Click cells in the picker to draw a route; logos step from stop to stop, holding at each for Hold at each stop and moving for Travel time. A path may end in a cell outside the widget so the return to the start happens out of sight.

How a logo's size is decided

Logo height sets the starting size. Every logo is drawn this tall, and as wide as its own proportions make it. Each screen keeps its own figure, so a phone can carry smaller logos than a desktop.
Same size for all overrides their proportions. Instead of keeping each logo's own shape, it gives every one of them the same width or the same height, whichever you pick. Wide marks and tall marks then line up.
Logo size resizes everything together. It multiplies whatever the two settings above produced, for every logo at once. It is also the limit the widget will not shrink past when it runs out of room.
One logo can have a size of its own. Set it on that logo in the Logos panel and it overrides Logo height for that logo only. Apply to all of them gives the sizes set on this screen to the other screen as well, and Put them all back clears every own size so every logo returns to the shared one; both ask first and both can be undone.
Badge artwork can be trimmed. Some logos arrive as a badge, meaning the symbol sits inside a filled shape. You can show it whole, show the symbol on its own, or cut the symbol out of the shape, for one logo or for all of them at once.

Color

Original colors draws the artwork as it came. One color paints every logo one shade, with a second shade for hover; a logo given a color of its own in the Logos panel keeps it, under the pointer too, and a logo with no transparency (a JPG, a flat PNG) cannot be recolored and keeps its own colors. Set the widget Background to a color, or transparent to sit on your page's own.

Hover

One effect for every layout: Grow, Bounce, Slam, Slam settle or Pulse, with Effect strength for how far grow and pulse travel. Room is kept for the growth, so a hovered logo never lands on its neighbor and a still grid never pushes the row above. Visitors who have asked their system for less motion get the hover color and no movement.

Header, button and width

A Header puts a title and subtitle above the logos, each with its own font, size, weight, letter spacing and color, aligned left, center or right. An Action Button below the logos carries text, a link, colors at rest and on hover, an outline, and its own width and height. Widget Width is full width by default; set a Max width to center the widget in a wide page. Padding & Spacing is the room around everything.

Per screen

The editor has two screens, Desktop and Mobile, and every setting in Layout and Design is kept once for each. The switch above the preview chooses which you are editing and shows the widget at that size. Apply to in each tool, or Edit all screens above the preview, lets one change land on both at once. A tablet is drawn from Desktop. The logos themselves are shared.

The rules the widget keeps

A still grid never draws a logo outside the widget on any side. When the logos will not fit at the size asked, the gap gives way first, then one percentage comes off every logo, hand-sized ones included, and is given back as columns are removed.
Anything that moves passes through the edges in its direction of travel, and never crosses the other two: a strip keeps every logo inside the top and bottom, a scrolling column inside the left and right, growth included.
No logo is ever drawn over another, hovered at full strength or not.
Logos are drawn sharp at rest on every browser, Safari included.

On the free plan a Logo Showcase carries up to five logos and a small credit line. Paid plans lift both.