5 Verschiedene Inhaltselemente anlegen

Transkript

1 5 Verschiedene Inhaltselemente anlegen 5.1 Überschrift Bei den meisten Inhaltselementen können Sie eine Überschrift gleich mit eintragen, die dann über dem jeweiligen Inhalt erscheint. Möchten Sie jedoch beispielsweise eine Seitenüberschrift und direkt darunter eine Zwischenüberschrift anlegen, benötigen Sie das Inhaltselement Überschrift. Seitenüberschrift Im Feld Überschrift Überschrift eintragen. Unter Typ Seitenüberschrift wählen. Zwischen- oder Unterüberschrift Im Feld Überschrift Überschrift eintragen. Unter Typ Erweiterung Unterüberschrift oder Zwischenüberschrift wählen. Alle Überschriften sind blau, sie unterscheiden sich jedoch in der Größe. Element speichern und schließen. Tipp: Verwenden Sie den Typ Seitenüberschrift nur einmal ganz oben auf einer Seite. 5.2 Bilder Zum Einfügen von Bildern Inhaltselement Text und Bilder oder Bilder wählen. Inhaltselement Text und Bilder In dem Inhaltselement Text und Bilder können Sie eine Überschrift, Text und ein Bild oder mehrere Bilder einfügen. (Bearbeitung des Textes siehe Kapitel 4.5 Bearbeiten von Text und 4.6 Links und Downloads einfügen ) Mehrere Bilder werden untereinander ausgegeben. Die angegebene Bildbreite und Bildposition gilt für alle Bilder. 25

