---
title: Landing page templates
slug: archbee-docs/landing-page-templates
description: Learn how to create a professional and branded landing page for your documentation portal using Archbee's white label Landing Page templates. This document provides step-by-step instructions on utilizing custom code, including HTML, CSS, and JavaScript fi
docTags: 
createdAt: 2023-06-07T10:11:09.000Z
---

Archbee provides white label Landing Page templates so you can easily create a branded landing page for your doc portal

# How to get the Custom Code

::::WorkflowBlock
:::WorkflowBlockItem
From our GIT repo (coming soon)
:::

:::WorkflowBlockItem
Copy-paste the custom code from our documentation to Space Settings

[Template 1](docId\:To3zDT-nwWPF8pHm3JU3b)

[Template 2](docId\:fe48Icsg3-umML6A7776j)
:::
::::

# How to use

To set up your Custom Landing Page you must copy our custom code to Space Settings -> Custom Code and Landing Page sections.

For each Template you will have 3 files: `index.html`, `script.js` and `style.css`

The 3 files can be found below for each Template:

- [Template 1](docId\:To3zDT-nwWPF8pHm3JU3b)
- [Template 2](docId\:fe48Icsg3-umML6A7776j)

::::WorkflowBlock
:::WorkflowBlockItem
## Include Headers tab 

Copy the `Include Headers` section from `index.html`

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

Paste it in the `Include Headers` section of **Space Settings -> Custom Code**

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

Make sure it includes the `<head>` tags and press `Save`
:::

:::WorkflowBlockItem
## Custom CSS tab

Copy the content of the `stlye.css` file

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

And add it to the `Custom CSS` section from Space Settings -> Custom Code. Ensure they are enclosed in `<style></style>` tags.

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

The style code starts with a few variable declarations, which can be used to easily change the theme of the 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

Copy the code from `script.js`

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

Add it to the `Custom Javascript` section from Space Settings -> Custom Code

Make sure they are enclosed in `<script></script>` tags.

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

:::WorkflowBlockItem
## Landing page HTML

Copy the HTML code from `index.html` starting from the `<!-- START Landing page -- >` comment.

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

Select the `Custom HTML` landing page type and then add the html code in the container that appears below.

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

:::WorkflowBlockItem
### How to customise the code

### Logo + images

All images and logos are defined with placeholders with the format: `<img src="https://placehold.co/..." ... />` as exemplified below:

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

### Navbar links

Navbar contains a few of links that can be used to navigate inside or outside the doc. At the end of the list there is also a commented link that can be used to add other links if need.

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

### Hero section

Contains a background image and a title and subtitle (the colors of these can be changed in the style [Styles](#) section)

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

### Document blocks

A list of blocks containing an icon, a title, a description and a button, generally used to navigate to your docs. An example is commented out at the end of list.

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