Site Settings: Custom Home Page
Build a marketing-style home page with 8 section types including hero banners, feature grids, call-to-action buttons, and embedded diagrams. Reorder and configure each section visually.
The Custom Home Page tab provides a visual page builder for creating a marketing-style home page. When enabled, it replaces the default knowledge graph home page with a configurable layout of sections. Each section type has its own settings for content, colours, and behaviour.
Section Types
Eight section types are available. Add sections using the Add Section panel and reorder them by dragging.
1. Hero Section
A full-width banner with a background image, title, subtitle, and optional call-to-action button.
| Property | Description |
|---|---|
| Title | Main heading text |
| Subtitle | Supporting text below the title (optional) |
| Background image | Image from the assets directory |
| Overlay enabled | Add a colour overlay on top of the background image |
| Overlay colour | Colour of the overlay |
| Overlay opacity | Opacity of the overlay (0-100%) |
| Text colour | Colour of the title and subtitle text |
| Text alignment | Left, centre, or right alignment |
| Minimum height | Minimum height of the section (e.g. 60vh, 500px) |
CTA Button
Each hero section can include a call-to-action button.
| Property | Description |
|---|---|
| Enabled | Toggle the CTA button on or off |
| Button text | Text displayed on the button |
| Link type | Page (internal page link) or External (URL) |
| Target page | Page to navigate to (for page links, with autocomplete) |
| External URL | URL to navigate to (for external links) |
| Button background colour | Background colour of the button |
| Button text colour | Text colour of the button |
2. Hero (Diagram) Section
Identical to the Hero section, but uses an embedded diagram as the background instead of a static image.
| Property | Description |
|---|---|
| Diagram ID | Reference to a standard diagram file in the workspace |
| All hero properties | Title, subtitle, overlay, text colour, CTA button (same as Hero section) |
3. Content Section
A rich text content area for introductory text, descriptions, or any HTML content.
| Property | Description |
|---|---|
| Content | Rich text HTML content |
| Background colour | Section background colour |
| Text colour | Text colour within the section |
| Max width | Content width: narrow, medium, wide, or full |
| Padding top | Top padding for the section |
| Padding bottom | Bottom padding for the section |
4. Feature Grid Section
A grid of feature cards, each with an icon, title, and description. Use this to highlight key capabilities or features.
| Property | Description |
|---|---|
| Section title | Heading above the grid (optional) |
| Section title colour | Colour of the section heading |
| Section subtitle | Supporting text below the heading (optional) |
| Section subtitle colour | Colour of the subtitle |
| Background colour | Section background colour |
| Text colour | Default text colour for cards |
| Columns | Number of columns: 2, 3, or 4 |
Feature Items
Each feature item in the grid has:
| Property | Description |
|---|---|
| Icon | Icon from the icon libraries or custom icons |
| Icon colour | Colour of the icon |
| Icon background colour | Background colour behind the icon |
| Title | Feature title |
| Title colour | Colour of the feature title |
| Description | Feature description text |
| Description colour | Colour of the description text |
| Order | Display order within the grid |
5. CTA (Call to Action) Section
A prominent section with a title, supporting text, and one or more action buttons.
| Property | Description |
|---|---|
| Title | Main heading text |
| Title colour | Colour of the title |
| Supporting text | Additional text below the title (optional) |
| Supporting text colour | Colour of the supporting text |
| Background colour | Section background colour |
| Text colour | Default text colour |
CTA Buttons
Each CTA section can contain multiple buttons.
| Property | Description |
|---|---|
| Button text | Text displayed on the button |
| Style | Primary or secondary styling |
| Type | Page (internal link) or External (URL) |
| Target page | Page to navigate to (with autocomplete) |
| External URL | URL for external links |
| Button colour | Background colour of the button |
| Button text colour | Text colour of the button |
| Order | Display order of the button |
6. Graph Links Section
Embeds a graph links diagram as a home page section. Graph links provide interactive, clickable node navigation.
| Property | Description |
|---|---|
| Section title | Heading above the diagram (optional) |
| Section title colour | Colour of the heading |
| Section subtitle | Supporting text (optional) |
| Section subtitle colour | Colour of the subtitle |
| Graph Links ID | Reference to a graph-links file in the workspace |
| Background colour | Section background colour |
| Height | Section height (e.g. 500px, 60vh) |
| After text | Text displayed below the diagram |
| After text colour | Colour of the after text |
7. Diagram Section
Embeds a standard diagram as a home page section.
| Property | Description |
|---|---|
| Section title | Heading above the diagram (optional) |
| Section title colour | Colour of the heading |
| Section subtitle | Supporting text (optional) |
| Section subtitle colour | Colour of the subtitle |
| Diagram ID | Reference to a standard diagram file in the workspace |
| Background colour | Section background colour |
| Height | Section height (e.g. 500px, 60vh) |
| After text | Text displayed below the diagram |
| After text colour | Colour of the after text |
8. Graph Diagram Section
Embeds a graph diagram (force-directed) as a home page section.
| Property | Description |
|---|---|
| Section title | Heading above the diagram (optional) |
| Section title colour | Colour of the heading |
| Section subtitle | Supporting text (optional) |
| Section subtitle colour | Colour of the subtitle |
| Graph Diagram ID | Reference to a graph diagram file in the workspace |
| Background colour | Section background colour |
| Height | Section height (e.g. 500px, 60vh) |
| After text | Text displayed below the diagram |
| After text colour | Colour of the after text |