Dokumentation (CMS)

Benötigst du detaillierte Informationen und Anleitungen für dein CMS? Unsere umfassende Dokumentation bietet dir alles, was du für die erfolgreiche Nutzung benötigst.

Zuletzt aktualisiert Vor 12 Monaten

Websitedetails-Übersicht

Websitedetails

Auf der linken Seite der Projektnavigation findet man den Punkt Websitedetails. Diese dienen der allgemeinen Information. Per Mausklick lässt sich dieser Bereich aufrufen. Dieser teilt sich in 2 Bereiche auf. Im oberen Bereich befindet sich der gleichnamige Punkt „Websitedetails“ und darunter sind die „Firmendetails“ zu finden.

Die Websitedetails geben darüber Auskunft über unsere im CMS hinterlegten Accountdaten, zum jeweiligen Webprojekt. Zusätzlich lassen sich unter dem Punkt Alternativnamen“, sogenannte Aliase, also alternative Domainnamen zur Hauptdomain finden. Der Punkt Aktiv zeigt, ob die CMS-Nutzung für diese Webseite freigeschaltet ist oder nicht. Auf der rechten Seite der Websitedetails findet man außerdem den Punkt „maximale Tiefe“, welcher die erlaubte Verschachtelungstiefe innerhalb der Seitenstruktur (also wie oft sich Projektseiten untereinander verzweigen dürfen)

Die „maximal Dateigröße“ bezieht sich auf den größtmöglichen Speicherplatzbedarf, den eine einzelne Datei beim Hinzufügen in das System generell beanspruchen darf.


Theme-Design

Das Theme Design ermöglichen es dir, das Erscheinungsbild Ihrer Website individuell anzupassen – ohne Programmierkenntnisse. Hier kannst du folgende visuelle Elemente konfigurieren:

  • Farben für verschiedene Bereiche deiner Website

  • Schriftarten und Schriftgrößen für Texte und Überschriften

  • Logo für die Markenidentität sowie das Favicon, das im Browsertab erscheint

Grundlegende Hinweise zur Nutzung

  • Änderungen, die du hier vornimmst, werden sofort gespeichert und angewendet. Eine Vorschau-Option gibt es nicht.

  • Falls eine Änderung nicht wie gewünscht angezeigt wird, hilft oft das Leeren des Browser-Caches (Strg + F5 oder Cmd + Shift + R).

  • Falls eine Datei nicht hochgeladen werden kann, prüfe das Format und die maximal erlaubte Dateigröße.


Logo – Hochladen, Ändern und Optimieren

Was ist das Logo im CMS?

Das Logo ist das zentrale Markensymbol der Website. Es erscheint meist:

  • Im Kopfbereich (Header) der Website

  • Im Footer, wenn dies im Design aktiviert ist

  • Gegebenenfalls auch auf automatischen E-Mails oder Rechnungen

Wie lade ich ein Logo hoch oder ändere es?

Klicken auf „Logo hochladen“

  • Es öffnet sich ein Dateiauswahlfenster.

Wählen eine Datei von Ihrem Computer aus.

  • Empfohlene Größe: 250 x 250 Pixel (Quadratisch, für beste Darstellung)

  • Unterstützte Dateiformate: .jpg, .png, .svg

  • Maximale Dateigröße: 5 MB

Hochladen & Anzeige prüfen

  • Nach dem Hochladen wird das Logo sofort aktualisiert.

  • Falls das Logo nicht scharf dargestellt wird, prüfe, ob die Auflösung hoch genug ist oder wird das Logo verzerrt? Falls ja, sollte es im Original quadratisch oder mit transparentem Hintergrund (PNG oder SVG) vorliegen.


Favicon – Hochladen, Ändern und Optimieren

Was ist das Favicon?

Das Favicon ist ein kleines Symbol, das in Browsertabs, Lesezeichen und manchmal auch als App-Symbol erscheint. Es dient dazu, deine Website visuell wiedererkennbar zu machen.

Wo erscheint das Favicon?

  • In der Tableiste des Browsers

  • In der Favoriten-/Lesezeichenliste

  • Beim Speichern der Website als Shortcut auf Mobilgeräten

    Besonderheit im CMS:
    Falls du KEIN eigenes Favicon hochlädst, wird automatisch eine Miniatur-Version des Logos als Favicon genutzt. Dies kann allerdings zu schlechter Lesbarkeit führen

