{"id":1366,"date":"2023-11-07T15:43:25","date_gmt":"2023-11-07T20:43:25","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1366"},"modified":"2026-08-10T20:24:37","modified_gmt":"2026-08-11T00:24:37","slug":"wide-image","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/wide-image\/","title":{"rendered":"Wide Image"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Wide 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 Wide Image block is designed to create visually impactful sections that combine an image with text and optional buttons. It is commonly used for page banners, feature sections, promotional content, and calls to action.<\/p>\n\n\n\n

Because the block spans a larger area of the page, it is ideal for highlighting important content and creating strong visual interest.<\/p>\n\n\n\n

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

Use a Wide Image block when you want to:<\/p>\n\n\n\n

    \n
  • Create a page banner or hero section<\/li>\n\n\n\n
  • Highlight an important program, service, or initiative<\/li>\n\n\n\n
  • Draw attention to a call to action<\/li>\n\n\n\n
  • Feature key content with supporting imagery<\/li>\n\n\n\n
  • Break up long pages with visually distinct sections<\/li>\n<\/ul>\n\n\n\n

    The block combines a large background image with content layered on top, making it especially effective for introductory content and featured sections.<\/p>\n\n\n\n

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

    Adding a Wide Image Block<\/h2>\n\n\n\n

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

      \n
    1. Click the +<\/strong> button and search for Wide Image<\/strong>.<\/li>\n\n\n\n
    2. Select the block.<\/li>\n\n\n\n
    3. Enter a title or heading.<\/li>\n\n\n\n
    4. Add supporting content below the title.<\/li>\n<\/ol>\n\n\n\n

      Content may include:<\/p>\n\n\n\n

        \n
      • Paragraphs<\/li>\n\n\n\n
      • Buttons<\/li>\n\n\n\n
      • Links<\/li>\n\n\n\n
      • Additional supporting text<\/li>\n<\/ul>\n\n\n\n

        The block can be as simple or as detailed as your content requires.<\/p>\n\n\n\n

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

        To add a background image:<\/p>\n\n\n\n

          \n
        1. Open the block settings.<\/li>\n\n\n\n
        2. Select Choose Image<\/strong> or Select Image<\/strong>.<\/li>\n\n\n\n
        3. Upload a new image or choose one from the Media Library.<\/li>\n<\/ol>\n\n\n\n

          Choose an image that supports the content and remains clear when displayed at larger sizes.<\/p>\n\n\n\n

          Display Options<\/h2>\n\n\n\n

          The Wide Image block provides several options for customizing the appearance of the background image.<\/p>\n\n\n\n

          Image Opacity<\/strong><\/p>\n\n\n\n

            \n
          • Adjust the opacity or shading of the image.<\/li>\n\n\n\n
          • This can improve text readability by making overlaid content easier to see.<\/li>\n<\/ul>\n\n\n\n

            Image Position<\/strong><\/p>\n\n\n\n

              \n
            • Control which part of the image remains visible within the block.<\/li>\n\n\n\n
            • Depending on the image, adjusting the position can help keep important content in view.<\/li>\n<\/ul>\n\n\n\n

              Replace or Remove Image<\/strong><\/p>\n\n\n\n

                \n
              • Update the image without recreating the block.<\/li>\n\n\n\n
              • This is useful when refreshing content or updating imagery while maintaining the same layout.<\/li>\n<\/ul>\n\n\n\n

                Wide Width Option<\/h2>\n\n\n\n

                Depending on where the block is placed, you may see a Wide Width<\/strong> option. When enabled, the block expands beyond the standard content width and occupies more horizontal space. This option is often used to create visually prominent feature sections and banners.<\/p>\n\n\n\n

                Tip:<\/strong> Use wide layouts selectively. Too many full-width sections can reduce their visual impact.<\/p>\n\n\n\n

                Creating Effective Banner Sections<\/h2>\n\n\n\n

                One of the most common uses for the Wide Image block is creating page banners.<\/p>\n\n\n\n

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

                  \n
                • A clear title<\/li>\n\n\n\n
                • A short description<\/li>\n\n\n\n
                • One or more action buttons<\/li>\n\n\n\n
                • A supporting image<\/li>\n<\/ul>\n\n\n\n

                  Keep banner content concise and focused on a single message.<\/p>\n\n\n\n

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

                  Prioritize Readability<\/strong>
                  Ensure that text remains easy to read against the background image.
                  If necessary, adjust the image opacity to increase contrast.<\/p>\n\n\n\n

                  Keep Content Concise<\/strong>
                  Wide Image blocks work best when they contain a clear message rather than large amounts of text.<\/p>\n\n\n\n

                  Choose High-Quality Images<\/strong>
                  Use images that are visually engaging and relevant to the content.<\/p>\n\n\n\n

                  Use Buttons Purposefully<\/strong>
                  Include buttons only when there is a clear next step for visitors.<\/p>\n\n\n\n

                  Preview on Multiple Devices<\/strong>
                  Always preview the block before publishing to ensure the layout works well on desktop and mobile devices.<\/p>\n\n\n\n

                  \n