Zum Hauptinhalt springen

Content Elemente bearbeiten

Grundsätzliches

Jedes Content Element (CE) hat im Kopfbereich oben rechts drei Symbole. Von rechts nach links: einen Mülleimer für das Löschen, einen Schalter für das Ein- und Ausblenden sowie einen Stift für die Bearbeitung des Inhalts und der Einstellungen.

Nach der Bearbeitung muss das CE mit einer der Sicherungsoptionen im Kopf des Bearbeitungseditors gespeichert bzw. alternativ ohne speichern geschlossen (x) oder gelöscht (Papierkorb) werden.

Des Weiteren verfügt jedes CE über eine Anzahl von Reitern. Obligatorisch für alle CE sind die Reiter

  • Erscheinungsbild: hier werden Rahmen, Hintergrundfarben oder Hintergrundbilder definiert, Abstände zu vorherigen oder folgenden Contente Elementen und verschiedene Bildeffekte.
  • Sprache: wird nicht verwendet
  • Zugriff: Hier wird die Sichtbarkeit gesteuert (aktiviert/deaktiviert), zusätzlich kann ein Veröffentlichungsdatum oder ein Ablaufdatum gesetzt werden, zu denen das Content Element automatisch ein- bzw. ausgeblendet wird.
  • Kategorie: wird derzeit nur für News verwendet, für normale Content Elemente irrelevant
  • Hinweise: Interne Anweisungen, Anmerkungen Erinnerungen für weitere Webmaster oder einen selbst.
  • Grid Elements: Zuordnung eines Content Elements zu einem Grid-Raster. Für uns nicht relevant
  • Animation: Effekt, der bei Erscheinen des Content Elements im Viewport ausgeführt werden kann (wird z.B. bei den Kontakt-Slidern für Ansprechpartner verwendet)

Je nach Typ des CE sind weitere Reiter möglich, wie z.B. Bilder.

Content Element Typ Text bearbeiten

Beispiel: Telefon-Hotline im Seitenfuß unten links

  1. Werkzeug »Seite« anwählen
  2. Im Seitenbaum die Startseite (Globus-Icon) auswählen
  3. Im Backend-Layout nach unten scrollen bis zu den Zonen »Fußleiste«
  4. In »Fußleiste links« das Text-Element »Telefon-Hotline« suchen
  5. Auf den Bearbeitungsstift klicken
  6. Im Reiter allgemein im Feld Text die Telefonnummer austauschen
  7. Im Kopf des Bearbeitungs-Editors z.B. die Speicheroption »Speichern und schließen« anklicken
  8. Auf das Vorschau-Symbol klicken
  9. Im zweiten Browser-Tab die Änderung prüfen.
  10. Zurück auf den ersten Browser-Tab gehen.

Content Element Typ Bild bearbeiten

Beispiel: Galerie der Vorstandsmitglieder auf der Seite Vorstand.

  1. Werkzeug Seite auswählen und Seite Vorstand im Seitenbaum anklicken
  2. Im Backend-Layout-Bereich »Rechts« das CE Typ Bild mit Klick auf das Stiftsymbol im Kopf rechts öffnen
  3. In den Reiter Bilder wechseln
  4. Vorhandene Musterbilder jeweils durch Klick auf Papierkorb löschen
  5. Bilder hinzufügen anklicken
  6. Im Verzeichnisbaum den Ordner Bilder auswählen
  7. Unterhalb der Bilderliste bei Dateien hochladen auf »Dateien auswählen« klicken
  8. Die gewünschten Bilder auf dem Computer suchen und alle gleichzeitig auswählen
  9. Die hochgeladenen Bilder in der Bildliste markieren und die markierten Bilder übernehmen
  10. Die Bilder werden in das CE übernommen
  11. Im Feld Beschreibung jeweils den Namen des Vorstandes eintragen
  12. Falls notwendig, mit dem Bildeditor die Bildformate angleichen
  13. Die gewünschte Anzahl der Bildspalten angeben
  14. Die Option »Bei Klick vergrößern« aktivieren/deaktivieren
  15. Über eine der Speicheroptionen in Kopf das CE abspeichern
  16. Über den Vorschau-Button im zweiten Browsertab das Ergebnis überprüfen
  17. Ggf. Anpassungen vornehmen.

Neues Content Element Typ »Text« mit Bild erstellen

