Assistant

Verlinkungen sind ein wesentlicher Bestandteil, um Inhalte miteinander zu verbinden und die Benutzererfahrung zu verbessern. Hier sind die Schritte, wie Sie im Block-Editor Verlinkungen in Texte und Bilder einbinden können.

1. Verlinkungen in Textblöcken

Um einen Textblock zu verlinken, gehen Sie folgendermaßen vor:

1. Öffnen Sie eine bestehende Inhaltsseite oder erstellen Sie eine neue Seite.
2. Fügen Sie den Block "Text" hinzu oder bearbeiten Sie einen bereits bestehenden Textblock.
3. Markieren Sie den Text, den Sie verlinken möchten.
4. Klicken Sie auf das Kettensymbol in der Block-Werkzeugleiste.

5. Geben Sie im Eingabefeld eine interne oder externe URL ein, zu der Sie verlinken möchten oder wählen Sie eine bereits bestehende Seite aus.
6. Drücken Sie die Eingabe-Taste, um die Eingabe zu bestätigen.

Link bearbeiten

Sie können den Link bearbeiten oder zusätzliche Optionen aktivieren, indem Sie auf den markierten Link im Text klicken.
Über die drei Icons neben dem Linktitel können Sie die Link-URL bearbeiten, deaktivieren oder kopieren.

Mit dem Stift-Icon öffnet sich ein Fenster, in dem nachträglich Linktext und URL angepasst werden können. Außerdem können Sie festlegen, ob der Link in einem neuen Fenster geöffnet und als "no-follow"-Link gekennzeichnet werden soll. Das no-follow Attribut gibt Suchmaschinen den Hinweis, diesem Link nicht zu folgen.

Das Öffnen von Links in neuem Tab sollte aus Gründen der Barrierefreiheit vermieden werden. Lesen Sie auf w3.org mehr über das Öffnen von Links in neuem Tab.

2. Verlinkungen in Bildern

Im neuen WordPress Theme FAU Elemental können Bilder nicht mehr verlinkt werden. Sie können den Block oder die Vorlage "Logo Grid" verwenden, um z.B. Logos auf externe Seiten zu verlinken.

Um ein Bild zu verlinken, gehen Sie folgendermaßen vor:

1. Öffnen Sie eine bestehende Inhaltsseite oder fügen Sie eine neue Seite hinzu.
2. Fügen Sie den Block "Bild" ein. Laden Sie ein Bild von Ihrem Computer hoch oder wählen Sie eines aus der Mediathek.
3. Klicken Sie bei markiertem Block in der Block-Werkzeugleiste auf das Kettensymbol.

4. Nach dem Klick auf das Link-Symbol öffnet sich wieder ein Fenster mit den Link-Optionen. Sie können den Link bearbeiten, deaktivieren oder weitere Optionen einstellen.
5. Per Klick auf das Stift-Symbol (Bearbeiten) öffnet sich ein neues Fenster mit verschiedenen Optionen:

   • URL zu einer internen oder externen Seite einfügen
   • Link zur Bilddatei (das Bild öffnet sich in einem eigenen Tab)
   • Link zur Anhangsseite (zeigt verschiedene Informationen zur Bilddatei)
   • Vergrößern bei Klick

6. Drücken Sie die Eingabetaste, um den Link zu setzen.

Das Gruppieren von Blöcken ist eine leistungsstarke Funktion, um Inhalte zusammenzufassen und übersichtlicher zu gestalten. Darüber hinaus wird das Verwalten und Gestalten von Inhalten enorm erleichtert.

In einer Gruppe können sowohl Zeilen, als auch Spalten und einzelne Blöcke angeordnet werden. Eine Gruppe kann aber auch beliebig viele Untergruppen beinhalten.

Sie können außerdem den Innen- und Außenabstand der Gruppe kontrollieren, sowie eine Hintergrundfarbe für gruppierte Inhalte setzen.

Hinweis: Nicht alle Gruppen-Funktionen und -Einstellungen sind im neuen Theme FAU Elemental verfügbar.

Vorteile von Gruppen

1. Organisation von Inhalten

Mit Gruppen können Sie themenverwandte Blöcke zu einer Einheit zusammenfassen. Das erleichtert die Verwaltung von Inhalten. Durch die Gruppierung der Blöcke können Sie das Editor-Feld aufgeräumt halten und gleichzeitig den Überblick über zusammenhängende Inhalte behalten.

2. Wiederverwendbarkeit von Inhalten

