---
title: Modèles de pages d’atterrissage
slug: docs/fr/modeles-de-pages-datterrissage
description: Apprenez à créer une page d’atterrissage professionnelle et de marque pour votre portail de documentation en utilisant les modèles de page d’atterrissage en étiquette blanche d’Archbee. Ce document fournit des instructions étape par étape sur l’utilisatio
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 de destination personnalisée pour votre portail de documentation

# Comment obtenir le Custom Code

::::WorkflowBlock
:::WorkflowBlockItem
Depuis notre dépôt GIT (à venir)
:::

:::WorkflowBlockItem
Copiez-collez le code personnalisé depuis notre documentation vers Space Settings

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

[Modèle 2](docId:0TpNaJ4UEQq2j13dBkAWg)
:::
::::

# Comment 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\:Zg9h8hLEQ_6dXXHsZV4p_)
- [Modèle 2](docId:0TpNaJ4UEQq2j13dBkAWg)

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

Copiez la section `Inclure les en-têtes` depuis `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`&#x20;

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbN...)

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

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbN...)

Le code de style commence par quelques déclarations de variables, qui peuvent être utilisées pour changer 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 depuis `script.js`

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbN...)

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

Assurez-vous qu’il est entouré par des balises `<script></script>`.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbN...)
:::

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

Copiez le code HTML depuis `index.html` en commençant à partir du commentaire `<!-- START Page d'accueil -- >`.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbN...)

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/bNBm7nPJgXjbjLyfbN...)
:::

:::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 pouvant être utilisés pour naviguer à l’intérieur ou à l’extérieur de la documentation. À la fin de la liste, il y a également un lien commenté qui peut être utilisé pour ajouter d’autres liens si nécessaire.

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

### Section Hero

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

![](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 votre documentation. Un exemple est commenté à la fin de la liste.

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