{"id":107,"date":"2020-12-12T09:13:57","date_gmt":"2020-12-12T09:13:57","guid":{"rendered":"https:\/\/ourlocality.org\/twentytwentyone\/?p=107"},"modified":"2023-03-15T13:23:20","modified_gmt":"2023-03-15T13:23:20","slug":"about-blocks","status":"publish","type":"post","link":"https:\/\/ourlocality.org\/twentytwentyone\/about-blocks\/","title":{"rendered":"Creative Covers: How to"},"content":{"rendered":"\n<p class=\"has-drop-cap\">The modern website must have tools to create full screen covers. It is annoying to have to rely on a plugin to do this, which is where a modern WordPress template and WordPress blocks can make light work of the job. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>To get started click the Blue Button in th new editor and start typing &#8220;co &#8230;&#8221; and then select Cover from the filtered list. (You will need to ensure you have the Block Editor enabled: You can enable blocks globally or selectively in <em>Dashboard &gt; Writing<\/em> where you\u2019ll find 2 options. Best to selectively allow users to switch.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-8-1024x518.png\" alt=\"\" class=\"wp-image-131\" srcset=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-8-1024x518.png 1024w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-8-300x152.png 300w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-8-768x389.png 768w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-8-1536x778.png 1536w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-8-2048x1037.png 2048w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-8-1568x794.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Covers have overlays, but you can override the defaults (centred) and set the opacity to 0% if you prefer.<\/p>\n\n\n\n<div class=\"wp-block-cover alignfull is-style-default tw-stretched-link tw-ratio-16-9\" style=\"min-height:988px;aspect-ratio:unset;\" id=\"cc\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1714\" sizes=\"auto, (max-width: 799px) 200vw, (max-width: 2560px) 100vw, 2560px\" class=\"wp-block-cover__image-background wp-image-108\" alt=\"\" src=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-scaled.jpg\" data-object-fit=\"cover\" srcset=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-scaled.jpg 2560w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-300x201.jpg 300w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-1024x685.jpg 1024w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-768x514.jpg 768w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-1536x1028.jpg 1536w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-2048x1371.jpg 2048w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2571-1568x1050.jpg 1568w\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center creative-block has-huge-font-size\" style=\"line-height:0.9\">Creative Block<\/p>\n\n\n\n<p class=\"has-text-align-center\">under cover of darkness<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-custom-content-position is-position-bottom-center is-style-twentytwentyone-border\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1714\" sizes=\"auto, (max-width: 799px) 200vw, (max-width: 2560px) 100vw, 2560px\" class=\"wp-block-cover__image-background wp-image-129\" alt=\"\" src=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-scaled.jpg\" style=\"object-position:98% 54%\" data-object-fit=\"cover\" data-object-position=\"98% 54%\" srcset=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-scaled.jpg 2560w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-300x201.jpg 300w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-1024x685.jpg 1024w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-768x514.jpg 768w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-1536x1028.jpg 1536w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-2048x1371.jpg 2048w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/DSC_2505-1568x1050.jpg 1568w\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-normal-font-size\">content aligned bottom; cover width narrow; text size is normal; opacity 50% can help to emphasise text on a light background<\/p>\n<\/div><\/div>\n\n\n\n<p>Then select the align icon to choose Wide Width or Full Width.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-9-1024x509.png\" alt=\"\" class=\"wp-image-132\" srcset=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-9-1024x509.png 1024w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-9-300x149.png 300w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-9-768x382.png 768w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-9-1536x764.png 1536w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-9-2048x1018.png 2048w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-9-1568x780.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>At this point you should check out the specific block options. These can be hidden from view until you click the black gear symbol top right hand corner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"515\" src=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-10-1024x515.png\" alt=\"\" class=\"wp-image-133\" srcset=\"https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-10-1024x515.png 1024w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-10-300x151.png 300w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-10-768x386.png 768w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-10-1536x772.png 1536w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-10-2048x1030.png 2048w, https:\/\/ourlocality.org\/twentytwentyone\/files\/2020\/12\/image-10-1568x788.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p style=\"line-height:1.5\">Effects like the fixed background can be engaging or just make your readers feel queasy. What can be useful is to alter the focal point of an image and nudge it over a little to the left or the right.<\/p>\n\n\n\n<p>And that would normally be it, but you may be asking how did you remove the title entirely without leaving a blank space? Here&#8217;s how. In the Customiser &gt; Css editor we remove the .entry-header div, but only for the specific post in our case #post-107, where 107 is the post id, which can be found easily by hovering over the article item in question. To list all your articles: Dashboard &gt; Posts. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* How to remove the title of a single post *\/\n\narticle#post-107 .entry-header {\n    border-bottom: 0;\n    padding-bottom: 0;\n    margin-bottom: 0;\n    visibility: hidden;\n    height: 0px;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The modern website must have tools to create full screen covers. It is annoying to have to rely on a plugin to do this, which is where a modern template and blocks can make light work of the job. To get started click the Blue Button and start typing co &#8230; and then select Cover from the filtered list.<\/p>\n","protected":false},"author":543,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[27],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","category-about-blocks","tag-covers","entry"],"_links":{"self":[{"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/users\/543"}],"replies":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":2,"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":580,"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/posts\/107\/revisions\/580"}],"wp:attachment":[{"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwentyone\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}