This is a call to action

This is what you need to do

February 6, 2024

Read More

Read more Custom read more text Custom read more text, bold Custom read more text, italic Custom read more text with highlight

Color

Read more Read more

Typography

Font sizes

Read more Read more Read more Read more

Appearance

Line height

Letter spacing

Letter case

Read more Read more Read more

Decoration

Read more Read more

Border

Read more Read more

Padding and margin

Padding preset: 4

Read more Read more Read more

Margin preset: 4

February 6, 2024

Featured Image

Brazil Beach

Brazil Beach

Link to post:

Width

Brazil Beach

Brazil Beach

Alignment

Brazil Beach

Brazil Beach

Brazil Beach

Color

Overlay

Brazil Beach

Duotone

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Border

Brazil Beach

Linked to post:

Aspect ratio

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

Brazil Beach

February 6, 2024

Avatar

With link to user profile:

Alignment

Border

Duotone

Padding and maring

Padding preset: 4

Margin preset: 4

February 5, 2024

Search

Labels, placeholders and button texts

Button position and icon

Alignment

Note: there is a spacer block above to clear the alignments

Width

Color

Note: text and background color only affect the button.

Border

Typography

Font size

Appearance

Line height

Letter spacing

Decoration

Letter case

Developer only features

Features that do not have a user interface: Custom query vars.

February 5, 2024

Stack

Note: For other block settings like typography and background image, see the group block.

Alignment

Align none.

A second paragraph inside a stack.

Wide.

A second paragraph inside a stack.

Full width.

A second paragraph inside a stack.

Vertical alignment

Note: Background color and min height has been added for visibility.

Align top.

A second paragraph inside a stack.

Align middle

A second paragraph inside a stack.

Align bottom.

A second paragraph inside a stack.

Space between.

A second paragraph inside a stack.

Justification

Justify items left

A second paragraph inside a stack.

Justify items center

A second paragraph inside a stack.

Justify items right

A second paragraph inside a stack.

Stretch items

A second paragraph inside a stack.

February 5, 2024

Row

Note: For other block settings like typography and background image, see the group block.

Alignment

Align none.

A second paragraph inside a row.

Wide.

A second paragraph inside a row.

Full width.

A second paragraph inside a row.

Vertical alignment

Note: Background color and min height has been added for visibility.

Align top.

A second paragraph inside a row.

Align middle

A second paragraph inside a row.

Align bottom.

A second paragraph inside a row.

Stretch to fill.

A second paragraph inside a row.

Justification

Justify items left.

A second paragraph inside a row.

Justify items center.

A second paragraph inside a row.

Justify items right.

A second paragraph inside a row.

Space between

A second paragraph inside a row.

February 5, 2024

Group

Inner blocks use content width

A paragraph inside a group. No alignment, default justification.

A paragraph inside a group. Wide, default justification.

A paragraph inside a group. Wide, left justification.

A paragraph inside a group. Wide, right justification.

A paragraph inside a group. Full width, default justification.

A paragraph inside a group. Full width, left justification.

A paragraph inside a group. Full width, right justification.

Custom content width: 200px, custom wide width: 400px, left justification

A paragraph inside a group. No alignment, default justification.

A paragraph inside a group. No alignment, default justification.

Inner blocks do not use content width

A paragraph inside a group, no alignment.

A paragraph inside a group, wide

A paragraph inside a group, full width

Color

Text color.

Text color, link color.

Text color, link color, background color.

Text color, link color, background color, heading color.

And this is the example heading inside the group

Text color, link color, background color, heading color, button color.

And this is the example heading inside the group

Background image

A paragraph inside a group.

Min height is set to 300 so that the image is more visible.

Border

A paragraph inside a group.

A paragraph inside a group.

A paragraph inside a group.

Typography

Font size

A paragraph inside a group.

A paragraph inside a group.

A paragraph inside a group.

A paragraph inside a group.

Appearance

A paragraph inside a group.

A paragraph inside a group.

Line height

A paragraph inside a group.

Letter spacing

A paragraph inside a group.

Decoration

A paragraph inside a group.

A paragraph inside a group.

Letter case

A paragraph inside a group.

A paragraph inside a group.

A paragraph inside a group.

Dimensions

Background color added for visibility.

Padding preset: 4

A paragraph inside a group.

Margin preset: 4

A paragraph inside a group.

Block spacing preset: 0

A paragraph inside a group.

A second paragraph.

Block spacing preset: 4

A paragraph inside a group.

A second paragraph.

Block spacing preset: 7

A paragraph inside a group.

A second paragraph.

A paragraph inside a group.

Min height is set to 300px.

February 5, 2024

Columns

Column numbers and widths

Background colors have been added for visibility:

One column

Two columns, 50/50

