HOSTED SPACES
Custom Landing Page

Landing page templates

3min

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

1

From our GIT repo (coming soon)

2

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

Template 1

Template 2

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:

1

Include Headers tab

Copy the Include Headers section from index.html

Document image


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

Document image


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

2

Custom CSS tab

Copy the content of the stlye.css file

Document image


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

Document image


The style code starts with a few variable declarations, which can be used to easily change the theme of the page:

CSS

3

Custom JavaScript

Copy the code from script.js

Document image


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

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

Document image

4

Landing page HTML

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

Document image


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

Document image

5

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


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


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










🤔
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.