{"id":82,"date":"2023-10-17T15:46:59","date_gmt":"2023-10-17T19:46:59","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=82"},"modified":"2026-08-04T21:10:38","modified_gmt":"2026-08-05T01:10:38","slug":"basic-training-module-3-essential-blocks","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/","title":{"rendered":"Basic Training Module 3: Essential Blocks"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Basic Training Module 3: Essential Blocks\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Blocks are the foundation of content creation in cutheme. Every piece of content you add to a page, including text, images, lists, and layouts, is created using blocks.<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">In this module, you&#8217;ll learn how to add and work with the most commonly used blocks. You&#8217;ll also explore the options available for formatting text, displaying images, and creating page banners.<\/p>\n\n\n\n<h2 id=\"learning-outcomes\" class=\"wp-block-heading\">Learning Outcomes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of this module, you will be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create pages using multiple block types.<\/li>\n\n\n\n<li>Add and format content using common text blocks.<\/li>\n\n\n\n<li>Create and customize headings, paragraphs, and lists.<\/li>\n\n\n\n<li>Add images and image-based content to a page.<\/li>\n\n\n\n<li>Use image, Text &amp; Image, and Wide Image blocks effectively.<\/li>\n\n\n\n<li>Create and manage page banners.<\/li>\n<\/ul>\n\n\n    \n    \n\n\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    \n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--grey cu-section--cards ml-offset-center md:px-8 lg:px-14\" data-attributes=\"&#x7B;&quot;blockHeader&quot;&#x3A;&quot;All&#x20;Essential&#x20;Blocks&#x20;Modules&quot;,&quot;blockBackground&quot;&#x3A;&quot;grey&quot;,&quot;numberOfPosts&quot;&#x3A;-1,&quot;showAllPosts&quot;&#x3A;true,&quot;order&quot;&#x3A;&quot;asc&quot;,&quot;blockType&quot;&#x3A;&quot;cards&quot;,&quot;contentType&quot;&#x3A;&quot;page&quot;,&quot;currentPage&quot;&#x3A;1,&quot;numberOfColumns&quot;&#x3A;3,&quot;showImages&quot;&#x3A;false,&quot;showDates&quot;&#x3A;false,&quot;showExcerpts&quot;&#x3A;true,&quot;showHours&quot;&#x3A;false,&quot;orderBy&quot;&#x3A;&quot;title&quot;,&quot;showFilter&quot;&#x3A;false,&quot;taxName&quot;&#x3A;&quot;cu_page_type&quot;,&quot;moreButton&quot;&#x3A;&quot;none&quot;,&quot;categories&quot;&#x3A;&quot;65&quot;,&quot;tags&quot;&#x3A;&quot;&quot;&#x7D;\" data-page=\"2\">\n    <div class=\"space-y-6 cu-max-w-child-5xl bg-cu-black-50 max-w-screen-2xl mx-auto rounded-xl px-6 py-5 md:px-14 md:py-12 md:space-y-10 cu-prose-first-last\">\n\n                            \n\n\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"all-essential-blocks-modules\" class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px\">\n        All Essential Blocks Modules\n    <\/h2>\n\n    <\/header>\n        \n                \n        <div class=\"cu-loading hidden text-center mx-auto h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\" role=\"status\">\n    <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n        Loading&#8230;\n    <\/span>\n<\/div>\n\n                                        \n        <p class=\"cu-no-posts hidden\">\n            No\n            page\n\n            posts are available.\n        <\/p>\n\n                <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n                        \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Adding Blocks\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Learn how to add, find, and remove blocks using the Block Editor to build and organize page content.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/adding-blocks\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Adding Blocks\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Heading\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Learn how to use Heading blocks to organize content, improve accessibility, and create a clear page structure.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/heading\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Heading\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Image\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Learn how to add images, write effective alt text, and use image settings to create accessible and engaging content.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/image\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Image\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        List\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Learn how to create bulleted and numbered lists to organize content and improve readability.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/list\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                List\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Paragraph\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Learn how to create, format, and organize content using the Paragraph block, the most commonly used block in WordPress.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/paragraph\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Paragraph\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Text &#038; Image\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Learn how to combine text and images in a flexible layout that works well for feature content, page banners, and calls to action.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/text-image\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Text &#038; Image\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Wide Image\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Learn how to create banners and featured content sections using the Wide Image block, images, text, and buttons.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/wide-image\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Wide Image\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n                    \n        <\/div>\n        \n                \n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>In this module, you&#8217;ll learn how to add and work with the most commonly used blocks. You&#8217;ll also explore the options available for formatting text, displaying images, and creating page banners. Learning Outcomes By the end of this module, you will be able to:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":72,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[52],"class_list":["post-82","page","type-page","status-publish","hentry","cu_page_type-basic-training"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":4329,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/82\/revisions\/4329"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/72"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}