Column two

Two columns, one third

Two thirds

Two columns, two thirds

One third

Three columns

Column two

Column three

Three columns, 25

50

25

Custom column numbers

One

Two

Three

Four

Five

Six

Do not stack on mobile

Two columns, 50/50

Column two

Column three

Alignment

No alignment, default. Column one

Column two

Column three

Wide. Column one

Column two

Column three

Full width. Column one

Column two

Column three

Align middle

No alignment, default. Column one

Column two

Some more text, to showcase alignments.
The default alignment is top.

Column three

Align bottom

No alignment, default. Column one

Column two

Some more text, to showcase alignments.
The default alignment is top.

Column three

Color

Background color on columns only:

Two columns, 50/50

Column two

Column three

Background color on both columns and column:

Two columns, 50/50

Column two

Column three

Border

Border on columns only:

Column one

Column two

Column three

With border radius:

Column one

Column two

Column three

Note that border radius conflicts with the background on the inner blocks, this is a known issue (WordPress 6.4)

Column one

Column two

Column three

Border on the inner column only:

Note that border radius on the inner columns is not supported (WordPress 6.4)

Column one

Column two

Column three

Border on both the columns and the inner column:

Column one

Column two

Column three

Note that border radius conflicts with the border on the inner blocks, this is a known issue (WordPress 6.4)

Column one

Column two

Column three

Typography

Font size

Column one

Column two

Column three

Column one

Column two

Column three

Column one

Column two

Column three

Column one

Column two

Column three

Appearance

Column one

Column two

Column three

Column one

Column two

Column three

Line height

Column one

Column two

Column three

Letter spacing

Column one

Column two

Column three

Decoration

Column one

Column two

Column three

Column one

Column two

Column three

Letter case

Column one

Column two

Column three

Column one

Column two

Column three

Column one

Column two

Column three

Spacing

Padding preset: 4

Column one

Column two

Column three

Margin Preset: 4

Column one

Column two

Column three

Block spacing preset: 0

Column one

Column two

Column three

Block spacing preset: 4

Column one

Column two

Column three

Block spacing preset: 7

Column one

Column two

Column three

February 5, 2024

Buttons

Width

Linked

Outline, no link

Outline, linked

Justification

Fill, linked, justify items left

Outline, linked

Fill, linked, justify items center

Outline, linked

Fill, linked, justify items right

Outline, linked

Fill, linked, space between

Outline, linked

Wide and full width

Fill, linked, wide width

Outline, linked

Fill, linked, full width

Outline, linked

Wrapping

Fill, linked, allow wrapping

Outline, linked

Outline, linked

Outline, linked

Fill, linked, do not allow wrapping

Outline, linked

Outline, linked

Outline, linked

Vertical

Outline, linked

Outline, linked

Color

Outline, linked

Fill, linked, gradient

Outline, linked, gradient

Border

Fill, linked, border radius 0, border width 2px

Outline, linked, border radius 0, border width 2px

Fill, linked, border radius 8, width 5px

Outline, linked, border radius 8, width 5px

Fill, linked, border radius 20, width 20

Outline, linked, border radius 8, width 20

Typography

Font Size

Outline, linked

Outline, linked

Outline, linked

Outline, linked

Appearance

Outline, linked

Outline, linked

Line height

Outline, linked

Letter spacing

Outline, linked

Decoration

Outline, linked

Outline, linked

Letter case

Outline, linked

Outline, linked

Outline, linked

Spacing

Margin preset: 4

Outline, linked

Block spacing preset: 0

Outline, linked

Block spacing preset: 4

Outline, linked

Block spacing preset: 7

Outline, linked

Padding on the inner button

Fill, linked, padding preset 4

Outline, linked, padding preset 4

February 5, 2024

Cover

Alignment

Content

Content

Content

Content

Content

Content

Note: there is a spacer block above to clear the alignment.

Content position

Content

Content

Content

Content

Content

Content

Content

Content

Content

Full height:

Content

Fixed background:

Content

Repeated background

Content

Fixed and repeated background

Content

Border

Content

Color

Purple overlay with different opacities:

Content

Content

Content

White overlay, 50%:

Content

Overlay, heading text color, heading background color, text color:

Heading as content

Content

Duotone

Content

Content

Content

Content

Content

Content

Content

Content

Dimensions

Padding preset: 4

Content

Margin preset: 4

Content

Block spacing preset: 0

Content

Content

Block spacing preset: 4

Content

Content

Block spacing preset: 7

Content

Content

Typography

Font size

For this example, the font size has been removed from the inner paragraph (“Content”).

Content

Content

Content

Content

Appearance

Content

Content

Line height

Content

Letter spacing

Content

Decoration

Content

Content

Letter case

Content

Content

Content