Close Menu
Open Menu

Voronoi

  1. Home
    2. ›
  2. Blocks
    3. ›
  3. Voronoi

Voronoi

Voronoi on the frontend.

A hero block with an auto-generated, bubbly background.

View Demo

A Dynamic Design Element that Never Gets Old  

Take your website to the next dimension with the Voronoi, a powerful design element that can be found almost anywhere in nature, art, and space. 

Try out the Voronoi in your next web development project and embrace its captivating ability to distribute your content in an efficient and aesthetically pleasing design.

Usage

The latest addition to our Dirigible Blocks: the Voronoi block. We are leveraging the power of innovative design elements that enhance website designs by creating visually appealing layouts that are bound to capture the eyes of your users. 

The Voronoi block adds a modern and elegant twist to your website’s design, bringing it to life and enhancing the versatility of your layout.

Content Fields

The Voronoi block can have four different content fields, Regenerate BG, Headline, Subheadline, and Button Link. You can edit these inline or in the sidebar. If you delete a field (such as the headline field), it will remove it from the inline editor. You can always get it back by typing in the sidebar.

For these content fields, you can either edit them inline or in the sidebar. If a field is empty, it will be removed from block editor.

To regenerate a background’s design, simply click on the Regenerate BG field to refresh your background or layout with ease.

The Headline field is set in the page as an <h1> tag, and the Subheadline field is set as an <h2> to ensure semantic HTML structure.

If a Button Link exists, you can edit the Button Text by clicking into the default ‘Learn More’ text and typing. The button link field allows you to place a website link for a seamless user experience with the Voronoi block.

Appearance Fields

The Voronoi is an effective design element to layout your page and help give your users a lasting impression on what your website will consist of. We include a lot of appearance options for you to sculpt the Voronoi to fit your page, including Text Position, Styles, Size, Reverse Print, and Text Box.

Block Width

Blocks can be set to one of three widths in the editor: Default, Wide, or Full. Blocks will interact with adjacent blocks differently depending on their width.

Adjusting Block Width

The block width setting is found in your block context bar, which will show up above the current block that you have selected. A block that supports the block widths will show its current width icon in the context bar, and clicking it will allow you to change the width.

If you have the Top Toolbar setting selected, the block context bar will always show at the top of your page, not at the top of your block.

Default Width

The default width of your content is determined by the value set in your Customizer. You can find this setting under Styles » Widths » Content Width. This is the default width of most text-based content and most blog pages. We recommend keeping this set so that your content retains maximum readability, which most studies agree is around 50-60 characters per line.

Wide Width

Wide width content will take up 75% of the available width on the page or the default content width set on your site—whichever is larger. In effect, this makes content take up more of the available screen real estate. When used in conjunction with other wide width blocks, you can shape your webpages in many different ways.

Full Width

Full width content will always take up 100% of the available width on the page. When placed next to default or wide width content, margin will be applied to the full width block to give it some room to breath. When two full width blocks are placed next to each other, however, they will suction together and form a cohesive unit with no margin in between them.

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

Text Style

The Text Style (sometimes called Headline Style) option controls the display of your text.

The Text Style (or Headline Style) will default to a different value depending on the block, but can be changed to any of the other available options. These styles are defined in your Customizer under Styles. For more information on changing your styles visit Customizing Styles.

One important thing to note is that this only changes how the headlines appear visually. The underlying html will be determined by the block that uses this features.

Show More Show Less

Size

The Size switch sets the height of your Voronoi block. The height you choose determines the height on both mobile and desktop. When set to Auto, the voronoi will be the same as a Small voronoi on desktop, but will expand to fit its content on mobile. When the Full Page Voronoi toggle is selected, the size is ignored and the Voronoi will automatically fill the entire screen.

Small

Medium

Large

Full Page Voronoi

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

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

Voronoi

Up Next