Pages d'Accueil (Remplissage Contenu)

Prérequis : Pages de Documentation (Remplissage Contenu)

Objectif

Remplir les blocs Hero, Features et CTA des pages d'accueil françaises et anglaises dans le back-office. Les Nodes Home FR/EN ont déjà été créés dans l'étape 13, il suffit maintenant de compléter leurs blocs de contenu.

Vue d'ensemble

  1. Hero (H1) : En-tête principal avec CTA
  2. Feature (H3) : Mises en avant (groupées par 3)
  3. Cta : Appel à l'action final
Les pages Home utilisent le Type Home qui autorise 3 BlocTypes :

Structure finale :

    /fr (Node FR - Type: Home)
└── Blocs :
    ├── Hero (H1)
    ├── Feature × 3 (Contrôle Total, Flexible, Performant)
    └── Cta

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

Total : 5 blocs par page

Info

Les Nodes Home FR/EN ont déjà été créés à l'étape 13 avec leur configuration URL, Sitemap et SEO. Cette étape concerne uniquement le remplissage des blocs de contenu.

Remplir le Node Home FR

Accès au Node

Menu latéral → Gestion → Rubriques → Cliquer sur le crayon pour éditer le Node FR

Étape 1 : Compléter le Hero

Le Hero a déjà été créé à l'étape 13. Il faut maintenant le compléter avec tous les champs.

Section Contenus → Cliquer sur le Hero existant pour l'éditer

Champs à remplir :

title (obligatoire) :

    Documentation Blackcube CMS

description (obligatoire) :

    <p>Le CMS professionnel qui laisse le contrôle total aux développeurs. Code ton rendu et gère ton contenu avec flexibilité.</p>

  1. Uploader une image de fond PNG/JPG si disponible
  2. Laisser vide si pas d'image
image (optionnel) :

ctaTitle (obligatoire) :

    Démarrer >

  1. Sélectionner dans le dropdown → Articles → Pourquoi choisir Blackcube (FR)
ctaTarget (obligatoire) :

ctaSecondaryTitle (obligatoire) :

    Documentation

  1. Sélectionner dans le dropdown → Rubriques → Guide (FR)
ctaSecondaryTarget (obligatoire) :

  1. Laisser vide
breadcrumbTitle (optionnel) :

  1. Laisser vide pour le moment
  2. À remplir après création du Hero EN
lang (liaison multilingue) :

Enregistrer le bloc.

Étape 2 : Ajouter les 3 Features

Feature 1 : Contrôle Total

Section Contenus → Bouton Ajouter un bloc → Sélectionner 02. Feature (H3)

Champs à remplir :

title (obligatoire) :

    Contrôle Total

description (obligatoire) :

    <p>Le développeur code 100% du rendu. Aucune contrainte de template, liberté totale sur le front-end.</p>

  1. Uploader une icône SVG (code source)
  2. SVG recommandé pour "Contrôle Total" :
icon (obligatoire) :

    <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 : Laisser vide
  2. linkRoute : Laisser vide
  3. linkUrl : Laisser vide
Champs non utilisés :

Enregistrer le bloc.

Feature 2 : Flexible

Section Contenus → Bouton Ajouter un bloc → Sélectionner 02. Feature (H3)

Champs à remplir :

title (obligatoire) :

    Flexible

description (obligatoire) :

    <p>JSON Schema pour définir vos contenus. Pas de migration SQL, évolution instantanée de votre structure.</p>

  1. Uploader une icône SVG (layout/grille)
  2. SVG recommandé pour "Flexible" :
icon (obligatoire) :

    <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 : Laisser vide
  2. linkRoute : Laisser vide
  3. linkUrl : Laisser vide
Champs non utilisés :

Enregistrer le bloc.

Feature 3 : Performant

Section Contenus → Bouton Ajouter un bloc → Sélectionner 02. Feature (H3)

Champs à remplir :

title (obligatoire) :

    Performant

description (obligatoire) :

    <p>Hazel Tree : une seule requête pour charger toute l'arborescence.</p>

  1. Uploader une icône SVG (éclair/performance)
  2. SVG recommandé pour "Performant" :
icon (obligatoire) :

    <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 : Laisser vide
  2. linkRoute : Laisser vide
  3. linkUrl : Laisser vide
Champs non utilisés :

Enregistrer le bloc.

Étape 3 : Ajouter le CTA final

Section Contenus → Bouton Ajouter un bloc → Sélectionner 08. Cta

Champs à remplir :

title (obligatoire) :

    Prêt à commencer ?

description (obligatoire) :

    <p>Découvrez comment Blackcube peut transformer votre workflow de développement.</p>

ctaTitle (obligatoire) :

    Commencer maintenant >

  1. Sélectionner dans le dropdown → Articles → Pourquoi choisir Blackcube (FR)
ctaTarget (obligatoire) :

Enregistrer le bloc.

Remplir le Node Home EN

Accès au Node

Menu latéral → Gestion → Rubriques → Cliquer sur le crayon pour éditer le Node EN

Étape 1 : Compléter le Hero

