Zum Inhalt der Seite springen

Text & Medien anlegen

Schritt 1

Sie haben das Content-Element Text & Medien gewählt. Nun können Sie mit der Pflege des Elements beginnen. Fügen Sie dazu eine Überschrift ein und bestimmen Sie bei Typ die Schriftgröße (Standard, kleiner oder verbergen Sie die Überschrift). Wahlweise können Sie auch eine Unter­überschrift einpflegen. Welche Möglichkeiten Sie im Textfeld haben, sehen Sie im nächsten Schritt.


Schritt 2

Schreiben Sie nun Ihren Text in das vorhergesehene Feld. Über die kleinen Symbole oberhalb des Textfeldes können Sie die Schrift fett, kursiv, unterstrichen, durchgestrichen oder mit hoch- und tiefgestellten Zahlen einstellen, den Blocksatz zentriert, rechts- oder linksbündig oder mit Nummerierungen oder Aufzählungs­punkten darstellen. Wenn Sie den ganzen Text markieren, haben Sie die Möglichkeit unter Stil einen mehr­spaltigen Absatz oder ein Zitat zu gestalten. Unter dem Dropdown-menue rechts davon können Sie Auch im Text verschiedene Überschriften definieren.


Schritt 3

Sie können einzele Wörter oder Sätze verlinken, indem Sie diese markieren und anschließend auf das Verlinkungs-Symbol klicken. Nun öffnet sich ein neues Fenster. Hier können Sie wählen, ob Sie auf eine Seite, eine Datei oder einen Ordner verlinken möchten, oder ob Sie einen Link auf eine externe URL oder E-Mail Adresse setzen möchten. Sie können den Link durch einen Button hervor­heben, indem Sie unter Stil den Link zu einem Button machen.  


Schritt 4

Um dem Text & Medien Element ein Bild oder Video hinzuzufügen gehen Sie auf den Reiter Medien und klicken Sie auf Mediendatei hinzufügen. Es öffnet sich ein neues Fenster. Hier haben Sie mehrere Möglichkeiten:

1. Sie können bereits zuvor (über die Dateiliste) hochgeladene Dateien über den Verzeichnisbaum auswählen. 
2. Sie können Dateien hochladen, indem Sie entweder die Datei per Drag and Drop auf den Dateien auswählen Button ziehen oder den Button klicken und nach die gewünschte Datei auf Ihrem Server auswählen. Anschließend klicken Sie auf Hochladen. Sie können bereits vorhandene Dateien überschreiben, indem Sie entsprechendes Häkchen aktivieren.
3. Sie können eine neue Mediendatei hinzufügen, indem Sie URL der Mediendatei in das leere Feld eingeben und anschließend auf Medien hinzufügen klicken.
 


Schritt 5

Sie haben nun das gewünschte Bild eingefügt. Wahlweise können Sie dem Bild einen Titel oder eine Beschreibung hinzfügen. Es ist außerdem sinnvoll einen Alternativen Text zu hinterlegen. Bilder mit Alt-Text werden von Suchmaschinen besser gefunden und spielen auch für die Barrierefreiheit eine große Rolle. Sehbehinderte User können sich den Alt-Text von einem Programm vorlesen lassen. Sie können das Bild verlinken, indem Sie bei Link auf das kleine Symbol neben dem leeren Feld klicken. Es öffnet sich ein neues Fenster. Hier haben Sie die Möglichkeit das Bild mit einer Seite, einer Datei, einem Ordner, einer externen URL oder einer E-Mail Adresse zu verlinken. 
Sie haben außerdem die Möglichkeit den Bildausschnitt zu verändern, indem sie den Editor öffnen. Hier können Sie eines der vorgegebenen Seitenverhältnisse wählen oder das Bild manuell zuschneiden. An den gestrichelten Linien erkennen Sie, wie das Bild zugeschnitten und später präsentiert wird. 


Schritt 6

Bei den Medieneinstellungen können Sie die Bildgröße auf den verschiedenen Endgeräten festlegen. Bild-Breite SM steht hierbei für Smartphone, MD steht für Tablet und LG für Desktop. Durch das Setzen eines Häkchens bei Rahmen um jedes Element, erscheint ein Rahmen um jedes Bild in diesem Element. Bei Position und Ausrichtung können Sie zwischen verschiedenen Darstellungsoptionen wählen, wie Text und Bild angeordnet werden sollen. Bei Bildunterschrift Layout haben Sie die Möglichkeit eine animierte Bildunterschrift einzustellen. Abschließend können Sie festlegen, ob sich das Bild bei Klick vergrößern soll. Aktivieren Sie dazu einfach bei Verhalten das entsprechende Häkchen.  
 


Schritt 7

Nun können Sie das Erscheinungs­bild Ihres Content-Elements verändern. Unter Layout können Sie festlegen, auf welchem Hinter­grund Ihr Element abgebildet werden soll. Bei der Einstellung Standard werden Text und Bild auf der gewählten Hintergrundfarbe des Content­bereiches abgebildet, wählen Sie Hintergrund-Farbe, wird das Element auf farbigem Hintergrund, passend zu Ihren CI-Farben, abgebildet.
Setzen Sie ein Häkchen unter Kein Abstand nach unten, dann wird zwischen diesem und dem nächsten Content-Element im Frontend weniger Abstand angezeigt.


Schritt 8

Ist Ihre Webseite mehrsprachig angelegt, dann können Sie unter dem Reiter Sprache festlegen, für welche Sprache das Content Element angelegt wird. Sie haben hier die Auswahlmöglichkeit zwischen Allen oder nur einer bestimmten Sprache.


Schritt 9

Bei Zugriff haben Sie die Möglichkeit die Sichtbarkeit des Inhaltselements zu deaktivieren. Das Text & Medien Element ist dann im Backend noch sichtbar aber im Frontend nicht mehr zu sehen. Außerdem können Sie auswählen, dass Ihr Content-Element nur auf ausgewählten Endgeräten sichtbar ist. Setzen Sie hierfür die entsprechenden Häkchen. Bei Zugriffsrecht können Sie ein Veröffentlichungsdatum und ein Ablaufdatum einpflegen.  
 


Schritt 10

Unter Hinweise können Sie eine Beschrei­bung verfassen. Diese dient lediglich für interne Notizen und ist somit auf der Website später nicht zu sehen.

So könnte die Darstellung Ihres Text & Medien-Elements im Frontend aussehen

Text & Medien Content-Element

Bildposition: neben dem Text rechts. Bildgröße: 50%.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Text & Medien Content-Element

Bildposition: Neben dem Text links. Bildgröße: 50%  
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.


Überschrift Standard

Unterüberschrift

Einspaltiger Absatz / Linksbündig 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 

 

Einspaltiger Absatz / Zentriert / Kursiv
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 


 

Einspaltiger Absatz / Rechsbündig / Fett
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Überschrift Layout 3

Mehrspaltiger Absatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.

Zitat: Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Bildergalerie

Bildgröße 25%


Wählen Sie hier, welches Content-Element Sie anlegen möchten, um zum passenden Tutorial zu gelangen.