{"id":1784,"date":"2018-11-03T12:20:00","date_gmt":"2018-11-03T12:20:00","guid":{"rendered":"https:\/\/wpthemetestdata.wordpress.com\/?p=1745"},"modified":"2020-09-26T10:11:10","modified_gmt":"2020-09-26T14:11:10","slug":"block-cover","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2018\/11\/03\/block-cover\/","title":{"rendered":"Image Styles"},"content":{"rendered":"\n

WordPress calls images that have text titles “cover blocks.” Here are some pre-made styles that let you add images with text overlay. The background image can be fixed or parallax and you can change its opacity and add an overlay color.<\/p>\n\n\n\n

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

Image with transparent overlay and optional title<\/h3>\n\n\n\n



Reusable Block Name:<\/strong> Cover


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

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

These images have no overlay- the background overlay is set to 0% transparency.<\/p>\n\n\n\n

\n

Center aligned text over a “cover” image<\/p>\n<\/div><\/div>\n\n\n\n

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

Left aligned text over a “cover” image<\/p>\n<\/div><\/div>\n\n\n\n

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

Right aligned text over a “cover” image<\/p>\n<\/div><\/div>\n\n\n\n

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

Parallax images<\/h3>\n\n\n\n
\n

Left aligned text over a “cover” image with parallax<\/p>\n<\/div><\/div>\n\n\n\n

Images can also have the parallax effect, like this one here. You can establish that in Settings for the “Cover” image block by clicking “fixed background”. The overlay tint is set to 10%.<\/p>\n\n\n\n

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

Tints over images<\/h2>\n\n\n\n

Tint overlays can be used for both design purposes and to keep your type legible when placed over an image. WordPress allows you to add a tint overlay over images. The overlay can be any color and any transparency. We recommend keeping the color within brand and to always ensure that your text is readable.<\/p>\n\n\n\n

\n

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

background image with 50% tinted overlay<\/p>\n<\/div><\/div>\n\n\n\n

\n

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

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

background image with 80% tinted overlay of the “UVM green darker” color<\/p>\n<\/div><\/div>\n\n\n\n

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

Tinted image background with image-caption overlay<\/h2>\n\n\n\n

Reusable blocks can often be combined. Here we have a cover image in the background with a green tint overlay. We’ve placed a Media & Text block on top.<\/p>\n\n\n\n

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

This is a Media & Text block on top of a cover image with a tint overlay<\/h4>\n<\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n

Image layered over the topographic pattern<\/h2>\n\n\n\n

Here we have placed a top pattern swatch combined with white as a background image. We only have the top pattern on part of the background so we’ve ‘faked’ a partial offset background.<\/p>\n\n\n\n

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

Hero headers<\/h2>\n\n\n\n

You can set more text than just a headline over your cover images. You can also use the cover image with a call to action by adding a button. We’ve gone into a bit more detail on how to create these hero banners on this page<\/a>.<\/p>\n\n\n\n

\"Student<\/div>
\n

This is a headline<\/h2>\n\n\n\n

This is a paragraphi it is flush left. It is placeholder text. It is white. You are not supposed to read it- it doesn’t really mean anything. Are yo ustill reading this? Why are you reading this?<\/p>\n<\/div><\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"UVM<\/div>
\n

Lorem Ipsum research at UVM<\/h2>\n\n\n\n

This is a paragraphi it is flush left. It is placeholder text. It is white. You are not supposed to read it- it doesn’t really mean anything. Are yo ustill reading this? Why are you reading this?<\/p>\n\n\n\n

Research Projects<\/a><\/div>\n<\/div><\/div><\/div>\n\n\n\n

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

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

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

WordPress calls images that have text titles “cover blocks.” Here are some pre-made styles that let you add images with text overlay. The background image can be fixed or parallax and you can change its opacity and add an overlay color. Image with transparent overlay and optional title Reusable Block Name: Cover These images have … <\/p>\n

Continue reading “Image Styles”<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[258709,2899,246029],"tags":[],"class_list":["post-1784","post","type-post","status-publish","format-standard","hentry","category-block","category-images","category-media-2","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"Block<\/a> Image Styles<\/a> Media<\/a>","rttpg_excerpt":"WordPress calls images that have text titles “cover blocks.” Here are some pre-made styles that let you add images with text overlay. The background image can be fixed or parallax and you can change its opacity and add an overlay color. Image with transparent overlay and optional title Reusable Block Name: Cover These images have…","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"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=1784"}],"version-history":[{"count":42,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1784\/revisions"}],"predecessor-version":[{"id":5381,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1784\/revisions\/5381"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=1784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=1784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}