  {"id":1590,"date":"2023-11-15T11:14:39","date_gmt":"2023-11-15T16:14:39","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1590"},"modified":"2024-12-09T08:37:18","modified_gmt":"2024-12-09T13:37:18","slug":"quick-start-guide","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/introduction\/quick-start-guide\/","title":{"rendered":"Quick Reference Guide"},"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                        Quick Reference Guide\n                    <\/h1>\n                \n                                \n                                    \n\n<p>An overview of the basics of cuTheme and block editing to get you started quickly.<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>This quick start guide will show you how to navigate block-based editing on your cuTheme website. Let\u2019s get started!<\/p>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#accessing-the-block-editor\" class=\"font-medium hover:underline\">\n                        Accessing the Block Editor\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#editing-pages-and-posts\" class=\"font-medium hover:underline\">\n                        Editing Pages and Posts\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#adding-new-blocks\" class=\"font-medium hover:underline\">\n                        Adding New Blocks\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        4.\n                    <\/span>\n\n                    <a href=\"#rearranging-blocks\" class=\"font-medium hover:underline\">\n                        Rearranging Blocks\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        5.\n                    <\/span>\n\n                    <a href=\"#block-styles-and-options\" class=\"font-medium hover:underline\">\n                        Block Styles and Options\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        6.\n                    <\/span>\n\n                    <a href=\"#saving-your-changes\" class=\"font-medium hover:underline\">\n                        Saving Your Changes\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        7.\n                    <\/span>\n\n                    <a href=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        8.\n                    <\/span>\n\n                    <a href=\"#next-steps\" class=\"font-medium hover:underline\">\n                        Next Steps\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<h2 id=\"accessing-the-block-editor\" class=\"wp-block-heading\">Accessing the Block Editor<\/h2>\n\n\n\n<p>In the block editor workspace, you create and add all content for your website\u2019s pages and posts.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-1-editing-essentials\/logging-in\/\">Log in to your website<\/a> dashboard. <\/li>\n\n\n\n<li>Navigate to the page or post that you want to edit.<\/li>\n\n\n\n<li>Click the \u201cEdit\u201d button to open the <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-1-editing-essentials\/block-editor-workspace\/\">block editor<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"editing-pages-and-posts\" class=\"wp-block-heading\">Editing Pages and Posts<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once in the block editor, you\u2019ll see your content divided into blocks.<\/li>\n\n\n\n<li>To edit existing content, click on the relevant block. You can add and <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-1-editing-essentials\/basic-text-editing\/\">edit text<\/a>, images, videos, and other elements directly within each block.<\/li>\n\n\n\n<li>Use the toolbar above each block to format text, add links, and adjust settings.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"986\" height=\"122\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.35.02@2x.png\" alt=\"Toolbar\" class=\"wp-image-3890\" style=\"width:385px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.35.02@2x.png 986w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.35.02@2x-512x63.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.35.02@2x-320x40.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.35.02@2x-768x95.png 768w\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" \/><\/figure>\n\n\n\n<h2 id=\"adding-new-blocks\" class=\"wp-block-heading\">Adding New Blocks<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-blocks-overview\/\">Click the \u201c+\u201d icon (Add Block)<\/a> at the top-left corner to add a new block.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"314\" height=\"160\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-14.01.01@2x.png\" alt=\"\" class=\"wp-image-3906\" style=\"width:112px;height:auto\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose the type of block you want to add (e.g., <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-basic-building-blocks\/paragraph\/\">Paragraph<\/a>, <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/basic-image-blocks\/image\/\">Image<\/a>, <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-basic-building-blocks\/heading\/\">Heading<\/a>, etc.).<\/li>\n\n\n\n<li>Customize the block\u2019s content and settings under the Block settings tab at the right.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"158\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.37.55@2x.png\" alt=\"\" class=\"wp-image-3892\" style=\"width:167px;height:auto\"\/><\/figure>\n\n\n\n<h2 id=\"rearranging-blocks\" class=\"wp-block-heading\">Rearranging Blocks<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To change the order of blocks, click the up\/down arrows in the block toolbar.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"124\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.39.12@2x.png\" alt=\"Arrows to move blocks\" class=\"wp-image-3894\" style=\"width:160px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.39.12@2x.png 330w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/06\/CleanShot-2024-06-13-at-13.39.12@2x-320x120.png 320w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/figure>\n\n\n\n<h2 id=\"block-styles-and-options\" class=\"wp-block-heading\">Block Styles and Options<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Explore block-specific options in the right-hand sidebar (the block editor tab).<\/li>\n\n\n\n<li>Adjust alignment, add alt text to images, display elements in a particular way, plus other styling settings.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"saving-your-changes\" class=\"wp-block-heading\">Saving Your Changes<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the \u201cUpdate\u201d button to save your edits.<\/li>\n\n\n\n<li>Preview your changes by clicking \u201cPreview\u201d or \u201cView Post\/Page.\u201d<\/li>\n<\/ul>\n\n\n\n<p>Remember, the block editor is flexible and intuitive. Experiment with different block types, and enjoy the creative possibilities!<\/p>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/5W6XJoX6pJ8\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\n\n\n\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        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-quick-start-guide\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript &#8211; Quick Start Guide\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-quick-start-guide\">\n            \n\n<p>In this video we are going to show you how to navigate through the block-based editing system on your cuTheme Website:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>First off, we are going to be opening the block editor<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>There are two ways you can access this, creating a new post or page, or editing an existing one.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>For this video we are going to access the editor using an existing page, and to do that you must log in to your website, navigate to the page or post that you want to edit, then click on the edit button&nbsp; to open the editor.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Next up we are going to edit a page or a post.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Now that we are in the block editor, you can see that the contents are sorted into what you call blocks.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>To edit existing blocks, you can click on the one that you want to edit, and from there its going to depend on the block that you want to modify, but you can do stuff like edit text, images, videos and other elements.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>When you click on a block, you may notice that there is a toolbar that appears above the block, you can use this bar to format text, add links or quickly change some settings for that block.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Now we are going to add new blocks.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>To do that navigate to the top right portion of the editor, you will see a plus button, click that to open the tab for new blocks.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Click on the type of block that you want to add, it should then appear in the page<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Now that we have added the new block, suppose we want it somewhere else on the page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>To move a block, click on it, and on the toolbar that appears, you can either use the up and down arrows or use the drag button to rearrange the block.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>To customize more settings about the block, you can do so under the block settings tab at the right.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>On this tab you can explore also block specific options such as alignments, adding headers, adding alt text to images or sorting content within the block.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Now that we have completed editing a page, all there is to do is to double check your work, then we can save.<\/p>\n\n\n\n<p>To save your changes, click on the Update button on the top.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>If you want to preview your changes, click preview or view post\/page<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"next-steps\" class=\"wp-block-heading\">Next Steps<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For more details, follow our training, exploring each module in a stepwise approach. <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-1-editing-essentials\/\">Get started with Module 1<\/a>.<\/li>\n\n\n\n<li>Or use the search at the top or <a href=\"https:\/\/carleton.ca\/cutheme-docs\">index on the homepage<\/a> to jump to a specific topic.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This quick start guide will show you how to navigate block-based editing on your cuTheme website. Let\u2019s get started! Accessing the Block Editor In the block editor workspace, you create and add all content for your website\u2019s pages and posts. Editing Pages and Posts Adding New Blocks Rearranging Blocks Block Styles and Options Saving Your [&hellip;]<\/p>\n","protected":false},"author":4,"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-1590","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\/1590","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=1590"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1590\/revisions"}],"predecessor-version":[{"id":4486,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1590\/revisions\/4486"}],"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=1590"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=1590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}