Pattern: 66:33 text with image, video or key facts

About

These patterns are designed to be used when you are creating a full width page design, where the sidebar has been removed and where your design uses two columns throughout the page with the first column being larger and the second column being smaller and acting as a sidebar. For this layout we use the columns block with the 66/33 option.

On amnesty.org we use this kind of page design for our ‘press release plus’ pages.

Adding a Text with _ Pattern

Remove sidebar

This pattern is designed to be used on a full width page design. First, remove the sidebar from the page you are working on.

Start with the block template

You may wish to start with the full press release plus blo ck template and then add additional Text with _ sections when you need to add more sections to your content.

Add Text with _ pattern

Click the + icon to add a new block from the top toolbar in the page/post editor.
Click on the Patterns tab.
Either choose which category of patterns you want to select from (2/3,1/3 or media) or click Explore to open a modal that allows you to have a larger view of each pattern.
In the explore view, you can type ‘text with’ into the search bar to find the Text with _ patterns.
There are three Text with_ Patterns which use the 66:33 columns: one with an image, one with a video and one with key facts.
Click on the pattern you wish to insert or drag and drop the pattern into your content. If you click on the pattern, it will be inserted at the location of your cursor.

Text with _ Pattern settings

The Text with _ Patterns are made up of a section block, containing a columns block:

one column has a heading block and paragraph blocks and sometimes a quote block and
the other column has either an image block, a YouTube embed block or a links with icons pattern.

See the documentation on each of these blocks to find out more about the available settings.

Text with _ Pattern demonstration

Text with image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id. Nisl tincidunt eget nullam non nisi est sit amet.

Diam donec adipiscing tristique risus. Feugiat in ante metus dictum at tempor. A diam maecenas sed enim ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Congue nisi vitae suscipit tellus mauris a. Scelerisque fermentum dui faucibus in ornare quam viverra. Imperdiet proin fermentum leo vel orci porta non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
orci sagittis eu volutpat odio

A arcu cursus vitae congue mauris rhoncus aenean vel elit. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Habitant morbi tristique senectus et netus et malesuada fames ac. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Volutpat diam ut venenatis tellus in metus vulputate.

Tincidunt vitae semper quis lectus. Fermentum iaculis eu non diam phasellus vestibulum lorem. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Quam pellentesque nec nam aliquam sem et tortor. At urna condimentum mattis pellentesque id nibh tortor id.

A group of people attend a protest. Many of them are holding one fist in the air. The main person in focus is wearing a pink face mask and is looking ahead defiantly.

Text with video

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel pharetra vel turpis nunc eget lorem dolor sed. Enim lobortis scelerisque fermentum dui faucibus. Erat nam at lectus urna duis. Justo eget magna fermentum iaculis.

Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Odio eu feugiat pretium nibh ipsum consequat nisl. Aliquam nulla facilisi cras fermentum odio eu. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Donec massa sapien faucibus et molestie.

A diam sollicitudin tempor id eu nisl nunc mi ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae.

Nulla posuere sollicitudin aliquam ultrices sagittis orci. Elit sed vulputate mi sit amet mauris commodo. Adipiscing elit ut aliquam purus sit amet.

A diam sollicitudin tempor id eu nisl nunc mi ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Elit sed vulputate mi sit amet mauris commodo. Adipiscing elit ut aliquam purus sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
suspendisse ultrices gravida dictum

Text with Key Facts