{"id":452,"date":"2023-10-25T15:24:11","date_gmt":"2023-10-25T19:24:11","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=452"},"modified":"2026-08-10T20:23:21","modified_gmt":"2026-08-11T00:23:21","slug":"text-image","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/text-image\/","title":{"rendered":"Text & Image"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Text & Image\n <\/h1>\n \n \n \n\n

Basic Training Module 3: Essential Blocks<\/p>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

The Text & Image block combines written content with a supporting image in a single layout. This block is useful when you want to highlight important information while adding visual interest to the page.<\/p>\n\n\n\n

Text & Image blocks are commonly used for:<\/p>\n\n\n\n

    \n
  • Feature sections<\/li>\n\n\n\n
  • Service descriptions<\/li>\n\n\n\n
  • Program highlights<\/li>\n\n\n\n
  • Calls to action<\/li>\n\n\n\n
  • Page banners<\/li>\n<\/ul>\n\n\n\n

    By placing text and images together, you can create content that is easier to scan and more engaging for visitors.<\/p>\n\n\n\n

    When to Use a Text & Image Block<\/h2>\n\n\n\n

    Use a Text & Image block when you want to present content alongside a related image.<\/p>\n\n\n\n

    Examples include:<\/p>\n\n\n\n

      \n
    • Describing a service or program<\/li>\n\n\n\n
    • Highlighting a research project<\/li>\n\n\n\n
    • Promoting an upcoming event<\/li>\n\n\n\n
    • Creating a page introduction<\/li>\n\n\n\n
    • Building a page banner<\/li>\n<\/ul>\n\n\n\n

      The block can be used with or without an image, making it a flexible option for a variety of content types.<\/p>\n\n\n\n

      \"A<\/figure>\n\n\n\n

      Adding a Text & Image Block<\/h2>\n\n\n\n

      To add a Text & Image block:<\/p>\n\n\n\n

        \n
      1. Click the +<\/strong> button and search for Text & Image<\/strong>.<\/li>\n\n\n\n
      2. Select the block.<\/li>\n\n\n\n
      3. Enter a heading and supporting content.<\/li>\n\n\n\n
      4. Add an image if desired.<\/li>\n<\/ol>\n\n\n\n

        The content area can include:<\/p>\n\n\n\n

          \n
        • Text<\/li>\n\n\n\n
        • Buttons<\/li>\n\n\n\n
        • Links<\/li>\n\n\n\n
        • Additional formatting options<\/li>\n<\/ul>\n\n\n\n

          This allows you to create self-contained content sections that are both informative and visually appealing.<\/p>\n\n\n\n

          Adding an Image<\/h2>\n\n\n\n

          To add an image:<\/p>\n\n\n\n

            \n
          1. Select Choose Image<\/strong> or Select Image<\/strong>.<\/li>\n\n\n\n
          2. Choose an image from the Media Library or upload a new one.<\/li>\n\n\n\n
          3. Save your changes.<\/li>\n<\/ol>\n\n\n\n

            As with all images, remember to provide meaningful alt text when appropriate.<\/p>\n\n\n\n

            Image Position<\/h2>\n\n\n\n

            One of the most useful features of this block is the ability to position the image beside the content.<\/p>\n\n\n\n

            You can typically choose to display the image:<\/p>\n\n\n\n

              \n
            • On the left<\/li>\n\n\n\n
            • On the right<\/li>\n<\/ul>\n\n\n\n

              Experiment with both layouts to determine which presentation works best for your content.<\/p>\n\n\n\n

              For longer pages, alternating image positions can help create visual variety and improve readability.<\/p>\n\n\n\n

              Block Layout Options<\/h2>\n\n\n\n

              Depending on your site’s configuration, additional layout options may be available.<\/p>\n\n\n\n

              Common settings include:<\/p>\n\n\n\n

                \n
              • Wide Layout<\/strong>
                A wider version of the block that allows content to occupy more horizontal space.<\/li>\n\n\n\n
              • Mobile Display<\/strong>
                Control whether the image appears on smaller screens.<\/li>\n\n\n\n
              • Image Positioning<\/strong>
                Adjust how the image is displayed within the available space.<\/li>\n\n\n\n
              • Replace or Remove Image<\/strong>
                Swap an image with a different one or remove it entirely.<\/li>\n<\/ul>\n\n\n\n

                Available settings may vary depending on your site’s version and configuration.<\/p>\n\n\n\n

                Using Text & Image as a Banner<\/h2>\n\n\n\n

                The Text & Image block is frequently used as a page banner or page introduction.<\/p>\n\n\n\n

                A typical banner may include:<\/p>\n\n\n\n

                  \n
                • A page title<\/li>\n\n\n\n
                • Introductory text<\/li>\n\n\n\n
                • A call-to-action button<\/li>\n\n\n\n
                • An optional image<\/li>\n<\/ul>\n\n\n\n

                  Because the image is optional, the block remains effective even when used as a text-only banner.<\/p>\n\n\n\n

                  Best Practices<\/h2>\n\n\n\n
                    \n
                  • Keep Content Focused<\/strong>
                    Use a concise heading and supporting text that clearly communicate the purpose of the section.<\/li>\n\n\n\n
                  • Choose Relevant Images<\/strong>
                    Images should support the content rather than distract from it.<\/li>\n\n\n\n
                  • Consider Mobile Users<\/strong>
                    Preview your page to confirm the layout remains effective on smaller screens.<\/li>\n\n\n\n
                  • Use Buttons Sparingly<\/strong>
                    Include a button only when there is a clear action you want visitors to take.<\/li>\n\n\n\n
                  • Alternate Layouts on Long Pages<\/strong>
                    Using a mix of left-aligned and right-aligned images can create visual variety and make pages easier to read.<\/li>\n<\/ul>\n\n\n\n
                    \n