Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Get going quickly with Gutenberg


Published on

The new WP content editor appeared as a seemingly hasty launch gaining a mixed reception from the WP community. However, it promises a decent layout of content for the CMS user which you could never get with Classic, so for Finkk, it's a great move.

Published in: Business
  • Be the first to comment

  • Be the first to like this

Get going quickly with Gutenberg

  1. 1. Introduction 0 The new WordPress 5.0 release with its brand new ‘block’ content editor has had a mixed reception with the majority of the WP community grumbling (2.3 rating out of 5). 0 Perhaps it is fear of change, or the inconvenience of learning a new process for creating content. 0 The fact is, if you were dissatisfied, as I was, with laying pages out with Classic Editor (let’s be honest, image layout on the page – was that ever nice?), then you will welcome this change. 0 The key is to take it step by step. 22/01/2019 source: 2
  2. 2. Contents 0 1. Begin writing 0 2. Add a new block 0 3. Example, inserting an image 0 4. Example, inserting another heading 0 5. Converting from one block type to another 0 6. Configuring a block 0 7. Rearranging content 0 8. Configuring post information 0 9. What about Yoast SEO? 0 10. What about other plug-ins 22/01/2019 source: 3
  3. 3. STEP 1 Open a page & begin writing A floating toolbar will appear above where you were writing Option: Many do not like this approach, so if you wish, fix the toolbar back at the top by clicking the 3 dots top right and checking ‘Top Toolbar’ in the dropdown. 22/01/2019 source: 4
  4. 4. STEP 2 Now add a new block – an image or new heading Once you click either of the plus icons, a popup will appear that lists all the available blocks eg image Image example 22/01/2019 source: 5
  5. 5. EXAMPLE – Insert an Image So select and click the Image block. Then, the screen (right) shows the familiar Upload, Media Library or insert from URL options. 22/01/2019 source: 6
  6. 6. EXAMPLE – Insert a Heading Inserting a You Tube video is just as easy, just select the Video block and add in the URL of your video once prompted. A preview will appear 22/01/2019 source: 7
  7. 7. The CONVERTING Icon Just a useful icon to know about. You may have written a paragraph that lends itself to being a quote. If so, use the converting icon to select a ‘quote block’ and Gutenberg will do the rest. This avoids deleting the block in order to select a new one. 22/01/2019 source: 8
  8. 8. STEP 3 Fine tuning your blocks Having created some content, you’ll now turn your attention to the section on the far right of the screen, comprising two headings – Document and Block. In ‘Block’ mode, you’ll be able to do more than the basics in the floating toolbar for each block (italics, bold etc). You’ll be able to enhance each block with colour if you wish. 22/01/2019 source: 9
  9. 9. STEP 4 Moving Content around Using the Up/Down Arrows Having hovered, you will notice the up and down arrows as shown in the screen (right) 22/01/2019 source: 10
  10. 10. Moving content using Drag & Drop For the drag & drop method, hover your mouse over the six dots in between the arrows. Then you’ll be able to drag that section and drop it. 22/01/2019 source: 11
  11. 11. STEP 5 Configuring basic post information It’s all in the right hand section under the tab ‘Document’ (outlined in red) & is very similar to Classic Editor 22/01/2019 source: 12
  12. 12. STEP 6 Optimising the page or post with Yoast SEO Look for the Yoast SEO icon in the top right hand corner of the editor 22/01/2019 source: 13
  13. 13. STEP 7 Configurin g other plug-ins Whatever you have will show at the bottom of the text editor, shown by the red arrow. 22/01/2019 source: 14
  14. 14. See our other guide – Advanced Tips for using the Gutenberg Block Editor 22/01/2019 source: 15