Close Menu
  1. Logos

Logos

The Logos block on the frontend.

A row of logos or images with responsive size and spacing options.

Usage

The Logos block is a parent container for Logo child blocks and was designed to show off a group of logos, such as sponsors, in a neat, uniform way.

That doesn’t mean it needs to be confined to logos, however, and you can use this for any content that requires a row of uniform images. The Logos parent container can also hold Text blocks.

These child Logo blocks can hold links. For example, if you have a row of sponsor logos, you could link to each sponsor’s official website.

Styles

Ideally, the logos contained in this block are of a similar size and style, but we have include a bunch of options for you to tweak this block to look pixel perfect. The logo images will expand to fill your maximum width and height settings, but will maintain their aspect ratio.

Explanation of appearance fields in the logo block editor interface.

Logo Width

Determines the maximum width in pixels that any child Logo block can expand to fill.

Logo Height

Determines the maximum height in pixels that any child Logo block can expand to fill.

Spacing

Determines the space between each child Logo block. This will not only determine the horizontal space between logos, but also vertical space when the logos can no longer fit in one line.

Opacity

Determines the transparency of the child blocks. If a child Logo block has a link, when the user hovers upon it the opacity for that Logo will be set to 100%, essentially causing it to light up as compared to its siblings.

Alignment

The Logos block supports alignment in the same way as the core Buttons block. Not only will this determine where the logos are aligned in relation to other content on the page, but it will also determine how these logos flow as the viewport decreases down to mobile size. Alignment defaults to Centered, but supports Left or Right.

The logos block, right aligned.

Right aligned.

The logos block, left aligned.

Left aligned.

Child Blocks

The Logos block will usually contain Logo block children. We recommend using SVG images if possible to ensure logos remain crisp at any screen resolution. As an added benefit, SVG files are usually the smallest file format when dealing with vector logos, so your page load speeds will thank you!

Adding a link to your logo block.

When focused, you can add a link to a Logo block from the sidebar.

Choosing a logo from your media library.

Choosing Images

Clicking on a logo block will bring up the media library, where you can choose any image you’d like.

Inserting a logo into the logos parent block in the block editor.

Inserting Logos

While the Logos block is focused, the block inserter will appear at the right of the last logo. This allows you to add more logos into this block.

Logos