{"id":4958,"date":"2022-12-01T08:19:41","date_gmt":"2022-12-01T14:19:41","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4958"},"modified":"2023-12-01T09:12:53","modified_gmt":"2023-12-01T15:12:53","slug":"designing-with-column-blocks","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/","title":{"rendered":"Designing with Column Blocks in WordPress"},"content":{"rendered":"\n<p>Columns are everywhere in web design, from simple columns of text and images to multi-sidebar page layouts. Look at any website, and you are bound to see content areas laid out in columns. Therefore, the Columns block in WordPress is one of the foundational block types you will likely use in every project. <\/p>\n\n\n\n<p>This article will explore two block layouts that rely on the Columns block. While both are relatively simple, they demonstrate how powerful and versatile this block can be. We will also add additional functionality using custom CSS classes. Let&#8217;s get started. <\/p>\n\n\n\n<p><em>Feel free to watch the video version of this article or continue reading.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Designing with Column Blocks in WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/UMMHst9_z70?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-d5c5aeac wp-block-group-is-layout-flow\" style=\"margin-bottom:50px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"padding-left:var(--wp--preset--spacing--50)\">\n<li><a href=\"#overview\">Overview<\/a><\/li>\n\n\n\n<li><a href=\"#When-columns-are-the-best-tool-for-the-job\">When columns are the best tool for the job<\/a><\/li>\n\n\n\n<li><a href=\"#How-to-reverse-column-direction-on-mobile\">How to reverse column direction on mobile<\/a><\/li>\n\n\n\n<li><a href=\"#Using-columns-to-create-a-post-template-with-a-sidebar\">Using columns to create a post template with a sidebar<\/a><\/li>\n\n\n\n<li><a href=\"#How-to-make-a-sticky-sidebar\">How to make a sticky sidebar<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>Before diving in, it&#8217;s important to note that this article will not cover <em>everything<\/em> related to the Columns block. <\/p>\n\n\n\n<p>If you have never used the Columns block before, the best way to explore this block type is to open up the Editor. Insert a Columns block and add a few additional columns. Manipulate the color, dimension, border, and alignment settings. Just start playing around. The companion video above does provide a brief walkthrough at the beginning. <\/p>\n\n\n\n<p>Once you&#8217;re comfortable with how the block generally works, you will be ready for some of the more advanced implementations discussed in this article. And if you would like to follow along at home, all examples and screenshots were created using WordPress 6.1, the latest version of Gutenberg, and <a href=\"https:\/\/frostwp.com\/download\/\">Frost<\/a>.<\/p>\n\n\n\n<p>Frost is an experimental block theme developed and maintained by the Developer Relations team here at WP Engine. I also recommend the <a href=\"https:\/\/wordpress.org\/themes\/twentytwentythree\/\">Twenty Twenty-Three<\/a> theme as a good starting point when exploring new features in WordPress. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"When-columns-are-the-best-tool-for-the-job\">When columns are the best tool for the job<\/h2>\n\n\n\n<p>There are countless applications where the Columns block is the obvious choice. Say you need three columns of content that showcase the features of a product or the services of a business. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1496\" height=\"593\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/simple-column-layout.jpg\" alt=\"A simple layout using the Columns block.\" class=\"wp-image-4976\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/simple-column-layout.jpg 1496w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/simple-column-layout-300x119.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/simple-column-layout-1024x406.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/simple-column-layout-768x304.jpg 768w\" sizes=\"auto, (max-width: 1496px) 100vw, 1496px\" \/><figcaption class=\"wp-element-caption\">A simple layout using the Columns block.<\/figcaption><\/figure>\n\n\n\n<p>You will use this type of layout often, and it&#8217;s good to get comfortable building them quickly and efficiently while utilizing all of the design tools available to the Columns block. <\/p>\n\n\n\n<p>Let&#8217;s set this design aside and look at a scenario where the Columns block might not be the obvious first choice. Consider this layout that uses the Media &amp; Text block. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1497\" height=\"761\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-block.jpg\" alt=\"The Media &amp; Text block.\" class=\"wp-image-4977\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-block.jpg 1497w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-block-300x153.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-block-1024x521.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-block-768x390.jpg 768w\" sizes=\"auto, (max-width: 1497px) 100vw, 1497px\" \/><figcaption class=\"wp-element-caption\">The Media &amp; Text block.<\/figcaption><\/figure>\n\n\n\n<p>As the name implies, the Media &amp; Text block allows you to display an image to the left or right of text content. The block has some useful features, such as the ability to stack the image and text on mobile, but there are design elements that you cannot configure in the Editor without custom CSS. A good example is the space between the image and the content. You also can only modify the size of the image. No duotone, no caption, the list goes on.<\/p>\n\n\n\n<p>This block sacrifices control for a simplified user interface. This might be an acceptable trade-off in many situations, but these limitations can be frustrating from a design perspective. The correct tool for this type of layout, in my opinion, is the Columns block. The block layout becomes a bit more complicated, but you can build precisely what you want. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 \u2013 Setup<\/h3>\n\n\n\n<p>Start by adding a Columns block where each internal Column block is set to 50% wide. Add some content to the left Column and use a Cover block to add an image to the right Column. You can also use a simple Image block, but the Cover block provides additional features that this layout will need. Finally, configure a background color and modify the text and button colors as needed.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1496\" height=\"611\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-one-1.jpg\" alt=\"Replicating the Media &amp; Text block layout using the Columns block.\" class=\"wp-image-4980\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-one-1.jpg 1496w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-one-1-300x123.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-one-1-1024x418.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-one-1-768x314.jpg 768w\" sizes=\"auto, (max-width: 1496px) 100vw, 1496px\" \/><figcaption class=\"wp-element-caption\">Replicating the Media &amp; Text block layout using the Columns block.<\/figcaption><\/figure>\n\n\n\n<p>The design is already beginning to resemble the Media &amp; Text block, but let&#8217;s keep going. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 \u2013 Dimensions<\/h3>\n\n\n\n<p>By default, padding is added to the Columns block when a background color is set. You can remove this while also setting the block spacing between the columns to zero in the Dimensions panel. We will control the visual space between the image and text by applying padding to the left internal Column block. <\/p>\n\n\n\n<p>The screenshot below shows the padding around the text content, while padding and block spacing have been zeroed out on the Columns block.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1497\" height=\"566\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-two.jpg\" alt=\"Configuring dimensions on the Columns block.\" class=\"wp-image-4981\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-two.jpg 1497w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-two-300x113.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-two-1024x387.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-two-768x290.jpg 768w\" sizes=\"auto, (max-width: 1497px) 100vw, 1497px\" \/><figcaption class=\"wp-element-caption\">Configuring dimensions on the Columns block.<\/figcaption><\/figure>\n\n\n\n<p>The general layout is now complete so let&#8217;s move on to the image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3 \u2013 Image Adjustments<\/h3>\n\n\n\n<p>Since we are using a Cover block, there are lots of modifications that can be made. Let&#8217;s apply a duotone to the image and add a small caption. Finally, we can set the height of the image using the Min Height setting in the Dimensions panel.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1502\" height=\"564\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-three.jpg\" alt=\"Configuring the Cover block.\" class=\"wp-image-4982\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-three.jpg 1502w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-three-300x113.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-three-1024x385.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-layout-step-three-768x288.jpg 768w\" sizes=\"auto, (max-width: 1502px) 100vw, 1502px\" \/><figcaption class=\"wp-element-caption\">Configuring the Cover block.<\/figcaption><\/figure>\n\n\n\n<p>Here&#8217;s a comparison of the two completed designs. Note that the Media &amp; Text does use fewer blocks and requires less configuration by the user. There&#8217;s always a tradeoff, but you can build far more robust designs using the Columns block, and you can always pre-package them as block patterns for end-users. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2097\" height=\"1101\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-1.jpg\" alt=\"\" class=\"wp-image-4984\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-1.jpg 2097w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-1-300x158.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-1-1024x538.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-1-768x403.jpg 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-1-1536x806.jpg 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-1-2048x1075.jpg 2048w\" sizes=\"auto, (max-width: 2097px) 100vw, 2097px\" \/><figcaption class=\"wp-element-caption\">The Media &amp; Text block versus the Columns block.<\/figcaption><\/figure>\n\n\n\n<p>The one downside of this approach is that we cannot display the image above the text content on mobile if the image is placed in the right Column block. Let&#8217;s fix that.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"How-to-reverse-column-direction-on-mobile\">Bonus \u2013 How to reverse column direction on mobile<\/h3>\n\n\n\n<p>The ability to change the order of stacked columns on mobile is not natively supported within WordPress (yet). Columns retain their order.  <\/p>\n\n\n\n<p>However, you can easily add this functionality with a custom class and some CSS. In the theme&#8217;s <code>style.css<\/code> file, let&#8217;s add the following.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-d6743c7d wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code><strong>frost\/style.css<\/strong><\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">782px<\/span>) {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-selector-class\">.mobile-reverse-column-direction<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attribute\">flex-direction<\/span>: column-reverse;\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>The Columns block is a flexbox container, which means that you can reverse the direction of the items within it using <code>flex-direction<\/code>. To ensure this styling is only applied on mobile, wrap the class in a simple media query at the breakpoint you wish. <\/p>\n\n\n\n<p>By default,<code>782px<\/code> is browser width when columns stack on mobile in WordPress, which is why I chose it for this example.<\/p>\n\n\n\n<p>Finally, add <code>mobile-reverse-column-direction<\/code> to the Columns block. The image will now appear above the content on mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"428\" height=\"355\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-utility-class-2.jpg\" alt=\"\" class=\"wp-image-4983\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-utility-class-2.jpg 428w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-utility-class-2-300x249.jpg 300w\" sizes=\"auto, (max-width: 428px) 100vw, 428px\" \/><figcaption class=\"wp-element-caption\">Adding the custom CSS class to the Columns block.<\/figcaption><\/figure>\n\n\n\n<p>You should always use as many native block settings as possible before writing CSS, but a little bit of custom CSS goes a long way, as seen below.<\/p>\n\n\n\n<p>Using highly specific utility classes is generally the best approach if you need additional styling. If WordPress adds new functionality, like the ability to reverse the direction of columns on mobile, you can easily remove the utility class.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2097\" height=\"1101\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-2.jpg\" alt=\"\" class=\"wp-image-4985\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-2.jpg 2097w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-2-300x158.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-2-1024x538.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-2-768x403.jpg 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-2-1536x806.jpg 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-media-text-comparison-2-2048x1075.jpg 2048w\" sizes=\"auto, (max-width: 2097px) 100vw, 2097px\" \/><figcaption class=\"wp-element-caption\">The Media &amp; Text block versus the Columns block with a dash of custom CSS.<\/figcaption><\/figure>\n\n\n\n<p>While the result is visually quite similar to the Media &amp; Text block, you have far more control over each design element when using the Columns block. Now let&#8217;s explore the Columns block in the context of the Site Editor. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Using-columns-to-create-a-post-template-with-a-sidebar\">Using columns to create a page template with a sidebar<\/h2>\n\n\n\n<p>Sidebars are a standard fixture in web design. Unfortunately, the Frost theme does not include a page or post template with a sidebar. Luckily you can fix that with the help of the Columns block.<\/p>\n\n\n\n<p>Begin by navigating to the Site Editor and then create a new custom template. Name it whatever you wish. This template will be available for both posts and pages.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1214\" height=\"732\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/add-custom-template.png\" alt=\"Adding a custom page template in the WordPress Site Editor\" class=\"wp-image-4972\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/add-custom-template.png 1214w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/add-custom-template-300x181.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/add-custom-template-1024x617.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/add-custom-template-768x463.png 768w\" sizes=\"auto, (max-width: 1214px) 100vw, 1214px\" \/><figcaption class=\"wp-element-caption\">Adding a custom page template in the WordPress Site Editor<\/figcaption><\/figure>\n\n\n\n<p>Once you click &#8220;Create,&#8221; WordPress will copy the default page template as a starting point for your custom design. <\/p>\n\n\n\n<p>Every block theme is different, but the default page template for Frost is quite simple. It consists of Header and Footer template parts that sandwich a Group block containing the Post Title and Post Content blocks. <\/p>\n\n\n\n<p>Before adding a Columns block and modifying the design, you will want to ensure the outer Group block has layout enabled. Enabling layout is not needed in Frost&#8217;s default template but will allow you to set the alignment of the Columns block, which will be placed inside the Group. <\/p>\n\n\n\n<p>See the screenshot below for reference. You can learn more about <a href=\"https:\/\/wpengine.com\/builders\/exploring-block-layout-alignment-and-dimensions\/\">alignment and layout controls<\/a> in our recent article here on WP Engine Builders. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1689\" height=\"745\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/default-page-template-enable-layout.jpg\" alt=\"Enabling layout on the container Group block.\" class=\"wp-image-4973\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/default-page-template-enable-layout.jpg 1689w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/default-page-template-enable-layout-300x132.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/default-page-template-enable-layout-1024x452.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/default-page-template-enable-layout-768x339.jpg 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/default-page-template-enable-layout-1536x678.jpg 1536w\" sizes=\"auto, (max-width: 1689px) 100vw, 1689px\" \/><figcaption class=\"wp-element-caption\">Enabling layout on the container Group block.<\/figcaption><\/figure>\n\n\n\n<p>With layout enabled on the Group, you can remove the original content and add a Columns block. This is your opportunity to get creative and design a sidebar that suits the needs of your project. For the design below, here are a few of the specific tweaks that were made.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Design Features<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Columns block alignment is set to Wide, so it lines up with the header and footer.<\/li>\n\n\n\n<li>A two-column layout was used, one with a width of 25% and the other with 75%. <\/li>\n\n\n\n<li>The block spacing between the two columns was set to Medium.<\/li>\n\n\n\n<li>The Post Content block was justified to the left.<\/li>\n\n\n\n<li>Three separate sidebar content items were created: two calls to action and a list of post categories.<\/li>\n<\/ul>\n\n\n\n<p>The <a href=\"https:\/\/youtu.be\/UMMHst9_z70\">companion video<\/a> at the beginning of this article contains a complete walkthrough of how this template was designed.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1685\" height=\"927\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-final-2.jpg\" alt=\"The final custom page template featuring a sidebar.\" class=\"wp-image-4975\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-final-2.jpg 1685w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-final-2-300x165.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-final-2-1024x563.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-final-2-768x423.jpg 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-final-2-1536x845.jpg 1536w\" sizes=\"auto, (max-width: 1685px) 100vw, 1685px\" \/><figcaption class=\"wp-element-caption\">The final custom page template featuring a sidebar content area.<\/figcaption><\/figure>\n\n\n\n<p>Before finishing the template, let&#8217;s apply the <code>mobile-reverse-column-direction<\/code> class to the Columns block. Otherwise, the sidebar will display above the post content on mobile devices. Not an ideal user experience. <\/p>\n\n\n\n<p>After saving the template in the Site Editor, it will become available when editing posts and pages. Choose a post and set the template to the new custom page template. The final result should look something like this. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1169\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template.jpg\" alt=\"The desktop and mobile view of the custom page template featuring a sidebar content area.\" class=\"wp-image-4969\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template.jpg 1920w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-300x183.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-1024x623.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-768x468.jpg 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sidebar-template-1536x935.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">The desktop and mobile view of the custom page template featuring a sidebar content area.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"How-to-make-a-sticky-sidebar\">Bonus \u2013&nbsp;How to make a sticky sidebar<\/h3>\n\n\n\n<p>The custom page template looks great, but we can take this design further with another minor CSS tweak. What if the sidebar content was &#8220;sticky,&#8221; so it stuck to the top of the browser window as the user scrolled down the post?<\/p>\n\n\n\n<p>Sticky sidebars are relatively common on the web when you want to ensure specific content is always displayed to a visitor. Examples include calls to action, advertisements, or a post&#8217;s table of contents.<\/p>\n\n\n\n<p>Unfortunately, making the sidebar Column block sticky is a bit challenging, given that the parent Columns block is a flexbox container. Applying custom CSS to the content <em>within<\/em> the Column is much easier. <\/p>\n\n\n\n<p>To do so, we need to modify the block layout in the sidebar slightly by containing all of the content within a Group block. Then apply the CSS class <code>sticky-column-content<\/code> to the Group. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"906\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sticky-sidebar.jpg\" alt=\"Adding a Group container and applying the custom CSS class.\" class=\"wp-image-4967\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sticky-sidebar.jpg 1600w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sticky-sidebar-300x170.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sticky-sidebar-1024x580.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sticky-sidebar-768x435.jpg 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sticky-sidebar-1536x870.jpg 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">Adding a Group container and applying the custom CSS class.<\/figcaption><\/figure>\n\n\n\n<p>Next, add the CSS for the custom class to the theme&#8217;s stylesheet. <\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-d6743c7d wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code><strong>frost\/style.css<\/strong><\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.sticky-column-content<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attribute\">postion<\/span>: sticky;\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">30px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>The top spacing is relatively arbitrary but ensures a small buffer between the top of the browser window and the sidebar content. And here is the final result in action. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"900\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/columns-sticky-sidebar-in-action.gif\" alt=\"The sticky sidebar in action.\" class=\"wp-image-4968\"\/><figcaption class=\"wp-element-caption\">The sticky sidebar in action.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">In conclusion<\/h2>\n\n\n\n<p>The Columns block is one of the most powerful tools at your disposal when building block layouts. Hopefully, the two relatively simple examples in this article demonstrated just how versatile it can be. Blocks continue to get more powerful with each WordPress release, and it&#8217;s incredible how much you can accomplish with very little extra CSS. By WordPress 6.2, you might not even need the custom CSS classes used in this article.<\/p>\n\n\n\n<p>So have you experimented with this block type or used any of these techniques in your projects? Let me know on <a href=\"https:\/\/twitter.com\/nickmdiego\">Twitter<\/a>. I&#8217;d love to take a look.<\/p>\n\n\n\n<p>And if you&#8217;re looking for more modern WordPress development techniques, check out our <a href=\"https:\/\/wpengine.com\/builders\/\">other posts<\/a> here on WP Engine Builders. Until next time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build sophisticated layouts using the Columns block in WordPress.<\/p>\n","protected":false},"author":5,"featured_media":4964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4958","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Designing with Column Blocks in WordPress<\/title>\n<meta name=\"description\" content=\"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing with Column Blocks in WordPress\" \/>\n<meta property=\"og:description\" content=\"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-01T14:19:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T15:12:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-opengraph.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nick Diego\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Designing with Column Blocks in WordPress\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-opengraph.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@nickmdiego\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Diego\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/\"},\"author\":{\"name\":\"Nick Diego\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/ec4573512f14a40d8ec517f312d1879b\"},\"headline\":\"Designing with Column Blocks in WordPress\",\"datePublished\":\"2022-12-01T14:19:41+00:00\",\"dateModified\":\"2023-12-01T15:12:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/\"},\"wordCount\":1980,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/designing-with-columns-thumbnail.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/\",\"name\":\"Designing with Column Blocks in WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/designing-with-columns-thumbnail.jpg\",\"datePublished\":\"2022-12-01T14:19:41+00:00\",\"dateModified\":\"2023-12-01T15:12:53+00:00\",\"description\":\"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/designing-with-columns-thumbnail.jpg\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/designing-with-columns-thumbnail.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/designing-with-column-blocks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing with Column Blocks in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/ec4573512f14a40d8ec517f312d1879b\",\"name\":\"Nick Diego\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"caption\":\"Nick Diego\"},\"description\":\"Nick Diego is a Sr. Developer Advocate at WP Engine. He can be found creating educational content, building plugins and themes, and contributing to WordPress Core. Connect with him on Twitter, LinkedIn, or WordPress Slack.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/nickmdiego\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/nick-diego\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Designing with Column Blocks in WordPress","description":"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/","og_locale":"en_US","og_type":"article","og_title":"Designing with Column Blocks in WordPress","og_description":"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.","og_url":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/","og_site_name":"Builders","article_published_time":"2022-12-01T14:19:41+00:00","article_modified_time":"2023-12-01T15:12:53+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-opengraph.jpg","type":"image\/jpeg"}],"author":"Nick Diego","twitter_card":"summary_large_image","twitter_title":"Designing with Column Blocks in WordPress","twitter_description":"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-opengraph.jpg","twitter_creator":"@nickmdiego","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Nick Diego","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/"},"author":{"name":"Nick Diego","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/ec4573512f14a40d8ec517f312d1879b"},"headline":"Designing with Column Blocks in WordPress","datePublished":"2022-12-01T14:19:41+00:00","dateModified":"2023-12-01T15:12:53+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/"},"wordCount":1980,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-thumbnail.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/","url":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/","name":"Designing with Column Blocks in WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-thumbnail.jpg","datePublished":"2022-12-01T14:19:41+00:00","dateModified":"2023-12-01T15:12:53+00:00","description":"Learn how to design sophisticated layouts using the Columns block in WordPress block themes with a special focus on Full Site Editing.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-thumbnail.jpg","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/designing-with-columns-thumbnail.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/designing-with-column-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Designing with Column Blocks in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/ec4573512f14a40d8ec517f312d1879b","name":"Nick Diego","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","caption":"Nick Diego"},"description":"Nick Diego is a Sr. Developer Advocate at WP Engine. He can be found creating educational content, building plugins and themes, and contributing to WordPress Core. Connect with him on Twitter, LinkedIn, or WordPress Slack.","sameAs":["https:\/\/x.com\/nickmdiego"],"url":"https:\/\/wpengine.com\/builders\/author\/nick-diego\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=4958"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/4964"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=4958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=4958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=4958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}