- Klicke auf die Schaltfläche „Neues Inhaltselement erstellen“.
- Das Fenster „Neues Inhaltselement erstellen“ wird angezeigt. Die verfügbaren Inhaltselemente hängen von der Konfiguration deiner TYPO3-Installation und den installierten Erweiterungen ab.
- Typische Seiteninhalte: Füge reguläre Text- und Bildinhalte hinzu, um Standard-Webseiten zu erstellen.
- Formularelemente: Erstelle ein Login- oder Kontaktformular.
- Menüelemente: Stelle ein Menü oder eine Liste von Seitenlinks auf verschiedene Weise dar.
- Plugins: Werden durch Erweiterungen bereitgestellt und hängen von der Plugin-Architektur oder der Backend-Konfiguration ab.
- Spezialelemente: Füge HTML-Code oder einen horizontalen Trenner ein. Mit „Datensätze einfügen“ kannst du andere Inhaltselemente referenzieren, ohne sie zu duplizieren.
- Klicke auf das Symbol „+ Inhalt“ an der Stelle auf der Seite, an der du Inhalt einfügen möchtest.
- Wähle im Tab „Typische Seiteninhalte“ das Element „Text & Medien“. Der Bildschirm „Neuer Seiteninhalt erstellen“ erscheint.
- Gib im Feld „Überschrift“ einen Titel wie „Mein neues Inhaltselement“ ein.
- Im Textbereich kannst du Text eingeben, der mit einem Rich-Text-Editor (RTE) bearbeitet wird.
- Speichere und schließe das Inhaltselement. Der neu hinzugefügte Inhalt wird auf der Seite angezeigt.
- Klicke auf einer Seite auf das Stiftsymbol des Inhaltselements, das du bearbeiten möchtest, und nimm die gewünschten Änderungen am Text und anderen Einstellungen vor.
- Du kannst auch den Typ des Inhaltselements ändern, indem du einen neuen Elementtyp aus der Liste auswählst.
- Wenn du den Typ eines Inhaltselements änderst, lädt TYPO3 das Formular neu, um die entsprechenden Eingabefelder anzuzeigen.
- Diese Aktion löscht den Inhalt nicht; der Inhalt wird im Hintergrund gespeichert und wiederhergestellt, wenn du den ursprünglichen Inhaltstyp erneut auswählst.
Tipp: Für mehr Komfort kannst du im Backend verschiedene Tastaturbefehle nutzen.
Die Arbeit mit Inhalten erfolgt hauptsächlich im Modul Web > Seite. Dieses Modul hat zwei Modi: „Spalten“ und „Sprachen“. Für die Bearbeitung wollen wir im „Spalten“-Modus arbeiten. Du kannst den Modus im Docheader-Menü umschalten.
- Seitenansicht: Im Backend werden die Inhalte der Seite in verschiedenen Bereichen (Spalten) wie „Rand“, „Mitte: Links“, „Mitte: Mitte“ usw. dargestellt. Viele Symbole sind ausgegraut oder erscheinen erst, wenn du über bestimmte Bereiche fährst.
- Typische Seitensymbole:
- Bearbeite alle Inhaltselemente einer Spalte.
- Füge ein neues Inhaltselement an einer bestimmten Stelle in der Spalte hinzu.
- Das Inhaltselementsymbol gibt Hinweise auf den Typ des Elements. Klicke darauf, um das Kontextmenü für Aktionen wie Kopieren zu öffnen.
- Beim Überfahren eines Elements wird eine Gruppe von Symbolen aktiv:
- Stiftsymbol: Element bearbeiten.
- Aktivieren/Deaktivieren des Elements, um es im Frontend anzuzeigen oder auszublenden.
- Element löschen.
- Verschieben von Inhaltselementen:
- Elemente können per Drag-and-Drop verschoben werden. Ziehe in der grauen Leiste oben am Inhaltselement, und die hervorgehobenen Bereiche zeigen dir, wo du es ablegen kannst.
- Du kannst auch Inhaltselemente von einer Seite zur anderen im Modul Web > Liste mit Ausschneiden und Einfügen verschieben. Weitere Informationen zur Verwendung der Zwischenablage findest du im entsprechenden Kapitel.
Der Texteditor in TYPO3 ähnelt einem Textverarbeitungsprogramm. Die Optionen in der Symbolleiste variieren je nach Konfiguration deiner TYPO3-Installation.
- Formatierung: Du kannst Text formatieren, die Ausrichtung festlegen, Tabellen und Symbole einfügen sowie interne und externe Links hinzufügen.
Erstellen eines Links:
- Markiere den Text, den du verlinken möchtest.
- Klicke auf das Link-Symbol in der Symbolleiste. Es öffnet sich das Link-Browser-Fenster.
- Interne Links: Du kannst auf eine interne Seite, Datei, einen Ordner oder ein Inhaltselement verlinken. Wähle die gewünschte Seite im Seitentree aus. Alternativ kannst du zu einem bestimmten Anker auf der Seite verlinken, indem du das Pfeilsymbol neben dem Seitennamen anklickst und das gewünschte Inhaltselement auswählst.
- Externe Links: Wähle im Link-Browser-Fenster den Tab „Externe URL“, gib die URL ein und wähle im „Target“-Dropdown „Neues Fenster“ aus, um den Link in einem neuen Fenster zu öffnen.
Entfernen eines Links:
- Um einen Link zu entfernen, setze den Cursor in den verlinkten Text und klicke auf das „Link entfernen“-Symbol in der Symbolleiste.
Für Inhaltselemente, die Bilder unterstützen (wie „Text & Bilder“, „Text & Medien“, „Nur Bilder“), gibt es beim Erstellen oder Bearbeiten des Inhaltselements einen Tab „Bilder“.
Bilder hinzufügen:
- Bilder zentral hochladen: Am besten lädst du neue Bilder über das Modul Dateien > Dateiliste hoch. Auf diese Weise werden die Dateien zentral gespeichert und alle Informationen oder Metadaten werden überall auf der Website verwendet, wo das Bild eingesetzt wird.
- Dateien anfügen: Wenn du den Button „Dateien auswählen & hochladen“ verwendest, wird die Bilddatei direkt an die Seite angehängt und in den Ordner „user_uploads“ in der Dateiliste hochgeladen. Es ist jedoch empfehlenswert, Bilder über den Button „Bild hinzufügen“ oder direkt im Modul Dateien > Dateiliste hochzuladen und zu organisieren.
Bild zu einer Seite hinzufügen:
- Klicke im Tab „Bilder“ auf den Button „Bild hinzufügen“. Es öffnet sich das Fenster zur Dateiauswahl.
- Durchsuche den Dateibaum und wähle einen Ordner aus.
- Aktiviere das Kästchen „Vorschaubilder anzeigen“, um eine Vorschau der Bilder im Ordner zu sehen.
- Klicke auf den Namen eines Bildes, um es auszuwählen, oder klicke auf das + Symbol, um mehrere Bilder auszuwählen, bevor du das Fenster schließt.
Bild konfigurieren:
- Metadaten des Bildes: Verwende den kleinen Pfeil neben dem Vorschaubild, um diesen Abschnitt ein- oder auszuklappen. Hier kannst du allgemeine Metadaten wie Beschreibung und Alt-Text hinzufügen und einen Link zum Bild einfügen. Wenn das Bild über das Modul Dateien > Dateiliste hinzugefügt wurde, stammen die Informationen hier aus der Dateiliste. Du kannst diese Metadaten bei Bedarf überschreiben, um spezifische Werte für das aktuelle Inhaltselement festzulegen.
- Medienanpassungen: Lege manuell die Breite und Höhe des Bildes in Pixeln fest und wende einen Rahmen an.
- Galerieeinstellungen: Wähle die Position des Bildes relativ zum Text aus. Bilder werden automatisch in Spalten, zwei nebeneinander, angeordnet. Du kannst dieses Verhalten im Feld „Anzahl der Spalten“ ändern.
- Verhalten: Aktiviere die Einstellung „Bei Klick vergrößern“, um das Bild in einem Lightbox-Display anzuzeigen.
Ähnlich wie bei Bildern ist es am besten, neue Video- und Audiodateien über das Modul Dateien > Dateiliste hochzuladen. So werden die Dateien zentral gespeichert, und alle Informationen oder Metadaten werden auf der gesamten Website verwendet, wo die Mediendatei eingebunden ist.
- Dateien direkt anhängen: Wenn du den Button „Dateien auswählen & hochladen“ verwendest, wird die Mediendatei direkt an die Seite angehängt und in den Ordner „user_uploads“ hochgeladen.
Tipp: Dateien, die nur über „Dateien auswählen & hochladen“ hinzugefügt werden, sammeln sich schnell im Ordner „user_uploads“. Es ist besser, die Dateien über den Button „Medien hinzufügen“ oder direkt im Modul Dateien > Dateiliste hochzuladen und zu organisieren.
Video zu einer Seite hinzufügen:
- Gehe zum Tab „Medien“ und klicke auf den Button „Medien-Datei hinzufügen“. Folge dem gleichen Prozess wie beim Hinzufügen eines Bildes.
- Alternativ kannst du den Button „Medien per URL hinzufügen“ klicken, um einen Link zu einer Video- oder Audiodatei aus dem Web einzufügen.
Video konfigurieren:
- Autoplay: Bestimme, ob das Video automatisch starten soll, sobald die Seite geladen wird.
- Weitere Einstellungen: Konfiguriere verschiedene Optionen für Mediendateien (z. B. Rahmen hinzufügen, Position auf der Seite und Verhalten), ähnlich wie bei der Konfiguration von Bildern.
Du kannst ein Formular im Modul Web > Formulare erstellen. Diese Systemerweiterung muss von deinem Administrator aktiviert werden. Sie ist in TypoScript geschrieben und vollständig im Handbuch zur Form-Framework-Systemerweiterung dokumentiert.
Formular erstellen:
- Formular erstellen:
- Im Modul Web > Formulare klicke auf den Button „+ Neues Formular erstellen“. Der Assistent „Neues Formular erstellen“ wird angezeigt.
- Wähle, ob du ein leeres Formular erstellen oder ein vordefiniertes Formular verwenden möchtest. Wähle in diesem Fall „Vordefiniertes Formular“.
- Wähle das vordefinierte „Einfaches Kontaktformular“ aus und gib einen Namen für das Formular ein.
- Überprüfe die Einstellungen und klicke erneut auf „Weiter“.
- Wähle im Startvorlagen-Listeneintrag „Einfaches Kontaktformular“ und gib einen Namen für das Formular ein.
- Klicke auf „Weiter“ und dann auf „Fertigstellen“. Dein neues Formular wird angezeigt.
- Formular anpassen:
- Das vordefinierte „Einfache Kontaktformular“ hat bereits einige voreingestellte Konfigurationen, die du jedoch bearbeiten und um zusätzliche Felder erweitern kannst. Zum Beispiel kannst du die Zusammenfassungsseite löschen und die Beschriftungen der Schaltflächen ändern.
- Füge das Formular einer Seite hinzu, wie du es mit jedem Inhaltselement tun würdest. Wähle im Tab „Formularelemente“ die Option „Formular“.
- Gehe im Formular-Inhaltselement zum Tab „Plugin“ und wähle im Dropdown „Formulardefinition“ dein Formular aus.
- Gib im Tab „Allgemein“ einen Header für dein Formular ein und speichere und schließe den Datensatz.
- Vorschau der Seite anzeigen, um zu sehen, wie das Kontaktformular im Frontend aussieht.
Formular von Grund auf neu erstellen:
- Neues Formular erstellen:
- Im Modul Web > Formulare klicke auf den Button „+ Neues Formular erstellen“.
- Wähle im Assistenten „Neues Formular erstellen“ die Option „Leeres Formular“.
- Gib deinem Formular einen Namen, klicke auf „Weiter“ und dann auf „Fertigstellen“. Ein leeres Formular wird angezeigt.
- Formularfelder hinzufügen:
- Klicke auf den Button „Neues Element erstellen“. Das Fenster „Neues Element“ wird angezeigt.
- TYPO3 bietet standardmäßig über zwanzig Formularfelder, darunter:
- Grundlegende Elemente wie Text- oder Passwortfelder
- Spezielle Elemente mit spezifischer Formatvalidierung, wie Telefonnummern oder Daten
- Auswahlfelder wie Kontrollkästchen oder Mehrfachauswahl
- Erweiterte Elemente mit speziellen Regeln, wie Benutzer-Uploads oder Kalender-Datumsauswähler
- Container-Elemente zur visuellen Organisation von Umfragen
- Wähle ein Formularfeld aus und konfiguriere die Einstellungen für das Feld (z. B. Platzhaltertext und Feldvalidierung) auf der rechten Seite des Bildschirms.
- Vorschau und Bearbeitung:
- Klicke auf das Vorschau-Symbol, um eine Vorschau deines Formulars im Frontend anzuzeigen.
- Nutze das Bearbeitungs-Symbol, um zur Bearbeitung deines Formulars zurückzukehren.
Arbeiten mit Formularen:
- Wenn du mehrere Felder zu deinem Formular hinzugefügt hast, kannst du sie per Drag-and-Drop neu anordnen.
- Klicke auf den „Einstellungen“-Button oben im Formular, um „Abschlussaktionen“ wie eine Bestätigungsnachricht oder Weiterleitung zu einer anderen Seite hinzuzufügen.
- Du kannst Erweiterungen in bestehende Formulare integrieren, z. B. zur nahtlosen Verknüpfung mit Mautic für eine umfassende Lead-Verfolgung.