Manual

Overview
First Steps
Uploading images
Resolution and compression of images
The Inserter Tool
Visual editing
Multimedia
Set featured image
Further links and assistance

First Steps

After logging in via http://wp12964331.server-he.de/experimentelles_design/wp-admin/ you will get to the dashboard of the WordPress page and can add a post via the Posts → Add new. In the title bar you enter the title of the post (i.e. your work). Afterwards you can insert the content in the editor below.

But before it really starts, you should save the post as a draft.

The goal of the Gutenberg Editor is to add extensive content to WordPress easy and pleasant. This whole article consists of individual content elements that resemble LEGO bricks that you can move and interact with.

What you are reading is inside a text block, the simplest block of all. The text block can be positioned freely in the post and the text alignment can be changed using the menu bar in the upper left corner. Headlines are themselves separate blocks, which helps to structure and organize your content.

Drag and Drop

Select the block and then the left icon (it looks different depending on the block type) to move it by drag and drop.

The block can be moved freely. Alternatively you can move the position by using the ↑ ↓ arrow icons.

Uploading images

The handling of images and media is a primary focus of the editor. When uploading pictures you should make sure that they are included in the file name

  • do not contain special characters (this includes all German Umlaute like Ää Üü Öö ß and special characters like ?!%&) and the
  • no spaces or the words are separated by an underscore "_" or a quarter square "-".

Björn Schönborn Roßlau.jpg is renamed to bjoern_schoenborn_rosslau.jpg

The files should always contain your first and last name. The file name should look something like this:

first_name_lastname_project_title_00.jpg

Resolution and compression of images

Furthermore, the images should have a resolution of 72 dpi. Usually they have higher resolutions, which are suitable for printing but not for the web. Therefore, the images must be compressed before uploading.

By reducing the resolution and possibly reducing the size, the images can be loaded faster and not much memory is needed. You can use the guideline 1200px width, but in many cases 800px (width) is sufficient.

In Adobe Photoshop there is a function "Save for Web". You can find more information here: https://helpx.adobe.com/de/animate/using/save-for-web-options.html#Webgrafikformate

Schöne Landschaft

The Inserter Tool

Imagine, everything WordPress can do, is available directly on the interface. No need to remember HTML tags, classes or complicated short code syntax. This is the basic idea behind the inserter – the (+) button you see around the editor – which allows you to search for all available content blocks and insert them into your post. Plugins and themes are able to register their own blocks, which opens all kinds of possibilities for extensive editing and publishing.

Try it, you might discover things that WordPress can already insert in your posts that you didn't know about. Here is a short list of what you can currently find there:

  • Text and headings
  • Pictures and Videos
  • Galleries
  • Embeddings, like YouTube, Tweets, or other WordPress articles.
  • Layout blocks, like buttons, hero images, separators, etc.
  • And of course lists like this 🙂

Visual editing

A big advantage of blocks is that you can edit them on the spot and change your content. Instead of using fields, for example to edit the source of a quote or the text of a button, you can change the content directly.

The editor offers a new experience in creating pages and posts that makes it easy to write large content. It has “blocks” to make it easier to embed content that was previously embedded using shortcodes, custom HTML or “mysterious practices”.

Matt Mullenweg, 2017

The source of the quote is a separate text field, similar to the captions. So the structure of the quote remains protected, even if you select, change or remove the source. It can be added again at any time.

You can change the number of columns in your galleries by moving a slider in the block inspector in the sidebar.

Multimedia

Up here is a gallery with only two pictures. You can also convert the gallery back to single images using the block switcher.

Each block can adapt to these alignments. The embedding block also has them and is responsive by default:

Set Featured Image

Finally you have to define the post image. You will find the item in the right menu bar under Contribution → Contribution image → Set contribution image.

The image appears on the home page. You can set the image ratio yourself.

Further links and assistance

The Gutenberg Editor is the standard editor of WordPress. It belongs to the most user-friendly and intuitive editors. If questions arise, you can quickly find answers and help on different pages. If something is still unclear, you can contact me.

Here you can find detailed documentation:

https://de.wordpress.org/gutenberg/embed/#?secret=yonIhFE9Qdhttps://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/

https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/