{"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":"2024-09-18T20:31:31","modified_gmt":"2024-09-19T00:31:31","slug":"text-image","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/basic-image-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\n

Module 3.3.2 \u2013 Getting Started: Basic Building Blocks: Basic Image Blocks: Text & Image<\/p>\n\n\n\n

\n
Examples: Text & Image<\/a><\/div>\n<\/div>\n\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Module 3.3.1 \u2013 Getting Started: Basic Building Blocks: Basic Image Blocks: Image<\/p>\n\n\n\n\n

\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Step-by-Step\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Try it Out\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The Text-Image block allows editors to include pieces of text along with an accompanying image. This is yet another great way to add visuals to your pages and posts.<\/p>\n\n\n\n

The text & image block is also a great option to use as a page banner. It can be used with or without an image (see the top of this page for example).<\/p>\n\n\n\n

Below is an example of a Text & Image block using an image that is right aligned.<\/p>\n\n\n\n

\"Text<\/figure>\n\n\n\n

Step-by-Step<\/h2>\n\n\n\n

1.<\/strong> Add the Text Image block using the block menu<\/a>.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

2.<\/strong> Give the block a title.<\/p>\n\n\n\n

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

3.<\/strong> Use the block options at the right to add content. This can be text or a button.<\/p>\n\n\n\n

    \n
  1. Use a wide block (available when the block is not the first element\/banner on a page)<\/li>\n\n\n\n
  2. Add content (text or a button)<\/li>\n<\/ol>\n\n\n\n
    \"Block<\/figure>\n\n\n\n

    4. You can also add an image using the Select Image<\/strong> button.<\/p>\n\n\n\n

    \"Select<\/figure>\n\n\n\n

    5. <\/strong>Once you add an image, you can use the image options to customize the look and feel.<\/p>\n\n\n\n

      \n
    1. Set the image position to the left or right<\/li>\n\n\n\n
    2. Choose whether or not to display the image on mobile<\/li>\n\n\n\n
    3. Adjust the relative position of the image within the block<\/li>\n\n\n\n
    4. Replace or Remove the image using these buttons<\/li>\n<\/ol>\n\n\n\n
      \"Image<\/figure>\n\n\n\n

      See more examples<\/a> in our block library!<\/p>\n\n\n\n

      Video Tutorial<\/h2>\n\n\n\n