> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hodi.host/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Comment construire mon site vitrine avec Sitejet Builder ?

![](https://hodi.host/images/kb/191_website-builder.png)

Sitejet Builder est un éditeur visuel, intégré nativement à cPanel, qui permet de concevoir et de publier rapidement des sites web. Hodi le met à votre disposition sans coût supplémentaire, directement depuis votre espace d’hébergement. Ce guide vous accompagne **pas à pas**, depuis la connexion jusqu’à la mise en ligne, avec un focus sur l’éco‑conception.

#### Prérequis

* Un accès à votre interface client Hodi (identifiants fournis lors de votre commande).
* Un nom de domaine déjà créé/pointé sur l’hébergement.
* Un navigateur web à jour (Chrome, Firefox, Edge ou Safari).
***⚠️ Important**** : avant de vous lancer, organiser vos informations (textes, photos, vidéos, etc.) et prenez quelques minutes pour concevoir vos pages et leurs organisations en dehors de l'outil SiteJet Builder. Vous gagnerez un temps considérable dans la conception de votre site !*

#### Accéder à Sitejet Builder via cPanel

1. [Connectez‑vous](https://help.hodi.host/fr/article/comment-acceder-a-cpanel-tcucor/) à **cPanel** dans votre interface Hodi

2. Dans le tableau de bord :

   soit cliquez sur **Démarrer** dans le bloc de Une,

   ![](https://hodi.host/images/kb/188_sitejet.jpg)

   soit ouvrez la section **Domaines ▸ Sitejet Builder**

   ![](https://hodi.host/images/kb/189_Capture-decran-2025-08-01-a-09.15.24.png)

1. La liste de vos domaines s’affiche. Cliquez sur **Créer un site** (ou **Editer le site** si un projet existe déjà) en face du domaine souhaité.

2. La plateforme Sitejet s’ouvre. Vous êtes prêt à commencer !

#### Tour d’horizon de l’interface Sitejet
![](https://hodi.host/images/kb/192_sitejet-board-2.png)

| **Zone** | **Description rapide** |
| ---- |
| **Barre supérieure** | Tout ce qui concerne la navigation au sein de votre projet : mode Aperçu, mode Éditeur, Paramètres du projet et donc le fameux bouton **Publier !** |
| **Barre latérale gauche** | Les composants (blocs, sections, widgets) pour construire votre site. Vous avez juste à les glisser‑déposer dans le canva central à droite ! |
| **Canvas central** | L'aperçu de votre page en temps réel |
| **Panneau latéral droit** | Les propriétés du composant sélectionné : texte, couleurs, marges, etc. |
| **Menu hamburger** | Toutes les fonctions avancées de votre projet (SEO, sauvegardes, partage, export) |

#### Création détaillée d’un site

1. **Démarrer un projet**

> Cliquez sur **Essayer Sitejet Builder**.

2. **Sélectionner un template**

> Parcourez les catégories ou utilisez la barre de recherche.
> Cliquez sur **Aperçu** pour tester la démo.
> Validez par **Utiliser ce modèle**.

3. **Paramétrer les informations globales**

> Logo, favicon, palette de couleurs principales.
> Police : privilégiez les polices système pour alléger le chargement.​

4. **Personnaliser les pages**

> Dans la barre latérale, faites glisser des **composants** (header, hero, témoignages…).
> Modifiez le texte directement **inline** ou via le panneau de droite.
> Remplacez les images par vos propres visuels optimisés (voir Éco‑conception).

   ![](https://hodi.host/images/kb/193_composant.png)

5. **Gérer la navigation**

> La **Navigation principale** se met à jour automatiquement lorsque vous ajoutez/renommez une page.
> Utilisez **Pages ▸ Ajouter une page** pour créer des pages vierges ou dupliquer un modèle.

6. **Fonctionnalités avancées (optionnel)**

   **> Formulaires** : glissez un bloc Formulaire, configurez l’adresse de réception.
   **> Responsive** : testez les vues Mobile et Tablette via l’icône d’écran.
   **> SEO** : Menu hamburger ▸ *SEO & Settings* : balises title/description, sitemap, favicon.

#### Publier votre site

1. Cliquez sur **Publier** (coin supérieur droit).

2. Choisissez votre domaine et confirmez.
   **⚠️ Attention :** Tous les fichiers existants du répertoire racine seront remplacés.

3. Attendez quelques secondes, puis cliquez sur **Voir le site** pour vérifier la mise en ligne.

4. **Besoin d’un rollback ?**
   Sélectionnez *Sauvegardes* dans le menu hamburger et restaurez une version précédente.
   ***⚠️ Important :**** avant chaque publication, téléchargez une sauvegarde via cPanel ▸ Fichiers ▸ Backup.*

#### Éco‑conception : les bonnes pratiques !

| Objectif | Action concrète |
| ---- |
| **Réduire le poids des médias** | • Convertissez vos images en **WebP**. • Compressez vos vidéos ou hébergez‑les sur une plateforme externe (YouTube, PeerTube). |
| **Limiter les requêtes HTTP** | • Utilisez une seule police (ou des polices système). |
| **Améliorer l’accessibilité** | • Utilisez des couleurs à contraste élevé. • Ajoutez un texte alternatif descriptif pour chaque image. |
| **Optimiser le chargement** | • Activez le **lazy‑loading** des images dans *Paramètres Site ▸ Performances*. • Minifiez CSS/JS (option *Optimize code*). |
| **Mesurer & ajuster** | • Testez votre page sur **PageSpeed Insights** et **EcoIndex**.• Corrigez les points rouges avant de publier. |

#### Ressources complémentaires

* Vidéos tutoriel SiteJet Builder [https://www.youtube.com/@SitejetWebsiteBuilder](https://www.youtube.com/@SitejetWebsiteBuilder)
* Documentations officielles cPanel : [Sitejet Builder](https://docs.cpanel.net/cpanel/domains/sitejet-builder/) *(en anglais)*