{"id":8174,"date":"2025-03-26T09:23:33","date_gmt":"2025-03-26T09:23:33","guid":{"rendered":"https:\/\/tableberg.com\/?p=8174"},"modified":"2025-03-26T09:23:36","modified_gmt":"2025-03-26T09:23:36","slug":"%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-use-the-columns-block-in-wordpress\/","title":{"rendered":"\u30b3\u30e9\u30e0\u30b9\u30fb\u30dc\u30c3\u30af - \u4f7f\u3044\u65b9\u3068\u6982\u8981"},"content":{"rendered":"\n<p>Creating structured layouts in WordPress is easier without using any third-party page builder since you can do it using the <strong><a href=\"https:\/\/wordpress.org\/documentation\/article\/columns-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Columns Block<\/a><\/strong>. It is always true if you use the Gutenberg Block editor that comes with WordPress natively. <\/p>\n\n\n\n<p>The Columns block lets you place content side by side simply by inserting the columns block. It is<strong> extremely useful for creating pricing sections, team layout, product comparison<\/strong>, or beautiful text and image content in the same row. The great thing about the block is that anyone can use it without coding knowledge. <\/p>\n\n\n\n<p>Today, we will learn how to use the columns block in WordPress and its overview. <\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" style=\"max-width: -moz-fit-content; \" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents ub_table-of-contents-collapsed\" id=\"ub_table-of-contents-73953f1b-c795-4f84-b818-2210b229eeb2\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"false\"><div class=\"ub_table-of-contents-header-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">How to Use the Columns Block in WordPress<\/div>\n\t\t\t\t<div class=\"ub_table-of-contents-header-toggle\">\n\t\t\t<div class=\"ub_table-of-contents-toggle\" style=\"\">\n\t\t\t\u00a0[<a class=\"ub_table-of-contents-toggle-link\" href=\"#\" style=\"\">show<\/a>]\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column ub-hide\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-columns-block-in-wordpress\/#0-how-to-use-the-columns-block-in-wordpress\" style=\"\">How to Use the Columns Block in WordPress?<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-columns-block-in-wordpress\/#1-insert-the-columns-block\" style=\"\">Insert the Columns Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-columns-block-in-wordpress\/#2-insert-content\" style=\"\">Insert Content<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-columns-block-in-wordpress\/#3-customization\" style=\"\">Customization<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-columns-block-in-wordpress\/#4-overview-of-the-wordpress-columns-block\" style=\"\">Overview of the WordPress Columns Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-columns-block-in-wordpress\/#5-final-takeaway\" style=\"\">Final Takeaway!<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 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-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>Create Beautiful Tables <\/strong><br><strong>With Block Editor<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">Try Free<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-how-to-use-the-columns-block-in-wordpress\">How to Use the Columns Block in WordPress?<\/h2>\n\n\n\n<p>As I&#8217;ve said, using the columns block is easy and anyone can use it without technical knowledge. We also do not require any third-party plugin to use the Columns block. Follow the steps below. <\/p>\n\n\n<!DOCTYPE html>\n<?xml version=\"1.0\" encoding=\"UTF-8\"?><div class=\"wp-block-ub-tabbed-content wp-block-ub-tabbed-content-underline wp-block-ub-tabbed-content-holder wp-block-ub-tabbed-content-horizontal-holder-mobile wp-block-ub-tabbed-content-horizontal-holder-tablet\" id=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092\" style=\"\">\n\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-holder horizontal-tab-width-mobile horizontal-tab-width-tablet\">\n\t\t\t\t<div role=\"tablist\" class=\"wp-block-ub-tabbed-content-tabs-title wp-block-ub-tabbed-content-tabs-title-mobile-horizontal-tab wp-block-ub-tabbed-content-tabs-title-tablet-horizontal-tab\" style=\"justify-content: center; \"><div role=\"tab\" id=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-tab-0\" aria-controls=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-panel-0\" aria-selected=\"true\" class=\"wp-block-ub-tabbed-content-tab-title-wrap active ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-title-color: #671feb; --ub-tabbed-active-title-color: #671feb; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: left; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 1<\/strong><\/div>\n\t\t\t<\/div><div role=\"tab\" id=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-tab-1\" aria-controls=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-panel-1\" aria-selected=\"false\" class=\"wp-block-ub-tabbed-content-tab-title-wrap ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-active-title-color: #671feb; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: left; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 2<\/strong><\/div>\n\t\t\t<\/div><div role=\"tab\" id=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-tab-2\" aria-controls=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-panel-2\" aria-selected=\"false\" class=\"wp-block-ub-tabbed-content-tab-title-wrap ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-active-title-color: #671feb; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: center; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 3<\/strong><\/div>\n\t\t\t<\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"wp-block-ub-tabbed-content-tabs-content\" style=\"border-top-left-radius: 0px;; border-top-right-radius: 0px;; border-bottom-left-radius: 0px;; border-bottom-right-radius: 0px;; \"><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap active\" id=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-panel-0\" aria-labelledby=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-tab-0\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"1-insert-the-columns-block\">Insert the Columns Block<\/h3>\n\n\n\n<p>Go to your post or page where you want to use the Columns Block. <\/p>\n\n\n\n<p>Now, click on the <strong>Add Block Icon&nbsp;(Plus Icon)<\/strong>&nbsp;<strong>(1)<\/strong>, type &ldquo;<strong>Columns<\/strong>&rdquo; in the search box&nbsp;<strong>(2)<\/strong>, and&nbsp;<strong>click on the block&nbsp;<\/strong>when it appears&nbsp;<strong>(3)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"512\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-39-56-1.png\" alt=\"How to use the columns block in WordPress\" class=\"wp-image-8181\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-39-56-1.png 918w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-39-56-1-300x167.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-39-56-1-768x428.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-39-56-1-18x10.png 18w\" sizes=\"auto, (max-width: 918px) 100vw, 918px\" \/><\/figure>\n\n\n\n<p>Now, select a layout that you prefer for your work. There are layouts available for the Columns block. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"912\" height=\"564\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-42-06.png\" alt=\"\" class=\"wp-image-8179\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-42-06.png 912w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-42-06-300x186.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-42-06-768x475.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-42-06-18x12.png 18w\" sizes=\"auto, (max-width: 912px) 100vw, 912px\" \/><\/figure>\n\n<\/div><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap ub-hide\" id=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-panel-1\" aria-labelledby=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-tab-1\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"2-insert-content\">Insert Content<\/h3>\n\n\n\n<p>Click the &#8220;+&#8221; icon to add content or any block within the Columns.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"584\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-57-50.png\" alt=\"\" class=\"wp-image-8182\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-57-50.png 916w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-57-50-300x191.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-57-50-768x490.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_13-57-50-18x12.png 18w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<p>In the same way, insert content into the other part of the columns.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"912\" height=\"582\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-04-39.gif\" alt=\"\" class=\"wp-image-8183\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>You can add more content to the columns by clicking the &#8220;+&#8221; icon at the bottom right side of each column. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"578\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-06-22.png\" alt=\"\" class=\"wp-image-8184\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-06-22.png 916w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-06-22-300x189.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-06-22-768x485.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-06-22-18x12.png 18w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n<\/div><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap ub-hide\" id=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-panel-2\" aria-labelledby=\"ub-tabbed-content-276b846d-63b8-4b2e-b271-482cef458092-tab-2\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"3-customization\">Customization<\/h3>\n\n\n\n<p>When you&#8217;ve added the content, you can decide the vertical alignment of the column. There are 4 options available for the vertical alignment. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"580\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-14-07.png\" alt=\"\" class=\"wp-image-8185\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-14-07.png 916w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-14-07-300x190.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-14-07-768x486.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-14-07-18x12.png 18w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<p>The block settings provide other customization options. There are two tabs: Settings and Styles. <\/p>\n\n\n\n<p>The Settings allow you to add more columns if you like. Also, you get a responsive option for mobile devices. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"534\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-26-56.png\" alt=\"\" class=\"wp-image-8186\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-26-56.png 916w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-26-56-300x175.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-26-56-768x448.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-26-56-18x10.png 18w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<p>The Styles tab features several options. <\/p>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"722\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-12_15-46-23.png\" alt=\"\" class=\"wp-image-7566\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-12_15-46-23.png 240w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-12_15-46-23-100x300.png 100w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-12_15-46-23-4x12.png 4w\" sizes=\"auto, (max-width: 240px) 100vw, 240px\" \/><\/figure>\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<ol class=\"wp-block-list\">\n<li><strong>Color:<\/strong>&nbsp;This function lets you change the color of the text, background, and link of the Latest Posts Block.<\/li>\n\n\n\n<li><strong>Typography:&nbsp;<\/strong>The typography lets you select fonts &amp; font size, appearance, line height, letter spacing, letter casing, and letter decoration.<\/li>\n\n\n\n<li><strong>Dimensions:<\/strong>&nbsp;Dimensions allow you to adjust the margin and padding for your Latest Posts block.<\/li>\n\n\n\n<li><strong>Border: <\/strong>The Border option allows you to set the border and adjust the border-radius.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n<p>After customizing, save or publish the post.<\/p>\n\n\n\n<p>Here is a demo of the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"586\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-39-04.png\" alt=\"\" class=\"wp-image-8191\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-39-04.png 844w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-39-04-300x208.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-39-04-768x533.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-39-04-18x12.png 18w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n\n<\/div><\/div>\n\t\t<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-overview-of-the-wordpress-columns-block\">Overview of the WordPress Columns Block<\/h2>\n\n\n<div class=\"wp-block-ub-content-toggle wp-block-ub-content-toggle-block\" id=\"ub-content-toggle-block-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\" data-mobilecollapse=\"true\" data-desktopcollapse=\"true\" data-preventcollapse=\"false\" data-showonlyone=\"true\">\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-0-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\" style=\"color: #5344F4; \"><strong>What is the Columns Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down open\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"true\" class=\"wp-block-ub-content-toggle-accordion-content-wrap\" id=\"ub-content-toggle-panel-0-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\">\n\n<p>Columns Block is a layout block that lets you divide your content into horizontal sections. Each column inside the block can have its own blocks, such as text, images, buttons, videos, etc. <\/p>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-1-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\" style=\"color: #5344F4; \"><strong>What are the Key Features of the Columns Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-1-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\">\n\n<p>The features of the columns block are below. <\/p>\n\n\n\n<p><strong>Custom Width Control<\/strong>. Manually resize columns to your desired proportions.<\/p>\n\n\n\n<p><strong>Predefined Layout Options<\/strong>. Choose from various combinations like 50\/50, 70\/30, or three equal columns.<\/p>\n\n\n\n<p><strong>Nested Blocks Support<\/strong>. Add any block (paragraph, image, button, etc.) inside each column.<\/p>\n\n\n\n<p><strong>Responsive Behavior<\/strong>. Columns automatically stack vertically on smaller screens, though you can manually do it.<\/p>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-2-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\" style=\"color: #5344F4; \"><strong>What are the Toolbar Features of the Columns Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-2-e8aabab4-fe34-4814-8fe8-2cca7b0e7221\">\n\n<p>When you click on the Columns Block, a toolbar appears above it with several helpful options:<\/p>\n\n\n<ul style=\"padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 256 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-046bfd8d-2ec7-4171-b0c8-eb172690819d\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 256 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-6a4a8ef9-fa78-4cd8-8bfb-9e77cfbd05e0\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 256 512\"><path fill=\"#000000\" d=\"M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Transform to:<\/strong> This feature allows you to transform your columns block into the Details &amp; Group blocks. <\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-a9ddbc9e-da68-46f5-a2fa-d264896a8a89\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 320 512\"><path fill=\"#000000\" d=\"M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Drag: <\/strong>It lets you drag the block to any place in the editor. <\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 64C0 46.3 14.3 32 32 32H272c13.2 0 25 8.1 29.8 20.4s1.5 26.3-8.2 35.2L162.3 208H184c75.1 0 136 60.9 136 136s-60.9 136-136 136H105.4C63 480 24.2 456 5.3 418.1l-1.9-3.8c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l1.9 3.8c8.1 16.3 24.8 26.5 42.9 26.5H184c39.8 0 72-32.2 72-72s-32.2-72-72-72H80c-13.2 0-25-8.1-29.8-20.4s-1.5-26.3 8.2-35.2L189.7 96H32C14.3 96 0 81.7 0 64z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-ea34aecc-0974-4665-94e3-6283fc0ace93\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 320 512\"><path fill=\"#000000\" d=\"M0 64C0 46.3 14.3 32 32 32H272c13.2 0 25 8.1 29.8 20.4s1.5 26.3-8.2 35.2L162.3 208H184c75.1 0 136 60.9 136 136s-60.9 136-136 136H105.4C63 480 24.2 456 5.3 418.1l-1.9-3.8c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l1.9 3.8c8.1 16.3 24.8 26.5 42.9 26.5H184c39.8 0 72-32.2 72-72s-32.2-72-72-72H80c-13.2 0-25-8.1-29.8-20.4s-1.5-26.3 8.2-35.2L189.7 96H32C14.3 96 0 81.7 0 64z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Right or Left:<\/strong> You can move your columns to the right or left. <\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 384 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M189 77.6c7.5-16 .7-35.1-15.3-42.6s-35.1-.7-42.6 15.3L3 322.4c-4.7 9.9-3.9 21.5 1.9 30.8S21 368 32 368H256v80c0 17.7 14.3 32 32 32s32-14.3 32-32V368h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H320V160c0-17.7-14.3-32-32-32s-32 14.3-32 32V304H82.4L189 77.6z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-029a9b9e-4587-4e33-b781-9880d7dfafbd\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 384 512\"><path fill=\"#000000\" d=\"M189 77.6c7.5-16 .7-35.1-15.3-42.6s-35.1-.7-42.6 15.3L3 322.4c-4.7 9.9-3.9 21.5 1.9 30.8S21 368 32 368H256v80c0 17.7 14.3 32 32 32s32-14.3 32-32V368h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H320V160c0-17.7-14.3-32-32-32s-32 14.3-32 32V304H82.4L189 77.6z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Align: <\/strong>You can change the alignment to none, wide, and full width. <\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M32.5 58.3C35.3 43.1 48.5 32 64 32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H90.7L70.3 208H184c75.1 0 136 60.9 136 136s-60.9 136-136 136H100.5c-39.4 0-75.4-22.3-93-57.5l-4.1-8.2c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l4.1 8.2c6.8 13.6 20.6 22.1 35.8 22.1H184c39.8 0 72-32.2 72-72s-32.2-72-72-72H32c-9.5 0-18.5-4.2-24.6-11.5s-8.6-16.9-6.9-26.2l32-176z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-e6cd0359-fe4c-45ef-af84-f64fae736b37\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 320 512\"><path fill=\"#000000\" d=\"M32.5 58.3C35.3 43.1 48.5 32 64 32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H90.7L70.3 208H184c75.1 0 136 60.9 136 136s-60.9 136-136 136H100.5c-39.4 0-75.4-22.3-93-57.5l-4.1-8.2c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l4.1 8.2c6.8 13.6 20.6 22.1 35.8 22.1H184c39.8 0 72-32.2 72-72s-32.2-72-72-72H32c-9.5 0-18.5-4.2-24.6-11.5s-8.6-16.9-6.9-26.2l32-176z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Change Vertical Alignment<\/strong>: This option lets you choose vertical alignment for the blocks inside a column. <\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M232.4 84.7c11.4-13.5 9.7-33.7-3.8-45.1s-33.7-9.7-45.1 3.8L38.6 214.7C14.7 242.9 1.1 278.4 .1 315.2c0 1.4-.1 2.9-.1 4.3c0 .2 0 .3 0 .5c0 88.4 71.6 160 160 160s160-71.6 160-160c0-85.5-67.1-155.4-151.5-159.8l63.9-75.6zM256 320A96 96 0 1 1 64 320a96 96 0 1 1 192 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-b2fd53ec-950a-4040-934b-f2546b366019\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 320 512\"><path fill=\"#000000\" d=\"M232.4 84.7c11.4-13.5 9.7-33.7-3.8-45.1s-33.7-9.7-45.1 3.8L38.6 214.7C14.7 242.9 1.1 278.4 .1 315.2c0 1.4-.1 2.9-.1 4.3c0 .2 0 .3 0 .5c0 88.4 71.6 160 160 160s160-71.6 160-160c0-85.5-67.1-155.4-151.5-159.8l63.9-75.6zM256 320A96 96 0 1 1 64 320a96 96 0 1 1 192 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Options: It holds the additional block-related options, such as move, copy, duplicate, etc.  <\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"606\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-55-42.png\" alt=\"\" class=\"wp-image-8194\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-55-42.png 916w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-55-42-300x198.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-55-42-768x508.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-26_14-55-42-18x12.png 18w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-final-takeaway\">Final Takeaway!<\/h2>\n\n\n\n<p>The Column Block is a powerful layout block that allows you to display your content differently. It gives you full control over how your content is arranged across your page. This way, managing the block is super easy. <\/p>\n\n\n\n<p>Once you start using it, you will likely use the block more often. Let me know if you&#8217;ve liked the post. Also, share this with your friends and family. <\/p>\n\n\n\n<p><strong>Read More<\/strong><\/p>\n\n\n<ul style=\"padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-5d1ec703-7ca9-4706-a173-7d45a6f6b60a\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-295c2c83-674d-4240-ade9-a7c5f21a1404\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/best-wordpress-data-visualization-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">9 Best WordPress Data Visualization Plugins (2025)<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-fe880f34-a5dc-4155-8fbb-a5b35cfab408\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-create-a-team-member-section-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a Team Member Section in WordPress (Without Using a Plugin)<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-30a1de27-bf58-4204-8f4b-c6770b380716\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-make-your-tables-interactive-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Make Your Tables Interactive in WordPress<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-4359a8f2-46ee-4cb7-8a47-d1d55de825ff\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-create-a-wordpress-pricing-table-with-toggle\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a WordPress Pricing Table with Toggle<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-9e0650f6-303d-4e29-898b-efadf7634a10\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-use-the-grid-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Grid Block &#8211; Overview &amp; How to Use It?<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n<div class=\"wp-block-ub-social-share\" id=\"ub-social-share-e6dbef80-dc0e-43b6-80bc-842d00de570c\">\n\t\t\t<div class=\"social-share-icons align-icons-center orientation-icons-row\"><a aria-label=\"facebook-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-columns-block-in-wordpress%2F&amp;title=Columns%20Bock%20%26%238211%3B%20How%20to%20Use%20It%20%26amp%3B%20Overview\" class=\"ub-social-share-facebook-container\" style=\"border-color: #1877f2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-facebook\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#1877f2\" fill=\"#1877f2\" width=\"20\" height=\"20\" viewbox=\"0 0 264 512\"><path d=\"M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><a aria-label=\"twitter-logo\" target=\"_blank\" rel=\"nofollow\" href=\"http:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-columns-block-in-wordpress%2F&amp;text=Columns%20Bock%20%26%238211%3B%20How%20to%20Use%20It%20%26amp%3B%20Overview\" class=\"ub-social-share-twitter-container\" style=\"border-color: #1d9bf0; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-twitter\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"color:#1d9BF0\" fill=\"#1d9BF0\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"><\/path><\/svg><\/span><span style=\"\">tweet<\/span>\n\t\t\t<\/a><a aria-label=\"linkedin-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-columns-block-in-wordpress%2F\" class=\"ub-social-share-linkedin-container\" style=\"border-color: #2867b2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-linkedin\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#2867b2\" fill=\"#2867b2\" width=\"20\" height=\"20\" viewbox=\"0 0 448 512\"><path d=\"M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><\/div>\n\t\t<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating structured layouts in WordPress is easier without using any third-party page builder since you can do it using the WordPress Columns Block. It is always true if you use the Gutenberg Block editor that comes with WordPress natively. The Columns block lets you place content side by side simply by inserting the columns block. It is extremely useful for creating pricing sections, team layout, product comparison, or beautiful text and image content in the same row. The great thing about the block is that anyone can use it without coding knowledge. Today, we will learn how to use the columns block in WordPress and its overview. How to Use [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":8176,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-8174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/How-to-Use-the-Columns-Block-in-WordPress-1140-x-450.png","author_info":{"display_name":"Ankur Raj Bongshi","author_link":"https:\/\/tableberg.com\/ja\/author\/rajankur003\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/8174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=8174"}],"version-history":[{"count":8,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/8174\/revisions"}],"predecessor-version":[{"id":8199,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/8174\/revisions\/8199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/8176"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=8174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=8174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=8174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}