Wie lade ich das Favicon hoch?

Klicke auf „Favicon hochladen“.

  • Es öffnet sich ein Dateiauswahlfenster.

Wählen die Datei von ihrem Computer aus

  • Maximale Bildgröße: 800 x 800 Pixel

  • Empfohlene Größe: 192 × 192 Pixel

  • Unterstützte Formate: .jpg, .png, .svg

Hochladen & Anzeige prüfen

Nach dem Hochladen erscheint das Favicon in den Browser-Tabs.

  • Falls es nicht sofort angezeigt wird: Cache leeren oder einen anderen Browser testen.

Tipp:
Vermeide komplexe Logos als Favicon!

Stattdessen eignet sich:

  • Das Symbol aus dem Logo

  • Der erste Buchstabe deiner Marke in Firmenfarbe

  • Eine reduzierte Version des Logos ohne Text

Nicht geeignet:

  • Detaillierte Logos mit Schriftzügen (werden unscharf)

  • Bilder mit vielen Farben oder Verläufen (schwer erkennbar)

Häufige Probleme & Lösungen

Problem

Mögliche Ursache

Lösung

Logo wird verzerrt dargestellt

Falsches Seitenverhältnis

Verwende eine quadratische oder transparente Datei

Logo ist unscharf

Zu niedrige Auflösung

Höhere Bildqualität verwenden (mind. 250 x 250 px)

Favicon wird nicht angezeigt

Cache-Problem

Strg + F5 oder Browser neu starten

Favicon ist nicht erkennbar

Zu viele Details im Design

Einfacheres Icon oder nur einen Buchstaben verwenden

Fehlermeldung beim Hochladen

Falsches Dateiformat oder zu groß

Format prüfen (.jpg, .png, .svg) und Datei unter 5 MB halten


So passt du das Farbschema deiner Webseite an

Farben sind ein zentraler Bestandteil deiner Website. Sie bestimmen nicht nur das Erscheinungsbild, sondern beeinflussen auch, wie Besucher deine Seite wahrnehmen und navigieren. Im Theme Design kannst du alle wichtigen Farben deiner Website individuell anpassen – ohne technisches Wissen.

Was passiert, wenn du die Farben änderst?

  • Die ausgewählten Farben wirken sich auf Buttons, Hintergründe, Texte und andere Elemente der Website aus.

  • Deine Änderungen werden sofort übernommen – es gibt keine Vorschau. Prüfe daher nach der Änderung deine Website direkt im Browser.

  • Achte auf gute Lesbarkeit: Nicht jede Farbkombination ist sinnvoll! Unser CMS hilft dir dabei, Farben mit ausreichendem Kontrast zu wählen.

Übersicht der Farben und ihre Anwendungsmöglichkeiten

Primärfarbe (Primary):
Hauptfarbe der Website, die für wichtige Elemente wie Buttons, Links und Hauptmenüs genutzt wird. Sie sollte auffällig sein und zum Corporate Design des Unternehmens passen.

Sekundärfarbe (Secondary):
Eine unterstützende Farbe für weniger dominante Elemente, oft für zweitrangige Buttons, Akzente oder alternative Hervorhebungen verwendet. Sie ergänzt die Primärfarbe und sorgt für ein harmonisches Design.

Tertiärfarbe (Tertiary):
Dritte Farboption für ergänzende Designelemente, die oft für Icons, Infoboxen oder dekorative Elemente genutzt wird. Diese Farbe sollte nicht mit Primär- oder Sekundärfarbe konkurrieren.

Hintergrundfarbe (Background):
Bestimmt die allgemeine Hintergrundfarbe der Website. Sie ist meist neutral (weiß, hellgrau), um eine gute Lesbarkeit der Inhalte zu gewährleisten.

Oberflächenfarbe (Surface):
Farbe für Boxen, Container oder Karten, die Inhalte strukturieren. Diese Farbe sollte sich leicht vom Hintergrund abheben, ohne zu stark zu dominieren.

Erhöhte Oberfläche (Surface Elevated)
Eine Variante der Oberflächenfarbe für hervorgehobene Elemente wie Pop-ups oder schwebende Boxen. Sie ist meist eine hellere oder dunklere Abstufung der normalen Oberfläche.

