---
title: Landingpage‑Vorlagen
slug: docs/de/landingpagevorlagen
description: Erfahren Sie, wie Sie eine professionelle und gebrandete Landingpage für Ihr Dokumentationsportal mithilfe der White‑Label‑Landingpage‑Vorlagen von Archbee erstellen. Dieses Dokument bietet eine schrittweise Anleitung zur Verwendung von benutzerdefinierte
createdAt: 2023-06-07T10:11:09.000Z
---

Archbee stellt White-Label-Landing-Page-Vorlagen bereit, damit Sie ganz einfach eine gebrandete Landing Page für Ihr Dokumentationsportal erstellen können

# So erhalten Sie den Custom Code

::::WorkflowBlock
:::WorkflowBlockItem
Aus unserem GIT-Repo (kommt bald)
:::

:::WorkflowBlockItem
Kopieren Sie den benutzerdefinierten Code aus unserer Dokumentation in Space Einstellungen

[Vorlage 1](docId\:HFQjl1FMr0h8PODptgOMK)

[Vorlage 2](docId\:yF32maMWM3uh41Y9JO7gq)
:::
::::

# So verwenden Sie es

Um Ihre benutzerdefinierte Landing Page einzurichten, müssen Sie unseren Custom Code in die Bereiche Space Einstellungen -> Custom Code und Landing Page kopieren.

Für jede Vorlage haben Sie 3 Dateien: `index.html`, `script.js` und `style.css`

Die 3 Dateien finden Sie unten für jede Vorlage:

- [Vorlage 1](docId\:HFQjl1FMr0h8PODptgOMK)
- [Vorlage 2](docId\:yF32maMWM3uh41Y9JO7gq)

::::WorkflowBlock
:::WorkflowBlockItem
## Include Headers Tab

Kopieren Sie den Abschnitt `Header einbeziehen` aus der `index.html`

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PPZ9fNNaAwAtqJRocLOO4_screenshot-2023-06-07-at-135912.png)

Fügen Sie ihn in den Abschnitt `Header einbeziehen` in den **Space Einstellungen -> Benutzerdefinierter Code** ein.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9wpy-5_oml6i5wV31KY5g_screenshot-2023-06-07-at-140440.png)

Stellen Sie sicher, dass er die `<head>`-Tags enthält, und drücken Sie `Speichern`.
:::

:::WorkflowBlockItem
## Custom CSS Tab

Kopieren Sie den Inhalt der Datei `style.css`.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/k_yNxjgap0NaqWKYpUmpM_screenshot-2023-06-07-at-140754.png)

Und fügen Sie ihn in den Abschnitt `Benutzerdefinierte CSS` unter Space Settings -> Custom Code ein. Stellen Sie sicher, dass er in `<style></style>`-Tags eingeschlossen ist.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/aums9GUiCrJePpu6WSwXZ_screenshot-2023-06-07-at-142032.png)

Der Style-Code beginnt mit einigen Variablendeklarationen, die verwendet werden können, um das Theme der Seite einfach zu ändern:

```css
:root {
  --accent-text: #2166ae;
  --secondary-text: #0a4563;
  --primary-text: #24292e;
  --background-color: #fff;
  --primary-link: #999;
  --accent-link: var(--accent-text);
  --header-title-color: #fff;
  --header-subtitle-color: #fff;
}
```
:::

:::WorkflowBlockItem
## Custom JavaScript

Kopieren Sie den Code aus `script.js`

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Qil2KIP5JCUdEODOWrbz-_screenshot-2023-06-07-at-142616.png)

Fügen Sie ihn in den Abschnitt `Benutzerdefiniertes Javascript` unter Space Settings -> Custom Code ein.

Stellen Sie sicher, dass er in `<script></script>`-Tags eingeschlossen ist.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Hom4i2ZWF0LRp6Hm1a7jC_screenshot-2023-06-07-at-142916.png)
:::

:::WorkflowBlockItem
## Landing Page HTML

Kopieren Sie den HTML-Code aus der `index.html` beginnend beim Kommentar `<!-- START Landing page -- >`.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/b7ahvKWfrOGCUrXoUxdc8_screenshot-2023-06-07-at-143259.png)

Wählen Sie den Landing-Page-Typ `Benutzerdefiniertes HTML` und fügen Sie dann den HTML-Code in den darunter erscheinenden Container ein.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/tFoqTxNLlu5FkvbT0ZJjI_screenshot-2023-06-07-at-143638.png)
:::

:::WorkflowBlockItem
### Wie Sie den Code anpassen

### Logo + Bilder

Alle Bilder und Logos sind mit Platzhaltern im folgenden Format definiert: `<img src="https://placehold.co/..." ... />` wie unten dargestellt:

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Gx4-31jpVXRmSAmGygqU7_screenshot-2023-06-07-at-182855.png)

### Navbar-Links

Die Navbar enthält einige Links, die verwendet werden können, um innerhalb oder außerhalb der Dokumentation zu navigieren. Am Ende der Liste befindet sich außerdem ein auskommentierter Link, der verwendet werden kann, um bei Bedarf weitere Links hinzuzufügen.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/4YOxDQq-aZ7nm0pWkBFLb_image.png)

### Hero-Bereich

Enthält ein Hintergrundbild sowie einen Titel und Untertitel (deren Farben können im Style-[Stile](docId\:Dh7YmHtbFLmL1HSaO4T56)-Abschnitt geändert werden)

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PyQLTE3oBRKqUAB35X6_v_image.png)

### Dokumentblöcke

Eine Liste von Blöcken mit einem Symbol, einem Titel, einer Beschreibung und einer Schaltfläche, die in der Regel zur Navigation in Ihrer Dokumentation verwendet werden. Am Ende der Liste ist ein Beispiel auskommentiert.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/p8s7b8wG7-NnClHGhgy_I_image.png)
:::
::::