Ein wesentlicher Vorteil von Gruppen ist die Wiederverwendbarkeit. Sie können eine Gruppe als wiederverwendbaren Block (Vorlage) speichern und diesen in anderen Bereichen Ihrer Website erneut einsetzen.

3. Verbesserte Benutzerfreundlichkeit

Gruppen machen den Block-Editor benutzerfreundlicher. Indem Sie das Layout in überschaubare Einheiten unterteilen, wird die Bearbeitung intuitiver und übersichtlicher. Gruppen können per Drag-and-Drop verschoben und auch dem Inhalt entsprechend umbenannt werden.

Speziell in unserem Newsletter-Plugin wurde in den Vorlagen vorwiegend mit Gruppen gearbeitet, um die verschiedenen Abschnitte visuell voneinander zu trennen.

Erstellung und Nutzung von Gruppen

1. Hinzufügen eines leeren Gruppe-Blocks

Um einen Gruppe-Block hinzuzufügen, haben Sie mehrere Optionen:

Über den Block-Inserter:
Klicken Sie auf das Plus-Icon (+) im Block-Inserter und suchen Sie nach „Gruppe“.

Über die Tastatur:
Geben Sie in einer neuen Zeile /Gruppe ein und drücken Sie die Eingabetaste.

Auswahl eines Layouts für den Gruppe-Block

Nach dem Hinzufügen des Gruppe-Blocks werden Sie aufgefordert, ein Layout auszuwählen.

Wählen Sie die erste Option "Gruppe: Blöcke in einem Container zusammenfassen".

Hinzufügen von Blöcken zur Gruppe

Sobald der Gruppe-Block erstellt ist, können Sie weitere Gruppen, Zeilen, Spalten und Blöcke zu diesem Block hinzufügen.

Klicken Sie auf das Plus-Icon innerhalb des Gruppe-Blocks und wählen Sie den gewünschten Block-Typ aus.

Sie können der Gruppe einen individuellen Namen geben. Der Gruppe-Block kann nun per Drag-and-Drop beliebig im Layout verschoben werden (am besten in der Listenansicht) und auch als wiederverwendbare Vorlage über das Drei-Punkte-Menü abgespeichert werden.

2. Bestehende Blöcke gruppieren

Wenn Sie mehrere, bereits vorhandene, Blöcke zu einem Block zusammenfassen möchten gehen Sie folgendermaßen vor:

1. Öffnen Sie die Listenansicht.
2. Wählen Sie bei gedrückter Umschalttaste (Shift) die gewünschten Blöcke aus.
3. Im Inhaltsbereich sehen Sie die Block-Werkzeugleiste mit der Option "Gruppe".
4. Die markierten Blöcke befinden sich anschließend in einem Gruppe-Block.

Anker-Links, auch bekannt als Sprungmarken, sind Links, die es ermöglichen, innerhalb eines Dokuments oder einer Website direkt zu einem bestimmten Abschnitt zu springen.

Um Anker-Links im Block-Editor zu setzen, gehen Sie folgendermaßen vor:

Anker-Link erstellen

Anker-Link setzen

1. Text für Anker-Link auswählen: Wählen Sie den Text aus, den Sie als Link setzen möchten, um zu Ihrem Ankerpunkt zu springen (=Ausgangspunkt).
2. Link-Option öffnen: Die Block-Werkzeugleiste erscheint über Ihrem ausgewählten Text. Klicken Sie auf das Kettensymbol (Link hinzufügen).
3. Anker-Link setzen: Geben Sie im Linkfeld ein # gefolgt von Ihrem Anker-ID-Namen ein. Beispiel: #mein-ankerpunkt (=Zielpunkt).
4. Link einfügen: Klicken Sie auf das Symbol zum Bestätigen oder drücken Sie die Eingabetaste, um den Link zu setzen.

Sprungmarke auf eine andere interne Seite setzen

Um auf einen bestimmten Punkt auf einer anderen Seite innerhalb Ihrer Website zu verlinken, gehen Sie folgendermaßen vor:

1. Erstellen Sie den Ankerpunkt (z.B. mein-ankerpunkt) auf der Zielseite.
2. Erstellen Sie den Anker-Link auf der Ausgangsseite wie zuvor beschrieben. Der Unterschied zur seiteninternen Verlinkung:
   Sie geben diesmal die komplette URL der Zielseite ein, gefolgt von "#" und Ihrer Anker-ID.
   Zum Beispiel: https://www.ihrewebsite.de/zielseite/#mein-ankerpunkt