Warnfarbe (Warning)
Signalfarbe für Fehlermeldungen oder Warnhinweise. Sie sollte auffällig (z. B. Rot oder Orange) sein, um sofort Aufmerksamkeit zu erzeugen.

Umrandungsfarbe (Border)
Farbe für Rahmen, Trennlinien oder Abgrenzungen zwischen verschiedenen Bereichen auf der Website. Sie sorgt für eine klare Struktur und sollte unauffällig sein (z. B. Grau oder eine gedämpfte Hauptfarbe).

Textfarben

Jede der oben genannten Farben hat ein zusätzliches Text-Feld. Hier bestimmst du, welche Textfarbe auf dem jeweiligen Hintergrund erscheinen soll. Eine gut gewählte Farbkombination sorgt für eine klare Lesbarkeit und eine angenehme Nutzererfahrung.

Beispiel:

  • Wenn du einen hellen Hintergrund (z. B. weiß oder hellblau) wählen, sollte der Text dunkel (z. B. schwarz oder dunkelblau) sein.

  • Wenn der Hintergrund dunkel ist, muss der Text hell (z. B. weiß oder hellgrau) sein.

Zum Thema Barrierefreihheit

Barrierefreie Webseiten ermöglichen es allen Menschen, deine Inhalte problemlos zu nutzen – unabhängig von möglichen Einschränkungen. Besonders für Menschen mit Sehschwäche, Farbblindheit oder anderen Einschränkungen ist es entscheidend, dass Texte und Inhalte gut lesbar sind.

Vorteile einer barrierefreien Farbgestaltung:

  • Bessere Lesbarkeit für Menschen mit Sehschwächen (z. B. Kontrastprobleme oder eingeschränkte Farberkennung)

  • Einfache Bedienbarkeit für ältere Menschen, die empfindlicher auf schlechte Kontraste reagieren

  • Mehr Nutzerfreundlichkeit für alle Besucher, da gut erkennbare Inhalte angenehmer zu lesen sind

  • Bessere Platzierung in Suchmaschinen (SEO), da Google barrierefreie Seiten bevorzugt

Unser CMS unterstützt dich dabei, eine barrierefreie Farbauswahl zu treffen.

Kontrastprüfung – Warum ist sie wichtig und wie funktioniert sie

Ein ausreichender Kontrast zwischen Textfarbe und Hintergrundfarbe ist entscheidend dafür, dass Inhalte für alle Nutzer gut lesbar sind – unabhängig von Alter, Sehfähigkeit oder Endgerät.

Vor allem Menschen mit eingeschränktem Sehvermögen, Farbsehschwächen oder altersbedingten Einschränkungen tun sich schwer, Texte zu erkennen, wenn sich Text und Hintergrund farblich zu ähnlich sind. Auch auf Smartphone-Bildschirmen mit starker Sonneneinstrahlung kann ein schlechter Kontrast dazu führen, dass Inhalte nahezu unlesbar werden.

Der Kontrastwert 4,5:1

Das Verhältnis 4,5:1 ist ein standardisierter Wert, der von der WCAG (Web Content Accessibility Guidelines) vorgegeben wird – ein international anerkannter Standard zur Barrierefreiheit von Webseiten.

Er beschreibt das Helligkeitsverhältnis zwischen zwei Farben – in unserem Fall zwischen Text und Hintergrund. Je höher der Wert, desto besser lesbar ist der Text.

Um die Farbpallette für den Kontrastmodus sehen zu können, aktivierst du an der rechten Seite über den Farben, den Regler. Ist dieser aktiv, wird dir unter jeder deiner Webseitenfarben eine weitere Reihe angezeigt. Hierbei handelt es sich um die Kontrastversionen der Hauptfarben.

Wie hilft das CMS bei der Kontrastwahl?

Damit du dich nicht selbst um komplexe Kontrastberechnungen kümmern musst, zeigt dir unser CMS automatisch an, ob die Farbwahl die Mindestanforderung von 4,5:1 erfüllt. Klicke auf eines der Farbkästchen und ziehe mit der Maus den kleinen weißen Auswahlring durch die gewünschte Intensität der Farbe.