Hier wird die Erstellung eines neuen Content Elementes gezeigt.

  1. Im Backend Layout auf der entsprechenden Seite an der gewünschten Stelle den Button »+ Inhalt« klicken.
  2. Im Reiter »Allgemein« den Typ »Text und Bilder« auswählen
  3. Ggf. Überschrift und Unterüberschrift eingeben
  4. Text eingeben
  5. Im Reiter »Bilder« die gewünschten Bilder hinzufügen und konfigurieren
  6. Die Platzierung der Bilder im Verhältnis zum Text wählen
  7. Bilder verlinken oder Vergößerungsfunktion auswählen.

Content Element Typ Carousel bearbeiten

Das Content Element Typ Carousel wird für die großen Slider im Seitenkopf verwendet. Wir wollen das 1. Bild austauschen und die Überschrift anpassen.

  1. Für die Bearbeitung wird für das Content Element über das Stift-Symbol im Kopfbereich des Elementes der Editor aufgerufen.
  2. Unter den für jedes Content Element üblichen Feldern für Typ, Überschrift, Link und Unterüberschrift, die hier allesamt leer bleiben, findet man die Karussel-Elemente.
  3. Nun können Sie über die Symbole rechts (Stift, Schalter, Mülleimer, etc.) die Karussel-Elemente verwalten. Um die Reihenfolge zu ändern, klickt man auf die Pfeile nach oben/unten oder zieht es am 3-Linien-Symbol nach oben oder unten. Zum Löschen eines Elementes klicken Sie auf den Mülleimer, zum Ausblenden auf den Schalter. Mit + können Sie nach dem aktuellen ein zusätzliches Element einfügen.
  4. Für die weitere Bearbeitung öffnen Sie das 1. Element über das kleine Dreick links for der Bezeichnung »Herzlich Willkommen«.

Der Editor für die Karussel-Elemente hat drei Reiter, Allgemein, Hintergrund und Zugriff.

Reiter Allgemein:

  1. Wir verwenden grundsätzlich Elemente vom Typ »Überschrift«.
  2. In das Feld Überschrift wird der Text für die erste Zeile eingetragen, in das Feld Zwischenüberschrift wird die zweite Zeile eingetragen.
  3. Bei Layout muss für beide Felder H2 eingetragen werden. Die Textfarbe muss #ffffff lauten.

Reiter Hintergrund:

  1. Bei Hintergrundfarbe #ffffff eintragen.
  2. Das Hintergrundbild wollen wir austauschen und löschen es daher durch Klick auf den Papierkorb.
  3. Nun kann über den Button »Bild hinzufügen« ein neues Bild eingefügt werden. In einem Popup-Fenster öffnet sich dafür zusätzlich die Dateiliste mit dem Verzeichnisbaum.
  4. Wählen Sie den Ordner mit dem gewünschten Bild bzw. in den Sie ein neues Bild hinzufügen möchten.
  5. Wählen Sie in der Liste ein Bild aus oder laden Sie über den Button unterhalb der Liste ein neues Bild hoch.
  6. Für eine Bildvorschau aktivieren Sie »Vorschaubilder anzeigen«
  7. Beachten Sie, das Slider-Bilder für diesen Zweck geeignet sein müssen. Je nach Bildschirmgröße werden Sie oben und unten angeschnitten. Das wesentliche Moment des Bildmotivs sollte sich daher bestenfalls in der vertikalen Mitte des Bildes befinden, die Bildbereiche darüber und darunter sollten notfalls abgeschnitten werden können!
  8. Bei Bildbearbeitung können Sie über Editor öffnen den Bildausschnitt für die verschiedenen Bildschirmgrößen (PC, Notebook, Tablet, Smartphone) optimal einstellen.
  9. Nach allen Änderungen das Abspeichern und schließen ganz oben nicht vergessen!
  10. Auf das Vorschausymbol klicken und im zweiten Reiter im Frontend das Ergebnis begutachten. Falls hier noch die alte Version angezeigt wird, einfach die Seite im Browser neu laden (Shift-F5).

 

 

Kartengruppe bearbeiten