2 Die im Handbuch angegebenen Bildgrößen beziehen sich darauf, dass die Navigationsleiste links steht und die rechte Spalte zugeschaltet ist (also drei Spalten). Der Inhaltsbereich ist dann 420 Pixel breit, das ist auch die Maximalgröße für die Bilder. Auf Seiten ohne rechte Spalte stehen Ihnen 685 Pixel zur Verfügung. Tipp: Für ein Text und Bilder -Element können Sie z. B. folgende Bildmaße verwenden: - Querformat: Originalbild x 800 Pixel, Eingabe im Feld Breite (Pixel) : 250 oder 300 Pixel - Hochformat: Originalbild 800 x Pixel, Eingabe im Feld Breite (Pixel) : 200 oder 250 Pixel Damit man das Bild in der Originalgröße anschauen kann, setzen Sie ein Häkchen bei Bei Klick vergrößern. Inhaltselement Bilder Mit dem Inhaltselement Bilder können Sie ein Bild oder mehrere Bilder in Reihen auf Ihrer Website einfügen. Wenn Sie eine Überschrift oder einen Einleitungstext über die Bilder setzen möchten, stellen Sie ein Text-Inhaltselement davor. Tipp: Für ein Bilder -Element empfehlen wir folgende Bildmaße für Querformat-Bilder: - Orginalmaße für alle Bilder x 800 Pixel - 1 Bild: wird automatisch auf die Maximalbreite 420 Pixel skaliert - 2 Bilder nebeneinander: werden automatisch auf je 200 Pixel Breite skaliert (332 Pixel ohne rechte Spalte) - 3 Bilder: 130 Pixel (220 Pixel ohne rechte Spalte) Wenn Sie ein Häkchen bei Bei Klick vergrößern setzen, wird das Bild in Originalgröße bzw. an die Bildschirmgröße angepasst angezeigt. Folgende Schritte gelten für beide Inhaltselemente Neben dem Feld Bilder (unter dem Textfeld) auf Ordner Dateien durchblättern klicken. Die Dateiordnerliste ( Verzeichnisbaum ) öffnet sich. Sie können eigene Bilder oder Bilder aus dem landeskirchlichen Internetauftritt ( einfügen. Daher haben Sie zwei Hauptordner zur Auswahl: [Medien] D : Bilder aus Ihrem Baukasten Medien Landeskirche: Bilder von Über das Suche-Feld können Sie nach bestimmten Dateien bzw. Bildern suchen. Auch hier müssen Sie zunächst einen Ordner auswählen, indem Sie diesen anklicken. 26

3 Neues Bild hochladen und einfügen Ordner, in den das Bild geladen werden soll, durch Mausklick auswählen. Der ausgewählte Ordner wird unter Pfad angegeben. Achten Sie darauf, dass Sie einen Ordner Ihres Baukastens ausgewählt haben und nicht einen von Medien Landeskirche (Pfad: fileadmin/mediapool/landeskirche/ ). Sie können keine Bilder in den landeskirchlichen Medienordner laden. Klicken Sie stattdessen auf einen Medienordner Ihres Baukastens. Über Durchsuchen ein Bild oder mehrere Bilder von Ihrem Rechner auswählen. Klick auf Hochladen lädt Bilder in den angegebenen Ordner in Ihrer Dateiverwaltung. Auf den Dateinamen des Bildes klicken, das Sie einfügen möchten. Im Feld Bilder wird nun die eingebundene Bilddatei angezeigt. 27

4 Bereits hochgeladenes Bild einfügen Klicken Sie auf den Ordner und dann auf den Dateinamen des Bildes, das Sie einfügen möchten. Im Feld Bilder wird nun die eingebundene Bilddatei angezeigt. Bilder müssen mit einem Bildbearbeitungsprogramm bearbeitet und komprimiert werden, bevor sie im Internet veröffentlicht werden! Verwenden Sie keinesfalls Bilder direkt von Digitalkameras, weil diese unbearbeiteten Bilder zu groß sind und sehr lange Ladezeiten benötigen. Wählen Sie als Dateiformat JPEG für Fotos und GIF für Grafiken und Logos. Der Dateiname wird beim Hochladen übernommen. Nur 27 Zeichen werden vor der Dateierweiterung dargestellt. Leerzeichen werden automatisch zu Unterstrichen (_), Sonderzeichen (z. B. Umlaute und ß) werden nicht dargestellt. Verwenden Sie deshalb keine Sonderzeichen. Tipp: Ist in der Dateiliste das Feld Vorschaubilder anzeigen ausgewählt, werden kleine Vorschaubilder gezeigt. Ist Vorhandene Dateien überschreiben ausgewählt, werden Dateien, die gleich heißen, ersetzt. 28

5 Bild aus Auswahl entfernen Durch Markieren der Bilddatei (via Klick) und Klick auf Entfernen können Bilder aus der Auswahl entfernt werden. Beschriftung Hier kann eine Bildunterschrift eingeben werden (siehe Abb. oben). Verhalten: Bei Klick vergrößern Wenn Sie dieses Feld aktivieren, können die Besucher Ihrer Seite das Bild in der Originalgröße (maximal jedoch in Bildschirmgröße) anschauen, wenn sie auf das Bild klicken (siehe Abb. oben). Barrierefreiheit: Alternative Texte Der Alternativ-Text wird bei Seitenbesuchern, die wegen Blindheit oder Sehbehinderung auf einen Screenreader (liest Seiteninhalt vor) angewiesen sind, als Ersatz für die Bildinformation vorgelesen. Deshalb sollten Sie wenn Sie keine Bildunterschrift eingegeben haben wenigstens einen Alternativ-Text eintragen. Er erscheint auch, wenn man mit der Maus über das Bild fährt. Beschreiben Sie kurz, was auf dem Bild zu sehen ist (siehe Abb. unten). Bildeinstellungen: Bildbreite Über das Feld Breite legen Sie die Bildbreite fest; die Bildhöhe wird automatisch im richtigen Verhältnis angepasst. Geben Sie die gewünschte Bildbreite in Pixel an, z. B. 150 (siehe Abb. unten). Achtung: Der hier eingegeben Wert darf nicht größer als die tatsächliche Breite des Bildes sein (siehe Hinweis)! Die Maximalbreite von 420 Pixel auf Seiten mit rechter Spalte und 685 Pixel auf Seiten ohne rechte Spalte darf nicht überschritten werden. Größere Bilder werden automatisch auf diese Maximalbreite skaliert. Um größere Bilder anzeigen zu lassen, verwenden Sie die Funktion Bei Klick vergrößern. Außerdem sollte der eingegebene Wert nicht größer als die Originalgröße des Bildes sein, da dieses sonst aufgerastert und somit sehr unscharf dargestellt wird. Bildausrichtung Geben Sie die Position an, an der das Bild stehen soll: Oben mittig (beim Element Bilder so vorgegeben, keine Option möglich), Im Text rechts oder Im Text links. Wenn Sie nichts auswählen, steht das Bild bei Text und Bilder automatisch Im Text links. Bei Bilder ist die Option Oben mittig vom System vorgegeben und kann nicht verändert werden. 29

6 Element Text und Bilder : Element Bilder : 5.3 Banner Ein Banner ist ein verlinktes Bild. Sie können das Inhaltselement Banner entweder im Inhaltsbereich oder in der rechten Spalte (siehe Kapitel 11.3 Rechte Spalte ) verwenden. Maske wie beim Inhaltselement Bilder ausfüllen. Unter Link die Adresse der Seite eintragen, zu der der Besucher beim Klick auf das Bild gelangen soll. Element speichern und schließen. Die maximale Breite für Banner in der rechten Spalte beträgt 250 Pixel. 30

7 So sehen Banner in der rechten Spalte im Frontend aus: 5.4 Bildergalerien Der Diakoniebaukasten bietet zwei Bildergalerien: eine ohne Bildunterschriften: Bildergalerie 1: Impressionen ohne Text eine mit Bildunterschriften: Bildergalerie 2: 15 Bilder mit Text Bildergalerie 1 erstellen: Impressionen ohne Text Um viele Bilder ohne Bildunterschrift zu veröffentlichen, ist Bildergalerie 1: Impressionen ohne Text geeignet. Seite aufrufen, auf der die Bildergalerie erstellt werden soll. Neues Inhaltselement anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Inhaltselement Plug-In einfügen auswählen. Eine Überschrift im Feld Überschrift für die Bildergalerie eingeben. Im Feld Ausgewähltes Plug-In Bildergalerie 1: Impressionen ohne Text auswählen. 31

8 Im Feld Erweiterungsoptionen über Klick auf Datensätze durchblättern Bilder auswählen. Durch Klick auf die Pfeilchen und kann ein markiertes Bild nach oben oder unten verschoben werden. Durch Klick auf Löschen können markierte Bilder wieder aus der Auswahl entfernt werden. Element speichern und schließen. Für die Bilderübersicht werden alle Bilder so skaliert, dass die längste Seite 100 Pixel hat. Wir empfehlen, ausschließlich gleich große Bilder für eine Galerie zu verwenden. 32

9 Bildergalerie erstellen: 15 Bilder mit Text Bei der Bildergalerie 2 können Sie jedem Bild eine Bildunterschrift mitgeben. Seite aufrufen, auf der die Bildergalerie erstellt werden soll. Neues Inhaltselement anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Inhaltselement Plug-In einfügen auswählen. Im Feld Ausgewähltes Plug-In Bildergalerie 2: 15 Bilder mit Text auswählen. 33

10 Um Bilder für die Bildergalerie zusammenzustellen, gehen Sie so vor: In den Feldern Bild 1 bis Bild 15 jeweils auf den Ordner Datensätze durchblättern klicken und das gewünschte Bild einfügen (siehe Kapitel 5.2 Bilder ). In den Feldern Text 1 bis Text 15 die dazugehörige Bildunterschrift eingeben. Element speichern und schließen. Die Bildunterschrift wird im Frontend auf einem transparenten Balken am unteren Bildrand ausgegeben. Bei manchen Bildern (Porträts) wirkt das unschön. Dies sollten Sie bei der Bildauswahl beachten. 5.5 Bild-Text-Teaser Mit diesem Inhaltselement können Sie die Aufmerksamkeit und Neugierde des Besuchers wecken und ihn dann zu einer verlinkten Seite führen und zwar via Bild und Text (engl. teaser = Anreißer, Aufmacher, Lockangebot). Seite aufrufen, auf welcher der Bild-Text-Teaser stehen soll. Neues Inhaltselement anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Als Inhaltselement-Typ Bild-Text-Teaser auswählen. Im Feld Überschrift die Überschrift für den Bild-Text-Teaser eingeben. Bei Link auf Link einfügen klicken. Ihr Seitenbaum öffnet sich. Klick auf die Seite, zu der der Bild-Text-Teaser führen soll. Teasertext (Anreißertext) ins Textfeld eintragen. 34

11 Neben dem Feld Bilder auf Ordner Dateien durchblättern klicken. Die Bilddatenbank öffnet sich. Gewünschtes Bild auswählen (siehe Kapitel 5.2 Bilder ). Im Feld Position Im Text rechts oder Im Text links auswählen. Unter Bildmaße Breite des Bildes in Pixel eintragen (z. B. 200). Element speichern und schließen. Das Bild kann auch weggelassen werden. So sieht das Inhaltselement Bild-Text-Teaser in der Außenansicht (Frontend) aus: 35

12 5.6. Diakonie Startseitenbox Speziell für Diakoniebaukästen gibt es das Inhaltselement Diakonie Startseitenbox. Die Eingabemaske ähnelt der des Bild-Text-Teasers. Sie können eine Überschrift und einen Text eingeben sowie ein Bild einfügen. Bei dem Bild können Sie die Bildbreite festlegen und einen alternativen Text eintragen. So sieht die Diakonie Startseitenbox im Frontend aus: 5.7 Teaserbox zweispaltig Ebenfalls gut geeignet für die Startseite, aber selbstverständlich auch für Unterseiten, ist die zweispaltige Teaserbox (engl. teaser = Anreißer, Aufmacher, Lockangebot). 36

13 Seite aufrufen, auf der die Teaserbox stehen soll. Neues Inhaltselement anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Als Inhaltselement-Typ Teaserbox zweispaltig auswählen. Maske wie gewohnt ausfüllen. Wenn Sie die linke Textbox fertiggestellt haben, wechseln Sie bei den Reitern unter Konfigurationen auf Box Rechts. Maske ebenfalls ausfüllen. Element speichern und schließen. Im Textfeld keinen (weiteren) Link zusätzlich zum Feld Zielseite eintragen. Dieser Link bleibt ohne Funktion. Die Bilder werden in der Breite zwar auf die Maximalbreite der Boxen (205 Pixel bei einer Seite mit rechter Spalte bzw. 340 Pixel bei Seiten ohne rechte Spalte) skaliert, die Höhe ist aber nicht beschränkt. Ein Seitenverhältnis von 16:9 oder 4:3 und die gleiche Größe für beide Bilder ist ideal. Sie können die Box auch einspaltig verwenden, indem Sie nur die Box links ausfüllen. Die Box wird dann über die gesamte Breite ausgegeben: 37

14 5.8 Textbox Mit dem Inhaltselement Textbox kann man auf etwas Besonderes im Inhaltsbereich aufmerksam machen. Innerhalb der Box kann man Text mit den bekannten Werkzeugen gestalten und auch verlinken. 5.9 Tabelle Wir empfehlen Ihnen, Tabellen zu vermeiden. Tabellen führen immer wieder zu Problemen in der Darstellung, insbesondere auf mobilen Endgeräten. Hier werden Tabellen zum Teil gar nicht dargestellt. Auch die Bedienbarkeit der Seiten für Menschen mit Einschränkungen wird durch Tabellen verschlechtert (Barrierefreiheit). Inhaltselement Tabelle Mit dem Inhaltselement Tabelle können einfache Tabellen erstellt werden. Neues Inhaltselement anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Inhaltselement Tabelle auswählen. Bei Tabellenspalten die gewünschte Spaltenzahl auswählen (kann nachträglich geändert werden). Inhaltselement speichern. Neben dem Textfeld auf das Tabellensymbol ( Tabellenassistent ) klicken. Sie bekommen eine einzeilige Tabelle mit der gewählten Spaltenanzahl angezeigt. Durch Klick auf das Plus-Symbol auf der linken Seite bekommen Sie fünf weitere Tabellenzeilen dazu, durch Klick auf das Plus-Symbol unterhalb der Tabelle fügen Sie eine neue Spalte ein. Über das Papierkorb-Symbol können Sie Zeilen und Spalten löschen. Über die Pfeilchen bei den einzelnen Tabellenzeilen und -spalten können Sie diese verschieben. 38

15 So sieht eine über diesen Weg angelegte Tabelle im Frontend aus: In einer über diesen Weg angelegten Tabelle sind Formatierungen oder Verlinkungen nicht oder nur per HTML möglich. Sie können Tabellen aber auch über den Rich-Text-Editor anlegen, dann sind Formatierungen und Links möglich (siehe nächster Abschnitt). Tabelle im Rich-Text-Editor anlegen Tabellen können nicht nur über das Inhaltselement Tabelle, sondern auch im Rich-Text-Editor angelegt werden. Damit kann direkt in einem Textelement eine Tabelle eingefügt werden. Im Gegensatz zum Inhaltselement Tabelle können hier auch Verlinkungen und Formatierungen innerhalb der Tabelle vorgenommen werden. Neues Inhaltselement Text anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Im Rich-Text-Editor Tabelle einfügen anklicken. Ein Popup zum Editieren der Tabelle öffnet sich. Wenn gewünscht einen Titel (Überschrift) für die Tabelle und die Anzahl der Zeilen und Spalten eingeben. Bei Köpfe können Sie angeben, ob eine dunkler hinterlegte Zeile oder Spalte zur Beschriftung der Zeilen bzw. Spalten eingefügt werden soll. 39

16 So sieht eine über diesen Weg angelegte Tabelle im Frontend aus: 5.10 MP3-Datei Im Baukasten können Sie Audiodateien, wie beispielsweise Predigten zum Nachhören, veröffentlichen. Maximale Größe einer Datei, die in den Baukasten geladen werden kann: 25 MB. Seite aufrufen, auf der die MP3-Datei wiedergegeben werden soll. Neues Inhaltselement anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Als Inhaltselement-Typ Plugin einfügen auswählen. Beim Feld Ausgewähltes Plug-In: MP3 Player auswählen. 40

17 Eine Überschrift im Feld Überschrift für die MP3-Datei eingeben. Beschreibung In diesem Feld können Sie eine Beschreibung einfügen. Neben dem Feld Sound auf den Ordner Dateien durchblättern klicken. Die Dateiordnerliste öffnet sich. Neue MP3-Datei hochladen und einfügen Ordner auswählen, in den die Datei geladen werden soll. Der ausgewählte Ordner wird unter Pfad angegeben. Über Durchsuchen MP3-Datei von Ihrem Rechner auswählen. Klick auf Hochladen lädt Datei (max. 25 MB) in den angegebenen Ordner in Ihrer Dateiverwaltung. Auf die MP3-Datei klicken, die Sie einfügen möchten. Bereits hochgeladene MP3-Datei einfügen Klicken Sie auf den Ordner und dann auf die Datei, die Sie einfügen möchten. 41

18 5.11 Videos von YouTube anbieten am Beispiel von kirchenfernsehen.de Sie können von Youtube einen sogenannten Einbettungscode erhalten. Mit Hilfe dieses Codes können sie über das HTML-Inhaltselement des Baukastens ein YouTube-Video auf Ihrer Website anzeigen lassen. Dies ist für bestimmte Beiträge oder eine ganze Youtube-Playlist möglich. Dieser Vorgang wird im Folgenden am Beispiel eines Videos von kirchenfernsehen.de erklärt. Die Fernsehredaktion im Evangelischen Medienhaus berichtet auf regelmäßig über aktuelle Themen aus der Landeskirche. Neben regelmäßigen Sendungen wie Hallo Benjamin, Alpha & Omega oder Evangelisch in Württemberg werden wöchentlich zwei bis drei kurze Reportagen veröffentlicht. Alle Beiträge und Sendungen werden auch bei Youtube eingestellt. Darum können Sie die Videos von kirchenfernsehen.de ganz einfach in Ihren Baukasten einbinden. Anbieten eines bestimmten Beitrags Auf das entsprechende Video auswählen. Unter dem Video auf Teilen und dann auf Einbetten klicken. Über Mehr anzeigen weitere Optionen einblenden. Wenn Sie nicht möchten, dass nach dem von Ihren ausgewählten Beitrag die anderen Beiträge dieser Playlist abge spielt werden, entfernen Sie das Häkchen bei Playlist teilen ab aktuellem Video. Unterhalb der Vorschau bei Videogröße Benutzerdefinierte Größe auswählen und die Breite auf maximal 604 Pixel (wenn Sie in Ihrem Baukasten drei Spalten verwenden) oder 748 Pixel (wenn Sie in Ihrem Baukasten zwei Spalten verwenden) festlegen. Den Einbettungscode kopieren. 42

19 Rufen Sie in Ihrem Baukasten in typo3 die Seite auf, an der das Video erscheinen soll. Neues HTML-Inhaltselement an der entsprechenden Stelle anlegen. Den Einbettungscode von YouTube im Feld HTML-Code einfügen. Element speichern und schließen. Im HTML-Element selbst kann kein Text eingegeben werden. Deshalb sollten Sie über diesem ein Textelement einfügen und dort eine Überschrift und einen kurzen Erklärungstext einstellen. Auch die Überschrift, die Sie im HTML-Element eingeben können, ist für die Besucher Ihres Baukastens nicht sichtbar. Sie dient nur der Kennzeichnung des Elements in typo3. 43

20 Anbieten einer Playlist Unter finden Sie alle Playlists bzw. Sendungen von kirchenfernsehen.de. 44

21 Wählen Sie die Playlist aus, die Sie in Ihrem Baukasten anbieten möchten. Klicken Sie auf Teilen und dann auf Einbetten. Unterhalb der Vorschau bei Videogröße die Breite auf maximal 604 Pixel (wenn Sie in Ihrem Baukasten drei Spalten verwenden) oder 748 Pixel (wenn Sie in Ihrem Baukasten zwei Spalten verwenden) festlegen. Den Einbettungscode unterhalb von Einbetten kopieren. Rufen Sie in Ihrem Baukasten in typo3 die Seite auf, an der das Video erscheinen soll. Neues HTML-Inhaltselement an der entsprechenden Stelle anlegen. Den Einbettungscode von YouTube im Feld HTML-Code einfügen. Element speichern und schließen. Im HTML-Element selbst kann kein Text eingegeben werden. Deshalb sollten Sie über diesem ein Textelement einfügen und dort eine Überschrift und einen kurzen Erklärungstext einstellen. Auch die Überschrift, die Sie im HTML-Element eingeben können, ist für die Besucher Ihres Baukastens nicht sichtbar. Sie dient nur der Kennzeichnung des Elements in typo3. 45

22 5.12 Audiobeiträge von Soundcloud anbieten am Beispiel von kirchenradio.de Sie können vom Audioanbieter Soundcloud einen sogenannten Einbettungscode erhalten. Mit Hilfe dieses Codes können sie über das HTML-Inhaltselement des Baukastens einen Audiobeitrag auf Ihrer Website anzeigen lassen. Dies ist für bestimmte Beiträge oder eine ganze Soundcloud-Playlist (z. B. SonnTALK von kirchenradio.de) möglich. Dieser Vorgang wird im Folgenden am Beispiel eines Beitrages von kirchenradio.de erklärt. Die Radioredaktion im Evangelischen Medienhaus produziert für mehrere Privatradiosender in Baden-Württemberg (Antenne 1, Radio 7, bigfm, u.v.m.) Radiobeiträge und Magazinsendungen. Außerdem fi nden sind die Beiträge unter www. kirchenradio.de oder Anbieten eines bestimmten Beitrags Rufen Sie auf. Bei dem Beitrag, den Sie auf Ihrer Website anbieten wollen, im mittleren Bereich auf das Share-Symbol klicken. 46

23 Embed anklicken. Die gewünschte Ansicht entweder mit einem großen oder einem kleinen Bild auswählen. Den Einbettungscode kopieren. Rufen Sie in Ihrem Baukasten in typo3 die Seite auf, auf der der Beitrag erscheinen soll. Neues HTML-Inhaltselement an der entsprechenden Stelle anlegen. Den Einbettungscode von Soundcloud im Feld HTML-Code einfügen. Element speichern und schließen. Im HTML-Element selbst kann kein Text eingegeben werden. Deshalb sollten Sie über diesem ein Textelement einfügen und dort eine Überschrift und einen kurzen Erklärungstext einstellen. Auch die Überschrift, die Sie im HTML-Element eingeben können, ist für die Besucher Ihres Baukastens nicht sichtbar. Sie dient nur der Kennzeichnung des Elements in typo3. Anbieten einer Playlist Rufen Sie auf. In der rechten Spalte die Playlist anklicken, die Sie auf Ihrer Website anbieten wollen. Dort werden Ihnen zunächst nur drei Listen angezeigt. Alle Playlists sehen Sie, wenn Sie auf View all klicken. 47

24 Unterhalb des großen Vorschaubildes auf Share klicken. Embed anklicken. Die gewünschte Ansicht entweder mit einem großen oder einem kleinen Bild auswählen. Den Einbettungscode kopieren. 48

25 Rufen Sie in Ihrem Baukasten in typo3 die Seite auf, auf der die Playlist erscheinen soll. Neues HTML-Inhaltselement an der entsprechenden Stelle anlegen. Den Einbettungscode von Soundcloud im Feld HTML-Code einfügen. Element speichern und schließen. Im HTML-Element selbst kann kein Text eingegeben werden. Deshalb sollten Sie über diesem ein Textelement einfügen und dort eine Überschrift und einen kurzen Erklärungstext einstellen. Auch die Überschrift, die Sie im HTML-Element eingeben können, ist für die Besucher Ihres Baukastens nicht sichtbar. Sie dient nur der Kennzeichnung des Elements in typo3. Anbieten des aktuellen Beitrags vom Kirchenradio Rufen Sie auf. In der linken Spalte auf Share klicken. 49

26 Den Tab Embed anklicken. Die gewünschte Ansicht entweder mit einem großen oder einem kleinen Bild auswählen. Den Einbettungscode kopieren. Rufen Sie in Ihrem Baukasten in typo3 die Seite auf, auf der der Beitrag erscheinen soll. Neues HTML-Inhaltselement an der entsprechenden Stelle anlegen. Den Einbettungscode von Soundcloud im Feld HTML-Code einfügen. Element speichern und schließen. Im HTML-Element selbst kann kein Text eingegeben werden. Deshalb sollten Sie über diesem ein Textelement einfügen und dort eine Überschrift und einen kurzen Erklärungstext einstellen. Auch die Überschrift, die Sie im HTML-Element eingeben können, ist für die Besucher Ihres Baukastens nicht sichtbar. Sie dient nur der Kennzeichnung des Elements in typo3. 50

27 5.13 HTML Über das HTML-Inhaltselement können Sie innerhalb des Baukastens auch mit HTML, der Programmiersprache des Internets, arbeiten. Neues Inhaltselement anlegen (siehe Kapitel 4.3 Neuen Inhalt anlegen ). Im Feld HTML Befehl eingeben. Beispielsweise kann man eine Quertrennlinie mit dem HTML- Befehl <hr> einfügen. Oder man kann damit ein Video, das man auf YouTube geladen hat, im Baukasten veröffentlichen. Dazu auf das Video aufrufen und auf Einbetten klicken. Die Breite auf maximal 420 Pixel (bei drei Spalten) oder 685 Pixel (bei zwei Spalten) festlegen. Den Einbettungscode kopieren und ins HTML-Feld im neuen Inhaltselement einfügen. Element speichern und schließen. Weil beim Inhaltselement HTML keine Überschrift und kein Text ausgegeben wird, sollten Sie davor zur Erläuterung ein Textelement setzen. 51

28 5.14 Quellenangaben Für die Angabe von Bild- oder Textquellen sowie für andere Anmerkungen, die in kleinerer Schriftgröße als der normale Text dargestellt werden sollen, nutzen Sie das Element Quellenangaben. An entsprechender Stelle das Inhaltselement Quellenangaben anlegen. Wie normales Textelement ausfüllen. Element speichern und schließen. Der Text aus diesem Element wird kleiner als der normale Fließtext und in Grau statt in Schwarz dargestellt Abstandselement Mit dem Abstandselement können Sie einen Abstand zwischen zwei Inhaltselementen einfügen. Abstandselement an der gewünschten Stelle einfügen. Im Aufklappmenü unter Abstand den Abstand auswählen, den Sie gerne hätten. Eine Einheit entspricht einer Zeilenschaltung. Element speichern und schließen Inhaltselement(e) verschieben oder kopieren Verschieben oder kopieren eines Inhaltselementes Über Seite im Seitenbaum die Seite, auf der sich ein zu verschiebendes Inhaltselement befi ndet, aufrufen. Mit der linken oder rechten Maustaste auf das Symbol unter dem Symbol Neuen Datensatz klicken, also z. B. auf, oder. Daneben steht der Typ des Inhaltselement, also z. B. Text oder Text und Bilder. Im Kontextmenü Ausschneiden bzw. Kopieren wählen. 52

29 Auf das Symbol des Inhaltselements klicken, unterhalb dessen das ausgeschnittene oder kopierte Element wieder eingefügt werden soll. Auf Einfügen nach klicken. Die Anfrage zum Kopieren oder Verschieben des Elements mit OK bestätigen. Sie können kopierte oder ausgeschnittene Inhaltselemente auch auf einer anderen Seite in Ihrem Auftritt wieder einfügen. 53

30 Ist die Seite, auf der Sie das kopierte Element einfügen möchten, noch leer, gehen Sie wie folgt vor: Im Funktionsmenü auf Liste wechseln. Ganz oben im Bearbeitungsbereich auf Zwischenablageinhalt einfügen klicken. Verschieben mehrerer Inhaltselemente Über die Funktion Liste im Seitenbaum die Seite, auf der sich die zu verschiebenden Inhaltselemente befinden, aufrufen. Darauf achten, dass bei Erweiterte Ansicht und Zwischenablage anzeigen (beides unterhalb der Seiteninhalt- Elemente) die Häkchen gesetzt sind. 54

31 Mit Klick auf Zwischenablage Nr. 1 diese aktivieren. Dadurch erhalten Sie rechts hinter jedem Inhaltselement ein leeres Kästchen. Dieses bei allen Inhaltselementen anklicken, die verschoben werden sollen. Dann auf Kopieren-Symbol klicken. Damit legen Sie die ausgewählten Inhaltselemente in die Zwischenablage. Im Seitenbaum die Seite auswählen, auf die die markierten Inhaltselemente verschoben werden sollen. An gewünschter Stelle auf das Symbol Einfügen nach: Inhalt der Zwischenablage wird nach diesem Symbol eingefügt klicken. Die Anfrage zum Verschieben mit OK bestätigen. 55

32 Ist die Seite, auf der Sie die kopierten Elemente einfügen möchten, noch leer, gehen Sie wie folgt vor: Im Funkitonsmenü auf Liste wechseln. Ganz oben im Bearbeitungsbereich auf Zwischenablageinhalt einfügen klicken. 56

33 Inhaltselemente über oder unter ein anderes Element schieben Möchten Sie ein Inhaltselement auf einer Seite weiter oben oder unten platzieren, gehen Sie wie folgt vor: Den Mauszeiger auf das zu verschiebende Inhaltselement halten. Ganz rechts auf die Pfeiltasten für Datensatz nach oben / unten schieben klicken. Das Element wird über / unter das darüber- / darunterliegende Element geschoben. 57