Die regenbogenfarbige Leiste ermöglicht es auch andere Farben aus dem Farbspektrum auszuwählen. Zusätzlich gibt es in der Leiste darunter die Möglichkeit die Transparenz einer Farbe anzupassen. Zu guter Letzt kannst du, sofern du dich damit etwas besser auskennst, auch den Farbcode deines Corporate Designs direkt eingeben.

  • Grüner Haken → Der Kontrastwert ist ausreichend, die Textfarbe ist gut lesbar

  • Rotes Warnsymbol → Der Kontrastwert ist zu niedrig, die Lesbarkeit ist eingeschränkt

Tipp:
Falls ein rotes Warnsymbol erscheint, wählen eine dunklere oder hellere Farbe, um den Kontrast zu verbessern.

Häufige Probleme & Lösungen

Problem

Mögliche Ursache

Lösung

Farbe wird nicht übernommen

Browser-Cache aktiv

Strg + F5 drücken oder Browser neustarten

Text ist schwer lesbar

Falsche Kontrastwahl

Dunklere oder hellere Farbe für Text wählen

Warnsymbol erscheint bei Farbwahl

Zu geringer Kontrast

Farbe anpassen, bis ein grüner Haken erscheint

Website sieht nach Änderungen unruhig aus

Zu viele verschiedene Farben gewählt

Maximal 3 Hauptfarben verwenden (Primär, Sekundär, Tertiär)


Allgemeine Abrundungen auf der Webseite

Hier kannst du die allgemeinen Abrundungen anpassen, die auf der Website verwendet werden. Diese Einstellungen wirken sich auf Stilelemente wie Bilder, Buttons und optische Trennbereiche aus. Ändere die Abrundungen, um das Erscheinungsbild deiner Website weicher oder kantiger zu gestalten.

Was bedeutet „Eckradius“ überhaupt?

Der Eckradius (Border Radius) bestimmt, ob Buttons, Bilder, Eingabefelder oder Boxen weich gerundet oder klar kantig erscheinen. Mit dieser Einstellung kannst du:

  • Harmonische Akzente setzen – abgerundete Ecken wirken freundlicher und moderner.

  • Strukturierte Klarheit schaffen – scharfe Kanten verleihen einen cleanen, minimalistischen Look.

  • Design-Konsistenz sicherstellen – ein einheitlicher Radius sorgt für ein professionelles Gesamtbild.

Stelle dir einen Button mit rechteckiger Form vor:

  • Wenn du den Eckradius auf 0 setzt, sind die Ecken komplett eckig

  • Wenn du ihn auf 12 setzt, sind die Ecken leicht abgerundet

  • Wenn du z. B. 30 oder mehr eingibst, wird der Button fast rund

Wichtig zu wissen:

  • Nur das Design ändert sich – Inhalte wie Texte, Bilder oder Funktionen bleiben unverändert.

  • Die Anpassung wirkt sich nicht auf die Nutzbarkeit aus (z. B. Klickbarkeit von Buttons).

Beispiel-Effekte:

  • Sanfte Rundungen (5 px) → modern & einladend

  • Starke Abrundung (20 px+) → spielerisch & dynamisch

  • Scharfe Ecken (0 px) → clean & minimalistisch

Tipp:
Teste die verschiedene Werte im Live-Editor, um den optimalen Look zu finden!


Schriften - So veränderst du das Schriftbild der Webseite

Die Schriftart ist ein zentrales Gestaltungselement der Website. Sie bestimmt, wie deine Inhalte wirken, ob sie gut lesbar sind und ob deine Website modern, klassisch oder sachlich erscheint. Im Bereich Schriftarten kannst du die verwendeten Schriftarten ganz einfach anpassen – und zwar ohne technisches Wissen.

In unserem CMS unterscheiden wir dabei zwei Schriftbereiche:

  • Auszeichnungsschrift

  • Standardschrift

Auszeichnungsschrift - Für Überschriften und Highlights

Die Auszeichnungsschrift wird auf deiner Website für Elemente verwendet, die besonders auffallen sollen. Dazu gehören z. B.:

  • Überschriften (z. B. „Unsere Leistungen“)

  • betonte Begriffe

  • hervorgehobene Textblöcke oder Aussagen

Wozu dient die Auszeichnungsschrift?
Sie sorgt für Struktur und visuelle Hierarchie, also dafür, dass die Besucher auf einen Blick erkennen, was wichtig ist und was sie zuerst lesen sollten.

Tipp zur Auswahl:
Wähle eine Schriftart, die etwas auffälliger oder stilistisch anders ist als die Standardschrift, aber trotzdem gut zum Gesamtbild der Website passt.

