{"id":59126,"date":"2022-04-20T15:05:34","date_gmt":"2022-04-20T15:05:34","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/pattern\/elegance-call-to-action-with-image-with-icon-overlay-id_id\/"},"modified":"2026-04-19T17:11:12","modified_gmt":"2026-04-19T17:11:12","slug":"elegance-call-to-action-with-image-with-icon-overlay-id_id","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/elegance-call-to-action-with-image-with-icon-overlay-id_id\/","title":{"rendered":"Elegance: Call to action with image with icon overlay"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-black-color has-white-background-color has-text-color has-background is-layout-constrained wp-container-core-group-is-layout-91daf9cd wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-cover has-custom-content-position is-position-top-center wp-duotone-000000-ffffff-2\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;min-height:600px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(180deg,rgba(255,255,255,0) 86%,rgb(255,255,255) 86%)\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background\" alt=\"\" src=\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/a005-scottw-388.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=7b1420a934329a445b1f1851ebc08533\" style=\"object-position:100% 100%\" data-object-fit=\"cover\" data-object-position=\"100% 100%\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-3efacfdb wp-block-columns-is-layout-flex\" style=\"margin-top:0px;margin-bottom:0px\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\"><\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background:linear-gradient(90deg,rgba(255,255,255,0) 50%,rgb(255,255,255) 50%);padding-top:400px;flex-basis:200px\">\n<figure class=\"wp-block-image size-full wp-duotone-rgb000-rgb25512837-1\"><a href=\"#0\"><img decoding=\"async\" src=\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/pd43-16-chim_0.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=11c684a9b2dc878fa82271bfb22049b1\" alt=\"\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n<\/div><\/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\" style=\"padding-left:5%\">\n<h2 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:0.15em\">\u2013 This is Title<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Just a short sentence. Write your own copy text here. This is just a demo text you should overwrite. Just a short sentence. Write your own copy text here.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\" style=\"margin-top:70px\">\n<div class=\"wp-block-button is-style-outline is-style-outline--3\"><a class=\"wp-block-button__link\" href=\"#0\">Know More <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":13265138,"parent":35114,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"wpop_keywords":"elegan, cta, call to action, ikon, overlay, aksen, Gradien","wpop_description":"Tata letak 2 kolom diatur dengan blok Sampul dengan gambar latar belakang di kolom pertama. Ada gambar ikon duoton di sudut kanan bawah di blok Sampul, membuat tata letak gambar yang menarik dilapis dengan ikon. Judul, deskripsi, dan tombol ditempatkan di kolom kedua.","wpop_viewport_width":800,"wpop_block_types":[""],"wpop_locale":"id_ID","wpop_wp_version":"","wpop_contains_block_types":"core\/button,core\/buttons,core\/column,core\/columns,core\/cover,core\/group,core\/heading,core\/image,core\/paragraph","footnotes":""},"pattern-categories":[2,3,13,6],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-59126","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-buttons","wporg-pattern-category-columns","wporg-pattern-category-images","wporg-pattern-category-text"],"category_slugs":["buttons","columns","images","text"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"white\",\"textColor\":\"black\",\"layout\":{\"contentSize\":\"1200px\"}} -->\n<div class=\"wp-block-group alignfull has-black-color has-white-background-color has-text-color has-background\"><!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:cover {\"url\":\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/a005-scottw-388.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=7b1420a934329a445b1f1851ebc08533\",\"focalPoint\":{\"x\":\"1.00\",\"y\":\"1.00\"},\"minHeight\":600,\"minHeightUnit\":\"px\",\"customGradient\":\"linear-gradient(180deg,rgba(255,255,255,0) 86%,rgb(255,255,255) 86%)\",\"contentPosition\":\"top center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"}},\"color\":{\"duotone\":[\"#000000\",\"#ffffff\"]}}} -->\n<div class=\"wp-block-cover has-custom-content-position is-position-top-center\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;min-height:600px\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(180deg,rgba(255,255,255,0) 86%,rgb(255,255,255) 86%)\"><\/span><img class=\"wp-block-cover__image-background\" alt=\"\" src=\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/a005-scottw-388.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=7b1420a934329a445b1f1851ebc08533\" style=\"object-position:100% 100%\" data-object-fit=\"cover\" data-object-position=\"100% 100%\" \/><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"isStackedOnMobile\":false,\"style\":{\"spacing\":{\"margin\":{\"top\":\"0px\",\"bottom\":\"0px\"},\"blockGap\":{\"top\":\"0px\",\"left\":\"0px\"}}}} -->\n<div class=\"wp-block-columns is-not-stacked-on-mobile\" style=\"margin-top:0px;margin-bottom:0px\"><!-- wp:column {\"width\":\"\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"}}}} -->\n<div class=\"wp-block-column\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\"><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"200px\",\"style\":{\"color\":{\"gradient\":\"linear-gradient(90deg,rgba(255,255,255,0) 50%,rgb(255,255,255) 50%)\"},\"spacing\":{\"padding\":{\"top\":\"400px\"}}}} -->\n<div class=\"wp-block-column has-background\" style=\"background:linear-gradient(90deg,rgba(255,255,255,0) 50%,rgb(255,255,255) 50%);padding-top:400px;flex-basis:200px\"><!-- wp:image {\"sizeSlug\":\"full\",\"linkDestination\":\"custom\",\"style\":{\"color\":{\"duotone\":[\"rgb(0, 0, 0)\",\"rgb(255, 128, 37)\"]},\"border\":{\"radius\":{\"topRight\":null,\"bottomLeft\":null}}}} -->\n<figure class=\"wp-block-image size-full\"><a href=\"#0\"><img src=\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/pd43-16-chim_0.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=11c684a9b2dc878fa82271bfb22049b1\" alt=\"\" \/><\/a><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div><\/div>\n<!-- \/wp:cover --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"left\":\"5%\"}}}} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"padding-left:5%\"><!-- wp:heading {\"style\":{\"typography\":{\"textTransform\":\"uppercase\",\"fontStyle\":\"normal\",\"fontWeight\":\"700\",\"letterSpacing\":\"0.15em\"}},\"fontSize\":\"medium\"} -->\n<h2 class=\"has-medium-font-size\" style=\"font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:0.15em\">\u2013 This is Title<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Just a short sentence. Write your own copy text here. This is just a demo text you should overwrite. Just a short sentence. Write your own copy text here.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:buttons {\"style\":{\"spacing\":{\"margin\":{\"top\":\"70px\"}}}} -->\n<div class=\"wp-block-buttons\" style=\"margin-top:70px\"><!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" href=\"#0\">Know More \u2192<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":0,"author_meta":{"name":"WebMan Design | Oliver Juhas","url":"https:\/\/wordpress.org\/patterns\/author\/webmandesign","avatar":"https:\/\/secure.gravatar.com\/avatar\/34c19c0923466a5bf3c232ad7885b9985cd075c79ac0beb4b802c3ee80d71452?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/59126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/59126\/revisions"}],"predecessor-version":[{"id":59966,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/59126\/revisions\/59966"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/webmandesign"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=59126"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=59126"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=59126"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=59126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}