Content Width
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Odio ut sem nulla pharetra. Tempus quam pellentesque nec nam. Tempus iaculis urna id volutpat lacus laoreet. Scelerisque fermentum dui faucibus in ornare. Ac odio tempor orci dapibus ultrices. Enim sit amet venenatis urna cursus eget. Etiam erat velit scelerisque in dictum.
Full Width Background – Content Width Content
- Use List View on left column in editor to set this up.
- Wrapper column with native full width block setting within WordPress Align setting for block.
- Next Column within structure gets “layout-grid” added as css on right.
- Next column which wraps the content structure gets “content” added as css on right.
Feature Width
These four elements are in a Group. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Heading H3
Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Widecontent Group
These two elements are in a Group. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Anchor Left with Feature Width Inner Content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab totam tenetur esse, eaque dolor ex hic porro. Inventore odio eum itaque neque, ab quaerat at tenetur qui vero aperiam adipisci!
Anchor Right with Feature Width Inner Content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab totam tenetur esse, eaque dolor ex hic porro. Inventore odio eum itaque neque, ab quaerat at tenetur qui vero aperiam adipisci!
Test columns in layout-grid
Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Test columns in layout-grid
Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Test columns to break out of width using Gutenberg Full Width setting
Automatically converts to the grid-column: full width without placing an additional css class in Advanced on the right.
Add another group or column within and apply padding to it with a custom style or class: pad in Advanced on the right.
Background is applied through Gutenberg or custom style.
Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Test columns to break out of width using Gutenberg Wide Width setting
Automatically converts to the grid-column: feature width without placing an additional css class in Advanced on the right. Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Gap Adjustment 3em
Control the width between columns default is 2em. Apply style gap-three to column structure.
Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Gap Adjustment 4em
Control the width between columns default is 2em. Apply style gap-four to column structure.
Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Gap Adjustment 5em
Control the width between columns default is 2em. Apply style gap-five to column structure.
Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Gap Adjustment 6em
Control the width between columns default is 2em. Apply style gap-six to column structure.
Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.