{"id":2475,"date":"2020-09-14T12:17:42","date_gmt":"2020-09-14T16:17:42","guid":{"rendered":"https:\/\/www.bates.edu\/wordpress\/?page_id=2475"},"modified":"2025-11-19T15:02:59","modified_gmt":"2025-11-19T20:02:59","slug":"columns","status":"publish","type":"page","link":"https:\/\/www.bates.edu\/wordpress\/block-editor\/popular-features\/columns\/","title":{"rendered":"Columns"},"content":{"rendered":"\n
\n\n\n\n

Using the Columns Block<\/h1>\n\n\n\n

Columns are useful for organizing content in a clear and visually appealing manner. This versatile block can accommodate regular text content as well as many other types of blocks such as tiles, sub-columns, images, purloined content, highlight boxes, lists, and Bates profiles. Columns are also highly customizable, allowing a user to choose the number of columns and the width of each column.<\/p>\n\n\n\n

First, type \/columns and select the “Columns” block.<\/p>\n\n\n\n

\"\"
Accessing the Columns Block<\/figcaption><\/figure>\n\n\n\n

You will now be prompted to select a columns template. Hitting the skip button will let you start with two columns and customize from there. <\/p>\n\n\n\n

\"\"
Default Column Widths<\/figcaption><\/figure>\n\n\n\n

For this example I will use two equally-sized columns. After choosing the first variation to start with, my cursor is automatically set on the left column. Clicking the plus sign allows me to choose a type of content to put within the left column. <\/p>\n\n\n\n

\"\"
Selecting Content Types Within Columns<\/figcaption><\/figure>\n\n\n\n

The options on the right sidebar also let me adjust the width of the left column while the right column changes size accordingly.<\/p>\n\n\n\n

\"\"
Adjusting Column Widths<\/figcaption><\/figure>\n\n\n\n

Clicking the empty space between both columns, however, will allow me to use a slider function on the right sidebar to choose how many columns I want. Even though I started with two, I can select more and end up with six columns total. <\/p>\n\n\n\n

\"\"
Adding & Removing Columns<\/figcaption><\/figure>\n\n\n\n

Examples of Columns in Use<\/h4>\n\n\n\n

Example of images in columns (block editor and front-end view):<\/p>\n\n\n\n

\n
\n
\"\"
Block Editor Images in Columns<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Front-end Images in Columns<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Example of text in columns (block editor and front-end view):<\/p>\n\n\n\n

\n
\n
\"\"
Block Editor Text in Columns<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Front-end Text in Columns<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Example of multi-media columns (block editor and front-end view):<\/p>\n\n\n\n

\n
\n
\"\"
Multi-media Columns in the Block Editor<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Multi-media Columns in the Front-end<\/figcaption><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Using the Columns Block Columns are useful for organizing content in a…<\/p>\n","protected":false},"author":1255,"featured_media":0,"parent":4310,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_hide_ai_chatbot":false,"_ai_chatbot_style":"","associated_faculty":[],"_Page_Specific_Css":"","_bates_restrict_mod":false,"_batesModPostContentOverride_prepend":false,"_batesModPostContentOverride_append":false,"_batesModPostContentOverride_append_before_footer":false,"_dimp_site_id":"","_dimp_override_contact":false,"_table_of_contents_display":false,"_table_of_contents_location":"","_table_of_contents_disableSticky":false,"_is_featured":false,"footnotes":"","_bates_seo_meta_description":"","_bates_seo_block_robots":false,"_bates_seo_sharing_image_id":0,"_bates_seo_sharing_image_twitter_id":0,"_bates_seo_share_title":"","_bates_seo_canonical_overwrite":"","_bates_seo_twitter_template":""},"class_list":["post-2475","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/2475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/users\/1255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=2475"}],"version-history":[{"count":3,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/2475\/revisions"}],"predecessor-version":[{"id":3872,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/2475\/revisions\/3872"}],"up":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/4310"}],"wp:attachment":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=2475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}