QUICK START GUIDE SPD KANDIDATEN BAUKASTEN - vorname-name.spd.de
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
QUICK START GUIDE
SPD KANDIDATEN BAUKASTEN
vorname-name.spd.de
Stand: 25. Januar 2021 SPD.DE
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN Inhalt Inhaltsverzeichnis INHALT 1. KANDIDATENWEBSEITE BESTELLEN 3 2. VORTEILE DES BAUKASTENS 3 3. MODULE UND VERWENDUNG 4 4. FORMATE/GRÖSSEN FÜR BILDER & VIDEOS 6 4.1. Bilder generell 6 4.2. Videos 6 4.3. Spezielle Bildformate 6 5. BILDDATENBANKEN 8 6. REDAKTIONELLE DO & DONT’S 9 7. ZUGANGSDATEN 10 7.1. Anmeldung in Typo3 (Backend) 10 7.2. URL zur Website (Frontend) 10 8. SEITEN ANLEGEN UND BEARBEITEN 11 8.1. Neue Seite erstellen 11 8.2. Seite verschieben 12 8.3. Seite umbenennen 12 8.4. Seite löschen 12 8.5. Seite veröffentlichen/deaktivieren 12 9. SEITENEIGENSCHAFTEN KONFIGURIEREN 13 9.1. Meta-Beschreibung für Suchmaschinen (SEO) 13 9.2. Seite für Social Media optimieren 13 10. MODULE ANLEGEN UND BEARBEITEN 14 10.1. Text 14 10.2. Hero Statement 14 10.3. Newsletterbox 16 10.4. Teaserkacheln mit Hintergrundbild 18 10.5. Thementeaser 20 10.6. Social Media-Kanäle 21 10.7. Dateilinks 22 10.8. Akkordeon 23 10.9. Bild/Bildergalerie 25 10.10. Video 27 SPD.DE Seite 2
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Herzlich Willkommen Inhaltsverzeichnis
HERZLICH WILLKOMMEN
Der Quickstart dient zur schnellen Einführung in die wichtigsten Typo3 Funktionalitäten und gibt einen Über-
blick über alle redaktionellen Module des Baukastens. Zusätzlich werden alle relevanten Schritte vom Login,
über das Anlegen einer Seite bis zum Befüllen der Module beschrieben. Jede neue Kandidatenwebseite wird von
uns nicht leer, sondern mit einer exemplarischen Navigationsstruktur und Modulen ausgeliefert. Dieses Grund-
gerüst soll dir helfen, schneller in die Befüllung der Website einzusteigen. Du kannst den initialen Aufbau jedoch
ganz nach deinen Vorstellungen bearbeiten, löschen oder neu hinzufügen.
1. KANDIDATENWEBSEITE BESTELLEN
Eine neue Kandidatenwebseite kann über das Bestellformular unter
https://kampagne.spd.de/kampagnenarbeit/webbaukasten/ beantragt werden.
Um den Bereich aufzurufen ist ein SPD-Account erforderlich.
Im Formular müssen folgende Daten angegeben werden:
Persönliche Daten
Daten für Impressum
Angaben für Kontaktformular
Pflege durch Redakteur*in (optional)
Social Media-URLs (optional)
2. VORTEILE DES BAUKASTENS
Mit dem Baukasten kannst du ganz einfach deine eigene Webseite erstellen.
Das sind die Vorteile:
Moderne, ansprechende Webseite.
Für webaffine Menschen einfach zu erstellen und zu gestalten –
ganz ohne Programmierkenntnisse.
Bei Fragen hilft der Support persönlich.
Sieht auf PC, Tablet als auch mobil immer perfekt aus.
Im aktuellen SPD-Design, das automatisch an das Design der Kampagne zur Bundestagswahl
angepasst wird.
100 % kostenlos: keine Gebühren oder Serverkosten!
spd.de-Domain inklusive.
SSL-Zertifikat inklusive.
Datenschutzkonform.
Jetzt die Musterseite anschauen:
https://jakob-maria-mierscheid.spd.de/
SPD.DE Seite 3
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module und Verwendung Inhaltsverzeichnis
3. MODULE UND VERWENDUNG
MODULNAME IN TYPO3 SCREENSHOT VERWENDUNG
Hero Statement Bühne mit vollflächigem Bild, rotem
Schmuckrand und optionalem Zitat/Text.
Auf der Startseite kann ein großes
und hohes Bild genutzt werden.
Auf Unterseiten sollten stets schmale
Bilder ausgewählt werden.
Newsletterbox Newsletteranmeldung mit Bild, Headline
und Fließtext. Für mehr Aufmerksamkeit
und Dynamik kann statt einem Bild auch
eine kurze Videosequenz im Modul
dargestellt werden.
Teaserkacheln Dieses Modul soll vorrangig für
mit Hintergrundbild wichtige Handlungsaufforderungen,
wie z.B. Mitmachaktionen genutzt
werden. Alternativ kann es auch für
Querverlinkungen auf andere Seiten
der Website eingesetzt werden.
Thementeaser Thementeaser mit großem Bild oder Video
und 1-3 Teasern (Anreißen eines Themas,
um Klick zu erzielen). Der weiterführende
Link ist optional. Die Farbe der Hinter-
grundfläche kann redaktionell aus einem
definierten Farbset ausgewählt werden.
Social Media-Kanäle Darstellung und Verlinkung von Social
Media-Kanälen. Im Modul kann jeweils
ein Facebook, Twitter, YouTube, Instagram
und Telegram verlinkt werden. Die Anzahl
der dargestellten Kanäle ist variabel.
Nur Überschrift Überschrift für Seite und Module
SPD.DE Seite 4
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module und Verwendung Inhaltsverzeichnis
MODULNAME IN TYPO3 SCREENSHOT VERWENDUNG
Text Regulärer Fließtext mit folgenden
Formatierungsmöglichkeiten:
– fett (strong)
– kursiv (em)
– unsortierte Liste (ul)
– sortierte Liste (ol)
– Textlink (a, intern und extern)
– tiefgestellter Text (sub)
– hochgesteller Text (sup)
– H3-H6
– Zitat
Dateilinks Modul zum Download von Dateien
(PDF, JPG, etc).
Eventliste Veranstaltungs- und Terminliste
(Pink/weiß) mit Datum, Uhrzeit, Überschrift, Text
und optionalem Button. Es können beliebig
viele Einträge im Modul dargestellt werden.
Als Hintergrundfarbe stehen pink oder
weiß zur Auswahl.
Akkordeon Akkordeon-Modul wird verwendet,
um detailreiche Inhalte auf einer Seite
strukturiert darzustellen und im Kontext
für den Nutzer schnell zugänglich zu
machen ohne dass er die Seite verlassen
muss.
Nur Bilder Zur Darstellung eines Bildes oder
einer Bildergalerie. Werden im Modul
„Nur Bilder“ mehrere Bilder hochgeladen
bzw. ausgewählt werden diese auto
matisch als Bildergalerie dargestellt.
Video Vollflächiger Videoplayer über die
gesamte Contentbreite mit YouTube-
oder Vimeo-Video. Im Modul muss
die Video ID aus der jeweilige URL
angegeben werden.
SPD.DE Seite 5
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
���������������������������������� Inhaltsverzeichnis
4. FORMATE/GRÖSSEN FÜR BILDER & VIDEOS
4.1. Bilder generell
Soweit es in der Tabelle nicht anders aufgeführt ist, ist das generelle Bildformat für Bilder auf der Webseite
(egal ob Fullsize oder zweispaltig) 3:2. Die optimalen Pixelgröße (px) liegt für Desktopgeräte bei 1400 px, also
1400 x 933 px und für mobile Endgeräte bei 780 px, also 780 x 520 px.
4.2. Videos
Für Videos jeglicher Art ist das passende Format immer 16:9.
4.3. Spezielle Bildformate
Damit die Seite sowohl auf PC, Tablet als auch mobil immer perfekt aussieht, müssen Bilder im Desktop- und
Mobile-Format hochgeladen werden.
MODUL FORMAT ZEICHENANZAHL
MIT LEERZEICHEN
Hero Statement (groß) Desktop: Max. 110
Format ist 16:9
mit einer optimalen Breite von 1440 px,
also 1440 x 810 px
Mobile:
Format ist 1:1
mit einer optimalen Breite von 768 px,
also 768 x 768 px
Hero Statement (klein) Desktop:
Format ist 21:9
mit einer optimalen Breite von 1400 px,
also 1400 x 600 px
Mobile:
Format ist 3:2
mit einer optimalen Breite von 768 px,
also 768 x 512 px
Newsletterbox Desktop: Überschrift max. 55
Format ist 1:1 Fließtext max. 125
mit einer optimalen Breite von 780 px
Mobile:
Format ist 4:3
mit einer optimalen Breite von 768 px,
also 768 x 576 px
SPD.DE Seite 6
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
���������������������������������� Inhaltsverzeichnis
MODUL FORMAT ZEICHENANZAHL
MIT LEERZEICHEN
Teaserkacheln Desktop: Headline max. 40
mit Hintergrundbild Format ist 30:9 Copy max. 140
mit einer optimalen Breite von 1440 px,
also 1440 x 432 px
Mobile:
Format ist 3:2
mit einer optimalen Breite von 768 px,
also 768 x 512 px
Thementeaser Desktop: Überschrift max. 60
Format ist 21:9 Fließtext max. 150
mit einer optimalen Breite von 1440 px,
also 1440 x 617 px
für Video
Format ist 16:9
mit einer optimalen Breite von 1440 px,
also 1440 x 810 px
Mobile:
Format ist 3:2
mit einer optimalen Breite von 768 px,
also 768 x 512 px
für Video
Format ist 16:9
mit einer optimalen Breite von 1440 px,
also 1440 x 810 px
Video Format ist 16:9
mit einer optimalen Breite von 1440 px,
also 1440 x 810 px
SPD.DE Seite 7
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN Bilddatenbanken Inhaltsverzeichnis 5. BILDDATENBANKEN Im Gestaltungsportal in kampagne.spd.de findest du viele Bilder, die du für deine Webseite nutzen kannst. Darüber hinaus gibt es zahlreiche weitere Bilddatenbanken: Kostenfreie Bilddatenbanken – Unsplash: https://unsplash.com/ – Pexels: https://www.pexels.com/de-de/ Kostenpflichtige Bilddatenbanken – Shutterstock: https://www.shutterstock.com/ – Fotolia: https://de.fotolia.com/ – iStockphoto: https://www.istockphoto.com/de Bitte stets in die jeweiligen Nutzungs- und Lizenzbedingungen der Bilddatenbanken schauen und die Bildquelle/Fotograf*in angeben! WICHTIGER HINWEIS: Um Abmahnungen vorzubeugen, informiere dich in kampagne.spd.de in unserer Rechtsinfo, wie du Bilder rechtssicher auf deiner Webseite nutzen kannst. Für die auf spd.de oder kampagne.spd.de eingestellten Werke/Bilder gilt, dass diese nur dann von Partei- gliederungen übernommen werden dürfen, wenn kein Urheberrechtsvermerk unter dem Bild zu finden ist. Findet sich auf der Hauptseite oder der entsprechenden Unterseite z. B. der Vermerk „Bild: dpa“, dürfen die Bilder nur vom Parteivorstand, nicht aber von den Gliederungen genutzt werden. Niemals dürfen Bilder von beworbenen Bildbroschüren und Plakaten mit Bildmotiven verwendet werden. Werke Dritter dürfen also nicht aus dem Internet kopiert werden, um sie anschließend im eigenen Internetauftritt zu verwenden oder anderweitig zu nutzen. Forderungen von Verwertungsberechtigten auf Schadenersatz sind in aller Regel (der Sache, nicht aber un- bedingt der Höhe nach) berechtigt, wenn du die Werke/Bilder ohne Einwilligung des/der Berechtigten ins Internet stellst. SPD.DE Seite 8
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Redaktionelle DoS & Dont’s Inhaltsverzeichnis
6. REDAKTIONELLE DOS & DONT’S
Einige praktische Tipps für das Verfassen von Onlinetexten. Das gehört dazu:
DOS
– B ildsprache ist auch Sprache:
Nutze ausdrucksstarke Bilder.
– Message first:
Das Wichtigste kommt an den Anfang deines Textes!
[Was? Warum? Wie? Wer? Wo (und womit)?]
– Gliederung und logischer Aufbau:
Erzähle deine Geschichte von vorne nach hinten, ohne zu springen.
Unterstütze die Struktur durch ein klares Layout, Absätze und aussagekräftige
Zwischenüberschriften.
– Schreibe kurz und knackig:
So viel wie nötig, so wenig wie möglich!
– Nutze eine klare, einfache Sprache:
Kurze Sätze, wenige Kommata.
– Mische längere und kurze Sätze:
Das macht deinen Text lebendig.
– Sei klar in deinen Aussagen:
Ein Satz, eine Botschaft.
– Verben, Verben, Verben.
Sie gehören nach vorn, denn sie sorgen für mehr Lebendigkeit im Satz.
– Formuliere aktiv statt passiv.
– Nutze eine bildhafte Sprache und Vergleiche.
– Lesen im Web ist Scannen:
Setze gezielt Listen und Zusammenfassungen ein.
– Auch Hervorhebungen (zum Beispiel durch Fettdruck) sind Eyecatcher.
Übertreibe es aber nicht.
DON’TS
– V ermeide Abkürzungen,
denn sie behindern den Lesefluss.
– Vermeide Substantivierungen:
sag es stattdessen mit Verben!
– Vermeide Phrasen und leere Worthülsen,
die deine Leser*innen ermüden.
– Komm auf den Punkt:
Vermeide verschachtelte Sätze mit vielen Kommata,
denn sie sind schwerer zu erfassen.
– Vermeide Textwüsten!
SPD.DE Seite 9
QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Zugangsdaten Inhaltsverzeichnis
7. ZUGANGSDATEN
7.1. Anmeldung in Typo3 (Backend)
Rufe hierzu die folgende URL auf: vorname-nachname.spd.de/typo3
Nachdem Aufrufen der URL erscheint die folgende Anmeldemaske von Typo3:
Nutzername und Passwort werden den Anmeldung
Redakteur*innen am Anfang mitgeteilt. in Typo3
Bitte das Passwort im Nachgang personalisieren:
Passwortlänge: 12 Zeichen
Neues Passwort nach: 60 Tagen
Bedingungen für das Passwort (3 von 4 müssen eingehalten werden):
– Kleinbuchstaben: mindestens ein Kleinbuchstabe (a-z)
– Großbuchstaben: mindestens ein Großbuchstabe (A-Z)
– Sonderzeichen: mindestens ein Sonderzeichen (!$%&/=?,.)
– Zahlen: mindestens eine Zahl (0-9)
Das Passwort kann in den Benutzereinstellungen geändert werden.
Passwort
ändern und
speichern
WICHTIGER HINWEIS:
Die Änderung des Passwortes muss durch Klick auf das Disketten-Icon gespeichert werden.
Das neue Passwort ist danach sofort gültig.
7.2. URL zur Webseite (Frontend)
Um die Webseite anzusehen oder um Änderungen
zu überprüfen, kann die Website über die folgende
URL aufgerufen werden:
vorname-nachname.spd.de
SPD.DE Seite 10QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Seiten anlegen und bearbeiten Inhaltsverzeichnis
8. SEITEN ANLEGEN UND BEARBEITEN
8.1. Neue Seite erstellen
Seiten
anlegen
Durch Klick auf das Icon Seite anlegen öffnet sich ein Untermenü:
Seitentyp
auswählen
1 2 3 4 5
Hier können verschiedene Seitentypen angelegt werden:
1 neuer Seiten
2 Seitenverweise
3 Verlinkungen
4 Ordner
5 Trenn-Elemente
Um eine neue Seite anzulegen, wird der ge-
wünschte Seitentyp aus dem Menü per Drag Aktivierung
& Drop (Anklicken mit der Maus und ziehen) durch das
Kontext-
an die gewünschte Stelle „gezogen“. Eine
Menü
dünne Linie zeigt den Ort, an dem die Seite
angelegt wird. Beim Anlegen sind die Seiten
deaktiviert – gekennzeichnet wird dies durch
das Icon „Durchfahrt verboten“. Erst nach
der Aktivierung durch das Kontext-Menü sind
die Seiten online ( siehe Kapitel „Seite veröf-
fentlichen/deaktivieren“). Im Vorschaumodus
(noch nicht veröffentlichte Inhalte) sind die
neu angelegten Seiten bereits trotzdem für
die Browseransicht zugänglich.
SPD.DE Seite 11QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Seiten anlegen und bearbeiten Inhaltsverzeichnis
8.2. Seite verschieben
Wie beim Seite anlegen kann die Seite innerhalb des Seitenbaums per Drag & Drop (Klick
auf den Seitentitel) verschoben werden. Hierbei sollte allerdings der Seitentyp beachtet
werden, da nicht jede Seite an jeder Stelle der Hierarchie sinnvoll bzw. passend ist.
8.3. Seite umbenennen
Durch einen Doppelklick auf den Seiten- Seiten
namen im Seitenbaum kann die Seite umbenennen
umbenannt werden.
8.4. Seite löschen
Hierzu im Seitenbaum die gewünschte Seite auswählen und durch Klick auf das Seitenicon
bzw. Rechtsklick auf den Seitennamen das Kontextmenü öffnen. Mit Klick auf „Löschen“
kann die Seite endgültig gelöscht werden. Alternativ kann eine Seite auch deaktiviert werden.
8.5. Seite veröffentlichen/deaktivieren
Über das Kontextmenü können Seiten veröffentlicht werden, indem sie aktiviert werden.
Beim Anlegen einer neuen Seite ist diese automatisch deaktiviert – gekennzeichnet wird
dies durch das Icon „Durchfahrt verboten“. Nachdem eine Seite aktiviert wurde, kann sie
über den gleichen Weg wieder deaktiviert werden und ist somit nicht mehr erreichbar.
Seiten
löschen oder
deaktivieren
Seiten
aktivieren/
deaktivieren
SPD.DE Seite 12QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Seiteneigenschaften konfigurieren Inhaltsverzeichnis
9. SEITENEIGENSCHAFTEN KONFIGURIEREN
9.1. Meta-Beschreibung für Suchmaschinen (SEO)
Gewünschte Seite im Seitenbaum auswählen. Durch Klick auf das Icon „Seiteneigenschaften
bearbeiten“ kann die Seite konfiguriert werden.
Seiten
eigenschaften
bearbeiten
Über den Bereich „SEO“ können die Suchmaschinen-
Einstellungen bearbeitet werden. Die Inhaltsangabe Such-
ist ein allgemeiner Bereich für den Inhalt. Wichtig für maschinen
optimierung
Suchmaschinen sind die Meta-Tags (Kurze Beschreibung
SEO
des Inhaltes, Herausgeber, Autor und Copyright). Unter
Schlagworte werden die Keywords eingetragen, unter
Beschreibung die Meta-Beschreibung, welche in den
Suchergebnissen bei Google erscheint und nicht mehr
als 156 Zeichen enthalten sollte.
9.2. Seite für Social Media optimieren
Der Reiter „Social“ bietet die Möglichkeit, Bilder und Texte für Facebook festzulegen. Zu-
sätzlich können hier die Texte für Twitter und das Sharing (Teilen) per E-Mail festgelegt
werden. Der Button „Neue Relation erstellen“ ist für den Bildupload – hier kann das Bild
für das Sharing-Modul hochgeladen werden und ist dann dem Sharingmodul zugeordnet.
Dieses kann dann auch auf einer anderen Seite eingebunden werden, enthält dann aber
immer das an dieser Stelle hinterlegte Bild.
Social Media
Einstellungen
SPD.DE Seite 13QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
10. MODULE ANLEGEN UND BEARBEITEN
Wähle im Seitenbaum zunächst die gewünschte Seite aus, die bearbeitet werden soll. Neue
Module können durch Klick auf „+ Inhalt“ angelegt oder bestehendes Modul bearbeitend
durch Klick auf das Icon „Stift“ editiert werden. Des Weiteren können Module auch de
aktiviert oder gelöscht werden.
Module
anlegen
und
bearbeiten
10.1. Text
Wenn du auf einer Seite einen Text anlegen möchtest, erstelle hierzu ein neues Inhaltsele-
ment und wähle im Typo3 Wizard (Menü mit den wichtigsten Inhalten) „Text“ aus.
Text
erstellen
In der Modulmaske kann nun eine Überschrift und Fließtext definiert werden. Es empfiehlt
sich, keine Texte aus Word direkt in die Maske zu kopieren, da sonst falsche Formatierungen
ins Typo3 übertragen werden. Im Idealfall wird unformatierter Text ins Typo3 kopiert und
alle Formatierungen durch die Maske im CMS vorgenommen. Wird Text aus Textbearbei-
tungsprogrammen wie Word in den Editor kopiert, kann die Word-Formatierung gelöscht
werden (Text markieren und im Anschluss auf den Pinsel klicken)
Text
formatieren
SPD.DE Seite 14QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
10.2. Hero Statement
Das Hero Statement Modul eignet sich sowohl auf der Startseite, als auch auf Unterseiten
als visueller Einstieg in die Seite. Wenn du ein neues Modul anlegen möchtest, erstelle ein
neues Inhaltselement und wähle hierzu im Typo3 Wizard „Hero Statement“ aus.
Inhalts-
element
Hero
Statement
anlegen
Im Hero Statement Modul kann nun ein Foto hochgeladen bzw. aus der Medienverwaltung
ausgewählt werden. Bitte beachte, dass sich die Höhe der Bühne aus der Höhe des Bildes
ergibt. Auf der Startseite können gerne höhere Bilder verwendet werden, jedoch sollten
auf Unterseiten schmalere Bilder zum Einsatz kommen. Die genauen Bildformate können
im entsprechenden Kapitel nachgelesen werden. Des Weiteren kann eine optionale Über-
schrift oder ein Zitat auf dem Bild platziert werden. Hierzu muss ein Statement definiert
werden und die Farbe der Überschrift definiert werden. Es kann zwischen einer weißen
und schwarzen Textfarbe gewählt werden. Bitte gebe stets eine Bildquelle des Fotos an,
diese wird auf der späteren Website auf dem Bild ausgegeben.
Hero
Statement
Modul
SPD.DE Seite 15QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
10.3. Newsletterbox
Um eine Newsletterbox anzulegen, erstelle ein neues Inhaltselement und wähle hierzu im
Typo3 Wizard zunächst den „Newsletterbox Container“ aus.
Newsletterbox
hinzufügen
Im Container wird im ersten Schritt das Bild neben dem Newsletterformular definiert. Hier-
zu auf das Ordner-Icon „Dateien durchblättern“ klicken und ein Bild aus der Medienverwal-
tung auswählen oder ein neues Bild im Dialogfenster hochladen. Die Quelle des Fotos wird
in „Fotocredit“ eingetragen und auf der Website ausgegeben. Anschließend die Überschrift
und einen Text für das Modul definieren. Diese werden auf dem Bild ausgegeben, daher ist
die Auswahl eines geeigneten Bildes besonders wichtig. Für die Textfarbe stehen weiß oder
schwarz zur Auswahl. Anschließend die Eingaben speichern und den Container schließen.
Newsletterbox
gestalten
SPD.DE Seite 16QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
Zurück in der Seitenansicht wird dem Newsletterbox Container das Modul „Newsletter Box“
hinzugefügt. Hierzu auf den Button „+Inhalt“ klicken, so dass sich der Typo3 Wizard öffnet.
Newsletterbox
Container
In der Newsletterbox wird der Link zu den Datenschutzbedingungen sowie das PDF für die
Gliederungen hinterlegt. Zusätzlich kann hier noch der Text für den Button „Absenden“
definiert werden.
Datenschutz
und PDF-
Download
SPD.DE Seite 17QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
Im letzten Schritt muss noch der Text für die Danke-Seite definiert werden. Diese Seite
wird dem Nutzer nach Abschicken des Formulars angezeigt. Hierzu müssen Überschrift,
Untertitel und ein Hinweistext definiert werden.
Danke-Seite
definieren
10.4. Teaserkacheln mit Hintergrundbild
Wenn du ein neues Modul anlegen möchtest, erstelle ein neues Inhaltselement und wähle
hierzu im Typo3 Wizard „Teaserkacheln mit Hintergrundbild“ aus.
Teaserkacheln
mit Hinter-
grundbild
erstellen
SPD.DE Seite 18QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
Lege als erstes eine Überschrift sowie einen Einleitungstext für das Modul fest. Wähle da-
nach ein Hintergrundbild für das Modul aus. Hierzu auf das Ordner-Icon „Dateien durch-
blättern“ klicken und ein Bild aus der Medienverwaltung auswählen oder ein neues Bild
im Dialogfenster hochladen. Die Quelle des Fotos wird in „Fotocredit“ eingetragen und auf
der Website ausgegeben.
Teaserkachel
mit Hinter-
grundbild
definieren
Als nächstes werden die Teaser angelegt, hierzu auf den Button „+Teaser“ klicken. Pro
Teaser wird der Text, der Linktext sowie das Linkziel bestimmt. Insgesamt können im
Modul max. 4 Teaser platziert werden. Bei einer ungeraden Zahl kann ein Teaser auch über
die volle Breite platziert werden, dazu muss das Häkchen bei „Teaser über die volle Breite“
gesetzt werden.
Teaser
erstellen
SPD.DE Seite 19QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
10.5. Thementeaser
Wenn du ein neues Modul anlegen möchtest, erstelle ein neues Inhaltselement und wähle
hierzu im Typo3 Wizard „Thementeaser“ aus.
Thementeaser
erstellen
Lege als erstes eine Überschrift sowie einen Einleitungstext für das Modul fest. Wähle da-
nach ein Hintergrundbild für das Modul aus. Hierzu auf das Ordner-Icon „Dateien durch-
blättern“ klicken und ein Bild oder Video aus der Medienverwaltung auswählen oder im
Dialogfenster hochladen. Bitte wähle für Desktop und Mobile ein passendes Bild oder Vi-
deo aus, damit dieses auf allen Geräten optimal dargestellt wird. Definiere ein passendes
„Bild Alt Text“ (Ein alternativer Text, falls das Bild nicht angezeigt werden kann), dass das
Bild inhaltlich beschreibt. Dieses dient der Sichtbakrkeit für die Suchmaschinen. Die Quelle
des Fotos wird in „Fotocredit“ eingetragen und auf der Website ausgegeben.
Thementeaser
Text und Bild
einfügen
SPD.DE Seite 20QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
Als nächstes werden die Teaser angelegt, hierzu auf den Button „+Teaser“ klicken. Pro Tea-
ser wird der Text, der Linktext sowie das Linkziel bestimmt. Insgesamt können im Modul
max. 3 Teaser platziert werden. Pro Teaser muss eine Überschrift, ein Teasertext, und op-
tional ein Linktext und Linkziel angegeben werden. Weitere Teaser durch erneutes klicken
auf „+Teaser“ hinzufügen.
Teaser
Text und Links
einfügen
10. 6. Social Media Kanäle
Wenn du ein neues Modul anlegen möchtest, erstelle ein neues Inhaltselement und wähle
hierzu im Typo3 Wizard „Social Media Kanäle“ aus.
Social
Media Kanäle
erstellen
SPD.DE Seite 21QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
Im nächsten Schritt muss eine Überschrift für das Modul definiert werden. Anschließend kön-
nen für Facebook, Twitter, YouTube, Instagram und YouTube die URL der gewünschten Kanäle
hinterlegt werden. Wenn ein Kanal nicht vorhanden ist oder angezeigt werden soll, einfach
dias jeweilige URL-Feld leer lassen und der Kanal wird nicht auf der Webseite dargestellt.
URL
Facebook,
Twitter,
YouTube,
Instagram
10.7. SPD Uploads/Dateilinks
Wenn du ein neues Modul anlegen möchtest, erstelle ein neues Inhaltselement und wähle
hierzu im Typo3 Wizard „Dateilinks aus“.
Uploads und
Dateilinks
SPD.DE Seite 22QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
In der Modulmaske kannst du nun
eine Überschrift und eine Datei Überschriften
hinzufügen. und Dateien
hinzufügen
Die entsprechende Auswahl stößt
den Upload bzw. die Einbindung
der Datei an. Im folgenden Dialog
können die Metadaten (Kurze Be-
schreibung des Inhaltes, Heraus-
geber, Autor und Copyright) fest-
gelegt werden.
Metadaten
festlegen
10.8. Akkordeon
Bei diesem Modul handelt es sich um ein komplexeres Modul. Es wird zur Darstellung z.B.
von FAQ‘s verwendet. Wenn du ein neues Modul anlegen möchtest, erstelle ein neues
Inhaltselement und wähle hierzu im Typo3 Wizard „Akkordeon“ aus.
Inhalts
element
Akkordeon
hinzufügen
SPD.DE Seite 23QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
Durch Klick auf „Akkordeon-Elemente“ muss das Modul um mindestens ein Akkordeon-
Element erweitert werden. (Siehe folgender Screenshot)
Akkordeon-
Elemente
hinzufügen
Im nächsten Schritt muss für das Akkordeon-Element eine Überschrift definiert werden.
Die Standardeinstellung für das Akkordeon ist „geschlossen“. Soll es offen sein, so kann
man an entsprechender Stelle das Häkchen setzen. Nachdem die Überschrift festgelegt ist,
speichern und schließen.
Überschrift
definieren
Erst in der Seitenansicht können den Reitern des Akkordeons nun Inhaltselemente hinzuge-
fügt werden. In der Seitenansicht im Akkordeon-Modul „+Inhalt“ (leicht eingrückt) klicken.
Inhalts
elemente
für das
Akkordeon-
Modul
hinzufügen
SPD.DE Seite 24QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
10.9. Bild/Bildergalerie
Wenn du ein neues Modul anlegen möchtest, erstelle ein neues Inhaltselement und wähle
hierzu im Typo3 Wizard „Nur Bilder“ aus.
Bilder
hinzufügen
Mit der Überschrift wird die Bildüberschrift festgelegt. Der Button „Bild hinzufügen“
öffnet das Fenster für den Upload bzw. die Einbindung über die Medienverwaltung. Wenn
mehrere Bilder hochgeladen werden, erscheinen diese automatisch in einer Bildergalerie.
Medien
verwaltung
SPD.DE Seite 25QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
In der Dialogbox kann zwischen Dateien aus der Medienbibliothek oder einer hochgelade-
nen Datei gewählt werden. Der entsprechende Button – Auswahl importieren oder hoch-
laden – löst die Aktion aus.
Dateien
importieren
oder
hochladen
Dann können die Metadaten für das Bild festgelegt werden. An dieser Stelle können Titel/
Autor und Beschreibung individuell angepasst werden. Dazu den Haken bei „ überschreiben“
setzen und neuen Text eintragen. Geschieht dies nicht, werden der Titel und die Beschrei-
bung verwendet, die beim Hochladen des Bildes angegeben wurden.
Metadaten
festlegen
SPD.DE Seite 26QUICK START GUIDE SPD KANDIDATEN BAUKASTEN
Module anlegen und bearbeiten Inhaltsverzeichnis
10.10. Video
Über die Inhaltsmodule das Video-Element auswählen.
Videos
hinzufügen
Im Video-Modul dann ggfs. Überschrift eingeben, aber vor allem die Video-ID in das Feld
kopieren und den entsprechenden Kanal (Youtube/Vimeo) auswählen.
Beispiel Youtube: https://www.youtube.com/watch?v=gNqQL-1gZF8
Beispiel Vimeo: https://vimeo.com/5280314
YouTube/
Vimeo-Video
auswählen
PRAXISTIPP:
Wenn du ein YouTube-Video in deine Webseite einbettest, willst du verständlicherweise
nicht, dass nach diesem Video andere Videos (womöglich der Konkurrenz) abgespielt wer-
den, die YouTube für geeignet hält. Das Ausblenden der verwandten Videos wird über den
Parameter ?rel=0 gelöst. Dieser Zusatz wird einfach an das Ende des Youtube Links ange-
hängt. Also im obigen Beispiel: gNqQL-1gZF8?rel=0
SPD.DE Seite 27Impressum
Redaktion:
Jochen Wiemken
Gestaltung:
ASK Agentur für Sales und Kommunikation GmbH
Herausgeber:
Lars Klingbeil (v.i.s.d.P.), SPD-Parteivorstand, Wilhelmstraße 141, 10963 Berlin
SPD.DESie können auch lesen