Standardschrift - Für Fließtext, Buttons & Links

Die Standardschrift ist die Hauptschriftart der Website. Sie kommt überall dort zum Einsatz, wo längere Texte oder wiederkehrende Elemente vorkommen, z. B.:

  • Fließtexte auf der Startseite oder Unterseiten

  • Button-Beschriftungen (z. B. „Jetzt Termin vereinbaren“)

  • Menütexte

  • Formulare und Eingabefelder

Worauf solltest du achten?
Die Standardschrift sollte besonders gut lesbar sein – auch auf kleinen Smartphone-Displays oder bei langen Textabschnitten. Moderne Webfonts wie „Lato“, „Roboto“ oder „Open Sans“ sind dafür sehr beliebt, da sie schlicht, neutral und auf allen Geräten gut lesbar sind.

Schriftschnitte - Was bedeutet leicht, regular und fett?

Neben der Auswahl der Schriftart kann man im CMS auch einstellen, wie stark die Schrift dargestellt wird. Diese Einstellungen nennt man Schriftschnitte – sie geben an, wie dünn oder dick ein Text aussieht.

  • Leicht (z. B. 300): Eine dünne, elegante Schrift – oft für dezente Textbereiche oder Zwischenüberschriften

  • Regular (z. B. 400): Die Standard-Darstellung, gut lesbar und neutral – ideal für Fließtext

  • Fett (z. B. 700): Eine stärkere Hervorhebung – z. B. für wichtige Begriffe oder Überschriften

Wichtig:
Nicht jede Schriftart unterstützt alle Schriftschnitte. Wenn du merkst, dass eine Schrift z. B. nicht „fett“ dargestellt wird, kann es sein, dass dieser Schnitt von der Schrift nicht unterstützt wird.

Was ist eine gute Kombination aus Auszeichnungs- und Standardschrift?

Die beiden Schriften sollten sich sichtbar unterscheiden, damit Überschriften auffallen
Gleichzeitig sollten sie stilistisch zusammenpassen, damit die Website einheitlich aussieht.

Beispiel-Kombination:

  • Auszeichnungsschrift: „Work Sans“ (etwas markanter)

  • Standardschrift: „Lato“ oder „Open Sans“ (neutral und gut lesbar)

Häufige Fragen und Probleme

Problem

Mögliche Ursache

Lösung

Schrift sieht auf dem Handy anders aus

Manche Schriften wirken auf kleinen Bildschirmen anders

Standardschrift klar und einfach halten

Fett oder leicht wird nicht angezeigt

Schriftschnitt nicht unterstützt

Andere Schriftart wählen oder nur „regular“ verwenden

Texte sind schwer lesbar

Schrift zu verspielt oder dünn

Lesefreundliche Standardschrift mit gutem Kontrast wählen


Schriftgrößen ändern - so beeinflusst du die Lesbarkeit der Webseite

Die Schriftgrößen bestimmen, wie groß Texte auf deiner Website angezeigt werden. In diesem Bereich legst du fest,

  • wie groß der normale Text (Fließtext) sein soll

  • und wie groß die einzelnen Überschriften (Headline 1 bis 6) dargestellt werden

Ein durchdachtes Größenverhältnis sorgt dafür, dass die Website übersichtlich, professionell und gut lesbar wirkt – egal ob auf dem Smartphone, Tablet oder PC.

Was bedeuten die Überschriftkennzeichnungen 1 bis 6 (H1 bis H6)?

Diese Bezeichnungen stehen für sogenannte HTML-Überschriften. Sie werden auf jeder Website verwendet, um Inhalte zu strukturieren.

  • Überschrift 1 (H1) → Die Hauptüberschrift einer Seite. Kommt nur einmal pro Seite vor (z. B. „Unsere Leistungen“ auf der Startseite).

  • Überschrift 2 (H2) → Unterüberschriften, um Abschnitte klar zu gliedern.

  • Überschrift 3 bis 6 (H3–H6) → Weitere Ebenen für Zwischenüberschriften, z. B. in Blogartikeln, Textblöcken oder FAQ-Bereichen.

Wichtig:
Auch Google nutzt diese Hierarchie, um Inhalte besser zu verstehen. Eine saubere Struktur verbessert die Lesbarkeit für Besucher – und auch Ihre Auffindbarkeit in Suchmaschinen.

