{"id":7389,"date":"2023-12-01T15:39:12","date_gmt":"2023-12-01T15:39:12","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=7389"},"modified":"2023-12-01T15:46:37","modified_gmt":"2023-12-01T15:46:37","password":"","slug":"split-content-quick-start-guide","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/split-content-quick-start-guide\/","title":{"rendered":"Split Content Quick Start Guide"},"content":{"rendered":"\n<p>Split content is an extremely popular layout in web design. Split content shows an image on one side of a row and text on the other. Unfortunately, creating split content in the default WordPress block editor is not possible though. <\/p>\n\n\n\n<p>Luckily, setting up Split Content is simple with <a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/pro\/\">Kadence Blocks Pro<\/a>.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configure Split Content Block<\/h3>\n\n\n\n<p>Select the Split Content Block from the blocks selection:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/04\/SelectSplit.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/04\/SelectSplit-1024x584.jpeg\" alt=\"Select Split Content Block\" class=\"wp-image-1172\" \/><\/a><\/figure>\n\n\n\n<p>Set your split content block\u2019s main settings:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/02-Split-Content-Main-Settings-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/02-Split-Content-Main-Settings-min-1024x797.jpeg\" alt=\"Main Split Content Settings\" class=\"wp-image-279\" \/><\/a><\/figure>\n\n\n\n<p>Add an image to your split content<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/03-Add-Image-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/03-Add-Image-min.gif\" alt=\"Add Image to Block\" class=\"wp-image-280\" \/><\/a><\/figure>\n\n\n\n<p>Set the heading of your split content:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/04-Set-Heading-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/04-Set-Heading-min.gif\" alt=\"Set Heading\" class=\"wp-image-281\" \/><\/a><\/figure>\n\n\n\n<p>&nbsp;Add content to your split content block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/05-Add-Content-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/05-Add-Content-min-1024x505.jpeg\" alt=\"Add Content to Page\" class=\"wp-image-282\" \/><\/a><\/figure>\n\n\n\n<p>&nbsp;Set the background colors for your block<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/06-Set-Background-Colors-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/06-Set-Background-Colors-min-1024x546.jpeg\" alt=\"Set Background Colors\" class=\"wp-image-283\" \/><\/a><\/figure>\n\n\n\n<p>&nbsp;Set the alignment of the block\u2019s content:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/07-Set-Content-Alignment-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/07-Set-Content-Alignment-min-1024x550.jpeg\" alt=\"Set Content Alignment\" class=\"wp-image-284\" \/><\/a><\/figure>\n\n\n\n<p>Set the alignment of the split content block:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/08-Set-Alignment-of-Block-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/08-Set-Alignment-of-Block-min.gif\" alt=\"Align Block\" class=\"wp-image-285\" \/><\/a><\/figure>\n\n\n\n<p>Save the page and view your spilt content to be sure you\u2019re happy with it:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/09-Front-End-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/09-Front-End-min.jpeg\" alt=\"View Front End\" class=\"wp-image-286\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Configure Split Content Overlay<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/02splitoverlayexample-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/02splitoverlayexample-min-1024x506.jpeg\" alt=\"Split Content Example\" class=\"wp-image-287\" \/><\/a><\/figure>\n\n\n\n<p>The Split Content block also allows you to set a negative margin for your content in order to create an overlay.<\/p>\n\n\n\n<p>Add split content to a row layout block with a single column. setup the row as desired:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/11AddtoRow-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/11AddtoRow-min.gif\" alt=\"Add To Row\" class=\"wp-image-288\" \/><\/a><\/figure>\n\n\n\n<p>Configure your row settings. If you\u2019d like a background for your split content, you can set it here. You can also set it to be fullwidth if desired:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/03RowLayoutSetting-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/03RowLayoutSetting-min-1024x551.jpeg\" alt=\"Row Layout Settings\" class=\"wp-image-289\" \/><\/a><\/figure>\n\n\n\n<p>Configure your split content<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/04ConfigureSplitContent-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/04ConfigureSplitContent-min-1024x508.jpeg\" alt=\"Configure Content\" class=\"wp-image-290\" \/><\/a><\/figure>\n\n\n\n<p>Set negative side margin to move the content<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/05NegativeMargin-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/05NegativeMargin-min.gif\" alt=\"Adjust Margin\" class=\"wp-image-291\" \/><\/a><\/figure>\n\n\n\n<p>If desired, set a content shadow<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/06ContentShadow-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/06ContentShadow-min-1024x547.jpeg\" alt=\"Add Content Shadow\" class=\"wp-image-292\" \/><\/a><\/figure>\n\n\n\n<p>If you want, you can also decrease the min-height to adjust the content height<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/07DecreaseMinHeight-min-1024x547.jpeg\" alt=\"Adjust Min Height\" class=\"wp-image-293\" \/><\/figure>\n\n\n\n<p>Be sure to adjust the mobile and tablet padding and margins to optimize your split content on all devices.<\/p>\n\n\n<style>.kb-row-layout-id7389_46bb44-53 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id7389_46bb44-53 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id7389_46bb44-53 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id7389_46bb44-53 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id7389_46bb44-53 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id7389_46bb44-53 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id7389_46bb44-53 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column7389_47d690-2f > .kt-inside-inner-col,.kadence-column7389_47d690-2f > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column7389_47d690-2f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column7389_47d690-2f > .kt-inside-inner-col{flex-direction:column;}.kadence-column7389_47d690-2f > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column7389_47d690-2f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column7389_47d690-2f{position:relative;}@media all and (max-width: 1024px){.kadence-column7389_47d690-2f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column7389_47d690-2f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column7389_47d690-2f inner-column-1\"><div class=\"kt-inside-inner-col\">\n<p>Mobile Spacing:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/08Mobile-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/08Mobile-min-483x1024.jpeg\" alt=\"Mobile Spacing\" class=\"wp-image-295\" \/><\/a><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column7389_31d054-f2 > .kt-inside-inner-col,.kadence-column7389_31d054-f2 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column7389_31d054-f2 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column7389_31d054-f2 > .kt-inside-inner-col{flex-direction:column;}.kadence-column7389_31d054-f2 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column7389_31d054-f2 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column7389_31d054-f2{position:relative;}@media all and (max-width: 1024px){.kadence-column7389_31d054-f2 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column7389_31d054-f2 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column7389_31d054-f2 inner-column-2\"><div class=\"kt-inside-inner-col\">\n<p>Tablet Spacing:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/09Tablet-min-528x1024.jpeg\" alt=\"Tablet Spacing\" class=\"wp-image-294\" \/><\/figure>\n\n\n\n<p><\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p>View your split content block in all screen sizes and adjust the spacing settings if necessary:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/10AllScreenViews-min.gif\" alt=\"View in All Screen Sizes\" class=\"wp-image-296\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Split content is an extremely popular layout in web design. Split content shows an image on one side of a row and text on the other. Unfortunately, creating split content in the default WordPress block editor is not possible though. Luckily, setting up Split Content is simple with Kadence Blocks Pro. Configure Split Content Block&#8230;<\/p>\n","protected":false},"author":143301,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-7389","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":277,"total_views":"2779","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"gilberthernandez","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/gilberthernandez\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/143301"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=7389"}],"version-history":[{"count":1,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7389\/revisions"}],"predecessor-version":[{"id":7390,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7389\/revisions\/7390"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=7389"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=7389"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=7389"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=7389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}