# Khepri Template - Wissensdatenbank

<figure><img src="/files/YQAi8Ho1GOLhdlcHkt4N" alt=""><figcaption></figcaption></figure>


# Einleitung

Hallo! Schön, dass du hier her gefunden hast.

{% hint style="info" %}
Diese Dokumentation bezieht sich auf die aktuellste Version 4.0.1\
Wo du die Version deiner Installation erfährst, ist [hier](/system/welche-version-habe-ich) erklärt
{% endhint %}

Hier findest du alles, was du zum Administrieren und Verwalten deiner Website wissen musst.\
Das Khepri Template ist ein so genanntes "Conten Management System" (CMS). Das bedeutet, du kannst einen Großteil deiner Website selbst und ohne großen Aufwand anpassen. Wenn du dir eine zusätzlich Funktion wünscht, kannst du [uns gerne kontaktieren](https://khepri.design/kontakt) und wir finden eine Lösung.

### Was kanns du bereits alles tun?

* Seiten anlegen / löschen / pflegen / designen
* Blogbeiträge / News erstellen
* Events / Termine erstellen
* Hauptmenü / Footermenü anpassen
* Bildergalerien erstellen
* Social Media Icons hinzufügen
* META-Informationen pflegen (Suchmaschinen-Optimierung / SEO)
* kleine Anpassungen am Design der Website

### Wie kannst du deine Website bearbeiten?

Neben der Website für deine Kunden / Besucher läuft im Hintergrund eine Administrationsoberfläche. Diese erreichst du, in dem du "/admin" in der Adresszeile deiner Browsers, hinter deiner Domain ergänzt. Zum Beispiel "deineDomain.de/admin".

Du landest auf der Login-Seite. Den Zugang (Mail + Passwort) hast du von uns per Mail erhalten. Du kannst später jederzeit neue Zugänge für deine Kollegen anlegen lassen oder deine Daten ändern.

Hast du dich angemeldet, landest du auf dem Dashboard. Wie es nun weiter geht, erfährst du im nächsten Schritt.


# Dashboard

Das Dashboard ist die erst Ansicht, die nach dem erfolgreichen Login erscheint. Hier kannst du grundlegende Einstellungen für deine Website treffen oder in einzelne Seiten navigieren.

<figure><img src="/files/YeW7QL7bjapXQjmYA4AF" alt=""><figcaption></figcaption></figure>

Das Dashboard ist in 5 Tabs eingeteilt. "Seiten / Inhalte", "Design", "Social Media", "Grundeinstellungen" und "Dateien / Bilder".

Mehr über die einzelnen Bereiche erfährst du in den folgenden Seiten.


# Seiten / Inhalte

<figure><img src="/files/0hsrMtdFXFdvyfoIzNRW" alt=""><figcaption></figcaption></figure>

Hier findest du zunächst 3 Hilfe-Schaltflächen.

**Support anfragen** - führt dich zu unserem Supportformular, über welches du uns kontaktieren kannst

**Dokumentation / Hilfe** - leitet dich auf diese Hilfe-Dokumentation

**Changelog** - führt dich auf eine Übersicht in welcher du du Änderungen der einzelnen Versionen einsehen kannst

Direkt darunter siehst du deine angelegten Seiten, kannst diese sortieren, bearbeiten oder neu erstellen.\
Suchst du eine Unterseite z.B. "Unternehmen" > "Über uns", klicke zunächst auf "Unternehmen" um die Unterseiten einsehen zu können.

Eine Seite wird in der Übersicht als Kachel dargestellt:

<figure><img src="/files/6z8ZJQYiWIAZBemOg8Xc" alt=""><figcaption></figcaption></figure>

Über das 6-Punkte Icon kanst du per Drag-and-Drop die Seite verschieben (erscheint, wenn Mauszeiger über Kachel). In der Reihenfolge, in der die Seiten in der Administration liegen, werden diese in den Menüs auf der Website angezeigt (wenn für ein Menü aktiviert).

Der farbige Kreis zeigt den Status der Seite.

**Grün** = öffentlich; Die Seite ist für jeden Besucher zugänglich\
**Grau** = öffentlich; Die Seite ist für jeden Besucher zugänglich und kann nicht deaktiviert werden (z.B. Startseite oder Impressum)\
W**eiß und Grau** = ungelistet; Die Seite ist für jeden Benutzer über den direktlink sichtbar, wird aber aus allen Menüs ausgeblendet (gut für Landingpages)\
**Rot** = Entwurf; Die Seite ist nur für dich als angemeldeten Administrator sichtbar

Über das 3-Punkte Icon kannst du verschiedene Aktionen für Seite ausführen. Darunter z.B. Löschen, Duplizieren, Umbennen oder die aufrufbare URL verändern.

<figure><img src="/files/xTK9L5COJCgfppX245py" alt=""><figcaption></figcaption></figure>

Hierüber kannst du auch die Bearbeitungsmaske der Seite öffnen. Selbiges erreichst du auch durch einen einfachen Klick auf die Kachel.

{% hint style="success" %}
Wie du Seiteninhalte bearbeitest erfährst du [hier.](/seiten-pflegen-pagebuilder/layouts-blocke-erstellen)
{% endhint %}

{% hint style="success" %}
Wie du eine neue Seite anlegst, erfährst du [hier.](/seiten-anlegen/seiten-anlegen)
{% endhint %}


# Design

Unter "Design" kannst du die globale Optik deiner Website anpassen.\
Dies ist ein passiver Bereich, das heisst, die Werte sind voreingestellt und müssen nicht unbedingt verändert werden.

<figure><img src="/files/fHR0S5SslCAmIX35YZNw" alt=""><figcaption></figcaption></figure>

Im ersten Bereich kannst du die Farbwerte anpassen. Diese werden z.B. für Buttons, Texte oä. verwendet. Dazu kannst du noch die Eckenrundung anpassen, die global auf deiner Website für Buttons, Boxen oder PopUp-Fenster verwendet wird.

Weiter unten kannst du die Überschriften der Footerspalten anpassen. Die 3. Spalte fungiert oft als rechtliche Spalte und wird von uns ggf. unterhalb des Footers platziert. In diesem Fall hat die Spalte keine überschrift.

<figure><img src="/files/mMisLPznWKMlRO3sAzOP" alt=""><figcaption></figcaption></figure>

Abschließend kannst du noch den Text im Fußbereich deiner Seite anpassen.

<figure><img src="/files/fFmJIQ4jV3y7TW7ftWru" alt=""><figcaption></figcaption></figure>


# Social Media

Im Bereich "Social Media" kannst du Einstellen, welche sozialen Medien und Profile du auf deiner Website verlinken möchtest. Diese werden in der Regel im Footer angezeigt.

<figure><img src="/files/DBVBP42qEG8V13MMHsyZ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/X5ZywirdWWFgcg5PlsTk" alt=""><figcaption></figcaption></figure>

Ein paar Social Media Plattformen sind voreingestellt. Die Icons auf der Website werden aber erst angezeigt, wenn ein Link / Profil hinterlegt ist. Du kannst über das Plus aus den verschiedensten Icons auswählen. Zusätzlich zu den Social Media Profilen kannst du auch einen anderen Link oder eine Telefonnummer hinterlegen. Diese bekommen entsprechend neutrale Icons.

<figure><img src="/files/X6ojPWu329qJHwKNR5xE" alt=""><figcaption></figcaption></figure>

Mit einem Doppelklick auf das angelegte Icon, öffnet sich die Bearbeitungsmaske. Trage hier den Link zu deinem Profil ein. Öffnet ein Besucher diesen Link an seinem Smarphone, öffnet sich entsprechend die App, wenn vorhanden.\
Über den Schalter "deaktivieren" kannst du das Icon auf der Website ausblenden, ohne es komplett zu löschen.

<figure><img src="/files/jwLzh5Y2j8D7Qcx0ozQ8" alt=""><figcaption></figcaption></figure>

Wenn du das Icon löschen möchtest, wähle es mit einem Einzelklick aus. Über das Kontextmenü wählst du dann den Papierkorb. Neben dem löschen, kannst du auch hier die Reihenfolge der Icons verändern, in dem du im Kontextmenü das 6-Punkte Icon anklickst und ziehst.

<figure><img src="/files/sdChecJ8jAplQ5bczdO5" alt=""><figcaption></figcaption></figure>


# Grundeinstellungen

Die Grundeinstellungen sind, ähnlich wie der Bereich "Design" ein passiver Bereich. Du musst hier in der Regel keine größeren Änderungen vornehmen.

**Wartungsmodus:** Wenn aktiv, wechselt deine Website in den Wartungsmodus. Das bedeutet, deine Seiten sind nicht mehr erreichbar (mit Ausnahme von Impressum und Datenschutz) und es wird global ein Hinweis angezeigt, dass die Seite vorübergehend offline ist. Dieser Modus kann jederzeit ohne bedenken aktiviert / deaktiviert werden.

<figure><img src="/files/2x7wkaIPv6hcJdPsEQwP" alt=""><figcaption></figcaption></figure>

**Startseite in Navigation anzeigen:** Im Hauptmenü wird die Startseite mit aufgeführt.

**Firmenname:** Der Name deiner Firma, Marke, Verein oder Institution wird im Browsertab und in anderen META-Informationen verwendet.

**Kontakt E-Mail:** Diese E-Mail Adresse wird auf der Wartungsseite angezeigt. Je nach Anpassung wird sie auch an anderen Stellen verwendet.

**Robotstag:** Hier sollte nur nach Absprache etwas eingetragen werden. Google kann bei einer falschen Konfiguration die Startseite aus dem Suchindex werfen, was dazu führen kann, dass die Seite nicht mehr von Google gefunden wird.

**Thema der Seite:** Trage hier mit Komma getrennte Stichworte ein, um Google dabei zu helfen, deine Website zu interpretieren (z.B. "Yoga, Wellness, Heilung")

**Vorschaubild:** Lade hier ein Bild hoch, welches Vorzugsweise von Google als Vorschaubild für deine Startseite interpretiert wird. Empfohlen ist hier die größe 1024x1024p. Das Bild wird zum Beispiel in mobilen Suchergebnissen oder beim Teilen via Social Media angezeigt.

**Kurzbeschreibung:** Die Kurzbeschreibung wird für die Startseite, zusätzlich zum Firmennamen, im Browsertab angezeigt (z.B. "Startseite")

**Beschreibung:** Die Beschreibung ist eine META-Information, die nicht direkt auf der Website sichtbar ist, aber zum Beispiel in Google Suchergebnissen unter dem Seitentitel angezeigt wird:

<figure><img src="/files/dD6BLM4ASMFUkTryaXQR" alt=""><figcaption></figcaption></figure>


# Dateien / Bilder

Unter "Dateien / Bilder" hast du einsicht in alle Dateien und Bilder, die du auf deinen Seiten verwendest.

<figure><img src="/files/FNG3unIl26cctxVNkzNG" alt=""><figcaption></figcaption></figure>

Über das 3-Punkte Icon des entsprechenden Bildes hast du verschiedene Optionen:

**Öffnen:** Öffnet das Bild oder die Datei in einem neuen Fenster. Hier kannst du dieses zum Beispiel herunterladen.

**Umbennenen:** Verändert den hinterlegten Dateinamen

**Ersetzen:** Du kannst das Bild oder die Datei mit einer Datei von deinem Computer ersetzen. Dieses wird dann an allen stellen auf der Website, wo dieses in Verwendung ist ersetzt

**Löschen:** Löscht die Datei oder das Bild an allen verwendeten Stellen.


# Seiten anlegen

Neue Seiten kannst du über das Dashboard mit dem Button "Hinzufügen" anlegen. Möchtest du eine Unterseite anlegen, klicke auf die ensprechende Seite und dann in der neuen Maske bei "Unterseiten" auf "Hinzufügen".

<figure><img src="/files/D3wz7MNZovqrMxGv6UW3" alt=""><figcaption></figcaption></figure>

Wähle zunächst einen Titel für die Seite. Dieser wird später zum Beispiel im Browsertab oder in Menüs angezeigt. Die aufrufbare URL ergibt sich automatisch aus dem Titel, kann aber optional verändert werden.

Die Auswahl der richtigen Vorlage ist wichtig, da diese unterschiedliche Einstellungsmöglichkeiten bieten. Du hast folgende optionen:

* Seite
* Link
* Beitragsübersicht
* Evetübersicht
* Kontakt

Mehr über die einzelnen Vorlagen ließt du auf den folgenden Seiten.

{% hint style="warning" %}
Egal für welche Vorlage du dich entscheidest, du musst den Status der Seite anpassen, um Sie für deine Besucher zu veröffentlichen.
{% endhint %}

<figure><img src="/files/BuitcRDTGHgwHejmq28Z" alt=""><figcaption></figcaption></figure>


# Seite

Die Vorlage "Seite" wird in den meisten Fällen für dich in Frage kommen.

<figure><img src="/files/uJ9aJACbWQHTg8PMi6jZ" alt=""><figcaption></figcaption></figure>

Die Bearbeitungsmaske ist in 3 Bereiche eingeteilt.\
Unter "Inhalt" kannst du weitere Seiten anlegen und den Seiteninhalt der aktuellen Seite befüllen.

{% hint style="success" %}
Wie du den Seiteninhalt mit dem Pagebuilder gestaltest erfährst du [hier](/seiten-pflegen-pagebuilder/layouts-blocke-erstellen)
{% endhint %}

Im Tab "META-Daten" kannst du Suchmaschinen relevante Daten einpflegen (zum Beispiel für Google).  Pflegst du diese nicht, versuchen Suchmaschinen die Daten aus deinem Seiteninhalt zuziehen. In vielen Fällen reicht das aus.

Der Tab "Konfiguration" bietet dir im Bereich "Menü-Zuweisung" die Möglichkeit, zu entscheiden, in welchem Menü die Seite angezeigt wird.

Im Bereich "Sonstiges" kannst du optional ein Icon festlegen, welches im Menü vor dem Seiteneintrag angezeigt wird. Welches kürzel eingetragen werden musst siehst du auf [fontawesome.com](https://fontawesome.com/search?o=r\&m=free).

<figure><img src="/files/Fwr5SgUoHeIeYuUJHvl3" alt=""><figcaption></figcaption></figure>

Du kannst außerdem festlegen, dass die aktuelle Seite als Strukturseite angesehen wird. Das bedeutet, dass die Seite selbst nicht aufrufbar ist. Sie kann allerdings im Menü angezeigt werden um Unterseite zu gruppieren. Beispielsweise der Menüeintrag "Yoga-Stile" soll die verschiedenen Yoga-Stile als Unterseiten strukturieren.

Zusätzlich kannst du die aktuelle Seite schützen, sodass nur angemeldete Benutzer diese sehen können. Unangemeldete Seitenbesucher sehen eine Login-Maske.

<figure><img src="/files/fOZUaz7JYewqJauKvliR" alt=""><figcaption></figcaption></figure>

Du als Administrator zählst als angemeldeter Besucher (sofern du in der Administration angemeldet bist).

{% hint style="info" %}
Wenn du diese Seite z.B. deinen Vereinsmitgliedern zur Verfügung stellen möchtest, melde dich bei uns - wir legen entsprechende Nutzer an, die dich anmelden können.
{% endhint %}


# Link

Diese Vorlage bietet selbst keinen Inhalt, sondern ist dafür da, einen internen oder externen Link im Menü darzustellen.

<figure><img src="/files/Gto6ft9FIZAses2B5Z8f" alt=""><figcaption></figcaption></figure>

Im ersten Tab unter "Link (Url)" wählst du im Dropdown-Feld den Link Typ aus. "Url" ist der Standardtyp, mit welchem du frei einen Link eintragen kannst. z.B. "mein-partner.de". "Seite" Beispielsweise ermöglicht es dir, auf eine interne Seite deiner Website zu verlinken.

**in neuem Tab öffnen** - wenn aktiv öffnet sich die verlinkte Seite in einem neuen Browsertab und die aktuell besuchte Seite bleibt ebenfalls geöffnet. Bei einem internen Link ist das nicht unbedingt relevant, da der Besucher sich weiterhin auf deiner Website befinden wird. Bei einem externen Link würde der Besucher deine Seite möglicherweise verlieren.

Der Tab "Konfiguration" bietet dir im Bereich "Menü-Zuweisung" die Möglichkeit, zu entscheiden, in welchem Menü der Link angezeigt wird.


# Beitragsübersicht

Wenn du Beiträge / News veröffentlichen möchtest, erstellst du zunächst eine Beitragsübersicht-Seite. Wenn diese aufgerufen wird, sieht der Besucher, nach Datum sortiert, alle darin angelegten Beiträge.

<figure><img src="/files/BjsiGRbOVpZPd5VT6urT" alt=""><figcaption></figcaption></figure>

Die Bearbeitungsmaske ist in 3 Bereiche eingeteilt.\
Unter "Inhalt" kannst du Beiträge anlegen und den Seiteninhalt der übersicht befüllen. Der Inhalt wird über den ausgespielten Beiträgen angezeigt und sollte kurz gehalten werden.

{% hint style="success" %}
Wie du Beiträge / News erstellst erfährst du [hier](/seiten-anlegen/beitrag-news-erstellen)
{% endhint %}

{% hint style="success" %}
Wie du den Seiteninhalt mit dem Pagebuilder gestaltest erfährst du [hier](/seiten-pflegen-pagebuilder/layouts-blocke-erstellen)
{% endhint %}

Im Tab "META-Daten" kannst du Suchmaschinen relevante Daten einpflegen (zum Beispiel für Google).  Pflegst du diese nicht, versuchen Suchmaschinen die Daten aus deinem Seiteninhalt zuziehen. In vielen Fällen reicht das aus.

Der Tab "Konfiguration" bietet dir im Bereich "Menü-Zuweisung" die Möglichkeit, zu entscheiden, in welchem Menü die Seite angezeigt wird.


# Eventübersicht

Wenn du Events / Termine veröffentlichen möchtest, erstellst du zunächst eine Eventübersicht-Seite. Wenn diese aufgerufen wird, sieht der Besucher, nach Datum sortiert, alle darin angelegten Events. Das nächste Event, wird ganz oben mit einem Countdown angezeigt. Vergangene Events, werden ausgegraut und mit "vorbei" gekennzeichnet. Um diese auszublenden, lösche sie aus der Übersichtstabelle über das 3-Punkte Icon.

<figure><img src="/files/POAKkZdelOL9nQGCfoe0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/YIyyTXULDDwvYwYSRPDr" alt=""><figcaption></figcaption></figure>

Die Bearbeitungsmaske ist in 3 Bereiche eingeteilt.\
Unter "Inhalt" kannst du Events anlegen und den Seiteninhalt der übersicht befüllen. Der Inhalt wird über den ausgespielten Events angezeigt und sollte kurz gehalten werden.

{% hint style="success" %}
Wie du Events / Termine erstellst erfährst du [hier](/seiten-anlegen/beitrag-news-erstellen)
{% endhint %}

{% hint style="success" %}
Wie du den Seiteninhalt mit dem Pagebuilder gestaltest erfährst du [hier](/seiten-pflegen-pagebuilder/layouts-blocke-erstellen)
{% endhint %}

Im Tab "META-Daten" kannst du Suchmaschinen relevante Daten einpflegen (zum Beispiel für Google).  Pflegst du diese nicht, versuchen Suchmaschinen die Daten aus deinem Seiteninhalt zuziehen. In vielen Fällen reicht das aus.

Der Tab "Konfiguration" bietet dir im Bereich "Menü-Zuweisung" die Möglichkeit, zu entscheiden, in welchem Menü die Seite angezeigt wird.


# Kontakt

Mit der Vorlage "Kontakt" kannst du deinen Besuchern ein Kontaktformular zur Verfügung stellen.

<figure><img src="/files/OxWqpI1nz9YV7lvCAHFO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/3CJRTtFGqPvzAZymszaL" alt=""><figcaption></figcaption></figure>

**Empfängermail:** An die angegebene Mail wird das ausgefüllte Kontaktformular (z.B. <info@deineDomain.de>)

**Anzeigename:** Trage hier deine Firmen-, Vereins- oder Markennamen ein. Dieser wird im E-Mail Postfach angezeigt.

**Betreff-Prefix:** wird als Betreff der Mail gesetzt + angegebener Betreff im Kontaktformular

{% hint style="info" %}
Die Felder des Formulars reichen für eine Kontaktaufnahme. Solltest du weitere Felder benötigen, müssen diese von uns programmiert werden.
{% endhint %}

Die Bearbeitungsmaske ist in 3 Bereiche eingeteilt.\
Unter "Seiteninhalt" kannst du weitere Informationen auf der Kontaktseite darstellen. Der Inhalt wird über dem Formular angezeigt und sollte kurz gehalten werden.

{% hint style="success" %}
Wie du den Seiteninhalt mit dem Pagebuilder gestaltest erfährst du [hier](/seiten-pflegen-pagebuilder/layouts-blocke-erstellen)
{% endhint %}

Im Tab "META-Daten" kannst du Suchmaschinen relevante Daten einpflegen (zum Beispiel für Google).  Pflegst du diese nicht, versuchen Suchmaschinen die Daten aus deinem Seiteninhalt zuziehen.

Der Tab "Konfiguration" bietet dir im Bereich "Menü-Zuweisung" die Möglichkeit, zu entscheiden, in welchem Menü die Seite angezeigt wird.


# Beitrag / News erstellen

Möchtest du einen Beitrag / eine News erstellen, navigiere in deine Beitragsübersicht-Seite.

{% hint style="success" %}
Sollte die Übersicht noch nicht existieren, erfährst du [hier](/seiten-anlegen/seiten-anlegen/beitragsubersicht), wie du diese anlegst
{% endhint %}

In der Beitragsübersicht klicke im bereich "Beiträge" auf "hinzufügen". Nachdem du einen Titel gewählt und bestätigt hast, landest du in folgender Ansicht:

<figure><img src="/files/jz2MIfxUMKVj1QROkXMo" alt=""><figcaption></figcaption></figure>

Stelle zunächst sicher, dass der Status der Seite nicht auf "Entwurf" steht, damit auch deine Besucher den Beitrag sehen können.

**Beitragsbild:** Das hochgeladene Bild wird ganz oben im Beitrag angezeigt und auch in der Vorschau.

**Datum:** Beiträge werden in der Übersicht nach Datum absteigend sortiert. Dieses wir in der Übersicht und im Beitrag angezeigt.

**Vorschautext:** Der eingetragene Text wird nur in der Vorschau angezeigt und nicht im Beitrag selbst.

Unter "Seiteninhalt" kannst du den Inhalt des Beitrag befüllen und gestalten. Der Inhalt wird unter dem beitragsbild angezeigt.

{% hint style="success" %}
Wie du den Seiteninhalt mit dem Pagebuilder gestaltest erfährst du [hier](/seiten-pflegen-pagebuilder/layouts-blocke-erstellen)
{% endhint %}

<figure><img src="/files/hj7rtaFCZJNwAK4HfiV8" alt=""><figcaption></figcaption></figure>

Im Tab "META-Daten" kannst du Suchmaschinen relevante Daten einpflegen (zum Beispiel für Google).  Pflegst du diese nicht, versuchen Suchmaschinen die Daten aus deinem Seiteninhalt zuziehen. In vielen Fällen reicht das aus.

Der Tab "Konfiguration" bietet dir im Bereich "Menü-Zuweisung" die Möglichkeit, zu entscheiden, in welchem Menü die Seite angezeigt wird.

{% hint style="danger" %}
**Beachte:** Ein Beitrag kann nicht in der Hauptnavigation verlinkt werden - das ist nur über [einen Link ](/seiten-anlegen/seiten-anlegen/link)möglich
{% endhint %}


# Event / Termin erstellen

Möchtest du ein Event / einen Termin erstellen, navigiere in deine Eventübersicht-Seite.

{% hint style="success" %}
Sollte die Übersicht noch nicht existieren, erfährst du [hier](/seiten-anlegen/seiten-anlegen/eventubersicht), wie du diese anlegst
{% endhint %}

In der Eventübersicht klicke im bereich "Events" auf "hinzufügen". Nachdem du einen Titel gewählt und bestätigt hast, landest du in folgender Ansicht:

<figure><img src="/files/toNqT4dEgOvqO7sTt5Zx" alt=""><figcaption></figcaption></figure>

Stelle zunächst sicher, dass der Status der Seite nicht auf "Entwurf" steht, damit auch deine Besucher das Event sehen können.

**Eventbild:** Das hochgeladene Bild wird in der Vorschau und als Countdown-Hintergrund angezeigt.

**Ort (Kurzbezeichnung):** Beschreibe hier kurz, um was für ein Mlilieu es sich handelt. Dieses wird in der Vorschau angezeigt.

**Adresse / Anfahrt:** Gib hier die genaue Adresse an, damit die Teilnehmer vor Ort erscheinen können. Möchtest du die exakte Adresse nicht veröffentlichen, gib einfach ebenfalls die Kurzbeschreibung an. Die Angabe wird dem Besucher angezeigt, wenn er auf das Event klickt.

**Datum:** Events werden in der Übersicht nach Datum sortiert (neustes zuerst). Das Datum wird in der Vorschau und im Event angezeigt. Der Countdown des nächsten Events, wird anhand dieses Datums ermittelt.

**Vorschautext:** Der eingetragene Text wird nur in der Vorschau angezeigt und nicht im Event selbst.

Unter "Seiteninhalt" kannst du den Inhalt des Events befüllen und gestalten.

{% hint style="success" %}
Wie du den Seiteninhalt mit dem Pagebuilder gestaltest erfährst du [hier](/seiten-pflegen-pagebuilder/layouts-blocke-erstellen)
{% endhint %}

<figure><img src="/files/Bne3e9xkc3Xi49sKIw8c" alt=""><figcaption></figcaption></figure>

Im Tab "META-Daten" kannst du Suchmaschinen relevante Daten einpflegen (zum Beispiel für Google).  Pflegst du diese nicht, versuchen Suchmaschinen die Daten aus deinem Seiteninhalt zuziehen. In vielen Fällen reicht das aus.

Der Tab "Konfiguration" bietet dir im Bereich "Menü-Zuweisung" die Möglichkeit, zu entscheiden, in welchem Menü die Seite angezeigt wird.

{% hint style="danger" %}
**Beachte:** Ein Event kann nicht in der Hauptnavigation verlinkt werden - das ist nur über [einen Link ](/seiten-anlegen/seiten-anlegen/link)möglich
{% endhint %}


# Bildergalerie erstellen

Die Bildergalerie ist eine Komponente einer Seite und kann beliebig in jedes Layout integriert werden. Am besten erstellst du eine neue Seite vom Typ "Seite".

{% hint style="success" %}
Wie du eine Seite anlegst, erfährst du [hier](/seiten-anlegen/seiten-anlegen)
{% endhint %}

In der angelegten Seite erstellst du unter "Seiteninhalt" ein neues Layout und darin einen neuen "Block" vom Typ "Galerie".

<figure><img src="/files/Co4pYbUNwxuwHpasVeu5" alt=""><figcaption></figcaption></figure>

Mit einem Doppelklick auf den erstellten Galerie-Block öffnest du die Konfiguration und kannst die Bilder hochladen.

<figure><img src="/files/Bcb1YaqKg1iA6yYlDP0M" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/CVCVDXHLRPbSM9Pj3l2I" alt=""><figcaption></figcaption></figure>


# Layouts / Blöcke erstellen

Um deine Seite mit Inhalt zu befüllen, öffne diese in der Administration und klicke unter "Seiteninhalt" auf "Keine Layouts". Es öffnet sich sich ein Pop-Up Menü, in welchem du ein Layout auswählen kannst.

<figure><img src="/files/eqHcRAIVptQ7hmZN0Gy5" alt=""><figcaption></figcaption></figure>

Das Layout bestimmt die Größe und die Menge der Spalten in diesem Bereich deiner Seite. In dem Beispiel haben wir ein zweispaltiges Layout gewählt, um links ein Bild anzuzeigen und rechts etwas Text. Möchtest du ein weiteres Layout hinzufügen, klicke unten auf das Plus. Hast du mehrere Layouts, kannst du über das 6-Punkte Icon rechts die Position / Anordnung verändern.

<figure><img src="/files/BFa9JLHDMtdMfpWO2Jk3" alt=""><figcaption></figcaption></figure>

Neben jedem Layout findest du einen Pfeil, über welchen du das Kontextmenü öffnen kannst. Auch darüber kannst du vor oder nach dem Layout ein weiteres erstellen. Du kannst das Layout duplizieren oder Löschen und die Einstellungen öffnen.

<figure><img src="/files/5r7gKzduVfuk9EizOESk" alt=""><figcaption></figcaption></figure>

In diesen Sektionseinstellungen hast du folgende Möglichkeiten:

**Volle Breite:** Normalerweise hat dein Inhalt links und rechts einen Abstand zum Rand. Mit dieser EInstellung erstreckt sich die ganze Sektion über die volle Breite.

**Volle Breite (nur Hintergrundfarbe):** Der Abstand für den Inhalt bleibt bestehen. Die Hintergrundfarbe (wenn gesetzt) erstreckt sich über die volle Breite.

**Hintergrundfarbe:** Hier kannst du deine Sektion mit einer Hintergrundfarbe versehen.

**Zusätzliche CSS-Klassen:** Hier musst du in der Regel nichts eintragen. Mit Klassen kannst du zusätzliche Design-Attribute auf die Sektion legen. Sowas verwenden wir um z.B. der Startseite eine besondere Optik zu geben.

**Animation:** hier kannst du festlegen, ob die Sektion eine Erscheinungsanimation haben soll, wenn du besucher zu dieser scrollt (fade-in, zoom-in, slide-up, slide-down, slide-left, slide-right). Probiere hier einfach aus.

<figure><img src="/files/uvTFoBILwmYUY3DXNwgI" alt=""><figcaption></figcaption></figure>

Du hast nun ein Layout angelegt und somit den ersten Schritt gemeistert. Je nachdem was du für ein Layout gewählt hast, wird dir unter "Seiteninhalt" einer oder mehrere weiße Bereiche angezeigt. Klickst du in einen Bereich hinein, öffnet sich ein Pop-Up Menü. In diesem kannst du einen der verschiedenen Blöcke auswählen. Diese Blöcke sind für deinen Seiteninhalt zuständig. Jeder funktioniert anders. Was du mit den einzelnen Blöcken tun kannst, erfährst du auf den nächsten Seiten.

<figure><img src="/files/TKtLok6dKG4dBEajlFAB" alt=""><figcaption></figcaption></figure>

Egal welchen Block du erstellt hast, du kannst diesen mit einem Klick auswählen und weitere Aktion mit Hilfe des Kontextmenüs durchführen:

<figure><img src="/files/xANUvq66R53GRX1e3v9d" alt=""><figcaption></figcaption></figure>

**Stift:** Öffnet die Konfiguration des Blockes. Diese ist je nach Blocktyp unterschiedlich und wird auf den nachfolgenden Seiten beschrieben. Die meisten Blöcke kannst du auch mit einem simplen Doppelklick auf den Inhalt öffnen.

**Plus:** Du kannst einen weiteren Blocktyp auswählen, welcher unter dem ausgewählten Block erscheint.

**Papierkorb:** Löscht den ausgewählten Block.

**3-Punkt:** Detailliertes Kontextmenü - Du kannst den Block z.B. ausblenden ohne ihn löschen zu müssen oder duplizieren.

**6-Punkte:** Wie gewohnt kannst du auch Blöcke per Ziehen beliebig verschieben.


# Text


# Überschrift

Wenn du einen Überschrift-Block erzeugst, kannst du direkt in das Textfeld schreiben oder über das Stift symbol die Konfiguration öffnen:

<figure><img src="/files/V2GatmXZVYKJ4rKbjGEN" alt=""><figcaption></figcaption></figure>

**Relevanz:** Legt zum einen die Größe und zum anderen die SEO(Suchmaschinen)-Relevanz fest. Du solltest auf deiner Seite nicht mehr als eine Hauptüberschrift **(h1)** haben. Unterüberschriften sollten als **h2**, Unterunterüberschriften als **h3** und so weiter festgelegt werden.

**Text:** Text der Überschrift

**Überschrift zentrieren:** Wenn aktiv wird die Überschrift auf der Website zentriert.

<figure><img src="/files/wCOFyw19WpsHUdXV6PBm" alt=""><figcaption></figcaption></figure>


# Text

Wenn du einen Textblock in dein Layout eingefügt hast, kannst du diesen direkt beschreiben ohne die Einstellungen öffnen zu müssen.

<figure><img src="/files/CzDkyhZG38iEetIqWfA2" alt=""><figcaption></figcaption></figure>

Ähnlich wie in Microsoft Word kannst du hier Text markieren und diesen z.B. Fett oder kursiv darstellen. Du kannst mit dem ersten Symbol in der Liste dem markierten Text einen Link hinterlegen.

Du hast noch einige weitere Optionen, wenn du die Konifguration des Blocks mit dem Stift-Symbol öffnest:

<figure><img src="/files/X5aP1dgX751SQI5fZhwK" alt=""><figcaption></figcaption></figure>

Mittig ausrichten: Der Textblock wird zentriert.

Schriftgröße: Du kannst zwischen verschiedenen Schriftgrößen wählen. Fließtext, heavy (fett), mittel, groß und sehr groß


# Liste

Hast du einen Listenblock erzeugt, kannst du direkt in ihn hineinschreiben und mit der Enter-Taste einen neuen Listenpunkt beginnen. Bei Bedarf kannst du über das Stiftsymbol weitere Einstellungen öffnen.

<figure><img src="/files/zD7WRMOShqBelf1Iw1gX" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mWiIi8DuK5dVLYtsgeNS" alt=""><figcaption></figcaption></figure>


# Design Elemente


# Button

Erstelle einen Block vom Typ "Button" und öffne diesen per Doppelklick oder über das Stift-Icon.

<figure><img src="/files/R46SDM6u3Kt95LhoXJIM" alt=""><figcaption></figcaption></figure>

**ButtonText:** Der Text der auf dem Button angezeigt wird

**Typ:** Legt fest, ob der Button in der Primär- oder Sekundärfarbe angezeigt wird

{% hint style="success" %}
Wie du deine globalen Farbwerte anpassen kannst erfährst du [hier](/dashboard/design)
{% endhint %}

**Link:** Der Link oder die Seite zu welchem der Besucher beim Klick geleitet wird

**Neuer Tab:** Wenn aktiv öffnet sich der Link in einem neuen Browserfenster. Das ist besonders bei externen Links sinnvoll.

<figure><img src="/files/gOUO57hqB25Eyg3TFedM" alt=""><figcaption></figcaption></figure>


# Gruppe

Die Gruppe ist eine der vielseitigsten Elemente und kann dazu verwendet werden, Informationen auf deiner Seite spannender darzustellen. Du kannst zum Beispiel ein 2 oder 3 spaltiges Layout anlegen und in jede Spalte eine Gruppe legen, welche mehrere Elemente beinhaltet. Somit erzeugst du ein ansprechendes und modernes Layout. Öffne die Einstellungen per Doppelklick oder über das Stift-Icon.

<figure><img src="/files/APCJg8P9qHLVQm8JNeob" alt=""><figcaption></figcaption></figure>

**Ecken:** Lege fest, ob Ecken Rund oder Eckig dargestellt werden.

**Link:** Optional kannst du einen Link hinterlegen, welcher geöffnet wird, wenn der Besucher auf die Gruppe klickt.

**Inhalt:** Klicke in dieses Feld um Blöcke hinzuzufügen, die in der Gruppe angezeigt werden sollen.

<figure><img src="/files/3EnQxuS6Mhj4Vf2zJLm0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/YM8OA8WH5KQLbGol9N9b" alt=""><figcaption></figcaption></figure>


# Trenner

Du kannst auf deiner Website Trenner hinzufügen um Sektionen von einander Abzugrenzen. Öffne den erstellten Block mit einem Doppelklick oder über das Stift-Icon.

<figure><img src="/files/j2bN37YuYZzxTsqnZhNt" alt=""><figcaption></figcaption></figure>

**Trennertyp:** Wähle hier aus, ob der Trenner über die volle Layoutbreite gehen soll, oder nur mittig zentriert (dezenter) angezeigt wird.

**Färben:** Wenn aktiv, wird der Trenner mit dem Farbwert direkt dahinter eingefärbt. Der Farbwert steht standardmäßig auf dem Wert deiner Primärfarbe, aknn aber frei geändert werden.


# Abstand

Auf einer modernen, übersichtlichen Website ist Weißraum wichtig, damit Inhalte leichter erfasst werden können. Öffne den erstellten "Abstand"-Block mit einem Doppelklick oder über das Stift-Icon.

<figure><img src="/files/FuSMIb4Noo26BFuxEN1U" alt=""><figcaption></figcaption></figure>

Wähle dann den **Wert** und die **Einheit** des Abstandes. Zum Beispiel 100px. Schau dir die Änderung am besten nach dem Speichern direkt auf deiner Seite an, oft ist es schwer einzuschätzen, was der richtige Wert ist. Wir empfehlen, bei mehreren Elementen immer gleiche Werte zu verwenden (z.B. kleiner Abstand = 50px, großer Abstand = 100px). Du kannst nebem Pixeln auch weitere Einheiten verwenden, wenn du diese nicht kennst, solltest du am besten bei Pixeln bleiben oder dich auf entsprechenden Seiten über diese Informieren.


# Hinweis

Manchmal ist es sinnvoll, einen Hinweis auf deiner Website aufzubauen, welche dem Besucher direkt ins Auge fallen sollen. Lege den entsprechenden Block an und öffne Ihne per Doppelklic oder über das Stift-Icon.

<figure><img src="/files/TMudc1CHxRMG2Kbok011" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/BuvZyTmBXbqFvW8rTkW5" alt=""><figcaption></figcaption></figure>

**Hinweistext:** Gib den Hinweistext ein (z.B. Anmeldeschluss am 12.08.2023)

**Ecken abrunden:** Wenn aktiv, werden die Ecken des Hinweises abgerundet

**Hintergrundfarbe:** Verändere bei Bedarf die Hintergrundfarbe des Hinweises

<figure><img src="/files/zuEBom4whnCoF0pqRNqj" alt=""><figcaption></figcaption></figure>


# Checkliste

Die Checkliste ist ein simples Design Element, mit welchem du "Vorteile" oä. deinem Besucher präsentieren kannst. Du kannst verschiedene Icons von <https://fontawesome.com/> wählen.

<figure><img src="/files/n5OBkNBdXVxKCZmAaYDC" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2s7I2agGsGlkYdCkMCmI" alt=""><figcaption></figcaption></figure>


# Akordeon

Das Akordeon ist ein vielseitiges und optisch sehr ansprechendes Element, mit welchem du viel Information auf kleinem Raum unterbringen kannst.\
Auf unserer [Demo-Seite](https://demo.khepri.design/#faq) verwenden wir dieses Element um ein kleines FAQ zu simulieren.

<figure><img src="/files/vUxd9u2jyLLWfpSO2xBp" alt=""><figcaption></figcaption></figure>

Dieses besteht aus 3 Rubriken, welche einzeln aufgeklappt werden können und weitere Informationen enthalten.

Erstellst du einen Akordeon-Block in der Administration, öffne die Einstellungen per Doppelklick oder über das Stift-Icon.

<figure><img src="/files/exvvvVymia49IpWJHUG7" alt=""><figcaption></figcaption></figure>

Noch ist das Akordeon leer. Klicke auf "Klicken um ein Akordeon Element hinzuzufügen" um ein Akordeon Element (Rubrik) zu erstellen und in den Einstellungen zu landen.

<figure><img src="/files/uRBx26C47UMpkxVBb8fA" alt=""><figcaption></figcaption></figure>

**Element Titel:** Wähle den Titel, auf welchen geglickt werden muss um den Inhalt zu öffnen.

**Inhalt:** Ähnlich wie du es von den Layouts gewohnt bist, kannst du hier Blöcke hinzufügen. Zum Beispiel Bilder, Texte oder Trenner.

Du kannst jeder Zeit weitere Akordeon-Rubriken hinzufügen. Klicke oben in der Leiste auf "Akordeon" um zurück in die Akordeon-Übersicht zu gelangen.

<figure><img src="/files/C0QDO84RnLOLO3d3FHq6" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/cNlxgWbh2mHZFJ2RHt0x" alt=""><figcaption></figcaption></figure>


# Medien


# Bild

Wenn du deine Website gestaltest, wirst du früher oder später auch Bilder hinzufügen wollen. Erstelle dafür einfach den entsprechenden Block und öffne diesen per Doppelklick oder das Stift-Icon.

<figure><img src="/files/t5zwgC11zzPHQX70GH6l" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/os4LqSF0YKUMg0SF4Xqo" alt=""><figcaption></figcaption></figure>

**Bild:** Lade hier die Bilddatei hoch

**Alternativ Text:** Lege einen Alternativ Text fest. Dieser ist wichtig für Suchmaschinen und nur sichtbar, falls das Bild aus irgendeinem Grund nicht geladen werden kann.

**Bildunterschrift:** Lege eine Bildunterschrift fest

**Link:** Hinterlege einen Link, welcher sich beim Klick auf das Bild öffnet

**Seitenverhätnis:** Verändere das Seitenverhätnis deines Bildes, falls das original Format nicht gut aussieht.

**Label auf Bild:** Hinterlege einen kleinen Text auf dem Bild

**Runde Ecken (Label):** Runde die Ecken des Labels ab

**Runde Ecken:** Runde die Ecken des Bildes ab


# Bildergalerie

Du kannst auf deiner Website Bildergalerien anlegen, welche von deinen Besucher geöffnet und durchgeblättert werden können. Mit einem Doppelklick auf den erstellten Galerie-Block öffnest du die Konfiguration und kannst die Bilder hochladen.

<figure><img src="/files/iMmCHosX1smLfGqTOpRA" alt=""><figcaption></figcaption></figure>

Wenn du die Bilder hinterlegt hast, kannst du sie in dieser Maske öffnen und bei Bedarf eine Bildunterschrift hinzufügen.

<figure><img src="/files/U7BQqR9ADwhMYGPhd39f" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/UrlwRyrIVRTbahLILFJI" alt=""><figcaption></figcaption></figure>


# Video

Du kannst auf deiner Website YouTube Videos einbinden. Wenn du den entsprechenden Block erstellt hast, öffne Ihn per Doppelklick oder das Stift-Icon.

<figure><img src="/files/5LsMjCTPQVmjUWkHtybk" alt=""><figcaption></figcaption></figure>

**Video-URL:** Trage hier den Link des YouTube Videos ein

**Video direkt einbinden (iFrame):** Wenn diese Option deaktiviert ist, wird an der Stelle nur das YouTube-Vorschaubild angezeigt, welches auf das YouTube Video verlinkt. Das Video kann dann nicht direkt auf deiner Seite abgespielt werden.

<figure><img src="/files/dwXYdzpSdHS9tqIcKvlN" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Hinweis:** Rechtlich muss die Ausgabe des YouTube-Videos im Cookiebanner abgefragt werden. Akzeptiert der Besucher diese nicht, sieht er einen entsprechenden Hinweis und kann das Video nicht abspielen.
{% endhint %}

<figure><img src="/files/QdjEdbAop75lKfjb50Dr" alt=""><figcaption></figcaption></figure>


# Datei-Download

Mit dem Blockelement "Datei-Download" kannst du auf deiner Website Dateien für deine Besucher zum Download bereit stellen. Hast du diesen Block erstellt, öffne diesen per Doppelklick oder das Stift-Icon.

<figure><img src="/files/BuMJBNKak40Lq14FoOTi" alt=""><figcaption></figcaption></figure>

**Datei:** Lade hier deine Datei hoch (z.B. PDF, ZIP oder anderes) Sollte der Upload nicht funktionieren, ist die Dateigröße ggf. größer als der Server beim Upload zulässt. Wende dich im Zweifel an uns oder deinen Hoster

**Text auf Button:** Der Download wird auf deiner Seite als Button dargestellt. Hier kannst du den darauf liegenden Text verändern.

**Button durch Dateinamen ersetzen:** Wenn aktiv, wird der Download nicht als Button angezeigt sondern lediglich der Dateiname angezeigt und hervorgehoben.

<figure><img src="/files/iauagPIK2qln18SmBVlf" alt=""><figcaption></figcaption></figure>


# PDF-Datei

Manchmal ist es sinnvoll eine PDF Datei direkt auf deiner Website anzeigen zu lassen. Du kannst den angelegten Block mit einem Doppelklick öffnen.

<figure><img src="/files/hOplJ0Ovn6rbL1SfL7q9" alt=""><figcaption></figcaption></figure>

In den Bereich **PDF-Datei** kannst du die PDF reinziehen oder über "Hinzufügen" von deinem Computer auswählen.

Die **Anzeigehöhe** der PDF Beträgt 1000px. Du kannst diesen Wert bei Bedarf verändern.

Standardmäßig wird direkt über der PDF ein **Download-** und ein **Link-Button** angezeigt, welcher die PDF downloaded oder in einem neuen Browsertab öffnet. Du kannst die Buttons auch deaktivieren.

<figure><img src="/files/bbj9NiV13Zi4E8xhIXtl" alt=""><figcaption></figcaption></figure>


# Audio

Mit dem Audio-Block kannst du Musik oder Aufnahmen mit einem kleinen Musik-Player auf deiner Website hinterlegen. Mit einem Doppelklick oder über das Stift-Symbol öfffnest du die Blockeinstellungen.

<figure><img src="/files/YPTFPHYTTD9x8B6o5N5I" alt=""><figcaption></figcaption></figure>

**Source:** Hinterlege hier deine MP3 oder WAV Datei.

**Autoplay:** Definiere, ob dein Meisterwerk beim Öffnen der Seite automatisch abgespielt wird oder nicht. (Wir empfehlen, dies deaktiviert zu lassen)

**Titel:** Lege einen Titel für den Player fest.

**Beschreibung:** Lege eine Kurzbeschreibung für den Player fest.

<figure><img src="/files/7PImUc0x0ewmnmisLpD4" alt="" width="497"><figcaption></figcaption></figure>


# Weitere Elemente


# Freies HTML

{% hint style="info" %}
Für dieses Element werden HTML-Kenntnisse vorausgesetzt.
{% endhint %}

Falls du oder dein Entwickler auf eigene Faust detailliertere Anpassungen machen möchten, gibt es die Möglichkeit, einen HTML-Block zu erstellen. Der Inhalt wird ohne weiteres auf der Website angezeigt.

Es ist ebenfalls möglich '\<script>'- oder '\<style>'-tags hinzuzufügen. Zum Beispiel kannst du dir eine CSS-Klasse konfigurieren, welche du in deinen Blöcken unter "Erweitertes Design" > "zusätzliche CSS-Klassen" hinterlegen kannst.

<figure><img src="/files/VdHxjV8KshJuR2l6pPiP" alt=""><figcaption></figcaption></figure>


# Snippet

Der Blocktyp "Snippet" kann verwendet werden um komplexe Elemente auf deiner Seite darzustellen. Hast du den Block angelegt, kannst du Ihn per Doppelklick öffnen.

<figure><img src="/files/TVbps3hYzzIR4VWkXA7N" alt=""><figcaption></figcaption></figure>

In das Feld **Snippet** kannst du dann zum Beispiel 'event-preview' oder 'blog-preview' eintragen. Diese beiden Werte stehen dir immer zur Verfügung und erzeugen entsprechend den Countdown des aktuellen Events oder die neusten 3 Beiträge / News. Sollten für Sonderanpassungen weitere Snippets (Schnippsel) zur Verfügung stehen, bekommst du diese von uns mitgeteilt.

<figure><img src="/files/x2a4OSD0rz9wTK2VppMj" alt=""><figcaption></figcaption></figure>


# Sprungmarke

Die Sprungmarke ist ein unsichtbares Element, welches dafür verwendet werden kann, deinen Besucher, nach dem Klicken auf einen Link, direkt zu einer gewünschten Position auf deiner Seite scrollen zu lassen.

<figure><img src="/files/5gCijVx2JdbEfgAubqmg" alt=""><figcaption></figcaption></figure>

Erzeuge den Block direkt über einem Bereich, auf welchen du deinen Benutzer leiten möchtest. Vielleicht hast du weiter unten auf einer deiner Seiten eine interessante Textstelle oä. Öffne die Einstellungen der Sprungmarke mit einem Doppelklick. In das Feld **Id** trägst du einen Wert ein, dieser darf keine Leer- oder Sonderzeichen beinhalten.

Der Link lautet dann wie folgt: <https://deineDomain.de/angelegteSeite/#**wichtigerBeitrag**\\>
Sofern alles richtig eingestellt wurde, wird die Seite aufgerufen und scrollt automatisch zur entsprechenden Stelle.


# Erweitertes Design

In den meisten Blöcken hast du die Möglichkeit weitere Design-Einstellungen zu treffen. Sofern das der Fall ist, kannst du den Bereich über die Schaltfläche "Erweitertes Design" aufrufen.

<figure><img src="/files/4AECHh2cuJL9PGcAyOI7" alt=""><figcaption></figcaption></figure>

**Hintergrundfarbe:** Du kannst hier einen festen Farbwert eintragen oder mit einem Klick auf der Farbblock, diese auswählen. Die Einstellung macht nicht immer Sinn und sollte mit Bedacht gewählt werden.

**Zusätzliche CSS-Klassen:** Auch diese Einstellung wird in den meisten Fällen nicht benötigt. Sollten in dem Feld vordefinierte Werte drinn stehen, lösche diese nicht, da das Design davon stark beeinflusst werden kann. Eigene Werte sollten nur mit entsprechenden Kenntnissen oder nach Rücksprache hinterlegt werden.

**Animation:** Du kannst hier aus der Liste eine Animation auswählen, welche abgespielt wird, wenn der Benutzer in den Bereich Scrollt. Richtig und dezent verwendet, kann diese Option deine Seite sehr professionell und modern aussehen lassen.

<figure><img src="/files/uPuFCYPLDzY1jchCWcJK" alt=""><figcaption></figcaption></figure>

Je nach Block, stehen dir in diesem Bereich weitere Einstellungen zur verfügung. Diese sind hier in der Dokumentation auf den jeweiligen Seiten des Blocks erklärt.


# Passwort / E-Mail ändern

Wenn du das Passwort oder die E-Mail deines Benutzers ändern möchtest, logge dich zunächst mit diesem ein. Klicke unten links auf "Dein Account".

<figure><img src="/files/owwkYdZOtOjfA6u8AHbX" alt=""><figcaption></figcaption></figure>

Klicke unter deinem Anzeige Namen auf Einstellungen und wähle die gewünschte Option.

<figure><img src="/files/S0UkK24a2M96Jli1AYRM" alt=""><figcaption></figcaption></figure>


# Login nicht möglich

Wenn du dich nicht anmelden kannst, bekommst du vermutlich folgenden Fehler angezeigt:

<figure><img src="/files/YAL19na3Yguxs9cuFLDT" alt=""><figcaption><p>"Invalid CSRF token"</p></figcaption></figure>

Wenn das der Fall ist, aktualisiere die Seite in deinem Browser einmal. Sollte der Login danach immernoch nicht funktionieren, wende dich an <support@khepri.design>.


# SEO

SEO steht für **S**earch **E**ngine **O**ptimization und steht für die Verbesserung deiner Website im Bezug auf Suchmaschinen. Kurzgesagt - Je besser die "Qualität" deiner Seite, desto besser bewertet Google diese und schlägt sie öfter vor.

{% hint style="info" %}
Lese mehr zu SEO [hier](https://www.searchmetrics.com/de/glossar/suchmaschinenoptimierung/)
{% endhint %}

**Sitemap:** Deine Website ist bei Google Search registriert und die Sitemap eingereicht. Google und andere Suchmaschinen nutzen diese um die Seite und die Relevanz von Unterseiten zu interpretieren. Die Sitemap aktualisiert sich in unserem Template automatisch und ist erreichbar unter "deineDomain.de/sitemap"

**Bilder:** Wenn du Bilder auf deine Seite hochlädst, solltest du, wenn du Wert auf deine SEO-Relevanz legst, ein paar Dinge beachten:

* dein Bild sollte eins der folgenden Formate haben: **WEBP** (empfohlen), **JPEG** (Bilder ohne transparenz) oder **PNG** (Bilder mit Transparenz)
* dein Bild sollte eine Größe von ca. 1500x1000px haben (ungefährer Richtwert)
* lade dein Bild bei [TinyPNG](https://tinypng.com/) hoch und lade es erneut runter (die Dateigröße deines Bildes wird dadurch stark reduziert ohne die Qualität zu verschlechtern)

**META:** Du kannst für nahezu jeder deiner Seiten die META-Daten pflegen. META-Daten sind unsichbare Daten im Hintergrund deiner Website, die z.B. Google ausliest um deine Website besser zu interpretieren oder ggf. in der Suche entsprechend darzustellen.

Die wichtigste Seite ist die Startseite, die zugehörigen wichtigsten META-Daten kannst du über die Administration in den Grundeinstellungen pflegen.

{% hint style="success" %}
Wie du META-Daten für die Startseite pflegst erfährst du [hier](/dashboard/grundeinstellungen)
{% endhint %}

Die META-Daten für deine sonstigen Seiten kannst du in der entsprechenden Seite im Tab "META-DATEN" einpflegen.

{% hint style="info" %}
**Beachte:** Es ist nicht umbedingt notwendig, jede einzelne Seite mit META-Informationen zu füllen. Existieren diese nicht, werden diese automatisch aus dem Seiteninhlat gezogen. META-Daten-Pflege ist meist die Fleißarbeit, wenn die Website 100%ig steht.
{% endhint %}

Wenn du im Pagebuilder Überschriften verwendest, achte darauf, pro Seite nur eine Hauptüberschrift (h1) zu verwenden. Zwischenüberschriften sollten je nach Wertigkeit als h2, h3 ... angelegt werden.


# Welche Version habe ich?

Diese Dokumentation bezieht sich immer auf die aktuellste Version des Templates - aktuell <mark style="color:yellow;">v4.0.1</mark>

Wenn eine hier erklärte Funktion bei dir nicht vorhanden ist, liegt das meistens daran, dass deine Instanz auf einer älteren Version läuft.

Wenn du auf dem Dashboard (Startseite der Administration) nach unten scrollst, ist deine Versionsnummer aufgeführt.

<figure><img src="/files/CJKdHSELHYJu5XBVuL5h" alt=""><figcaption></figcaption></figure>

Ein Update kann von uns als Dienstleistung durchgeführt werden und dauert in der Regel nicht mehr als 1-2 Stunden. Es empfiehlt sich einmal im Jahr ein Update zdurchführen zu lassen, damit die Website nicht zu sehr veraltet und keine Sicherheitslücken oder ähnliches entstehen.