{"id":1349,"date":"2023-05-11T15:34:06","date_gmt":"2023-05-11T15:34:06","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/?page_id=1370"},"modified":"2024-09-23T16:33:44","modified_gmt":"2024-09-23T16:33:44","slug":"cover","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/","title":{"rendered":"Cover"},"content":{"rendered":"\n<p class=\"is-style-lead\">The cover block adds a large image over which you can add text. This block is an eye-catching feature, meant to give extra impact to special content.<\/p>\n\n\n\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-1371\" alt=\"\" src=\"https:\/\/digitaldocumentation.wustl.edu\/momentum\/wp-content\/uploads\/sites\/54\/2023\/05\/middleeast_header.jpg\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center\">Cover block header<\/h2>\n\n\n\n<p class=\"has-text-align-center\">Cover block is just a large image that has a dark overlay so you can put text blocks on top of it. This text is just a paragraph block added on top of the cover.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-text-arrow\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"#\">You can also add a button block if you&#8217;d like<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:65px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-cover\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-default-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center\">You can also just choose to have a plain black background with white text on top.<\/h2>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to use the cover block<\/h2>\n\n\n\n<ol>\n<li>In the Page Editor, navigate to the area of the page where you want the block to display.<\/li>\n\n\n\n<li>Click on the Add block icon [+] and select\/search for\u00a0<strong>Cover<\/strong>\u00a0from the menu.<\/li>\n\n\n\n<li>You will be prompted to add an image from the media library or upload an image. \n<ul>\n<li>If you want the image to look good on its own at full width, we recommend using a photo that is at least 1920px wide. <\/li>\n\n\n\n<li>Should you just want a plain black background with text, there is a small circle of black in the cover block before you add a photo. If you click on that, then you&#8217;ll just have a black background over which you can put white text.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>You can then add text blocks to the top of the image.<\/li>\n\n\n\n<li>Click update in the Page Editor to save your changes.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">How to edit cover block image<\/h2>\n\n\n\n<p>This block is unique in that there are two tabs under the block editor in the right-hand editor. One is for <strong>Settings<\/strong> and one is for <strong>Styles<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Settings<\/h3>\n\n\n\n<p>Under the Settings tab, there are a variety of things you can change about the cover image.<\/p>\n\n\n\n<ol>\n<li>Turning on <strong>fixed background <\/strong>gives the image a parallax scroll effect, so that as the user scrolls down the page, the image moves as well. \n<ul>\n<li>This option is only recommended for high quality and large images.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Turning on <strong>repeated background<\/strong> is a good option for images that are bit small that you don&#8217;t mind repeating across the cover image space.<\/li>\n\n\n\n<li>You can then use the <strong>focal point picker<\/strong> to choose the focal point of the image.<\/li>\n\n\n\n<li>You can also add<strong> Alt Text<\/strong>.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"wp-block-image alignright size-full\"><img decoding=\"async\" src=\"https:\/\/digitaldocumentation.wustl.edu\/momentum\/wp-content\/uploads\/sites\/54\/2023\/05\/Screen-Shot-2023-05-11-at-9.56.07-AM.png\" alt=\"\" class=\"wp-image-1372\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-cover is-light has-parallax\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__image-background wp-image-1371 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/digitaldocumentation.wustl.edu\/momentum\/wp-content\/uploads\/sites\/54\/2023\/05\/middleeast_header.jpg)\"><\/div><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center\">This cover has fixed background on.<\/h2>\n<\/div><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-cover is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__image-background wp-image-1373 is-repeated\" style=\"background-position:50% 50%;background-image:url(https:\/\/digitaldocumentation.wustl.edu\/momentum\/wp-content\/uploads\/sites\/54\/2023\/05\/Empowerthroughhealth.png)\"><\/div><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center\">This cover has repeated background turned on.<\/h2>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Styles<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"wp-block-image alignright size-full\"><img decoding=\"async\" src=\"https:\/\/digitaldocumentation.wustl.edu\/momentum\/wp-content\/uploads\/sites\/54\/2023\/05\/Screen-Shot-2023-05-11-at-9.56.27-AM.png\" alt=\"\" class=\"wp-image-1374\"\/><\/figure>\n<\/div>\n\n\n<p>Under the styles tab, you can change the overlay on the image that darkens the image you upload so that users can better read the text. <\/p>\n\n\n\n<ol>\n<li>You can lighten or darken the overlay by adjusting the <strong>overlay opacity<\/strong>. \n<ul>\n<li>You only want to change the opacity if the text is too difficult to read, or the image too difficult to say. <\/li>\n\n\n\n<li>The text must be easy to read to meet accessibility requirements, so do not lighten the opacity to such a level that the text gets lost in the image. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>The cover block adds a large image over which you can add text. This block is an eye-catching feature, meant to give extra impact to special content. How to use the cover block How to edit cover block image This block is unique in that there are two tabs under the block editor in the [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":567,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cover - Center for the Environment<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cover - Center for the Environment\" \/>\n<meta property=\"og:description\" content=\"The cover block adds a large image over which you can add text. This block is an eye-catching feature, meant to give extra impact to special content. How to use the cover block How to edit cover block image This block is unique in that there are two tabs under the block editor in the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/\" \/>\n<meta property=\"og:site_name\" content=\"Center for the Environment\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-23T16:33:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/wp-content\/uploads\/sites\/2\/2023\/05\/middleeast_header.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/\",\"name\":\"Cover - Center for the Environment\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website\"},\"datePublished\":\"2023-05-11T15:34:06+00:00\",\"dateModified\":\"2024-09-23T16:33:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cover\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/\",\"name\":\"Center for the Environment\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/environment\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cover - Center for the Environment","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Cover - Center for the Environment","og_description":"The cover block adds a large image over which you can add text. This block is an eye-catching feature, meant to give extra impact to special content. How to use the cover block How to edit cover block image This block is unique in that there are two tabs under the block editor in the [&hellip;]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/","og_site_name":"Center for the Environment","article_modified_time":"2024-09-23T16:33:44+00:00","og_image":[{"url":"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/wp-content\/uploads\/sites\/2\/2023\/05\/middleeast_header.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/","url":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/","name":"Cover - Center for the Environment","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website"},"datePublished":"2023-05-11T15:34:06+00:00","dateModified":"2024-09-23T16:33:44+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/cover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/environment\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/environment\/blocks\/"},{"@type":"ListItem","position":3,"name":"Cover"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/environment\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/environment\/","name":"Center for the Environment","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/environment\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Center for the Environment","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/environment","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/1349"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/comments?post=1349"}],"version-history":[{"count":4,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/1349\/revisions"}],"predecessor-version":[{"id":1616,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/1349\/revisions\/1616"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/environment\/wp-json\/wp\/v2\/media?parent=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}