Separator
Align none
Wide
Full width
Center
Style variation Wide
Style variation Wide, with align center set in the toolbar:
Style variation Wide, with the wide with set in the toolbar:
Style variation Wide, with the full with set in the toolbar:
Style variation Dots
Color
Margin
Margin preset: 4
sep-posts
Page break
Content before the page break.
sep-postsMore
Content before the more block.
On an archive page, only these two paragraphs should be visible.
Continue reading “More” sep-postsStack
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.
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.
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.
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
Buttons
Width
Linked
Justification
Wide and full width
Wrapping
Vertical
Color
Border
Typography
Font Size
Appearance
Line height
Letter spacing
Decoration
Letter case
Spacing
Margin preset: 4
Block spacing preset: 0
Block spacing preset: 4
Block spacing preset: 7
Padding on the inner button
sep-postsVideo
Alignment
Padding and margin
Padding preset: 4
Margin preset: 5
Media & Text
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left. The media is linked to the media file.
Content, video media on right.
Do not stack on mobile
Content, image media on left.
Vertical alignment
Top
Middle
Bottom
Alignment
No alignment
Wide
Full width
Media width
Media width 20
Media width 80
Color
Content, image media on left. Text color.
Content, image media on left. Text color and link color.
Content, image media on left. Background, text color and link color.
Typography
Font size
Content, image media on left.
Content, image media on left.
Content, image media on left.
Content, image media on left.
Appearance
Content, image media on left.
Content, image media on left.
Line height
Content, image media on left.
A second line to illustrate the line height.
Letter spacing
Content, image media on left.
A second line to illustrate the line height.
Decoration
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left.
A second line to illustrate the line height.
Letter case
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left.
A second line to illustrate the line height.