Empfohlene Richtwerte für Schriftgrößen

Damit die Website übersichtlich und angenehm zu lesen ist, empfehlen wir folgende Schriftgrößen als Ausgangspunkt. Diese Werte haben sich in der Praxis bewährt und sind auch für mobile Geräte gut geeignet:

Element

Empfohlene Schriftgröße

Hinweis

Fließtext (Standard)

18 px (Basisgröße)

Ideal für Lesetexte auf allen Geräten

Überschrift 1 (H1)

40 – 60 px

Die Hauptüberschrift der Seite – auffällig und präsent

Überschrift 2 (H2)

40 – 45 px

Unterteilung großer Bereiche – sollte sich klar von H1 abheben

Überschrift 3 (H3)

35 – 40 px

Zwischenüberschrift, z. B. in Sektionen oder Textblöcken

Überschrift 4 (H4)

30 – 35 px

Für kleinere Überschriften oder strukturierte Listen

Überschrift 5 (H5)

25 – 30 px

Feinere Gliederung innerhalb von Absätzen oder Inhaltsboxen

Überschrift 6 (H6)

20 – 25 px

Für begleitende Hinweise, Meta-Infos oder weniger dominante Titel


Firmendetails

An dieser Stelle erhält man die Möglichkeit die Kontaktdaten sowie diverse Profile des Unternehmens in den sozialen Netzwerken, individuell anzupassen. Die hier aufgeführten Angaben können mit den Angaben auf der Website verknüpft sein. Das bedeutet, dass Änderungen oder Löschungen immer mit Bedacht durchgeführt werden, da dies Auswirkungen auf die Inhalte der Website haben kann.


Gelöschte Seiten

Die Übersicht der gelöschten Seiten enthält eine Liste aller Projektseiten, die entfernt wurden. Diese Seiten können nachträglich wiederhergestellt werden, sodass sie sowohl auf der Website erneut angezeigt als auch im CMS4 zur Bearbeitung verfügbar sind. Diese Funktion ermöglicht es, versehentlich gelöschte oder temporär entfernte Inhalte problemlos zurückzubringen und weiterzunutzen.


Access Manager

Wenn Sie den Access Manager in Ihrem Vertrag mit aufgenommen haben, finden Sie im Dashboard für diesen einen entsprechenden Reiter. Dieser Reiter ermöglicht Ihnen den Zugriff auf alle Funktionen des Access Managers.

Für detaillierte Anleitungen zur Einrichtung und Antworten auf häufige Fragen besuchen Sie bitte den Beitrag zum Access Manager, der Ihnen umfassende Unterstützung bietet.


Live Editor

Mit dem Live Editor haben Sie die Möglichkeit, Ihre Website ganz einfach und intuitiv selbst zu bearbeiten. Diese Schritt-für-Schritt-Anleitung erklärt Ihnen die grundlegenden Funktionen und hilft Ihnen, Ihre Inhalte professionell und ansprechend zu gestalten – ganz ohne Vorkenntnisse.

Den Live Editor aufrufen

Um den Live Editor zu starten, loggen Sie sich in Ihr Kundendashboard ein und navigieren Sie zum Reiter „Seiten“. Dort sehen Sie eine Übersicht aller Seiten Ihrer Website. Um eine Seite zu bearbeiten, klicken Sie einfach auf den blauen Stift neben der entsprechenden Seite. Dies öffnet den Live Editor, in dem Sie Ihre Änderungen vornehmen können.

Die Navigation im Live Editor

Im Live Editor finden Sie am linken Rand eine praktische Navigationsleiste, mit der Sie zwischen verschiedenen Ansichten wechseln können. Zwei besonders wichtige Reiter sind „Elemente“ und „Vorlagen“.

Reiter “Elemente”

Unter „Elemente“ stehen Ihnen verschiedene Inhaltselemente zur Verfügung, die Sie ganz einfach per Drag-and-Drop an die gewünschten Stellen Ihrer Website ziehen können. Diese Elemente sind die Bausteine Ihrer Webseite – vom einfachen Text bis hin zu Bildern und Videos.

