{"id":3285,"date":"2019-08-26T20:45:28","date_gmt":"2019-08-26T20:45:28","guid":{"rendered":"https:\/\/wptest.sdelling.w3.uvm.edu\/?page_id=3285"},"modified":"2020-09-26T10:04:59","modified_gmt":"2020-09-26T14:04:59","slug":"media-text-lockups","status":"publish","type":"page","link":"https:\/\/blog.uvm.edu\/manual\/media-text-lockups\/","title":{"rendered":"Media and text lockups"},"content":{"rendered":"\n
\n
\n

We have a two-column component consisting of media (image or video) in one column and text in the other. The background color is editable and you can “flip” the column content left-right with a click.
<\/p>\n\n\n\n

These can be used individually or can be stacked. Alternating them image-text and text-image provides a nice content flow. They responsively scale for tablet and mobile but make sure you select the “stack on mobile” option in the right sidebar when you have the block selected.

and have background color variations- one subtle and the other more colorful. These work well to elevate and draw attention to key messaging or achievements. If you add a link, you can also use these as teasers to content found elsewhere on your website. <\/p>\n\n\n\n

To implement this component on your page:<\/strong> While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type “Media” in the Block search field to filter all blocks by “Media”. Select the “Media & Text” block. You are now ready to update the image, the text caption and the background color. Just replace text and images as needed. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Important! Make sure you select “stack on mobile” for your “Media & Text” block for optimal mobile viewing.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Make sure you proof your Media & Text blocks on mobile. As the image and text columns stack, the text sometimes just needs extra space before or after for optimal viewing. A spacer block set to 32 px height is recommended.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

Media & Text block<\/h2>\n\n\n\n
\n
\n


Block Name:<\/strong> Media & Text<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

This is the Media & Text block with the image on the left. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Katrinell<\/figure>
\n

This is an H3 headline<\/h3>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.<\/p>\n\n\n\n

<\/div>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\"Katrinell<\/figure>
\n

This is an H3 headline<\/h3>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.<\/p>\n\n\n\n

<\/div>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

You can edit the background color in “Color Settings\/Background Color”. To change the background color, click on the block to activate it and then select the background color in the right sidebar of the Admin page under “Color Settings\/Background Color”. Keep in mind that we need to maintain at least a AA 4.51 WCAG contrast ration between the text and the background. The following examples meet that requirement. <\/p>\n\n\n\n

<\/p>\n\n\n\n

If you are stacking the “Media & Text” block, we recommend a 160px spacer between each. Also, we recommend sticking to one color background on your site rather than lots of different colors or a checkerboard of color.<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n
\"Katrinell<\/figure>
\n

This is an H3 headline<\/h3>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.<\/p>\n\n\n\n

<\/div>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
\"Katrinell<\/figure>
\n

This is an H3 headline<\/h3>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.<\/p>\n\n\n\n

<\/div>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
\"Katrinell<\/figure>
\n

This is an H3 headline<\/h3>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.<\/p>\n\n\n\n

<\/div>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n

You can also you this block without the smaller body content. Here is an example of that.<\/p>\n\n\n\n

\"Organic<\/figure>
\n

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/h3>\n\n\n\n
<\/div>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

We have a two-column component consisting of media (image or video) in one column and text in the other. The background color is editable and you can “flip” the column content left-right with a click. These can be used individually or can be stacked. Alternating them image-text and text-image provides a nice content flow. They … <\/p>\n

Continue reading “Media and text lockups”<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3285","page","type-page","status-publish","hentry","entry"],"featured_image_src":null,"featured_image_src_square":null,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"We have a two-column component consisting of media (image or video) in one column and text in the other. The background color is editable and you can “flip” the column content left-right with a click. These can be used individually or can be stacked. Alternating them image-text and text-image provides a nice content flow. They…","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/3285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=3285"}],"version-history":[{"count":22,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/3285\/revisions"}],"predecessor-version":[{"id":5374,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/3285\/revisions\/5374"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=3285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}