Patterns – 10px 40-30-20 (JZ-based) (WP Blocks)
Basic Page Title + Subtitle
- A. Content & Blocks
- Content – One Column
- Content – Two Column
- Content – Grid
- Content – Two Column
- Content – Two Column
- Block – One Column
- Block – Two Column
- Block – Two Column – Image
- Block – Two Column Image – Full-Bleed Right
- Block – Two Column – Image Full-Bleed Left
- Blocks – Grid (Simple)
- Blocks – Grid (CTA)
- Blocks – Grid with Photo
- Blocks – Grid (Preheader Label)
- Blocks – Grid (Preheader Label + Image)
- Blocks – Full-Bleed
- Blocks – Full-Bleed Image Left
- Blocks – Full-Bleed Image Right
- Narrow Content – One Column
- Narrow Content – Two Column
- C. Narrow Content & Blocks (Center)
A. Content & Blocks
Default blocks are for basic text and images on a full-width background. These blocks have extra padding at the top and bottom of each block to ensure adequate spacing between blocks of alternating colors. When blocks have the same background color, reduce top and bottom spacing to 24px.
Content – One Column
Optional section introduction.
Subheading
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu. Magnis blandit donec laoreet maximus quis nulla. Eleifend duis quam non phasellus ullamcorper ex consectetur montes habitant. Netus cubilia tortor libero, pulvinar fermentum nisl scelerisque quis. Natoque potenti enim mus viverra proin etiam suspendisse urna praesent.
Content – Two Column
Optional section introduction.
Subheading
Lorem ipsum dolor sit amet consectetur. Viverra eget condimentum pellentesque at amet et nisi. Tristique pellentesque in aliquam vel. Risus sed sed a tincidunt. In at ut morbi amet feugiat pellentesque hac varius.
Content – Grid
Optional section introduction.
By changing the Column Wrapper's Layout to Grid instead of Flex, you can establish the number of columns and have block automatically wrap into multiple rows.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Content – Two Column
Optional section introduction.
Image Set as Background (Force Equal Height)
If the image is set as the container background, be sure to set a manual height on mobile when the columns stack.
To change the layout, swap Column 1 and Column 2.
Rounded corners can be added by editing the border radius of the column container.
Content – Two Column
Optional section introduction.
Image Inserted as Block (Inherit Height from Image)
If the image is set as the container background, be sure to set a manual height on mobile when the columns stack.
To change the layout, swap Column 1 and Column 2.
Rounded corners can be added by editing the border radius of the column container (when background) or the image itself (when image block)
Block – One Column
Optional section introduction.
Subheading
To use this or similar blocks at a narrower width, change the outermost parent container’s Content Box Width to 800px (or whatever the current theme’s Narrow width is — this may vary).
Block – Two Column
Optional section introduction.
Lorem ipsum dolor sit amet consectetur
To change the position of text within a column, select the immediate container (ex. Column 1) > General > Layout> Justify Content > Flex Start. If this does not work, double check that your parent container settings (ex. Block Wrapper) General > Container Type > Equal Height = ON.
Block – Two Column – Image
Optional section introduction.
Two Column Block
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
Block – Two Column Image – Full-Bleed Right
Optional section introduction.
Lorem ipsum dolor sit amet consectetur
For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.
Block – Two Column – Image Full-Bleed Left
Optional section introduction.
Lorem ipsum dolor sit amet consectetur
For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.
Blocks – Grid (Simple)
Optional section introduction
Lorem ipsum longer title as an example
Icons are optional!
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Blocks – Grid (CTA)
Optional section introduction
Lorem ipsum longer title as an example
Icons are optional!
Lorem ipsum
Icons are optional!
Lorem ipsum longer title as an example
Icons are optional!
Blocks – Grid with Photo
Optional section introduction.
Lorem ipsum with a longer title
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum with an even longer title for testing
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Blocks – Grid (Preheader Label)
Optional section introduction.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Blocks – Grid (Preheader Label + Image)
Optional section introduction.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Blocks – Full-Bleed
Width of Column Content container = Content area / 2 – padding left and padding right (ex. 540 px). Set parent container to align items: flex-end.
Blocks Full-Bleed
Width of Column Content container = Content area / 2 – padding left and padding right (ex. 540 px). Set parent container to align items: flex-start.
Blocks – Full-Bleed Image Left
For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.
Blocks – Full-Bleed Image Right
For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.
Narrow Content – One Column
Optional Introduction
Add Additional Headings and Content Here
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu. Magnis blandit donec laoreet maximus quis nulla. Eleifend duis quam non phasellus ullamcorper ex consectetur montes habitant. Netus cubilia tortor libero, pulvinar fermentum nisl scelerisque quis. Natoque potenti enim mus viverra proin etiam suspendisse urna praesent.
Add Additional Headings and Content Here
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu. Magnis blandit donec laoreet maximus quis nulla. Eleifend duis quam non phasellus ullamcorper ex consectetur montes habitant. Netus cubilia tortor libero, pulvinar fermentum nisl scelerisque quis. Natoque potenti enim mus viverra proin etiam suspendisse urna praesent.
Narrow Content – Two Column
Optional Introduction
Column Wrapper
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
C. Narrow Content & Blocks (Center)
Narrow Content – One Column
Optional section introduction.
Add Additional Headings and Content Here
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu. Magnis blandit donec laoreet maximus quis nulla. Eleifend duis quam non phasellus ullamcorper ex consectetur montes habitant. Netus cubilia tortor libero, pulvinar fermentum nisl scelerisque quis. Natoque potenti enim mus viverra proin etiam suspendisse urna praesent.
Add Additional Headings and Content Here
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu. Magnis blandit donec laoreet maximus quis nulla. Eleifend duis quam non phasellus ullamcorper ex consectetur montes habitant. Netus cubilia tortor libero, pulvinar fermentum nisl scelerisque quis. Natoque potenti enim mus viverra proin etiam suspendisse urna praesent.
Narrow Content – One Column
Optional section introduction.
Subheading
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu. Magnis blandit donec laoreet maximus quis nulla. Eleifend duis quam non phasellus ullamcorper ex consectetur montes habitant. Netus cubilia tortor libero, pulvinar fermentum nisl scelerisque quis. Natoque potenti enim mus viverra proin etiam suspendisse urna praesent.
Narrow Content – Two Column
Optional section introduction.
Image as Block
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
Narrow Content – Two Column
Optional section introduction.
Image as Background
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
Narrow Block – One Column
Optional section introduction.
Optional Heading
Use this element for introductory paragraphs or callout blocks.
Narrow Block – Two Column
Optional section introduction.
Two-Column Block
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
Narrow Content – Grid
Optional section introduction.
By changing the Column Wrapper's Layout to Grid instead of Flex, you can establish the number of columns and have block automatically wrap into multiple rows.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Narrow Blocks – Grid
Optional section introduction.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Narrow Blocks – Grid with Photo
Optional section introduction.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Narrow Content – Two Column Full-Bleed
Optional section introduction.
Two-Column Full-Bleed
For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.