Home Pages (Content Filling)

Prerequisites: Documentation Pages (Content Filling)

Objective

Fill Hero, Features, and CTA blocks on French and English home pages in the back-office. FR/EN Home Nodes were already created in step 13, now just need to complete their content blocks.

Overview

  1. Hero (H1): Main header with CTA
  2. Feature (H3): Highlights (grouped by 3)
  3. Cta: Final call-to-action
Home pages use the Home Type which allows 3 BlocTypes:

Final structure:

    /fr (FR Node - Type: Home)
└── Blocks:
    ├── Hero (H1)
    ├── Feature × 3 (Total Control, Flexible, Performant)
    └── Cta

/en (EN Node - Type: Home)
└── Blocks:
    ├── Hero (H1)
    ├── Feature × 3 (Total Control, Flexible, Performant)
    └── Cta

Total: 5 blocks per page

Info

FR/EN Home Nodes were already created in step 13 with URL, Sitemap, and SEO configuration. This step only covers filling content blocks.

Fill Home FR Node

Access Node

Sidebar menu → Management → Sections → Click pencil to edit FR Node

Step 1: Complete Hero

Hero was already created in step 13. Now complete it with all fields.

Contents section → Click existing Hero to edit

Fields to fill:

title (required):

    Blackcube CMS Documentation

description (required):

    <p>The professional CMS that gives total control to developers. Code your rendering and manage your content with flexibility.</p>

  1. Upload PNG/JPG background image if available
  2. Leave empty if no image
image (optional):

ctaTitle (required):

    Get Started >

  1. Select in dropdown → Articles → Why choose Blackcube (FR)
ctaTarget (required):

ctaSecondaryTitle (required):

    Documentation

  1. Select in dropdown → Sections → Guide (FR)
ctaSecondaryTarget (required):

  1. Leave empty
breadcrumbTitle (optional):

  1. Leave empty for now
  2. To fill after creating Hero EN
lang (multilingual linking):

Save block.

Step 2: Add 3 Features

Feature 1: Total Control

Contents section → Button Add block → Select 02. Feature (H3)

Fields to fill:

title (required):

    Total Control

description (required):

    <p>Developers code 100% of the rendering. No template constraints, total freedom on the front-end.</p>

  1. Upload SVG icon (source code)
  2. Recommended SVG for "Total Control":
icon (required):

    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>

  1. link: Leave empty
  2. linkRoute: Leave empty
  3. linkUrl: Leave empty
Unused fields:

Save block.

Feature 2: Flexible

Contents section → Button Add block → Select 02. Feature (H3)

Fields to fill:

title (required):

    Flexible

description (required):

    <p>JSON Schema to define your content. No SQL migration, instant evolution of your structure.</p>

  1. Upload SVG icon (layout/grid)
  2. Recommended SVG for "Flexible":
icon (required):

    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
</svg>

  1. link: Leave empty
  2. linkRoute: Leave empty
  3. linkUrl: Leave empty
Unused fields:

Save block.

Feature 3: Performant

Contents section → Button Add block → Select 02. Feature (H3)

Fields to fill:

title (required):

    Performant

description (required):

    <p>Hazel Tree: a single query to load the entire tree structure.</p>

  1. Upload SVG icon (lightning/performance)
  2. Recommended SVG for "Performant":
icon (required):

    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>

  1. link: Leave empty
  2. linkRoute: Leave empty
  3. linkUrl: Leave empty
Unused fields:

Save block.

Step 3: Add Final CTA

Contents section → Button Add block → Select 08. Cta

Fields to fill:

title (required):

    Ready to get started?

description (required):

    <p>Discover how Blackcube can transform your development workflow.</p>

ctaTitle (required):

    Start now >

  1. Select in dropdown → Articles → Why choose Blackcube (FR)
ctaTarget (required):

Save block.

Fill Home EN Node

Access Node

Sidebar menu → Management → Sections → Click pencil to edit EN Node

Step 1: Complete Hero

Hero was already created in step 13. Now complete it.

Contents section → Click existing Hero to edit

Fields to fill:

title (required):

    Blackcube CMS Documentation