Eine Kartengruppe ist ein Menü, das an auf einem Tisch ausgelegte Spielkarten erinnert. Es wird auf der Startseite als Übersicht- und Weiterleitungsinstrument genutzt, kann aber auch auf Unterseiten ergänzend eingesetzt werden. Eine Karte besteht aus einem Bild, einer Headline, einem Teasertext und einem Link-Button.

  1. Zum Bearbeiten der Kartengruppe auf den Stift oben rechts klicken.
  2. In den 2. Reiter »Optionen« wechseln, dort kann die Anzahl der nebeneinander angeordneten Karten zwischen 1 und 4 und die horizontale Aussrichtung der Texte eingestellt werden
  3. Zurück in den Reiter »Allgemein« wechseln
  4. Im Feld Inhaltskarte bedinden sich die einzelnen Kartenmodule
  5. Über die Symbole rechts können die Kartenmodule verwaltet werden (ausblenden, löschen, verschieben, hinzufügen)
  6. Zusätzliche Karten können über den Button »Neu anlegen« generiert werden.
  7. Durch klick auf das kleine Dreieck am linken Rand kann das Kartenmodul geöffnet werden
  8. Überschrift, Zwischenüberschrift, Bild und Text bearbeiten
    Bei der Auswahl des Bildes ist zu beachten, dass alle Karten die gleichen Bildproportinen (16:3/4:3/1:1 oder benutzerdefiniert) benötigen! Diese können im Bildeditor während der Auswahl für alle Bildschirmgrößen festgelegt werden
  9. Durch Klick auf das linke Symbol Im Feld Link kann der aktuelle Link gelöscht werden, das rechte Symbol ermöglicht die Wahl eines neuen Links über den Link-Browser
  10. Im Feld Title kann die Beschriftung des Link-Buttons eingegeben werden
  11. Im Feld Icon kann ein Symbol für den Link-Button ausgewählt werden (nur SVG-Dateien!)
  12. Im Feld Farbe kann das Aussehen des Link-Buttons bearbeitet werden.
  13. Nach der Bearbeitung das Speichern über eine der Speicheroptionen im Kopf des Content Elements nicht vergessen!
  14. Über den Vorschau-Button in einem zweiten Browser-Tab die Darstellung im Frontend prüfen (ggf. neu laden mit Shift-F5)
  15. Karte ggf. nachbearbeiten.

Ansprechpartner bearbeiten

Bei der Darstellung der verschiedenen Leistungsbereiche sollten die Ansprechpartner benannt werden. Die Ansprechpartner werden rechts neben dem Einleitungstext (Teaser) einer Seite per Animation herausgefahren, um so eine größere Beachtung zu finden. Die Pflege der Ansprechpartner ist nicht schwer, es ist im Prinzip ein Content Element (CE) vom Typ Text.

  1. Im Backend im Layout-Bereich »Normal« befindet sich auf Seiten mit Ansprechpartner ein Grid Element, zu erkennen an einer blauen Umrandung und der Beschriftung Spalte 1, Spalte 2 etc. Hierin befindet sich in der 2. Spalte ein CE vom Typ Text.
  2. CE über das Stiftsymbol im Kopf öffnen
  3. Textbereiche unter Beachtung der Formatierung durch die gewünschten Bezeichnungen und Namen ersetzen
  4. Doppelklick auf eMail, der Link-Browser erscheint. Hinterlegung der korrekten eMail-Adresse des Ansprechpartners und beenden durch Klick auf »Link setzen«
  5. Speichern durch eine der Speicheroptionen im Kopf des CE nicht vergessen
  6. Klick auf den Vorschau-Button und Überprüfung der Änderung im Frontend. Ist keine Änderung sichtbar, mit Shift-F5 den Browsercache löschen und die Seite neu laden.

Richtig Links setzen mit dem Link-Browser

Links werden in Typo3 an verschiedenen Stellen gesetzt: Headlines, Bilder, Buttons, Textstellen etc., alles lässt sich auf einfache Art und Weise mit dem Link-Browser verlinken, wie das folgende Video zeigt:

 

Bei externen Links ist es erwünscht, dass sich der Link in einem weiteren Browsertab oder -fenster öffnet.

  1. Linksymbol klicken
  2. Im Link-Browser den Reiter Externe Links anwählen
  3. Als Ziel neue Seite angeben
  4. Wenn man eine CSS-Class auswählt, erscheint zusätzlich ein Symbol neben dem Link
  5. Die externe Adresse angeben
  6. Link setzen

Möchte man den Link als Button anzeigen lassen, kann man dies über die Stildefinition einstellen:

  1. Link-Bereich im Text-Editor auswählen
  2. Im Stil-Menü eine der Button-Stile oder Button-Outline-Stile auswählen
  3. Speichern nicht vergessen!
  4. Im Vorschau-Modus die Darstellung prüfen.