Einfache Inhalte

  • Aktualisiert

Textbasierte Elemente

Titel

Mit dem Inhaltselement Titel können Sie HTML-Kopfzeilen-Tags einfügen und so eine strukturierte Hierarchie in Ihrem Design schaffen. Titel spielen eine wichtige Rolle bei der Suchmaschinenoptimierung für Landingpages, da Suchmaschinen bei der Suche nach Schlüsselwörtern und bei der Generierung von Suchergebnissen dem Inhalt von Überschriften Priorität einräumen. Überschriften ermöglichen es auch Bildschirmlesern, zu navigieren und Ihren Inhalt richtig zu interpretieren.

Absätze und Listen

Das Inhaltselement Absatz ist für lange Texte optimiert und bietet Kontrolle über Absatzstile und Abstände. Mit dem Inhaltselement Liste können geordnete oder ungeordnete Listen erstellt werden, die über anpassbare Stile und Abstandsoptionen verfügen.

Einige Einstellungen im Seitenbereich sind ausschließlich für Listen verfügbar:

  • Listentyp: nummeriert oder mit Aufzählungszeichen.
  • Listenstil: Passen Sie den Stil von Aufzählungszeichen oder Zahlen an.
  • Liste beginnen ab: Diese Option wird verfügbar, wenn Sie eine nummerierte Liste auswählen, und ermöglicht es Ihnen, die Startnummer anzugeben.
  • Listenabstände und Einrückung: Passen Sie listenspezifische Abstände an.

Bilder

Lokales Bild hinzufügen

Voraussetzungen: Sie sehen den Design-Editor. Das gewünschte Bild befindet sich auf ihrem lokalen System.

  1. Fügen Sie ein Bild-Element zum Design hinzu (siehe Design-Editor-Grundlagen: Ein Objekt hinzufügen).
  2. Ziehen Sie ein Bild von ihrem lokalen System auf das Bild-Element und lassen Sie dort die Maustatste los.
    → Das Bild wird zum Design hinzugefügt.

Bild aus dem Dateimanager hinzufügen

Voraussetzungen: Sie sehen den Design-Editor. Das gewünschte Bild befindet sich im Dateimanager (siehe Content management).

  1. Fügen Sie ein Bild-Element zum Design hinzu (siehe Design-Editor-Grundlagen: Ein Objekt hinzufügen).
  2. Klicken Sie im leeren Bildelement auf Durchsuchen.
    → Der Dateimanager wird angezeigt.
  3. Finden Sie die gewünschte Datei.
  4. Klicken Sie neben der Dateivorschau auf Einfügen.
    → Das Bild wird zum Design hinzugefügt.

Datei-Manager schließen

Kontext: Wenn Sie den Dateimanager öffnen und dann doch kein Bild von dort einfügen, müssen Sie ihn manuell schleßen.
Voraussetzungen: Sie sehen den Dateimanager.

  1. Klicken Sie oben rechts auf bee editor file manager close.png (schließen).
    → Der Design-Editor wird angezeigt.

Extern gehostetes Bild einfügen

Voraussetzungen: Sie sehen den Design-Editor. Das gewünschte Bild ist unter einer dauerhaft gültigen URL vefügbar.

  1. Fügen Sie ein Bild-Element zum Design hinzu (siehe Design-Editor-Grundlagen: Ein Objekt hinzufügen).
  2. Wählen Sie das Bild-Element aus.
  3. Finden Sie im Seitenbereich im Abschnitt Inhaltseigenschaften das Feld URL.
  4. Geben Sie die URL ihres Bildes in das Feld ein.
  5. Drücken Sie die Eingabetaste oder klicken Sie in ein anderes Feld.
    → Das Bild wird zum Design hinzugefügt.

Bildeditor öfnen

Kontext: Sie können Bilder mit einem integrierten Werkzeug bearbeiten.
Voraussetzungen: Sie sehen ein Design mit einem Bild im Design-Editor.

  1. Wählen Sie das Bildelement aus.
  2. Klicken Sie im Seitenbereich, im Abschnitt Inhaltseigenschaften auf Bild bearbeiten.
    → Das Bild wird im Bildeditor geöffnet.

Bildeinstellungen

Wenn ein Bild ausgewählt ist, zeigt der Seitenbereich einige bildspezifische Optionen:

  • Automatische Breite: Diese Option is verfügbar, wenn ihr Bild größer als das Inhaltselement ist. Sie können sie ausschalten, wenn sie das Bild manuell skalieren möchten.
  • Ausrichtung: Sie können die horizontale Ausreichtung des Bildes einstellen.
  • Alternativer Text: Sie können einen Text eingeben, der erscheint, wenn das Bild nicht angezeigt werden kann.

