The Gutenberg block editor is standard in WordPress. In the old multisite in the old layout, we use the Classic Editor. The editor is the biggest difference between the old multisite at www.blogs.uni-mainz.de and the new multisite at cms.zdv.uni-mainz.de. The dashboard, on the other hand, is not noticeably different and everything else is identical.
- Top toolbar (top toolbar): The toolbar is located at the top of the editor. From left to right:
- Use the W to switch to the dashboard,
- Use the blue plus, the block inserter, to insert new blocks,
- Use the stylus to switch between Edit and Select,
- Use the arrow to undo the last change
- Three horizontal lines open the document overview, a column on the left with the block structure of the respective page.
- Save, Preview, Publish
- Use the black square to hide or show the settings, the block inspector controls on the right
- the 3-points lead to editor and settings options, the code editor, WordPress’ own help (recommended!) and welcome guide.
- Block library: These are the basic building blocks that make up the content of your pages and posts. There are blocks for text, headings, images, lists and tables. The red blocks are specific to JGU, the others are standard blocks.
- Block settings (block toolbar / block toolbar): Each block has its own settings, which you can open as a bar above the block (block toolbar) and on the right in the column (block inspector controls). You can use these to change the size, color, font and more.
- Sidebar: right column with block and page settings
- Content area: This is the main area of the editor where you add and arrange your blocks.
- Formatting tools: Are available in the blocks that contain text. Use these tools to format the text within your blocks, such as italics or bold.
- 1 = Toolbar
- 2 = Block library
- 3 = Block settings
- 4 = Sidebar
- 5 = Content area
- 6 = Formatting tools
The block editor displays each image, each paragraph, each video as a separate content block. Each block has its own settings for color, width, etc. You can move, duplicate or delete the blocks. You will find all blocks in the block library. You can open these via the blue plus at the top of the editor, the plus below a block or the forward slash (this is the one above the 7) at the beginning of a new paragraph.
- In the dashboard: Page > Create new page. From the AdminBar of the dashboard: New > Page
- The title is not only internal for you. It is displayed in the menu, in the breadcrumb, in the browser tab and as bookmark text.
- Right column – Page properties:
- The URL is generated from the title. Customize the URL! You can find the URL in the page properties in the right-hand column (sidebar). Click on the URL there. The ‘Permalink’ field is then displayed underneath, in which you can change the URL of the page.
- Are you moving a web page? Every page in the old website that should still be findable after the move must have the same URL, otherwise there will be a “Page not found” error!
- Is your title rather long? Shorten the URL to something you can send in an e-mail without any breaks!
- All pages are public! You set the protection (draft/private) on and off yourself.
- The URL is generated from the title. Customize the URL! You can find the URL in the page properties in the right-hand column (sidebar). Click on the URL there. The ‘Permalink’ field is then displayed underneath, in which you can change the URL of the page.
- Publish your new page via Publish at the top right.
- Check your new page by clicking on the preview to make sure that everything is displayed correctly.
Parts of a page: Open the document overview and mark the elements as such: Click on the top one. Shift-click on the bottom one. Ctrl-C. Move the mouse to the new position. Ctrl-V . Be sure to use Ctrl-C instead of right mouse.
Complete page: You can copy and paste content to the home page, for example. In the block editor, click on the three dots at the top right and select Copy all blocks. Then switch to the home page, position the cursor and press ctrl-v.
Using the example of a study profile, a new page is created from scratch. Video tutorial for creating a study outline
The following points were covered there (chapter headings and when they start):
- 00:00 – Introduction
- 03:55 – Side entry with picture
- 08:00 – Page entry with breadcrumb
- 09:10 – Anchor navigation
- 09:47 – Sections for different background colors (dark grey, light grey, white)
- 11:00 – Anchor point
- 11:30 – Heading / Heading
- 12:55 – Key facts and key facts element (create new nested elements, move, copy, duplicate via drag&drop).
- 16:30 – Layout for lots of text (key fact in wide layout)
- 16:40 – Preview for desktop and mobile (F12 in the preview page)
- 17:40 – Further anchor points with headings
- 18:30 – Hinged area
- 19:00 – Copying from Word, with (Ctrl-V) and without (Ctrl-Shift-V) formatting
- 20:15 – Accordion
- 20:50 – Set links and other formatting in scrolling text
- 22:00 – Accordion elements
- 23:20 – Accordion settings: Open all/one, activate search
- 23:50 – Focus: Percentages and icons, tabular presentation
- 25:50 – Columns: Display things next to each other
- 26:50 – Teaser box (notification boxes, link lists, icons)
- 32:20 – Modal – mini page on the page itself, displayed in an extra window
- 32:50 – Process flow: with illustrations, texts
- 37:00 – Testimonial: Quote text
- 37:45 – Slider and slider elements (on desktop and mobile)
- 40:00 – Picture gallery
- 41:45 – Videos from Vimeo, Panopto and Youtube per ID in a slider
- 44:00 – Image next to text: per block of items and text or as columns
- 44:40 – Tabs / Tabs
- 46:20 – Extended list
- 49:30 – Create template page – copy all blocks and paste into new page using Ctrl-V
- 50:20 – Create, install and maintain reusable blocks
- 55:40 – Use reusable block as template
A website consists of a whole series of necessary pages. You can find out how to set up your website for the first time and use the override templates in the following tutorial:
Unfortunately, the current editor increasingly no longer matches the agency’s programming.
Therefore, we have to use version 16.8. of the Gutenberg editor via plugin since 2025.
You will notice that you do not see highlighted areas in Chrome and Edge. Use Firefox if you need this function.