Inhalts-Abschnitt in Seite einfügen

Um einen Text auf Ihre Seite einzufügen wählen Sie das Inhaltselement „Inhaltsabschnitt“ aus und fügen ihn per „Drag & Drop“ an der gewünschten Stelle auf Ihrer Seite ein. Sie können den Inhaltsabschnitt innerhalb der rot umrandeten Stellen platzieren.

Inhaltsabschnitt platzieren

Nach dem Sie den Inhaltsabschnitt auf Ihrer Seite platziert haben, können Sie diesen über den direct-edit-Button bearbeiten. Beim überfahren des Buttons erscheint das Menü mit den Ein-stellungen des Inhaltsabschnittes. Über den Bearbeitungsstift gelangen Sie in den Bearbei-tungsmodus.

Inhaltsabschnitt Element bearbeiten

Bearbeiten des Inhaltsadschnittes

Der Text-Editor

Im Bearbeitungsmodus, dem Text-Editor stehen Ihnen alle Möglichkeiten in der Bearbeitung zur Verfügung. Hier kann auch ein Bild und/oder ein Link eingefügt werden.

Bearbeiten Inhaltsabschnitt

Als erstes sollten Sie dem Inhaltsabschnitt eine Überschrift geben, damit der Inhaltsabschnitt im Nachhinein von Ihnen wieder identifiziert werden kann. Dieses Feld sollte immer ausgefüllt werden, auch wenn Sie die Überschrift nicht wünschen. Die Überschrift können Sie in den Einstellungen ausblenden.

Über die   + -Schaltflächen können Sie dem Inhaltsabschnitt ein Bild und/oder einen Link hinzufügen. Beim Verschieben des Inhaltsabschnitts in einen anderen Seitenbereich werden Text und Bild an die jeweiligen Größenverhältnisse angepasst.

 

Texte einfügen und formatieren

Bei dem Text-Editor, der in OpenCms verwendet wird, handelt es sich um eine Version des Tiny MCE. Wir haben für Sie bestimmte Funktionen dieses Text-Editors zur Verfügung gestellt, jedoch nicht alle, da sämtliche Layout-Einstellungen, wie z.B. die Text-Formatierung (Größe der Überschriften, Schriftgröße) in den CSS-Template-Einstellungen konfiguriert werden.

Texte können direkt über den Text-Editor mit der Tastatur eingegeben werden. Bei längeren Texten empfiehlt es sich, zunächst die Texte mit einem Textverarbeitungsprogramm wie MS Office Word zu schreiben; sie werden dann über die Zwischenablage in den Text-Editor eingefügt.

Textformatierung

(1)   Mit den Pfeiltasten können Sie Bearbeitungen rückgängig machen und wieder herstellen.

(2)   Mit diesem Button löschen Sie die Formatierungen wieder.

(3)   Diese drei Buttons haben Zeit keine Funktion. Weiteres erfahren Sie unter 1. (Einfügen von Texten über die Zwischenablage)

(4)   Hier können Sie die Formatierung von Wörtern oder vom gesamten Text ändern (fett, kursiv, unterstrichen und durchgestrichen)

(5)   Diese Buttons helfen Ihnen bei der Textausrichtung (linksbündig, mittig, rechtsbündig und im Block)

(6)   Mit den Buttons können Sie Auflistungen erstellen.

(7)   In diesem Drop-down Menü, können Sie hinterlegte Formatvorlagen zur Überschrift auswählen. Als Standard für normale Texte  wird „Absatz“ ausgewählt.

(8)   Hier können Sie Links in den Text einbauen.

(9)   Sonderzeichen können Sie hier auswählen und in Ihren Text einfügen.

 

Einfügen von Bildern, Hochladen von eigenen Bildern

Dieser Schritt erläutert Ihnen die Einbindung von Bildern. Sie befinden sich also bei der Erstellung eines Inhaltsabschnittes in der Bearbeitungsmaske. Fahren Sie mit der Maus über den
direct-edit-Button auf Höhe des Wortes „Bild“ und klicken Sie dann auf den Plus-Zeichen, um ein Bild hinzuzufügen.

 

Öffnen Sie im Feld „Bildpfad“ die Bildergalerie, indem Sie auf das Ordnersymbol klicken.

Bildpfad wählen

Nun öffnet sich das Fenster, in dem Sie Ihre Bildergalerien sehen.

Galerien

Über das Lupen-Symbol gelangen Sie in die Bildergalerie, in der alle Bilder angezeigt werden.

Ansicht Galerie

Hier können Sie ein Bild auswählen, das bereits vorhanden ist, oder Bilder über den Upload-Pfeil hochladen. Nach anklicken des Upload-Pfeils öffnet sich ein Fenster, das die Dateiverwaltung des Arbeitsplatzes zeigt, von der aus man auf seine Bilderordner auf dem PC zugreifen kann. Dort können bei einem Upload-Vorgang auch mehrere Bilder auf einmal ausgewählt werden.

Dialog Upload

Im nachfolgenden Abfragefenster werden die Titel der Bilder, eine evtl. Beschreibung und das Copyright abgefragt. Bitte füllen Sie auf jeden Fall das Copyright aus. Über ‚Vor‘ wechseln Sie von Bild zu Bild, beim letzten werden alle Bilder über ‚Fertig‘ gespeichert.

Dateieigenschaften Upload

Die Bilder sind nun in der Bildergalerie und können von dort für die Website genutzt werden.

Grafik auswählen
Link hinzufügen

