{"id":264635,"date":"2023-01-18T12:27:10","date_gmt":"2023-01-18T12:27:10","guid":{"rendered":"https:\/\/it.wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=264635"},"modified":"2023-01-23T00:59:29","modified_gmt":"2023-01-23T00:59:29","slug":"hero-section-text-with-background-image-overlay","status":"publish","type":"wporg-pattern","link":"https:\/\/it.wordpress.org\/patterns\/pattern\/hero-section-text-with-background-image-overlay\/","title":{"rendered":"Hero Section: Text with Background Image Overlay"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-background is-layout-constrained wp-container-core-group-is-layout-6c04b189 wp-block-group-is-layout-constrained\" style=\"background:linear-gradient(90deg,rgba(255,255,255,0) 63%,rgb(255,105,0) 63%);min-height:500px\">\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-d1d735d3 wp-block-columns-is-layout-flex\" style=\"border-style:none;border-width:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:15px\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:0\">\n<h5 class=\"wp-block-heading has-medium-font-size\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\">SUNSET<\/h5>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\" style=\"margin-top:var(--wp--preset--spacing--20);margin-right:var(--wp--preset--spacing--40);margin-bottom:0;margin-left:0;font-style:normal;font-weight:700\">Travel to your perfect Sunset.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"line-height:1.4\">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<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-white-color has-luminous-vivid-orange-background-color has-text-color has-background wp-element-button\" style=\"border-radius:0px\">Discover your Destination<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJzdW5zZXRfaW5fZ2Fyb3BhYmFfYmVhY2gtaW1hZ2Uta3liY2syMTIuanBn.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJzdW5zZXRfaW5fZ2Fyb3BhYmFfYmVhY2gtaW1hZ2Uta3liY2syMTIuanBn.jpg\" alt=\"\" width=\"384\" height=\"289\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":17873890,"parent":0,"template":"","meta":{"wpop_keywords":"","wpop_description":"A Useful Hero Section to display information and give a CTA to the User. The Two 50% columns are vertically aligned, the one with the image has a background. The CTA use the same color of the background (better to be the same of the main color of the web site).","wpop_viewport_width":800,"wpop_block_types":[],"wpop_locale":"en_US","wpop_wp_version":"","wpop_contains_block_types":"core\/button,core\/buttons,core\/column,core\/columns,core\/group,core\/heading,core\/image,core\/paragraph,core\/spacer","footnotes":""},"pattern-categories":[60,2,42,3,6],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-264635","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-banner","wporg-pattern-category-buttons","wporg-pattern-category-call-to-action","wporg-pattern-category-columns","wporg-pattern-category-text"],"category_slugs":["banner","buttons","call-to-action","columns","text"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"gradient\":\"linear-gradient(90deg,rgba(255,255,255,0) 63%,rgb(255,105,0) 63%)\"},\"dimensions\":{\"minHeight\":\"500px\"}},\"layout\":{\"type\":\"constrained\",\"wideSize\":\"100%\",\"contentSize\":\"1400px\"}} -->\n<div class=\"wp-block-group alignfull has-background\" style=\"background:linear-gradient(90deg,rgba(255,255,255,0) 63%,rgb(255,105,0) 63%);min-height:500px\"><!-- wp:columns {\"verticalAlignment\":null,\"align\":\"full\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}},\"border\":{\"width\":\"0px\",\"style\":\"none\"},\"typography\":{\"fontSize\":\"15px\"}}} -->\n<div class=\"wp-block-columns alignfull\" style=\"border-style:none;border-width:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:15px\"><!-- wp:column {\"verticalAlignment\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"0\"}}}} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"padding-top:0\"><!-- wp:heading {\"level\":5,\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}}},\"fontSize\":\"medium\"} -->\n<h5 class=\"wp-block-heading has-medium-font-size\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\">SUNSET<\/h5>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|20\",\"right\":\"var:preset|spacing|40\",\"bottom\":\"0\",\"left\":\"0\"}},\"typography\":{\"fontStyle\":\"normal\",\"fontWeight\":\"700\"}},\"fontSize\":\"x-large\"} -->\n<h2 class=\"wp-block-heading has-x-large-font-size\" style=\"margin-top:var(--wp--preset--spacing--20);margin-right:var(--wp--preset--spacing--40);margin-bottom:0;margin-left:0;font-style:normal;font-weight:700\">Travel to your perfect Sunset.<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"lineHeight\":\"1.4\"}}} -->\n<p style=\"line-height:1.4\">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<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"luminous-vivid-orange\",\"textColor\":\"white\",\"style\":{\"border\":{\"radius\":\"0px\"}},\"className\":\"is-style-fill\"} -->\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-white-color has-luminous-vivid-orange-background-color has-text-color has-background wp-element-button\" style=\"border-radius:0px\">Discover your Destination<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:spacer {\"height\":\"75px\"} -->\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:image {\"width\":384,\"height\":289,\"sizeSlug\":\"full\",\"linkDestination\":\"media\",\"style\":{\"color\":[]}} -->\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJzdW5zZXRfaW5fZ2Fyb3BhYmFfYmVhY2gtaW1hZ2Uta3liY2syMTIuanBn.jpg\"><img src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJzdW5zZXRfaW5fZ2Fyb3BhYmFfYmVhY2gtaW1hZ2Uta3liY2syMTIuanBn.jpg\" alt=\"\" width=\"384\" height=\"289\" \/><\/a><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:spacer {\"height\":\"14px\"} -->\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":115,"author_meta":{"name":"maurodf","url":"https:\/\/it.wordpress.org\/patterns\/author\/maurodf","avatar":"https:\/\/secure.gravatar.com\/avatar\/608a55ba828e696df43650257be7b55a15259dd6765d7cd9c527d092bdd2fbb9?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/264635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":3,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/264635\/revisions"}],"predecessor-version":[{"id":267622,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/264635\/revisions\/267622"}],"author":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/maurodf"}],"wp:attachment":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=264635"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=264635"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=264635"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=264635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}