Landing page templates
Archbee provides white label Landing Page templates so you can easily create a branded landing page for your doc portal
From our GIT repo (coming soon)
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:
Include Headers tab
Copy the Include Headers section from index.html
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/PPZ9fNNaAwAtqJRocLOO4_screenshot-2023-06-07-at-135912.png?format=webp)
Paste it in the Include Headers section of Space Settings -> Custom Code
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/9wpy-5_oml6i5wV31KY5g_screenshot-2023-06-07-at-140440.png?format=webp)
Make sure it includes the <head> tags and press Save
Custom CSS tab
Copy the content of the stlye.css file
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/k_yNxjgap0NaqWKYpUmpM_screenshot-2023-06-07-at-140754.png?format=webp)
And add it to the Custom CSS section from Space Settings -> Custom Code. Ensure they are enclosed in <style></style> tags.
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/aums9GUiCrJePpu6WSwXZ_screenshot-2023-06-07-at-142032.png?format=webp)
The style code starts with a few variable declarations, which can be used to easily change the theme of the page:
Custom JavaScript
Copy the code from script.js
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/Qil2KIP5JCUdEODOWrbz-_screenshot-2023-06-07-at-142616.png?format=webp)
Add it to the Custom Javascript section from Space Settings -> Custom Code
Make sure they are enclosed in <script></script> tags.
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/Hom4i2ZWF0LRp6Hm1a7jC_screenshot-2023-06-07-at-142916.png?format=webp)
Landing page HTML
Copy the HTML code from index.html starting from the <!-- START Landing page -- > comment.
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/b7ahvKWfrOGCUrXoUxdc8_screenshot-2023-06-07-at-143259.png?format=webp)
Select the Custom HTML landing page type and then add the html code in the container that appears below.
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/tFoqTxNLlu5FkvbT0ZJjI_screenshot-2023-06-07-at-143638.png?format=webp)
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:
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/Gx4-31jpVXRmSAmGygqU7_screenshot-2023-06-07-at-182855.png?format=webp)
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.
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/4YOxDQq-aZ7nm0pWkBFLb_image.png?format=webp)
Hero section
Contains a background image and a title and subtitle (the colors of these can be changed in the style Styles section)
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/PyQLTE3oBRKqUAB35X6_v_image.png?format=webp)
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.
![Document image Document image](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/p8s7b8wG7-NnClHGhgy_I_image.png?format=webp)
![Doc contributor](https://s3.amazonaws.com/archbee-animals/lion.png)