So bearbeiten Sie Ihre Website
So wird’s gemacht | Styleguide | Inhaltsstile | Tipps zur Barrierefeiheit | Seitenblöcke
Inhaltsverzeichnis
- Seiten
- Seiten erstellen und bearbeiten
- Permalinks (URLs)
- Seitenattribute
- Optionen für Seitenkopfzeilen
- CTA-Optionen in der Fußzeile
- Yoast SEO
- Seitenblöcke
- Wiederverwendbare Seitenblöcke
- Inhaltseditor (WYSIWYG)
- Inhaltsstile
- Seiten erstellen und bearbeiten
- Benutzerdefinierte Beitragsarten
- Beiträge (Blogbeiträge)
- Medienbibliothek
- Formulare
- Menüs
- Bearbeitungsmenüs
- Menü für soziale Medien
- Mega-Menü
Seiten
Seiten erstellen und bearbeiten
Zur Erstellung einer neuen Seite klicken Sie auf: Seiten > Neu hinzufügen Zur Bearbeitung einer bestehenden Seite klicken Sie auf: Seiten > Suchen Sie die zu bearbeitende Seite > Bearbeiten
- Geben Sie einen Titel in das Feld mit der Aufschrift „Titel hinzufügen“ ein.
- Dies dient als Überschrift 1 für Ihre Seite.
- Wenn Sie auf das Zahnradsymbol in der oberen rechten Ecke klicken, werden die Dokumenteinstellungen geöffnet. Von hier aus können Sie die URL und die Seitenattribute aktualisieren.
- Permalink: Hier können Sie die URL für die Seite aktualisieren. Hinweis: Beim Speichern des Entwurfs oder beim Veröffentlichen der Seite wird automatisch eine URL generiert, die auf den Angaben im Titelfeld basiert. Wenn Sie diese URL ändern oder anpassen möchten, können Sie dies im Abschnitt „Permalink“ tun.
- Seitenattribute — Hier können Sie eine übergeordnete Seite zuweisen.
- Wenn Sie einer übergeordneten Seite eine Seite zuweisen, ändert sich die URL-Struktur der Seite.
- Wenn der „alten Seite“ eine „neue Seite“ zugewiesen wird, ändert sich ihre URL in „alte Seite/neue Seite“ .
- Die Reihenfolge der Seiten lässt Sie in der visuellen Navigation unter Darstellung > Menüs festlegen. (Anletiung dazu unten.)
- Optionen für die Seitenüberschrift — Scrollen Sie zum Ende der Seite zum Abschnitt „Banner“, in dem Sie Optionen für die folgenden Felder sehen sollten:
-
- Überschreiben von Überschrift 1 (wodurch die im Seitentitel eingestellte Überschrift 1 überschrieben wird)
- Text des einleitenden Absatzes
- Hero-Bild
- CAT-Link
-
- CTA-Optionen in der Fußzeile: Scrollen Sie zum Ende der Seite bis zum Abschnitt „CTA auf Seitenebene“.
- Hier sollten Sie die folgenden Optionen sehen:
- Globalen CTA anzeigen (zeigt den globalen CTA an, der unter Optionen > Globaler CTA bearbeitet wird)
- Ausblenden (für Seiten, auf denen überhaupt kein CTA in der Fußzeile angezeigt werden soll)
- Überschreiben (damit können Sie einen eindeutigen CTA in der Fußzeile der jeweiligen Seite angeben)
- Hier sollten Sie die folgenden Optionen sehen:
- Yoast SEO — Scrollen Sie zum Ende der Seite bis zum Abschnitt „Yoast SEO“. Hier sollten Sie Optionen zum Bearbeiten des SEO-Titels und der Meta-Beschreibung sehen.
- Fügen Sie einen bestimmten SEO-Titel und eine Meta-Beschreibung für die Seite hinzu.
- Verwenden Sie den Reiter „Teilen in sozialen Netzwerken“ in Yoast, um bestimmte Inhalte für Facebook und Twitter festzulegen.
- Darüber hinaus lassen sich Seiten aus der Sitemap und der Google-Suche ausblenden:
- Gehen Sie dazu in Yoast zum Reiter „Erweiterte Einstellungen“.
- Wählen Sie zum Ausblenden von Seiten aus der Sitemap und der Google-Suche die Einstellungen „Nein“ (Index) und „Nein“ (Folgen).
Seitenblöcke
Sobald Ihre Seite angelegt ist, können Sie damit beginnen, Ihre Seite mit Seitenblöcken zu gestalten.
- Klicken Sie auf das schwarze +-Symbol unter dem Titel der Seite.
- Hier sollten Sie einige Optionen für die Auswahl von Seitenblöcken sehen, die der Seite hinzugefügt werden können. Wählen Sie aus diesen 6 zuletzt verwendeten Seitenblöcken aus oder klicken Sie auf „Alle durchsuchen“, um alle Seitenblockoptionen anzuzeigen.
- Fügen Sie den gewünschten Seitenblockstil hinzu.
- Jeder Seitenblock hat je nach verwendetem Stil unterschiedliche Optionen.
- Unter dem Reiter „Einstellungen“:
- Bearbeiten Sie die Einstellungen für diesen bestimmten Seitenblock
- Die Einstellungen variieren je nach Art des von Ihnen ausgewählten Seitenblocks. In der Regel umfassen die Einstellungen hier die Hintergrundfarbe, Spaltenoptionen und Layoutstiloptionen.
- Unter dem Reiter „Inhalt“:
- Fügen Sie den Inhalt entsprechend hinzu.
- Wie unter dem Reiter „Einstellungen“ ändert sich das Layout des Reiters „Inhalt“ je nach dem von Ihnen ausgewählten Seitenblockstil.
- Die Reihenfolge der Seitenblöcke lässt sich mit den Symbolen „∧“ und „∨“ ändern.
Wiederverwendbare Seitenblöcke
Für bestimmte Seitenblöcke, wie z. B. einen CTA in der Fußzeile, empfiehlt sich unter Umständen die Erstellung eines wiederverwendbaren Blocks. Ein wiederverwendbarer Block ist ein einzelner Block, den Sie auf mehreren Seiten mit demselben Inhalt in allen Instanzen hinzufügen können. Aktualisieren Sie einen wiederverwendbaren Block an einer Stelle, wird er überall aktualisiert. So erstellen Sie einen wiederverwendbaren Block:
- Klicken Sie auf: Gutenblocks > Wiederverwendbare Blöcke > Neuen hinzufügen
- Sie werden darufhin zu einem Gutenberg-Editor weitergeleitet, in dem Sie genau wie bei jedem anderen Block einen wiederverwendbaren Block hinzufügen und erstellen können.
- Sobald Sie den Inhalt wie gewünscht angeordnet haben, geben Sie dem Block einen Namen.
- Veröffentlichen Sie den Block
So fügen Sie einer Seite einen wiederverwendbaren Block hinzu:
- Gehen Sie zu der Seite, auf der der wiederverwendbare Block angezeigt werden soll
- Klicken Sie wie beim Hinzufügen eines normalen Blocks auf das orangefarbene +-Symbol in der oberen linken Ecke
- Wechseln Sie zum Reiter „Wiederverwendbar“
- Wählen Sie den hinzuzufügenden Block aus.
- Sie werden feststellen, dass der wiederverwendbare Block mit einem leuchtend gelben Rahmen und einer Warnmeldung versehen ist. Dies soll Sie nur daran erinnern, dass der Block ein wiederverwendbarer Block ist und möglicherweise an anderer Stelle auf der Website vorhanden sein könnte.
Inhaltseditor (WYSIWYG)
So fügen Sie dem Inhaltseditor Inhalt hinzu:
- Die Inhalte lassen sich direkt in den WYSIWYG-Editor eingeben oder aus einem Textverarbeitungsprogramm kopieren/einfügen.
- Wenn Sie Inhalte kopieren und einfügen, klicken Sie nach dem Einfügen immer auf die Schaltfläche „Formatierung löschen“. Sie können die Inhalte auch „als einfachen Text einfügen“.
- Verwenden Sie die Schaltfläche „Sonderzeichen“ (Ω), um alle Sonderzeichen aus dem eingefügten Inhalt zu ersetzen. Andernfalls ändert sich möglicherweise die Kodierung.
Inhaltsstile
Weitere Informationen zu den verschiedenen Inhaltsstilen, die für Ihre Website möglich sind, finden Sie auf Ihrer Seite mit den Inhaltsstilen.
- Überschriftsstile
- Im Dropdownmenü „Absatz“ sind verschiedene Überschriftsstile vorinstalliert und beschriftet (Überschrift 1, Überschrift 2 usw.)
- So müssen Sie niemals Überschrift 1 auswählen, da Überschrift 1 durch den Seitennamen bzw. die Titelüberschreibung automatisch erstellt wird.
- Markieren Sie den Text und wählen Sie dann den gewünschten Überschriftsstil aus.
- Formatstile
- Im Dropdown-Menü „Formate“ sind verschiedene Formatstile voreingestellt.
- Fügen Sie den Stil des Einleitungstextes hinzu, indem Sie den betreffenden Text markieren und „Einleitungstext“ aus dem Dropdown-Menü auswählen.
- Verwandeln Sie Links in Schaltflächen, indem Sie den Linktext markieren und „Schaltfläche“ oder „Schaltfläche sekundär“ aus dem Dropdown-Menü auswählen.
Benutzerdefinierte Beitragsarten
Beiträge (Blogbeiträge)
Zur Erstellung eines neuen Beitrages klicken Sie auf: Beiträge > Neu hinzufügen Zur Bearbeitung eines bestehenden Beitrages klicken Sie auf: Beiträge > Suchen Sie den zu bearbeitenden Beitrag > Bearbeiten
- Erstellung und Bearbeitung von Blogbeiträgen
- Geben Sie den Beitragstitel in das Feld „Titel hinzufügen“ ein.
- Geben Sie den gesamten Inhalt in den Inhaltseditor (WYSIWYG) ein.
- Yoast SEO — Legen Sie den SEO-Titel und die Meta-Beschreibung im Abschnitt „Yoast SEO“ fest.
- Kategorien und Markierungen — Fügen Sie nach Bedarf Kategorien und Markierungen in der rechten Seitenleiste hinzu.
- Im Folgenden finden Sie Hinweise zum Erstellen und Bearbeiten von Blog-Kategorien und -Markierungen.
- Stellen Sie das Bild, das auf der Seite mit allen Ressourcenbeiträgen angezeigt wird, als Thumbnail für dieses Beitragselement ein.
- Speichern und aktualisieren Sie den Beitrag.
- Blog-Kategorien: Zur Erstellung und/oder Bearbeitung einer Kategorie klicken Sie auf: Beiträge > Kategorien.
- Wenn Sie versuchen, eine bereits vorhandene Kategorie zu bearbeiten, können Sie dies an derselben Stelle tun.
- Bearbeiten Sie die Kategorie oder fügen Sie sie je nach Bedarf hinzu. Damit eine Kategorie auf der Blog-Landingpage erscheint, müssen Sie diese Kategorie zunächst einem veröffentlichten Blogbeitrag zuordnen.
- Blog-Markierungen: Zur Erstellung und/oder Bearbeitung einer Blog-Markierung klicken Sie auf: Beiträge > Markierungen.
- Wenn Sie versuchen, eine bereits vorhandene Markierung zu bearbeiten, können Sie dies an derselben Stelle tun.
- Bearbeiten Sie die Markierung oder fügen Sie sie je nach Bedarf hinzu.
Mediathek
Hinweis: Bilder sollten vor dem Hinzufügen zur Mediathek zugeschnitten und komprimiert werden. Die Bilder sollten nicht größer als 250 KB sein (auch wenn sich das manchmal nicht vermeiden lässt). Das Bild sollte vor dem Komprimieren auf die entsprechende Größe zugeschnitten werden. Diese Seite, tinypng.com, kann sich beim Komprimieren von Dateigrößen für große Bilder als hilfreich erweisen. Zur Ansicht der Mediathek klicken Sie auf: Medien > Bibliothek
- Zum Hinzufügen neuer Bilder und Dateien klicken Sie oben auf der Seite auf die Schaltfläche „Neu hinzufügen“. Klicken Sie dann auf „Dateien auswählen“ oder ziehen Sie einfach eine Datei per Drag & Drop in das Fenster.
- Dateien lassen sich direkt zu einem bestimmten Ordner hinzufügen oder später per Drag & Drop in den richtigen Ordner ziehen.
- Klicken Sie auf ein beliebiges Medienelement, um die folgenden Felder zu bearbeiten:
- Alternativer Text
- Titel
- Bildunterschrift
- Beschreibung
- Datei-URL
- Bei Bildern, die nicht zu Dekorationszwecken verwendet werden, sollten die Titel entfernt und ein Alt-Text zur Beschreibung des Bildes hinzugefügt werden, damit ein Bildschirmlesegerät den Benutzer über den Inhalt des Bildes informieren kann (z. B. Frau benutzt Telefon am Schreibtisch). Der Alt-Text für Bilder sollte das Bild beschreiben und keine Sonderzeichen enthalten.
- Weitere Informationen zum Hinzufügen von Alt-Text finden Sie auf unserer Seite zur Barrierefreiheit.
- Wenn Sie eine PDF-Datei bearbeiten, dient das Feld „Datei-URL“ als Link, das Sie zur direkten Verknüpfung mit der PDF-Datei verwenden werden.
Hinweis: Die Mediathek kann nach Typ oder Datum gefiltert werden und kann nach Titeln durchsucht werden.
Formulare
Zur Erstellung und/oder Bearbeitung von Formularen klicken Sie auf: Ninja-Formulare > Dashboard
- Hier sollten Sie alle Formulare auf Ihrer Website sehen.
- Klicken Sie auf das Zahnradsymbol neben Ihrem Formular, um Ihr Formular zu bearbeiten, zu duplizieren, in der Vorschau anzuzeigen und zu löschen. Sie können an dieser Stelle auch die eingesandten Formulare sehen.
- Klicken Sie entweder auf „Neu hinzufügen“ oder bearbeiten Sie ein vorhandenes Formular.
- Gehen Sie zu den „Formularfeldern“.
- Fügen Sie die gewünschten Formularfelder mit dem blauen +-Symbol in der unteren rechten Ecke hinzu.
- Sobald Sie die gewünschten Formularfelder hinzugefügt haben, klicken Sie auf „Veröffentlichen“. Hinweis: Auf dieser Schaltfläche steht immer „Veröffentlichen“, auch wenn das Formular bereits veröffentlicht wurde.
- Gehen Sie zum Reiter „E-Mail und Aktionen“.
- Bearbeiten Sie die Weiterleitungs-, E-Mail-Administrator- und E-Mail-Benutzereinstellungen für jedes Formular.
- Weiterleitung — Es erfolgt eine Weiterleitung zur Danksagungsseite.
- E-Mail-Administration — Hier können Sie festlegen, wie jedes eingereichte Formular in Ihrem Posteingang angezeigt wird: vom Namen über die Adresse und E-Mail-Adresse (sehr wichtig) bis zum Betreff und zu den Feldern.
- In den erweiterten Einstellungen unter dem HTML-Fenster können zusätzliche E-Mail-Parameter hinzugefügt werden. Handelt es sich um eine automatische Antwort-E-Mail, müssen E-Mail-Adressen in CC oder zusätzliche E-Mail-Adressen zum Formular hinzugefügt werden. Dies kann hier geschehen, anstatt neue E-Mail-Adressen zu erstellen.
- Wenn das Formular vollständig erstellt ist, kopieren Sie den Kurzcode und fügen ihn in einen Inhaltseditor ein.
- Bearbeiten Sie die Weiterleitungs-, E-Mail-Administrator- und E-Mail-Benutzereinstellungen für jedes Formular.
Menüs
Zur Bearbeitung von Menüs klicken Sie auf Darstellung > Menüs. Hinweis: Das Menü für soziale Medien in der Fußzeile befindet sich an einer anderen Stelle. Siehe unten.
Bearbeitung von Menüs
- Gehen Sie zum Dropdown-Menü „Wählen Sie das zu bearbeitende Menü aus:“ und bestimmen Sie das Menü, das Sie bearbeiten möchten.
- Verwenden Sie Menüs, um festzulegen, wie die verschiedenen Menüs angezeigt werden sollen.
- Menüelemente hinzufügen —
- Suchen Sie im Auswahlbereich „Menüelemente hinzufügen“ auf der linken Seite nach der Seite (oder einem anderen Menüelement), die Sie zu Ihrem Menü hinzufügen möchten.
- Wählen Sie „Zum Menü hinzufügen“ aus. Daraufhin wird die Seite unten in diesem Menü angezeigt.
- Ziehen Sie die Seite, die Sie hinzugefügt haben, per Drag & Drop an die Stelle im Menü, an der sie erscheinen soll.
- Zur Festlegung eines untergeordneten Menüpunkts ziehen Sie die Seite so, dass sie eingerückt unter der Hauptseite erscheint.
- Klicken Sie auf den Pfeil rechts neben dem Menüelement, um weitere Optionen anzuzeigen. In diesem Bereich können Sie die folgenden Elemente bearbeiten:
- Navigationsbeschriftung (Text, der im Menü selbst erscheint)
- Titelattribut
- Ein Kontrollkästchen zum Öffnen von Links in einem neuen Reiter
- (optionale) CSS-Klassen
- Sobald Sie das Menü wie gewünscht eingestellt haben, klicken Sie auf die Schaltfläche „Menü speichern“ in der oberen linken Ecke.
Menü für soziale Medien
Zur Bearbeitung des Menüs für soziale Medien klicken Sie auf: Optionen > Fußzeile > Soziale Medien
- Geben Sie die Links in die entsprechenden, nach Anwendungen geordneten Felder ein.
- Aktualisieren Sie die Seite, um die Änderungen zu speichern.
Megamenü
Zur Bearbeitung der Megamenüs klicken Sie auf:Darstellung > Menüs > Filtern Sie nach dem Hauptmenü
- .Ordnen Sie zuerst alle Seitenlinks an, die Sie für die Menüs benötigen, und verschachteln Sie sie wie gewünscht. (Eine detailliertere Anleitung dazu finden Sie im Abschnitt „Menüs bearbeiten“ oben.)
- Hinweis: Das Layout der Seiten, die Sie in dieser Ansicht einfügen, wird so aussehen, wie diese Seiten/Links in den Menüs auf Mobilgeräten angezeigt werden.
- Sobald die Seitenlinks angeordnet sind, bewegen Sie den Mauszeiger über die übergeordnete Seite des zu bearbeitenden Megamenüs. Daraufhin sollte die blaue Schaltfläche „Megamenü“ erscheinen. Klicken Sie darauf, um den Megamenü-Editor zu öffnen.
- Im Megamenü-Editor sollten folgende Elemente erscheinen:
- Spaltenstruktur des Megamenüs im Frontend
- Widgets, die den verschiedenen Textbereichen und untergeordneten Seiten in diesem Megamenü entsprechen
- Zur Anpassung der Spaltenstruktur sollten in den oberen rechten Ecken der Spalten Ihres Megamenüs Pfeile angezeigt werden. Mithilfe dieser Pfeile können Sie festlegen, wie viele Spalten (von 12) jede Megamenü-Spalte einnehmen soll.
- Zur Neuanordnung von Unterseiten ziehen Sie einfach die Widgets für jede Unterseite in die entsprechende Spalte des Megamenüs.
- Zur Bearbeitung der „Text“ -Widgets im Megamenü klicken Sie in das Megamenü (oben erwähnte blaue Schaltfläche), erweitern Sie das Widget mit dem Pfeil auf der rechten Seite und bearbeiten Sie den Text im WYSIWYG
- .Zur Bearbeitung des Textes unter den einzelnen Menüpunkten klicken Sie aufDarstellung > Menüs. Wählen Sie dann oben auf Ihrem Bildschirm in der oberen rechten Ecke das Dropdown-Menü „Bildschirmoptionen“ aus. Vergewissern Sie sich, dass „Beschreibung“ aktiviert ist. Dann sollten Sie jeden einzelnen Menüpunkt erweitern und seine Beschreibung hinzufügen können.
