Close Menu
  1. Quote Blocks

Quote Blocks

Quote blocks on the frontend.

A specialized version of Dirigible Blocks that features a quote alongside an image.

Usage

On first glance, Quote Blocks looks a lot like Dirigible Blocks. It behaves in much the same way where appearance and layout is concerned. The quote itself has all the same fields as the Small Quote and Large Quote with an additional Image field.

The rightmost block is the same as the Large Quote, in both behavior and appearance. The citation Name is displayed with an <h4> tag. The Title is displayed with the <small> tag.

Change the featured image by clicking on it.

To change the featured image, click on it in the editor to bring up your media library.

Add a headshot to the Quote Blocks in the block editor.

To add a Headshot, click on the headshot icon to open your media library. If you don’t add a headshot, the Name and Title will appear centered underneath the quote on the frontend.

Options

Quote Blocks has a simplified version of the options included in Dirigible Blocks. You can set these when Quote Blocks is focused.

Quote blocks options.

Text Size

Similar to the Large Quotes, Small sets the quote to standard paragraph size, while Medium and Large set the text to scale with window size (2vw and 3.8vw respectively).

Image Alignment

Allows you to make sure the focal point of your Featured Image stays in view.

Swap Blocks

Change the order of the blocks on desktop.

The Swap Blocks setting is used to change the order of the blocks on desktop and not on mobile.

This is an important distinction and can be used to control the flow of your website on mobile, giving your users the best mobile experience possible.

Even if Swap Blocks is enabled, displaying your media on the righthand side on desktop, the media block will still appear above your content on mobile.

Mobile swap blocks example.

Example mobile stacking.

The same blocks viewed on desktop. In this example, the second Blocks group has Swap Blocks enabled.

Show More Show Less

Background Color

Choose any color from your palette to create a background.

Choosing a Background Color

You can choose a color from the block sidebar that will fill your block with a background color. The color options presented here will be colors from your site’s color palette, which you can edit in the Customizer. When using a dark background color, be sure to toggle the Reverse Print option to make sure your text remains legible.

Show More Show Less

Reverse Print

Toggling reverse print will flip the colors from your standard palette to white, which increases contrast and readability when text is placed on dark backgrounds.

You’ll find the reverse print toggle in the block sidebar. Enabling reverse print will affect the block its enabled on as well as everything inside of it. If the block contains Inner Blocks, reverse print will cascade to all descendants.

We recommend using reverse print whenever a block has a dark background and using white text would increase its contrast. While you can set text color on core blocks like Headings and Paragraphs, we strongly recommend using the block-level reverse print instead. This way, you’ll be able to quickly toggle all the content if you change the background color in the future. All Inner Blocks will respect the reverse print setting, even those without color settings themselves.

To read more about contrast requirements on the web, visit here.

Show More Show Less

Quote Blocks