Anleitungen

Kurze, praktische Durchgänge für die tägliche Arbeit mit WebBlocks CMS. Jede Anleitung behandelt eine Aufgabe, in wenigen Schritten, mit Screenshots.

Neu hier? Beginnen Sie mit Am Admin-Panel anmelden und folgen Sie dem Weiter-Link am Ende jeder Anleitung. Sie suchen, wie sich eine Funktion verhält, statt wie man sie benutzt? Das steht in der Referenzdokumentation.

WebBlocks CMS dashboard showing the sidebar and an overview of pages, blocks, and media.

Am Admin-Panel anmelden

Öffnen Sie das Admin-Panel, melden Sie sich an und finden Sie sich auf dem Dashboard zurecht.

Pages list showing page titles, paths, and publishing status.

Das Admin-Panel in zwei Minuten

Was in der Seitenleiste wo liegt und welche Bildschirme Sie wirklich nutzen.

Layout Slots tab showing which slots the page layout defines and which the page has.

Seite, Layout, Slot, Block

Die vier Wörter, die das CMS für alles verwendet, in einfacher Sprache.

Profile screen showing name, email, interface language, and the password section.

Ihr Profil und Ihre Sprache

Ändern Sie Name, E-Mail, Passwort und die Sprache des Admin-Panels.

New page form with title, slug, and page layout fields.

Eine Seite anlegen

Fügen Sie einer Site eine neue Seite hinzu und speichern Sie sie als Entwurf.

Block picker showing the common block types including Header and Image.

Überschrift und Absatz hinzufügen

Setzen Sie mit den Blöcken Header und Plain Text Ihre ersten Worte auf eine Seite.

Media Library picker dialog with a list of images and a Select button on each.

Ein Bild hinzufügen

Platzieren Sie ein Bild aus der Medienbibliothek auf einer Seite, mit beschreibendem Alternativtext.

Public preview of a draft page with a preview mode notice at the top.

Eine Seite veröffentlichen

Sehen Sie Ihre Arbeit in der Vorschau und machen Sie die Seite dann für Besucher sichtbar.

Translation editor with routing fields, list excerpt, and SEO fields.

Eine Seitenadresse ändern

Benennen Sie Slug und Pfad einer Seite um und setzen Sie ihre SEO- und Social-Felder.

Rich Text block editor showing the formatting toolbar and a formatted paragraph with a list.

Rich Text: Formatierung, Listen und Links

Fett, kursiv, Links und verschachtelte Listen in einem bearbeitbaren Block.

Hero block form showing eyebrow, title, intro, CTA fields, variant, and layout.

Hero: einen Auftakt bauen

Das Banner oben auf der Seite — Titel, Intro, Schaltflächen und ein Hintergrundbild.

CTA block form showing eyebrow, heading, body copy, and two call-to-action pairs.

Schaltflächen und CTA

Eine einzelne Schaltfläche oder ein vollständiges Call-to-Action-Panel mit Überschrift und Aktionen.

Quote block form showing the quote text, author, source, and variant fields.

Zitat und Hinweis

Heben Sie fremde Worte hervor oder markieren Sie, was Lesende nicht übersehen dürfen.

Public page showing a list of linked notes with dates and descriptions, above a data table.

Linklisten und Tabellen

Eine aufgeräumte Liste von Links mit Beschreibungen und echte tabellarische Daten.

Code block form showing the title, filename label, code sample, and syntax language.

Code- und HTML-Blöcke

Ein Codebeispiel richtig zeigen — und wissen, wann der HTML-Block die falsche Antwort ist.

Media Library showing uploaded files with search, kind, and usage filters.

Dateien in die Medienbibliothek hochladen

Bringen Sie Bilder und Dokumente einmal in die Bibliothek und verwenden Sie sie überall wieder.

Image Variants panel listing thumbnail, card, and content sizes with a regenerate action.

Alternativtext, Bildunterschriften und Bildvarianten

Die Angaben, die ein Bild nutzbar machen — und die Größen, die das CMS für Sie erzeugt.

Public page showing a three-column image gallery with captions under each image.

Eine Galerie bauen

Mehrere Bilder als ein Raster, mit Bildunterschriften und optionaler Lightbox.

Video block form showing video title, external video URL, and supporting copy.

Einen Video- oder Audioblock hinzufügen

Betten Sie einen gehosteten Clip ein oder zeigen Sie auf einen, der anderswo liegt.

Download block form showing the download label, helper text, and selected document.

Eine Datei zum Herunterladen anbieten

Eine klare Download-Aktion für ein PDF oder Dokument statt eines nackten Links.

Media Library showing folder chips and a document assigned to the Studio documents folder.

Medien in Ordnern organisieren

Halten Sie die Bibliothek auffindbar, sobald sie mehr als einen Bildschirm füllt.

Public page showing a heading and paragraph constrained to a readable measure.

Section und Container: die Seitenbreite steuern

Die beiden Hüllen, die entscheiden, wie breit Ihr Inhalt sitzt und wie viel Luft er bekommt.

Public page showing a three-column set with intro copy above a grid of cards.

Columns und Grid

Dinge nebeneinander setzen — mit eigenem Text oder als schmucklose Anordnung.

Cluster block form showing name, width, justify, align, wrap, and gap.

Cluster und Abstände

