---
title: Modèles de page d’atterrissage
slug: modeles-de-page-datterrissage
description: Découvrez comment créer une page d’atterrissage professionnelle et de marque pour votre portail de documentation à l’aide des modèles de page d’atterrissage en marque blanche d’Archbee. Ce document fournit des instructions étape par étape sur l’utilisatio
docTags: 
createdAt: 2023-06-07T10:11:09.000Z
---

Archbee fournit des modèles de Landing Page en marque blanche afin que vous puissiez facilement créer une page d’accueil personnalisée pour votre portail de documentation

# Comment obtenir le Custom Code

::::WorkflowBlock
:::WorkflowBlockItem
À partir de notre dépôt GIT (bientôt disponible)
:::

:::WorkflowBlockItem
Copiez-collez le code personnalisé à partir de notre documentation dans Space Settings

[Modèle 1](docId\:DzIqIpPd3VmwNMN54Nppn)

[Modèle 2](docId\:dhZ_CTsdCqz-DBSYZFKTX)
:::
::::

# Comment l’utiliser

Pour configurer votre Custom Landing Page, vous devez copier notre code personnalisé dans les sections Space Settings -> Custom Code et Landing Page.

Pour chaque Modèle, vous aurez 3 fichiers : `index.html`, `script.js` et `style.css`

Les 3 fichiers se trouvent ci-dessous pour chaque Modèle :

- [Modèle 1](docId\:DzIqIpPd3VmwNMN54Nppn)
- [Modèle 2](docId\:dhZ_CTsdCqz-DBSYZFKTX)

::::WorkflowBlock
:::WorkflowBlockItem
## Onglet Include Headers

Copiez la section `Inclure les en-têtes` à partir de `index.html`

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

Collez-la dans la section `Inclure les en-têtes` de **Paramètres de l’espace -> Code personnalisé**

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

Assurez-vous qu’elle inclut les balises `<head>` et appuyez sur `Enregistrer`
:::

:::WorkflowBlockItem
## Onglet Custom CSS

Copiez le contenu du fichier `stlye.css`

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

Et ajoutez-le à la section `CSS personnalisé` de Space Settings -> Custom Code. Assurez-vous qu’il est inclus dans les balises `<style></style>`.

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

Le code de style commence par quelques déclarations de variables, qui peuvent être utilisées pour modifier facilement le thème de la page :

```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

Copiez le code de `script.js`

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

Ajoutez-le à la section `JavaScript personnalisé` de Space Settings -> Custom Code

Assurez-vous qu’il est inclus dans les balises `<script></script>`.

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

:::WorkflowBlockItem
## HTML de la page d’accueil

Copiez le code HTML de `index.html` à partir du commentaire `<!-- START Page d'accueil -- >`.

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

Sélectionnez le type de page d’accueil `HTML personnalisé` puis ajoutez le code HTML dans le conteneur qui apparaît ci-dessous.

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

:::WorkflowBlockItem
### Comment personnaliser le code

### Logo + images

Toutes les images et tous les logos sont définis avec des espaces réservés au format : `<img src="https://placehold.co/..." ... />` comme illustré ci-dessous :

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

### Liens de la barre de navigation

La barre de navigation contient quelques liens qui peuvent être utilisés pour naviguer à l’intérieur ou à l’extérieur de la documentation. À la fin de la liste, il y a aussi un lien commenté qui peut servir à ajouter d’autres liens au besoin.

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

### Section Hero

Contient une image d’arrière-plan ainsi qu’un titre et un sous-titre (leurs couleurs peuvent être modifiées dans la section de style [Styles](docId\:zrJ7nA8eWXjTtregZVgKl) ).

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

### Blocs de documents

Une liste de blocs contenant une icône, un titre, une description et un bouton, généralement utilisée pour naviguer vers vos documents. Un exemple est commenté à la fin de la liste.

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