Le Hero a déjà été créé à l'étape 13. Il faut maintenant le compléter.

Section Contenus → Cliquer sur le Hero existant pour l'éditer

Champs à remplir :

title (obligatoire) :

    Blackcube CMS Documentation

description (obligatoire) :

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

  1. Uploader la même image que pour FR si disponible
  2. Laisser vide si pas d'image
image (optionnel) :

ctaTitle (obligatoire) :

    Get Started >

  1. Sélectionner dans le dropdown → Articles → Why choose Blackcube (EN)
ctaTarget (obligatoire) :

ctaSecondaryTitle (obligatoire) :

    Documentation

  1. Sélectionner dans le dropdown → Rubriques → Guide (EN)
ctaSecondaryTarget (obligatoire) :

  1. Laisser vide
breadcrumbTitle (optionnel) :

  1. Laisser vide pour le moment
  2. À remplir à l'étape suivante
lang (liaison multilingue) :

Enregistrer le bloc.

Étape 2 : Ajouter les 3 Features

Feature 1 : Total Control

Section Contenus → Bouton Ajouter un bloc → Sélectionner 02. Feature (H3)

Champs à remplir :

title (obligatoire) :

    Total Control

description (obligatoire) :

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

  1. Uploader la même icône SVG que Feature 1 FR (code source)
icon (obligatoire) :

  1. link : Laisser vide
  2. linkRoute : Laisser vide
  3. linkUrl : Laisser vide
Champs non utilisés :

Enregistrer le bloc.

Feature 2 : Flexible

Section Contenus → Bouton Ajouter un bloc → Sélectionner 02. Feature (H3)

Champs à remplir :

title (obligatoire) :

    Flexible

description (obligatoire) :

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

  1. Uploader la même icône SVG que Feature 2 FR (layout/grille)
icon (obligatoire) :

  1. link : Laisser vide
  2. linkRoute : Laisser vide
  3. linkUrl : Laisser vide
Champs non utilisés :

Enregistrer le bloc.

Feature 3 : Performant

Section Contenus → Bouton Ajouter un bloc → Sélectionner 02. Feature (H3)

Champs à remplir :

title (obligatoire) :

    Performant

description (obligatoire) :

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

  1. Uploader la même icône SVG que Feature 3 FR (éclair/performance)
icon (obligatoire) :

  1. link : Laisser vide
  2. linkRoute : Laisser vide
  3. linkUrl : Laisser vide
Champs non utilisés :

Enregistrer le bloc.

Étape 3 : Ajouter le CTA final

Section Contenus → Bouton Ajouter un bloc → Sélectionner 08. Cta

Champs à remplir :

title (obligatoire) :

    Ready to get started?

description (obligatoire) :

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

ctaTitle (obligatoire) :

    Start now >

  1. Sélectionner dans le dropdown → Articles → Why choose Blackcube (EN)
ctaTarget (obligatoire) :

Enregistrer le bloc.

Liaison Multilingue FR ↔ EN

Mettre à jour le champ lang du Hero FR

  1. Éditer le Node FR → Cliquer sur le bloc Hero
  2. Champ lang : Sélectionner dans le dropdown → Rubriques → EN
  3. Enregistrer

Mettre à jour le champ lang du Hero EN

  1. Éditer le Node EN → Cliquer sur le bloc Hero
  2. Champ lang : Sélectionner dans le dropdown → Rubriques → FR
  3. Enregistrer

Info

Cette liaison permet au language switcher de basculer entre /fr et /en. Le behavior HrefLang génère automatiquement les balises pour le SEO.

Validation

Vérifier dans Gestion → Rubriques :

  1. FR (Type: Home) - Langue: Français
  2. EN (Type: Home) - Langue: English
Nodes modifiés :

  1. Hero (H1) : Titre + description + 2 CTA
  2. Feature (H3) × 3 : Icône + titre + description
  3. Cta : Titre + description + CTA
  4. Total : 5 blocs par page
Blocs par Node :

  1. Liaison FR ↔ EN fonctionnelle via champ lang du Hero
  2. Tous les champs obligatoires remplis
  3. Tous les blocs actifs (validation JSON Schema passée)
Configuration :

Info

Les URLs, Sitemap et SEO ont déjà été configurés à l'étape 13. Cette étape concernait uniquement le remplissage des blocs de contenu.

Recommandations

Contenu des Features

  1. Contrôle Total : Liberté totale du développeur sur le rendu
  2. Flexible : JSON Schema, pas de migration SQL
  3. Performant : Hazel Tree, architecture optimisée
Les 3 Features présentent les forces de Blackcube :

Ces messages ciblent les développeurs et mettent en avant les avantages techniques du CMS.

CTA et Navigation

  1. CTA primaire Hero : Article "Pourquoi choisir Blackcube" (découverte)
  2. CTA secondaire Hero : Guide (documentation technique)
  3. CTA final : Article "Pourquoi choisir Blackcube" (conversion)
Les CTA orientent vers :

Cette navigation guide progressivement le développeur de la découverte vers l'action.

Fin de l'étape 16 - Guide de développement complet

<< Pages Documentation (Remplissage Contenu)