{"id":1114,"date":"2023-11-06T14:27:07","date_gmt":"2023-11-06T19:27:07","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1114"},"modified":"2026-08-10T20:58:39","modified_gmt":"2026-08-11T00:58:39","slug":"columns","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/intermediate-training\/intermediate-training-module-2-common-content-blocks\/columns\/","title":{"rendered":"Columns"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Columns\n <\/h1>\n \n \n \n\n

Intermediate Training Module 2: Common Content Blocks<\/p>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

The Columns block allows you to display content in multiple columns rather than a single vertical layout. This can help break up large sections of content, improve readability, and create more visually engaging pages.<\/p>\n\n\n\n

Columns are commonly used for:<\/p>\n\n\n\n

    \n
  • Comparing information<\/li>\n\n\n\n
  • Displaying side-by-side content<\/li>\n\n\n\n
  • Highlighting services or features<\/li>\n\n\n\n
  • Creating call-to-action sections<\/li>\n\n\n\n
  • Organizing long pages into more manageable sections<\/li>\n<\/ul>\n\n\n\n

    When used thoughtfully, columns can help visitors scan content more easily and improve the overall layout of a page.<\/p>\n\n\n\n

    When to Use Columns<\/h2>\n\n\n\n

    Use columns when content benefits from being displayed side by side. Two-column layouts often work well for:<\/p>\n\n\n\n

      \n
    • Text and supporting content<\/li>\n\n\n\n
    • Contact information<\/li>\n\n\n\n
    • Program overviews<\/li>\n\n\n\n
    • Feature summaries<\/li>\n<\/ul>\n\n\n\n

      Adding a Columns Block<\/h2>\n\n\n\n

      To add a Columns block:<\/p>\n\n\n\n

        \n
      1. Click the +<\/strong> button and search for Columns<\/strong>.<\/li>\n\n\n\n
      2. Select the Columns block.<\/li>\n\n\n\n
      3. Choose the desired column layout.<\/li>\n\n\n\n
      4. Begin adding content to each column.<\/li>\n<\/ol>\n\n\n\n

        Each column can contain its own collection of blocks.<\/p>\n\n\n\n

        Adding Content to Columns<\/h2>\n\n\n\n

        Columns can contain most standard blocks, including:<\/p>\n\n\n\n

          \n
        • Paragraphs<\/li>\n\n\n\n
        • Headings<\/li>\n\n\n\n
        • Lists<\/li>\n\n\n\n
        • Images<\/li>\n\n\n\n
        • Buttons<\/li>\n\n\n\n
        • Quotes<\/li>\n<\/ul>\n\n\n\n

          This flexibility allows you to create more sophisticated page layouts while still using familiar blocks.<\/p>\n\n\n\n

          Working with Parent and Child Blocks<\/h2>\n\n\n\n

          The Columns block is a container block that holds one or more individual Column blocks.<\/p>\n\n\n\n

          Sometimes you may want to edit or remove the entire Columns section rather than individual pieces of content.<\/p>\n\n\n\n

          To select the full Columns block:<\/p>\n\n\n\n

            \n
          1. Open the block options menu.<\/li>\n\n\n\n
          2. Select Select Parent (Columns)<\/strong>.<\/li>\n<\/ol>\n\n\n\n

            This allows you to modify or remove the complete section at once.<\/p>\n\n\n\n

            Tip:<\/strong> If you’re having trouble selecting the full Columns block, use List View<\/strong> to locate and select the parent block.<\/p>\n\n\n\n

            Best Practices<\/h2>\n\n\n\n

            Keep Content Balanced<\/strong>
            Try to keep the amount of content in each column relatively consistent. Large differences in content length can create uneven layouts.<\/p>\n\n\n\n

            Avoid Overcrowding<\/strong>
            Columns should help simplify content, not make it harder to read. If a section feels cramped, consider using a single-column layout instead.<\/p>\n\n\n\n

            Consider Mobile Devices<\/strong>
            Columns automatically stack on smaller screens. Preview your page to ensure the content still reads in a logical order when displayed on mobile devices.<\/p>\n\n\n\n

            Use Headings Within Columns<\/strong>
            Headings help visitors understand the purpose of each column and improve the accessibility of the layout.<\/p>\n\n\n\n

            Keep Important Content Together<\/strong>
            Remember that columns will stack on mobile devices, so related content should remain meaningful when displayed vertically.<\/p>\n\n\n\n

            Common Uses<\/h2>\n\n\n\n

            Columns are frequently used for:<\/p>\n\n\n\n

              \n
            • Comparing programs or services<\/li>\n\n\n\n
            • Feature sections<\/li>\n\n\n\n
            • Contact information<\/li>\n\n\n\n
            • Calls to action<\/li>\n\n\n\n
            • Two-column text layouts<\/li>\n\n\n\n
            • Content summaries<\/li>\n<\/ul>\n\n\n\n

              Not every page needs columns, but they can be a useful tool for creating more engaging layouts when used appropriately.<\/p>\n\n\n\n

              \n