Close Menu
  1. Blocks

Blocks

Blocks on the frontend.

Two blocks, side by side, each with alignment & background settings.

Usage

Dirigible Blocks is a block that consists of two children displayed side by side on desktop and stacked on mobile. Each child block allows granular background and text control, and can hold a subset of other blocks inside of it.

Most blocks are allowed—only very complex blocks are excluded from being put inside of Dirigible Blocks. For this reason, you will only be able to drag allowed blocks from outside of these blocks to the inside of them.

Dirigible Blocks are named with the ‘Dirigible’ prefix to prevent confusion when referring to other blocks.

Parent Settings

The parent block (named Dirigible Blocks in the editor) has the following settings. To access these settings, you must have the parent block selected.

Block Size

Change the size of your blocks.

Adjusting the size of your Dirigible Blocks

The sizing option will change the size of blocks on desktop. This is independent from the Swap Blocks setting, which means that even if you toggle the Swap Blocks option, if the left block is set to be larger, the leftmost block will always be the larger one regardless of which one is being presented on the left.

The default setting makes each block evenly sized (50%). With either of the other two options selected, the sizes are based on the golden ratio, with the larger block set to 61.8% and the smaller block set to 38.2%.

Show More Show Less

Split Scroll

Pins your content to either the top or bottom of the window as the user scrolls.

Block Split Scroll

The split scroll option pins your content to either the top or bottom of the window as the user scrolls. This will only affect the desktop experience.

Show More Show Less

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.

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.

For example, if you’d like to alternate blocks with photo backgrounds on desktop but want the accompanying content to be displayed under the photo on mobile, you would create the blocks in the editor with the leftmost block as the photo background and the rightmost block as the content block. This way, they will stack on mobile, left first then right. Then, selecting Swap Blocks on every other Dirigible Blocks group.

Mobile swap blocks example.

Example mobile stacking.

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

Show More Show Less

Child Settings

Each of the two children of the Dirigible Blocks group has the same settings and are completely malleable, but they will default to the common UX pattern of ‘photo on side, content on the other’. Feel free to explore other options!

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

Block Text Alignment

Choose the text alignment of the selected block.

Choosing a Block Text Alignment

The text alignment option allows you to place your text anywhere inside of the child block. This is more useful than trying to control the alignment of each inner child block element, and is a combination of text position and text alignment. For example, setting the text to the lower right hand corner will not only position the text in the lower righthand corner, but also set right text alignment on all children.

Note: Because right text alignment is generally used compositionally on desktop, text set to be right aligned will automatically revert to left alignment on mobile to give your users the best experience.

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

Background Image

Use a photo from your media library or upload a new one to use as a background.

Choose a Background Image

You can choose a background image in the block sidebar by clicking on the ‘Choose Photo’ button. You’ll be prompted to select a photo from your media library or upload a new one.

Once you’ve selected a photo to use as your background, new options will take the place of the one you used to select the photo. The first is a simple button to remove the image that you’ve selected, allowing you to start this over.

The second is the Focal Point selector. This tool allows you to select the most important point of your photo that your website will try to always keep visible. Because of the responsive nature of the web, images used as a background must stretch and cover the area when viewed on different device sizes, but this focal point allows to us to keep what’s important in frame.

Set an Overlay

Whether you need to darken or tint an image to maintain the legibility of text on top of it or as a stylistic choice, there are many situations where you’ll want to add an overlay to your background image. The overlay tool in your block sidebar lets you choose a color from your palette (with the addition of pure black or pure white). The overlay opacity slider will determines how much overlay to apply to the background image, with 100% being solid color.

Select X as the overlay color to disable the overlay completely, or set its opacity to 0%.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

Show More Show Less

Background Pattern

Use a repeatable pattern as a background.

Choose a Background Pattern

You can choose a background pattern in the block sidebar by clicking on the ‘Choose Pattern’ button. You’ll be prompted to select an from your media library or upload a new one. This can be any image, but we recommend SVG (or PNG if SVG isn’t available) and we suggest using a pattern that repeats seamlessly.

Select a Background Size

The Background Size range field will scale the background pattern. Choose a size that looks good on both desktop and mobile.

The Background Size control in action. Be sure to select one that not only looks good, but also doesn’t get in the way of your content.

Set an Overlay

The overlay tool in your block sidebar lets you choose a color from your palette (with the addition of pure black or pure white). The overlay opacity slider will determines how much overlay to apply to the background image, with 100% being solid color. With most patterns, you’ll be able to completely tint your pattern with an overlay color, so if you upload one pattern SVG file in black or white you’ll be able to use it in any of your site’s palette colors simply by using the overlay tool.

Select X as the overlay color to disable the overlay completely, or set its opacity to 0%.

Background Attachment

A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

Show More Show Less

Help! I can’t figure out how to delete Dirigible Blocks!

If you’ve added Dirigible Blocks your page and can’t delete them, its because you are trying to delete one of the child blocks. Because each parent block has a fixed set of two child blocks, the editor won’t allow you to delete the children, you must delete the parent.

First, you must select the parent block. With the parent block selected, you can either hit the Del key or select ‘Delete Block’ from the context menu .

Blocks