Block-Vorlagen, auch bekannt als Patterns, sind eine nützliche Funktion des Block-Editors zur einfachen Wiederverwendung von Blöcken oder Block-Gruppen auf der gesamten Website.

Vorteile von Block-Vorlagen:

1. Zeitersparnis: Einmal erstellte Inhalte können schnell auf mehreren Seiten oder Beiträgen eingefügt werden, ohne sie jedes Mal neu erstellen zu müssen.
2. Konsistenz: Änderungen an einem Block werden auf alle Instanzen des Blocks angewendet, was die Konsistenz der Inhalte auf der gesamten Website sicherstellt.
3. Flexibilität: Blockvorlagen können jederzeit geändert und an neue Anforderungen angepasst werden.

Einen Block-Vorlage erstellen

Inhalt erstellen

Beginnen Sie mit der Erstellung eines Blocks oder einer Kombination von Blöcken.

Hier empfehlen wir die Verwendung eines Gruppe-Blocks (hier im Beispiel "Container Zeile-Block") als übergeordneten Block. In den Gruppe-Block können weitere Blöcke wie Zeilen, Spalten, Texte und Bilder eingefügt werden.

Wiederverwendbar machen

Wählen Sie den Block oder die Gruppe von Blöcken aus, die Sie speichern möchten.

Klicken Sie in der Werkzeugleiste der obersten Blockebene (z.B. im Gruppen-Block) auf die drei vertikalen Punkte (Optionen)

und wählen Sie „Vorlage erstellen“.

Benennen

Nachdem Sie "Vorlage erstellen" ausgewählt haben, öffnet sich ein Fenster mit dem Titel "Neue Vorlage hinzufügen".

Geben Sie der Vorlage einen aussagekräftigen Namen, der die Funktion beschreibt (z.B. „Infobereich“). Darüber hinaus kann eine Kategorie ausgewählt oder neu angelegt werden. Dies erleichtert das spätere Auffinden.

Klicken Sie auf das blaue "Plus-Zeichen“. Der Block wird nun im Block-Inserter unter Vorlagen und dem entsprechenden Ordner angezeigt.

Synchronisierte Vorlagen

Wenn Sie den Button Synchronisiert im unteren Bereich des Fensters "Neue Vorlage hinzufügen" aktivieren, bedeutet dies, dass künftige Änderungen an der Vorlage sich global auf alle Instanzen dieser Vorlage auswirken.

Dies bedeutet, wenn Sie beispielsweise den Text einer synchronisierten Vorlage ändern, wird dieser Text auch auf allen Seiten aktualisiert, auf denen diese Vorlage noch verwendet wird.

Synchronisierte Vorlagen eignen sich daher gut für Inhalte, die überall gleich sein sollen. Wenn Sie die Vorlage unabhängig voneinander einsetzen wollen, dann sollten Sie die Option "Synchronisiert" abschalten. Änderungen an einer Vorlage wirken sich dann nur an der Stelle aus, an der sie eingesetzt und direkt bearbeitet wurde.

Vorlagen in Beiträge und Seiten einfügen

Block hinzufügen

Um die gespeicherte Vorlage auf einer anderen Seite oder in einen Beitrag einzufügen, klicken Sie oben in der Werkzeugleiste auf das blaue Pluszeichen (+). Es öffnet sich wieder das Inserter-Fenster mit den Auswahlmöglichkeiten Blöcke, Vorlagen und Medien.

Unter Vorlagen finden Sie Ihre zuvor gespeicherte Vorlage im "Alle"-Ordner" und im dem Ordner/der Kategorie, der Sie die Vorlage zugewiesen haben.

Synchronisierte Vorlagen erkennt man an den beiden lila Rauten, die vor dem Block-Namen stehen.

Hier sehen Sie ein Beispiel für die Darstellung einer nicht synchronisierten Block-Vorlage und einer synchronisierten Block-Vorlage (lila umrandet), nachdem Sie in die Seite eingefügt wurde.

Bearbeiten von Vorlagen

Um den Inhalt einer Block-Vorlage zu ändern, fügen Sie die Vorlage in einen Beitrag oder eine Seite ein und klicken in der Werkzeugleiste auf "Original bearbeiten". Der Block wird darauf in einem eigenen Bearbeitungsfenster geöffnet und kann direkt bearbeitet werden.

Bei einer synchronisierten Vorlage werden diese Änderungen automatisch auf alle Instanzen der Vorlage auf der gesamten Website angewendet, sobald Sie die Änderungen gespeichert haben.

