  {"id":27,"date":"2023-10-16T13:48:33","date_gmt":"2023-10-16T17:48:33","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=27"},"modified":"2024-09-18T20:31:36","modified_gmt":"2024-09-19T00:31:36","slug":"introduction-to-blocks","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/introduction\/introduction-to-blocks\/","title":{"rendered":"Introduction to 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                        Introduction to Blocks\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>An overview of blocks \u2013 the main content pieces you will use to build your web pages.<\/p>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what_are_blocks?\">What are Blocks?<\/h2>\n\n\n\n<p>Blocks are a fundamental building element for creating page content in cuTheme.<\/p>\n\n\n\n<p>They are used to structure and design your web pages. Each block represents a specific piece of content or functionality. For example, paragraphs, images, headings, lists, quotes, embeds, and more.<\/p>\n\n\n\n<p>Everything you see outlined in gray in the image below is a separate &#8220;block&#8221; and together they make up the content of the page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"939\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-05-at-11.37.09@2x-1024x939.png\" alt=\"Content blocks on a page\" class=\"wp-image-1977\" style=\"width:986px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-05-at-11.37.09@2x-1024x939.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-05-at-11.37.09@2x-320x293.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-05-at-11.37.09@2x-512x469.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-05-at-11.37.09@2x-768x704.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-05-at-11.37.09@2x.png 1084w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 id=\"benefits-of-a-block-system\" class=\"wp-block-heading\">Benefits of a Block System<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Modular Content &amp; Flexibility<\/strong>: Blocks allow you to create and edit content in a modular way. You can easily add, rearrange, and customize blocks. This makes it simple to build interesting and complex page layouts.<\/li>\n\n\n\n<li><strong>Content Consistency<\/strong>: Blocks promote content consistency throughout your website. You can establish templates and reusable designs that keep a unified look and feel.<\/li>\n<\/ol>\n\n\n\n<h2 id=\"how-blocks-work\" class=\"wp-block-heading\">How Blocks Work<\/h2>\n\n\n\n<p>Each web page is typically made up of several blocks. And each block has custom options. In addition, individual blocks can be moved around your page in order to create a unique page design.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adding Blocks<\/strong>: To add a block, you simply click the &#8220;+&#8221; button and choose the type of block you want to insert. There are a couple of other ways to add blocks that we will delve into throughout the training. <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-blocks-overview\/\">Learn more about how to add blocks.<\/a><\/li>\n\n\n\n<li><strong>Editing Blocks<\/strong>: Each block has its own editing options and settings. You can modify text, adjust images, and configure block-specific attributes. We&#8217;ll go in to each block in detail in the training. You can also have a look at the block library to see examples.<\/li>\n\n\n\n<li><strong>Reordering: <\/strong>Blocks can be moved up and down within the editor, allowing you to control the order of your content.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-1-editing-essentials\/\">Next: Editing Essentials<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What are Blocks? Blocks are a fundamental building element for creating page content in cuTheme. They are used to structure and design your web pages. Each block represents a specific piece of content or functionality. For example, paragraphs, images, headings, lists, quotes, embeds, and more. Everything you see outlined in gray in the image below [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":19,"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":[11],"class_list":["post-27","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/27","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=27"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":4333,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/27\/revisions\/4333"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}