Category: Design

Blocks in the design category

  • Spacer

    Please note that the spacer is transparent. The default height is 100px.

    With margin preset: 4

  • 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



  • Page break

    Content before the page break.

    Pages: 1 2

  • More

    Content before the more block.

    On an archive page, only these two paragraphs should be visible.

    (more…)
  • 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.

  • 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

    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