{"id":657341,"date":"2024-09-02T08:17:06","date_gmt":"2024-09-02T08:17:06","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/pattern\/three-column-layout-design-with-headers-subheaders-text-and-buttons-kir\/"},"modified":"2026-04-19T19:58:18","modified_gmt":"2026-04-19T19:58:18","slug":"three-column-layout-design-with-headers-subheaders-text-and-buttons-kir","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/three-column-layout-design-with-headers-subheaders-text-and-buttons-kir\/","title":{"rendered":"Three Column Layout Design with Headers, Subheaders, Text, and Buttons"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\n<div class=\"wp-block-cover alignfull\" style=\"padding:20px;min-height:100vh;background-color:#f4f4f4\">\n    <div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n        \n        <div class=\"wp-block-group is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-61a48bee wp-block-group-is-layout-constrained\" style=\"gap:20px;max-width:1200px;margin:auto\">\n            \n            <div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex:1 1 calc(33.33% - 20px);background-color:#ffe684;padding:20px;border-radius:10px;text-align:center;color:#000\">\n                \n                <h3 class=\"wp-block-heading\" style=\"margin-bottom:10px;font-size:16px\">For New Users<\/h3>\n                \n                \n                <h2 class=\"wp-block-heading\" style=\"margin-bottom:20px;font-size:24px\">Create Your First Website<\/h2>\n                \n                \n                <div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-02e95266 wp-block-group-is-layout-flow\" style=\"flex-wrap:wrap;gap:10px;justify-content:center\">\n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Visual<\/a>\n                    \n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Guides<\/a>\n                    \n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">\u0416\u0430\u0440\u0434\u0430\u043c<\/a>\n                    \n                <\/div>\n                \n            <\/div>\n            \n\n            \n            <div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex:1 1 calc(33.33% - 20px);background-color:#b2e59c;padding:20px;border-radius:10px;text-align:center;color:#000\">\n                \n                <h3 class=\"wp-block-heading\" style=\"margin-bottom:10px;font-size:16px\">For Digital Marketers<\/h3>\n                \n                \n                <h2 class=\"wp-block-heading\" style=\"margin-bottom:20px;font-size:24px\">Boost Leads and Sales<\/h2>\n                \n                \n                <div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-02e95266 wp-block-group-is-layout-flow\" style=\"flex-wrap:wrap;gap:10px;justify-content:center\">\n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Design<\/a>\n                    \n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">SEO<\/a>\n                    \n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Forms<\/a>\n                    \n                <\/div>\n                \n            <\/div>\n            \n\n            \n            <div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex:1 1 calc(33.33% - 20px);background-color:#8ad9f0;padding:20px;border-radius:10px;text-align:center;color:#000\">\n                \n                <h3 class=\"wp-block-heading\" style=\"margin-bottom:10px;font-size:16px\">For Advanced Users<\/h3>\n                \n                \n                <h2 class=\"wp-block-heading\" style=\"margin-bottom:20px;font-size:24px\">Elevate Your Projects<\/h2>\n                \n                \n                <div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-02e95266 wp-block-group-is-layout-flow\" style=\"flex-wrap:wrap;gap:10px;justify-content:center\">\n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Data<\/a>\n                    \n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Access<\/a>\n                    \n                    \n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Dynamic<\/a>\n                    \n                <\/div>\n                \n            <\/div>\n            \n        <\/div>\n        \n    <\/div>\n<\/div>\n\n\n<\/div>\n<\/div>\n","protected":false},"author":18872470,"parent":647632,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"wpop_keywords":"","wpop_description":"A modern three-column layout featuring distinct headers, subheaders, and text sections with styled buttons for enhanced user interaction.","wpop_viewport_width":800,"wpop_block_types":[""],"wpop_locale":"kir","wpop_wp_version":"","wpop_contains_block_types":"core\/button,core\/column,core\/columns,core\/cover,core\/group,core\/heading,core\/html","footnotes":""},"pattern-categories":[3],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-657341","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-columns"],"category_slugs":["columns"],"keyword_slugs":[],"pattern_content":"<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:html -->\n<!-- wp:cover -->\n<div class=\"wp-block-cover alignfull\" style=\"padding:20px;min-height:100vh;background-color:#f4f4f4\">\n    <div class=\"wp-block-cover__inner-container\">\n        <!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"20px\"}},\"layout\":{\"type\":\"constrained\",\"wideSize\":\"1200px\",\"contentSize\":\"1200px\",\"justifyContent\":\"center\"}} -->\n        <div class=\"wp-block-group\" style=\"gap:20px;max-width:1200px;margin:auto\">\n            <!-- wp:column {\"style\":{\"color\":{\"background\":\"#ffe684\"}}} -->\n            <div class=\"wp-block-column\" style=\"flex:1 1 calc(33.33% - 20px);background-color:#ffe684;padding:20px;border-radius:10px;text-align:center;color:#000\">\n                <!-- wp:heading {\"level\":3} -->\n                <h3 style=\"margin-bottom:10px;font-size:16px\">For New Users<\/h3>\n                <!-- \/wp:heading -->\n                <!-- wp:heading {\"level\":2} -->\n                <h2 style=\"margin-bottom:20px;font-size:24px\">Create Your First Website<\/h2>\n                <!-- \/wp:heading -->\n                <!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"10px\"}}} -->\n                <div class=\"wp-block-group\" style=\"flex-wrap:wrap;gap:10px;justify-content:center\">\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Visual<\/a>\n                    <!-- \/wp:button -->\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Guides<\/a>\n                    <!-- \/wp:button -->\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">\u0416\u0430\u0440\u0434\u0430\u043c<\/a>\n                    <!-- \/wp:button -->\n                <\/div>\n                <!-- \/wp:group -->\n            <\/div>\n            <!-- \/wp:column -->\n\n            <!-- wp:column {\"style\":{\"color\":{\"background\":\"#b2e59c\"}}} -->\n            <div class=\"wp-block-column\" style=\"flex:1 1 calc(33.33% - 20px);background-color:#b2e59c;padding:20px;border-radius:10px;text-align:center;color:#000\">\n                <!-- wp:heading {\"level\":3} -->\n                <h3 style=\"margin-bottom:10px;font-size:16px\">For Digital Marketers<\/h3>\n                <!-- \/wp:heading -->\n                <!-- wp:heading {\"level\":2} -->\n                <h2 style=\"margin-bottom:20px;font-size:24px\">Boost Leads and Sales<\/h2>\n                <!-- \/wp:heading -->\n                <!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"10px\"}}} -->\n                <div class=\"wp-block-group\" style=\"flex-wrap:wrap;gap:10px;justify-content:center\">\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Design<\/a>\n                    <!-- \/wp:button -->\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">SEO<\/a>\n                    <!-- \/wp:button -->\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Forms<\/a>\n                    <!-- \/wp:button -->\n                <\/div>\n                <!-- \/wp:group -->\n            <\/div>\n            <!-- \/wp:column -->\n\n            <!-- wp:column {\"style\":{\"color\":{\"background\":\"#8ad9f0\"}}} -->\n            <div class=\"wp-block-column\" style=\"flex:1 1 calc(33.33% - 20px);background-color:#8ad9f0;padding:20px;border-radius:10px;text-align:center;color:#000\">\n                <!-- wp:heading {\"level\":3} -->\n                <h3 style=\"margin-bottom:10px;font-size:16px\">For Advanced Users<\/h3>\n                <!-- \/wp:heading -->\n                <!-- wp:heading {\"level\":2} -->\n                <h2 style=\"margin-bottom:20px;font-size:24px\">Elevate Your Projects<\/h2>\n                <!-- \/wp:heading -->\n                <!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"10px\"}}} -->\n                <div class=\"wp-block-group\" style=\"flex-wrap:wrap;gap:10px;justify-content:center\">\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Data<\/a>\n                    <!-- \/wp:button -->\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Access<\/a>\n                    <!-- \/wp:button -->\n                    <!-- wp:button -->\n                    <a class=\"wp-block-button__link\" href=\"#\" style=\"color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer;text-transform:uppercase\">Dynamic<\/a>\n                    <!-- \/wp:button -->\n                <\/div>\n                <!-- \/wp:group -->\n            <\/div>\n            <!-- \/wp:column -->\n        <\/div>\n        <!-- \/wp:group -->\n    <\/div>\n<\/div>\n<!-- \/wp:cover -->\n\n<!-- \/wp:html --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->","favorite_count":0,"author_meta":{"name":"Parin Panjari","url":"https:\/\/wordpress.org\/patterns\/author\/parinpanjari","avatar":"https:\/\/secure.gravatar.com\/avatar\/f8c1c00f815c1393be8d8f923041ed80706055c5691488966128fd370cd64604?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\/657341","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\/657341\/revisions"}],"predecessor-version":[{"id":658786,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/657341\/revisions\/658786"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/parinpanjari"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=657341"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=657341"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=657341"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=657341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}