Inhaltselemente:

  • Title (Überschrift):
    Verwenden Sie dieses Element, um Überschriften auf Ihrer Seite zu platzieren. Überschriften helfen dabei, Ihre Inhalte klar zu strukturieren und für Ihre Besucher verständlich darzustellen.

  • Artikel (Text):
    Mit diesem Element fügen Sie ganz einfach Textabschnitte ein. Ob kurze Beschreibungen oder ausführliche Inhalte – hier können Sie den Text so gestalten, wie er auf der Seite erscheinen soll.

  • Bild:
    Dieses Element nutzen Sie, um ein einzelnes Bild auf Ihrer Seite darzustellen. Ziehen Sie das Element an die gewünschte Stelle und laden Sie das passende Bild hoch.

  • Galerie:
    Möchten Sie mehrere Bilder auf einmal anzeigen? Die Galerie eignet sich perfekt, um eine Sammlung von Bildern in einem ansprechenden Layout darzustellen.

  • Datei:
    Falls Sie Dokumente, Bilddateien oder andere Inhalte zum Download anbieten möchten, nutzen Sie das „Datei“-Element. Dies ist ideal für PDFs oder ähnliche Dateien.

  • Video:
    Fügen Sie Videos auf Ihrer Seite hinzu, entweder von lokalen Dateien oder über Cloud-basierte Plattformen wie YouTube oder Vimeo.

  • Button:
    Mit dem Button-Element erstellen Sie anklickbare Schaltflächen. Diese können zum Beispiel auf andere Seiten Ihrer Website, Telefonnummern oder E-Mail-Adressen verlinken.

Strukturelemente:

  • Container:
    Dieses Element gruppiert mehrere Inhaltselemente miteinander. Ein Container hilft Ihnen dabei, Ihre Inhalte klar und übersichtlich zu organisieren.

  • Raster:
    Das Raster-Element ermöglicht es Ihnen, Inhalte in einem vordefinierten Layout anzuordnen. Sie können beispielsweise Text und Bilder nebeneinander platzieren, um ein strukturiertes Erscheinungsbild zu schaffen.

  • Linie:
    Verwenden Sie das Linien-Element, um Trennstriche einzufügen und verschiedene Abschnitte Ihrer Seite voneinander abzugrenzen.

Reiter “Vorlagen”

Im Live Editor stehen Ihnen neben den “Elementen” auch Vorlagen zur Verfügung, die Ihnen helfen, schnell und effizient neue Inhalte in Ihre Website zu integrieren. Diese Vorlagen sind ebenfalls Bausteine, die Sie per Drag-and-Drop an die gewünschten Stellen auf Ihrer Seite ziehen können.

Es gibt zwei Arten von Vorlagen:

  1. Globale Vorlagen:
    Diese Vorlagen sind vordefiniert und universell einsetzbar. Sie wurden so gestaltet, dass sie für verschiedene Bereiche und Zwecke auf Ihrer Website verwendet werden können, unabhängig davon, um welchen Inhalt es sich handelt.

  2. Webseiten-Vorlagen:
    Webseiten-Vorlagen sind speziell auf bestimmte Bereiche Ihrer Website zugeschnitten. Diese Vorlagen wurden mit dem Fokus auf die speziellen Anforderungen Ihrer Website erstellt, sodass Sie schnell spezifische Inhalte wie bspw. Teammitglieder einfügen können. Diese Vorlagen sind besonders nützlich, wenn Sie häufig ähnliche Inhalte aktualisieren oder hinzufügen möchten.

So verwenden Sie Vorlagen:

Um eine Vorlage in Ihre Seite zu integrieren, gehen Sie einfach in den Reiter „Vorlagen“ im Live Editor. Wählen Sie die gewünschte Vorlage aus und ziehen Sie sie per Drag-and-Drop an die Stelle auf Ihrer Seite, an der sie erscheinen soll. Nach dem Einfügen können Sie die Inhalte der Vorlage ganz einfach bearbeiten, um sie an Ihre spezifischen Bedürfnisse anzupassen.

Vorteile der Vorlagen:

  • Zeitersparnis:
    Vorlagen ermöglichen es Ihnen, schnell und ohne großen Aufwand neue Inhalte einzufügen.

  • Konsistenz:
    Durch die Nutzung von Vorlagen bleibt das Design Ihrer Website einheitlich und professionell.

  • Einfache Anpassung:
    Vorlagen können nach dem Einfügen individuell angepasst werden, sodass sie perfekt zu Ihrem Inhalt passen.