Per Klick auf "Zurück" in der oberen Leiste, gelangen Sie wieder in das Ursprungsdokument.

Verwaltung von Vorlagen

Um alle Vorlagen zu sehen, zu bearbeiten oder zu löschen, klicken Sie in der oberen Werkzeugleiste auf die drei vertikalen Punkte in der rechten Ecke und wählen „Vorlagen verwalten“.

Alternativ erreicht man die Vorlagen-Verwaltung im WordPress Backend über Design > Vorlagen.

In der Verwaltung können Sie die Vorlagen umbenennen, bearbeiten oder löschen. Achten Sie darauf, dass das Löschen einer synchronisierten Vorlage sich auf alle Beiträge und Seiten auswirkt, auf denen sie verwendet wurde.

Möchten Sie eine synchronisierte Vorlage auf nicht synchronisiert setzen, duplizieren Sie die synchronisierte Vorlage und speichern diese als neue nicht synchronisierte Vorlage ab.

An der FAU werden häufig Tabellen verwendet, um Informationen wie Stundenpläne, Forschungsergebnisse, Kursangebote uvm. strukturiert und übersichtlich darzustellen.

Bilder können Tabellen informativer und ansprechender machen. Im Block-Editor ist das Hinzufügen von Bildern zu Tabellen über die Option "Inline-Bild" möglich.

Hinweis: Das Einfügen von Inline-Bildern in Tabellen im FAU Elemental Theme ist nicht empfohlen. Um Bild und Text einzubinden, empfehlen wir den Medien & Text Block oder den Spalten-Block.

Anleitung

Schritt 1: Tabellenblock hinzufügen

1. Öffnen Sie einen neuen oder bestehenden Beitrag/Seite.
2. Fügen Sie den Tabellenblock in den Editor ein.
3. Definieren Sie die gewünschte Anzahl von Zeilen und Spalten.

---

Schritt 2: Bild in Tabellenzelle einfügen

1. Klicken Sie in die Zelle, in der das Bild platziert werden soll.
2. Klicken Sie auf Mehr in der Werkzeugleiste des Blocks.
3. Wählen Sie die Option Inline-Bild. Es öffnet sich das Mediathek-Fenster.

---

Schritt 3: Bild auswählen

Sie haben zwei Optionen für die Bildauswahl:

• Das Bild aus der WordPress-Mediathek wählen, falls das Bild bereits hochgeladen wurde.
• Das Bild von Ihrem lokalen Laufwerk hochladen.

Wählen Sie das gewünschte Bild aus. Es erscheint nun in der zuvor ausgewählten Tabellenzelle.

---

Schritt 4: Bild anpassen

Nachdem das Bild in die Zelle eingefügt wurde, können Sie noch Größe und Alternativtext definieren. Klicken Sie auf das Bild und es öffnet sich ein Fenster mit den Einstellungsmöglichkeiten.

Tipps

- Achten Sie auf einheitliche Bildgrößen für ein professionelles Aussehen
- Komprimieren Sie Bilder vor dem Upload für bessere Ladezeiten
- Verwenden Sie aussagekräftige Bilder, die Ihre Tabelleninhalte ergänzen

Der Spalten-Block ermöglicht es, Inhalte in mehreren nebeneinanderliegenden Spalten anzuordnen.
Diese Funktion ist nützlich für Layouts, die eine visuelle Unterteilung des Inhalts erfordern.
Beispielsweise Text und Bild nebeneinander dargestellt.

1 Spaltenblock hinzufügen

1. Klicken Sie in der Werkzeugleiste auf das "+" Symbol (Block Inserter).
2. Suchen Sie im Blockauswahlfenster nach dem Spalten Block.
3. Klicken Sie auf den Spalten Block, um ihn in einem Beitrag oder einer Seite einzufügen.

2 Spaltenlayout auswählen

Bei der Auswahl des Spaltenblocks werden bereits einige Layouts vorgeschlagen.

Sowohl Spaltenanzahl, als auch Aufteilung lassen sich nach der Auswahl noch verändern:

Wenn Sie sich im übergeordneten Blockelement befinden (hier blau markiert), können Sie in der Seitenleiste die Spaltenanzahl erhöhen oder reduzieren.

Wenn Sie die Breite der Spalten verändern möchten, dann klicken Sie auf die jeweilige Spalte und passen die Breite in den Blockeinstellungen (rechte Seitenleiste) an.

Beispiel: linke Spalte mit Text = 70%, rechte Spalte mit Bild = 30%