Icons

Überblick

Icons dienen als kleine, ausdrucksstarke Elemente, die Akzente in ihrem Inhalt setzen können. Das Inhaltselement Icon vereinfacht auch die gemeinsame Verwendung von Text und Bildern: Sie können einem Icon auf jeder der vier Seiten (oben, unten, rechts oder links) Text hinzufügen. Ein Anwendungsfall für Icons ist das Ersetzen traditioneller Aufzählungspunkte für eine visuell ansprechendere Liste.

Icons werden über den Dateimanager definiert. Laden Sie geeignete kleine Bilder in den Dateimanager hoch, um sie als Icons zu verwenden. Wenn Sie noch keine Icon-Bilder hochgeladen haben, können Sie mit dem Standard-Icon-Bild experimentieren: designarea_icon_default.png.

Icon hinzufügen

Voraussetzungen: Sie sehen ein Design im Design-Editor. Das gewünschte Bild befindet sich im Dateimanager. (siehe Content Management).

  1. Fügen Sie ein Icon-Element zum Design hinzu (siehe Design-Editor-Grundlagen: Objekt hinzufügen).
  2. Wählen Sie das leere Icon-Element aus.
  3. Klicken Sie im Seitenbereich auf  + Neues Icon hinzufügen.
    → Ein neuer Icon-Abschnitt erscheint im Seitenbereich.
  4. Klicken Sie im Icon-Abschnitt auf Bild ändern.
    → Der Dateimanager wird angezeigt.
  5. Finden Sie das gewünschte Bild und klicken Sie auf einfügen.
    → Das Icon wird zum Design hinzugefügt.
  6. Optional: Um weitere Icons zum gleichen Icon-Element hinzuzufügen, wiederholen Sie die Schritte 3-5.

Text zu einem Icon hinzufügen

Voraussetzungen: Sie haben ein Icon zu einem Design hinzugefügt.

  1. Wählen Sie das Icon-Element aus.
  2. Aktivieren Sie im Seitenbereich, im Abschnitt des gewünschten Icons die Option Mehr.
  3. Geben Sie im Feld Icontext einen Text ein.
    → Das Feld Textposition wird angezeigt.
  4. Wählen Sie im Feld Textposition, wo der Text relativ zum Icon angezeigt wird.

Mehr Icon-Einstellungen

Wenn ein Icon-Element ausgewählt ist, sind einige Icon-spezifische Einstellungen im Seitenbereich verfügbar. Um alle Einstellungen zu sehen, müssen Sie den Schalter Mehr aktivieren.

Wenn Sie mehrere Icons in ein und dasselbe Icon-Element eingefügt haben, können Sie sie im Seitenbereich neu anordnen. Klicken Sie in den Bereich eines Icons auf sidepanel_draghandle.png (Griff) und ziehen Sie das Icon an eine andere Position.

Mit den Feldern Icongröße und Abstand der Icons können Sie die Größe der Icons und den Abstand zwischen ihnen festlegen. Alle Icons innerhalb eines Icon-Elements haben die gleiche Größe.

Layout-Elemente

Überblick

Trenner und Abstände sind Inhaltselemente, die der visuellen Strukturierung eines Designs dienen. Beide schaffen Raum zwischen anderen Elementen. Sie unterscheiden sich jedoch in ihrem Erscheinungsbild und bei den Optionen, die im Seitenbereich zur Verfügung stehen.

Trenner

Das Trennerelement fügt eine Linie in Ihr Design ein, um verschiedene Teile visuell abzugrenzen. Die folgenden Einstellungen sind im Seitenbereich verfügbar:

  • Transparent: Wenn Sie keine sichtbare Linie wünschen, schalten Sie die Option Transparent ein.
  • Trennlinie: Passen Sie das Aussehen der Linie mit den Einstellungen in der Seitenleiste für Linienstil (durchgezogen, gepunktet, gestrichelt), Höhe und Farbe an.
  • Breite und Ausrichtung: Sie können die Breite als Prozentsatz der Spaltenbreite festlegen und die Trennlinie links, mittig oder rechts ausrichten.
  • Abstand: Wie bei anderen Inhaltselementen stehen auch hier Abstandsoptionen zur Verfügung. (Der maximale Abstand auf einer Seite beträgt 60px.)

Abstände

Abstände sind im Wesentlichen transparente Trenner, die Abstand ohne sichtbare Linie erzeugen. Die einzige Einstellung im Seitenbereich für Abstände ist die Höhe, so dass Sie die Größe des Weißraums in Ihrem Design steuern können.