Ein paar Dinge in einer Reihe ausrichten und die Luft zwischen allem anderen steuern.

Public page showing a grid of cards above a feature grid.

Card, Feature Grid und Stat Card

Drei Arten, eine kleine Inhaltseinheit zu verpacken — und wann welche passt.

Layout Slots tab showing present, missing, and extra slots for the page.

Ein Seitenlayout wählen und wechseln

Wählen Sie den Rahmen, in dem eine Seite rendert, und wechseln Sie ihn später ohne Inhaltsverlust.

Public page showing an on-this-page list of anchored headings above a breadcrumb trail.

Inhaltsverzeichnis und Breadcrumbs

Zwei kleine Blöcke, die Lesenden helfen, sich auf einer langen Seite zurechtzufinden.

Navigation items screen showing the site and menu selectors above the list of links.

Ein Navigationsmenü bauen

Fügen Sie die Links hinzu, die Besucher anklicken, gruppieren und sortieren Sie sie.

Shared slot block list showing a navbar with brand, navigation, and header actions nested inside.

Eine Kopfzeile als Shared Slot bauen

Bauen Sie die Kopfzeile einmal und richten Sie dann jede Seite darauf aus.

Shared slot block list showing a section, container, header, text, and link list.

Eine Fußzeile als Shared Slot bauen

Erstellen Sie von Grund auf einen wiederverwendbaren Bereich und füllen Sie ihn mit echten Blöcken.

Shared slot edit screen showing the usage panel listing the pages that use it.

Einen Shared Slot sicher aktualisieren

Einen geteilten Bereich zu bearbeiten ändert jede Seite gleichzeitig. So geht es, ohne etwas kaputtzumachen.

Page overview showing draft status with submit for review and publish actions.

Entwurf, Review und Veröffentlichung

Die vier Zustände, die eine Seite durchläuft, und wer sie bewegt.

Page revision history listing workflow and block changes with author and restore actions.

Revisionen: Historie ansehen und wiederherstellen

Finden Sie heraus, was sich geändert hat, wer es geändert hat, und stellen Sie es zurück.

Add user form showing name, email, password, role, and per-site access checkboxes.

Rollen: wer was darf

Die drei Rollen, was jede erreicht, und wie Sie eine Kollegin hinzufügen.

Duplicate page screen showing target site, new title and slug, and what carries over.

Seiten duplizieren, verschieben und archivieren

Kopieren Sie eine Seite als Ausgangspunkt, verschieben Sie sie zwischen Sites oder nehmen Sie sie vom Netz, ohne zu löschen.

Contact messages inbox listing submissions with their status.

Ein Kontaktformular hinzufügen und Nachrichten lesen

Setzen Sie ein Formular auf eine Seite und finden Sie dann, was Besucher gesendet haben.

Comments moderation screen listing pending comments with approve, reject, and spam actions.

Kommentare und Bewertungen

Lassen Sie Lesende antworten und prüfen Sie ihre Beiträge, bevor sie erscheinen.

Search form block showing accessible label, placeholder, button label, and variant.

Site-Suche

Setzen Sie ein Suchfeld auf die Site und halten Sie den Index ehrlich.

Translation editor showing SEO title, description, keywords, and social image fields.

SEO-Felder, Social-Bild und Favicon

Was Suchergebnisse und geteilte Links zeigen und wo man das einstellt.

Site settings locales tab showing enabled languages for the site.

Einer Site eine Sprache hinzufügen

Zwei Schritte — die Locale registrieren und dann auf der Site aktivieren, die sie braucht.

Add translation form showing routing fields for the German version of a page.

Eine Seite übersetzen

Geben Sie einer Seite eine zweite Sprache, mit eigener Adresse und eigenem SEO.

Sites screen listing the sites in the installation with their domains.

Mehr als eine Site verwalten

Eine Installation, mehrere Sites — was geteilt wird und was nicht.

Site variables tab listing reusable public tokens with their keys and values.

Site-Variablen

Schreiben Sie einen Wert einmal, nutzen Sie ihn site-weit und ändern Sie ihn an einer Stelle.

Als Nächstes

  • Text und Struktur — Rich Text · Hero · Schaltflächen und CTA · Zitat, Callout, Hinweis · Listen und Tabellen · Code und HTML
  • Bilder und Medien — Upload in die Medienbibliothek · Alternativtext und Bildunterschriften · Galerien · Video und Audio · Downloads · Medienordner
  • Seitenlayout — Section und Container · Columns und Grid · Abstände · Cards und Feature Grids · ein Seitenlayout wählen
  • Strukturierte Inhalte — FAQ und Accordion · Tabs · Slider · Inhaltsverzeichnis und Breadcrumbs
  • Navigation und wiederverwendbare Bereiche — Navigationsmenüs · Kopfzeile als Shared Slot · Footer- und CTA-Shared-Slots · einen Shared Slot sicher aktualisieren
  • Im Team arbeiten — Entwurf, Review, Veröffentlichung · Revisionen und Wiederherstellung · Rollen · duplizieren, verschieben, archivieren
  • Besucher — Kontaktformulare und Nachrichten · Kommentare und Bewertungen · Site-Suche · SEO und Social-Bilder
  • Mehr Sites und Sprachen — eine Sprache hinzufügen · eine Seite übersetzen · mehrere Sites · Site-Variablen