Landing page templates

This feature is available on these plans:
✔️ Scaling ✔️ Enterprise 
﻿
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:
﻿Template 1﻿﻿
﻿Template 2﻿﻿
1
Include Headers tab 
Copy the Include Headers section from index.html
﻿
Paste it in the Include Headers section of Space Settings -> Custom Code
﻿
Make sure it includes the <head> tags and press Save
2
Custom CSS tab
Copy the content of the stlye.css file
﻿
And add it to the Custom CSS section from Space Settings -> Custom Code. Ensure they are enclosed in <style></style> tags.
﻿
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;
}
: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;
}
﻿
3
Custom JavaScript
Copy the code from script.js
﻿
Add it to the Custom Javascript section from Space Settings -> Custom Code
Make sure they are enclosed in <script></script> tags.
﻿
4
Landing page HTML
Copy the HTML code from index.html starting from the <!-- START Landing page -- > comment.
﻿
Select the Custom HTML landing page type and then add the html code in the container that appears below.
﻿
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:
﻿
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.
﻿
Hero section
Contains a background image and a title and subtitle (the colors of these can be changed in the style Styles﻿ section)
﻿
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.
﻿
﻿
﻿
﻿
﻿