description (required):

    <p>The professional CMS that gives total control to developers. Code your rendering and manage your content with flexibility.</p>

  1. Upload same image as FR if available
  2. Leave empty if no image
image (optional):

ctaTitle (required):

    Get Started >

  1. Select in dropdown → Articles → Why choose Blackcube (EN)
ctaTarget (required):

ctaSecondaryTitle (required):

    Documentation

  1. Select in dropdown → Sections → Guide (EN)
ctaSecondaryTarget (required):

  1. Leave empty
breadcrumbTitle (optional):

  1. Leave empty for now
  2. To fill in next step
lang (multilingual linking):

Save block.

Step 2: Add 3 Features

Feature 1: Total Control

Contents section → Button Add block → Select 02. Feature (H3)

Fields to fill:

title (required):

    Total Control

description (required):

    <p>Developers code 100% of the rendering. No template constraints, total freedom on the front-end.</p>

  1. Upload same SVG icon as Feature 1 FR (source code)
icon (required):

  1. link: Leave empty
  2. linkRoute: Leave empty
  3. linkUrl: Leave empty
Unused fields:

Save block.

Feature 2: Flexible

Contents section → Button Add block → Select 02. Feature (H3)

Fields to fill:

title (required):

    Flexible

description (required):

    <p>JSON Schema to define your content. No SQL migration, instant evolution of your structure.</p>

  1. Upload same SVG icon as Feature 2 FR (layout/grid)
icon (required):

  1. link: Leave empty
  2. linkRoute: Leave empty
  3. linkUrl: Leave empty
Unused fields:

Save block.

Feature 3: Performant

Contents section → Button Add block → Select 02. Feature (H3)

Fields to fill:

title (required):

    Performant

description (required):

    <p>Hazel Tree: a single query to load the entire tree structure.</p>

  1. Upload same SVG icon as Feature 3 FR (lightning/performance)
icon (required):

  1. link: Leave empty
  2. linkRoute: Leave empty
  3. linkUrl: Leave empty
Unused fields:

Save block.

Step 3: Add Final CTA

Contents section → Button Add block → Select 08. Cta

Fields to fill:

title (required):

    Ready to get started?

description (required):

    <p>Discover how Blackcube can transform your development workflow.</p>

ctaTitle (required):

    Start now >

  1. Select in dropdown → Articles → Why choose Blackcube (EN)
ctaTarget (required):

Save block.

Multilingual Linking FR ↔ EN

Update Hero FR lang Field

  1. Edit FR Node → Click Hero block
  2. lang field: Select in dropdown → Sections → EN
  3. Save

Update Hero EN lang Field

  1. Edit EN Node → Click Hero block
  2. lang field: Select in dropdown → Sections → FR
  3. Save

Info

This linking enables language switcher to toggle between /fr and /en. HrefLang behavior automatically generates tags for SEO.

Validation

Check in Management → Sections:

  1. FR (Type: Home) - Language: French
  2. EN (Type: Home) - Language: English
Modified nodes:

  1. Hero (H1): Title + description + 2 CTAs
  2. Feature (H3) × 3: Icon + title + description
  3. Cta: Title + description + CTA
  4. Total: 5 blocks per page
Blocks per Node:

  1. FR ↔ EN linking working via Hero's lang field
  2. All required fields filled
  3. All blocks active (JSON Schema validation passed)
Configuration:

Info

URLs, Sitemap, and SEO were already configured in step 13. This step only covered filling content blocks.

Recommendations

Features Content

  1. Total Control: Developer total freedom on rendering
  2. Flexible: JSON Schema, no SQL migration
  3. Performant: Hazel Tree, optimized architecture
The 3 Features present Blackcube strengths:

These messages target developers and highlight the CMS technical advantages.

CTA and Navigation

  1. Hero primary CTA: "Why choose Blackcube" article (discovery)
  2. Hero secondary CTA: Guide (technical documentation)
  3. Final CTA: "Why choose Blackcube" article (conversion)
CTAs point to:

This navigation gradually guides developers from discovery to action.

End of Step 16 - Complete Development Guide

<< Documentation Pages (Content Filling)