{"id":4906,"date":"2020-04-17T11:05:36","date_gmt":"2020-04-17T15:05:36","guid":{"rendered":"https:\/\/blog.uvm.edu\/manual-test\/?page_id=4906"},"modified":"2022-03-08T10:13:27","modified_gmt":"2022-03-08T15:13:27","slug":"getting-started","status":"publish","type":"page","link":"https:\/\/blog.uvm.edu\/manual\/getting-started\/","title":{"rendered":"Getting started"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-atomic-blocks-ab-columns ab-layout-columns-2 ab-2-col-wideright\"><div class=\"ab-layout-column-wrap ab-block-layout-column-gap-2 ab-is-responsive-column\">\n<div class=\"wp-block-atomic-blocks-ab-column ab-block-layout-column ab-is-vertically-aligned-top\"><div class=\"ab-block-layout-column-inner\">\n<h4 class=\"wp-block-heading\">Getting started with Gutenberg WordPress<\/h4>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-atomic-blocks-ab-column ab-block-layout-column\"><div class=\"ab-block-layout-column-inner\">\n<p>If you are new to working in WordPress Gutenberg or not sure where to start, iThemes offers a fantastic&nbsp;<a href=\"https:\/\/ithemes.com\/wordpress-gutenberg-blocks-explained\/\">introduction to Gutenberg blocks<\/a>&nbsp;&#8211; what they are and how to work with them.<\/p>\n\n\n\n<p>There are so many great websites, blogs and video tutorials out there to learn WordPress. We see no reason to write redundant content. Our intention is to provide enough information to get you started but we will also reference relevant third-party tutorials and articles as appropriate.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-atomic-blocks-ab-columns ab-layout-columns-2 ab-2-col-wideright\"><div class=\"ab-layout-column-wrap ab-block-layout-column-gap-2 ab-is-responsive-column\">\n<div class=\"wp-block-atomic-blocks-ab-column ab-block-layout-column ab-is-vertically-aligned-top\"><div class=\"ab-block-layout-column-inner\">\n<h4 class=\"wp-block-heading\">Working with Gutenberg blocks<\/h4>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-atomic-blocks-ab-column ab-block-layout-column\"><div class=\"ab-block-layout-column-inner\">\n<p>Blocks in WordPress are components the provide specific functionality and display of content. There are blocks for setting text as a paragraph, a headline, a block quote, or in columns. There are blocks that display your images as hero banners, background images or in galleries. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Here are a few of the most commonly used blocks available. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1007\" height=\"265\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/gutenberg-wp-blocks.png\" alt=\"\" class=\"wp-image-4912\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/gutenberg-wp-blocks.png 1007w, https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/gutenberg-wp-blocks-300x79.png 300w, https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/gutenberg-wp-blocks-768x202.png 768w\" sizes=\"auto, (max-width: 1007px) 100vw, 1007px\" \/><\/figure>\n\n\n\n<p>We have styled all of these blocks to adopt the UVM brand.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"437\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/Screen-Shot-2019-09-20-at-5.04.49-PM.png\" alt=\"\" class=\"wp-image-4203\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/Screen-Shot-2019-09-20-at-5.04.49-PM.png 633w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/Screen-Shot-2019-09-20-at-5.04.49-PM-300x207.png 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>To add a block to your page, while you are in edit mode, just click on the &#8220;+&#8221; symbol at the top left of your page. Blocks are divided into various categories to help you reference what you need. You can also search for a specific block via a text search. A preview of the block  shows up on the right to help you identify what you are looking for in case the name of the block does not offer enough clarity.<\/p>\n\n\n\n<p>After clicking on the &#8220;+ symbol, the block will appear on your page where you can edit the content. If the block did not appear exactly where you want it on the page, you can change the order of the blocks by clicking on the up or down arrows that appear when you have the block activated. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"200\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training__up-down-block-arrows-2.jpg\" alt=\"\" class=\"wp-image-4917\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training__up-down-block-arrows-2.jpg 858w, https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training__up-down-block-arrows-2-300x70.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training__up-down-block-arrows-2-768x179.jpg 768w\" sizes=\"auto, (max-width: 858px) 100vw, 858px\" \/><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-atomic-blocks-ab-columns ab-layout-columns-2 ab-2-col-wideright\"><div class=\"ab-layout-column-wrap ab-block-layout-column-gap-2 ab-is-responsive-column\">\n<div class=\"wp-block-atomic-blocks-ab-column ab-block-layout-column ab-is-vertically-aligned-top\"><div class=\"ab-block-layout-column-inner\">\n<h4 class=\"wp-block-heading\">Adding a ready-made section or layout<\/h4>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-atomic-blocks-ab-column ab-block-layout-column\"><div class=\"ab-block-layout-column-inner\">\n<p>In addition to the native blocks that come with WordPress, we have made some sample layouts and larger components (like block collections) to speed up your production time and help you get your site launched faster.<\/p>\n\n\n\n<p>To browser through these offerings, while. you are in edit mode on a page or post, select the &#8220;Layouts&#8221; icon that appears at the top of the page. You&#8217;ll find it to the right of the &#8220;+&#8221; icon where you access the WordPress blocks. <\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-silver-lighter-50-background-color has-background wp-block-heading\">Important<br \/><br \/>Please see the <a href=\"https:\/\/blog.uvm.edu\/manual\/updates-log\/\">WordPress Update Notes.<\/a> The location of the Layouts icon to choose layouts has moved.<\/h3>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"394\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/AB-block-layouts.png\" alt=\"\" class=\"wp-image-4741\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/AB-block-layouts.png 712w, https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/AB-block-layouts-300x166.png 300w\" sizes=\"auto, (max-width: 712px) 100vw, 712px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"860\" height=\"332\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training_AB-blocks-tabs.png\" alt=\"\" class=\"wp-image-4921\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training_AB-blocks-tabs.png 860w, https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training_AB-blocks-tabs-300x116.png 300w, https:\/\/blog.uvm.edu\/manual\/files\/2020\/04\/training_AB-blocks-tabs-768x296.png 768w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The Layouts panel has some tabs at the top so you can navigate between sections (components) and page layouts. You can add a section or layout to the &#8220;favorites&#8221; tab if you find you are using a particular component a lot and want to access it more quickly. <\/p>\n\n\n\n<p>In the lower right, you have the option of viewing the sections as a grid or a vertically stacked list of single &#8220;cards&#8221;.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5625,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4906","page","type-page","status-publish","hentry","entry"],"featured_image_src":null,"featured_image_src_square":null,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/4906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=4906"}],"version-history":[{"count":16,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/4906\/revisions"}],"predecessor-version":[{"id":5499,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/4906\/revisions\/5499"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=4906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}