Um einen Link zu hinterlegen, fügen Sie wie im vorherigen Schritt über das Plus-Zeichen einen Link hinzu. Allerdings erscheint dieser nur, wenn Sie den Textbaustein als Teaserbox anzeigen lassen. Dies ist zu empfehlen, wenn Sie eine Vorschau auf einen längeren Text geben wollen.

Mehr dazu können Sie in der Anleitung „Teaserbox“ erfahren.

KI Link hinzufügen

In dem Feld ‘Text‘, können Sie einen beliebigen Linktext angeben, der anstelle des Links angezeigt wird. Bleibt das Feld leer, so wird der Link selber angezeigt.

Im Feld ‘Ziel‘ tragen Sie den Link der Seite, auf die Sie verweisen möchten ein. Wenn Sie auf eine Ihrer eigenen Seiten verweisen wollen, klicken Sie auf das Ordnersymbol am Ende der Zeile. In dem neuen Fenster können Sie dann die Seite in der Sitemapstruktur auswählen und mit den Häkchen bestätigen.

Sitemapstruktur Link

Verweisen Sie auf eine andere Internetseite, so fügen Sie hier den Link zur Seite ein. Damit sich die Webseite in einem neuen Fenster öffnet, und der Besucher auf Ihrer Webseite weiterhin surfen kann, setzen Sie das Häkchen im Kontrollkästchen „In neuem Fenster öffnen.“

Wenn Sie fertig die Bearbeitung Ihres Inhaltsabschnitts abgeschlossen haben, können Sie die Änderungen speichern, indem Sie auf den Button „Speichern und Schließen“ klicken.

Speichern & Schließen
Der Inline-Editor

Mit dem Inline-Editor können Sie ganz einfach Korrekturen am Text (Rechtschreibfehler oder Telefonnummer) vornehmen sowie Textpassagen ergänzen.

Die Editiermöglichkeiten des Textes stehen Ihnen auch hier zur Verfügung.

Inline Editor

Einstellungen des Inhaltselementes

In den Element „Einstellungen vom Inhaltsabschnitt“ können Sie die Darstellung des Elementes anpassen. Der Funktionsumfang der Einstellung reicht von der Bildanordnung über die Hintergrundfarbe bis hin zu Effekten, die beim Anklicken mit der Maus ausgelöst werden.

Um in das Element Einstellungen zu gelangen, wählen Sie beim über die  des direct-edit-Schaltfläche das Zahnrad „Element Einstellungen“ aus.

In dem sich öffnenden Ansichtsfenster, nehmen Sie die Einstellungen zum Element:

Einstellungen am Element
Elementeinstellungen
Option für die Vorlage

Wenn Sie beim Bearbeiten der Einstellung das Kontrollkästchen aktiviert lassen, übernimmt OpenCms die Einstellungen in Vorlage für das nächste Element.

Option für die Vorlage Kontakt
Formatter (Format)

In diesem Drop down Feld können Sie die Anordnung der Platzierung von Überschrift, Text und Bild vornehmen, sowie die Bildgröße und Anordnung festlegen (1). Im zweiten Bereich der Liste können Sie sich nur einzelne Bereiche des Inhalts-Abschnittes anzeigen lassen (2).

Mit den Einstellungen im dritten Bereich können Sie die Darstellung des Inhaltsabschnittes festlegen (3):

Image with animation effect: Erzeugt ein Bild mit animiertem Effekt und zuschaltbaren Texten, geeignet zum Aufbau eines Teasers

Image with zoom option:        Bild mit Vergrößerung bei Klick

Jumbotron layout:                  Überdimensionierte Darstellung des Textes

Icon Box layout:                     Der Text wird als Icon Box dargestellt

Um das Icon zu ändern, wählen Sie in der Liste das gewünschte Icon aus.

Iconauswahl
Format
Wrapper CSS Klasse(n)

In dem Feld Wrapper CSS Klasse(n) können Sie sich auf in OpenCms hinterlegte Farben beziehen, die Sie als Hintergrundfarbe im Element hinterlegen.

Wrapper CSS

Um eine Hintergrundfarbe im Element zu hinterlegen, tragen Sie einen der folgenden Werte in das Feld ein:

CSS-Klassen:

Die Bezeichnung der CSS-Klassen setzen sich zusammen aus Hintergrund (bg) - Farbe (in englischer Schreibweise) z.B.:

bg-red, bg-blue, bg-green, bg-yellow, etc. (Primär- und Sekundärfarben)

 

Überschrift Stil

Um die Größe der Überschrift anzupassen, wählen Sie in den Einstellungen einen Überschriftstil aus.

Überschriftsstil
Überschrift Größe

Wählen Sie hier die Größe der Überschrift aus.

Überschrift Größe
Bild Effekt

Um Bildern Effekte zuzuweisen, wählen Sie diese im „Menü Bildeffekt“ aus.

Bildeffekt
Bild Link

Sie können sich den im Inhaltselement hinterlegten Link auf dem Bild in verschiedenen Formen anzeigen lassen.

Bild-Link
Bildunterschrift

Legen Sie fest, ob die Bildunterschrift angezeigt werden soll.

Bildunterschrift
Bild Copyright / Bild Text

Wenn das Copyright © zum Bild angezeigt werden soll, aktivieren Sie das entsprechende Kont-rollkästchen.

Bild-Copyright
Text Stil

Hier können Sie auswählen, wie der Text des Inhaltselementes dargestellt werden soll.

Text-Stil
Zeige in Gerät

Hier können Sie wählen, in welchen Geräten die Elemente dargestellt werden sollen.

Zeige in Geräten

Im Anschluss bestätigen Sie Ihre Einstellung mit Ok. Fertig.