Créer et publier votre site web avec le Website Builder

Avant de commencer

• Le Website Builder complet (nouvelles pages, modèles, publication, animations et composants réutilisables) est inclus dans les plans Professional et Institutional. Gratuit et Basic incluent un design web de base.
• Si vous avez suivi l’assistant de configuration, vous avez déjà un brouillon de page d’accueil qui vous attend.

1. Découvrir le Studio

Ouvrez Mon académie → Designer → Website Builder. Les pages sont regroupées en quatre périmètres :

• Site web public : accueil, pages de présentation, cours, tarifs, contact, FAQ, blog…
• Connexion et inscription : vos pages de connexion, d’inscription et de mot de passe à votre image.
• Paiement et accès : la page d’accès.
• Espace élève : les pages à l’intérieur de l’espace élève, ainsi que Configurer le menu.

Chaque page affiche son statut (Publiée ou Brouillon), son URL et son nombre de versions.

2. Créer une page à partir d’un modèle

1. Cliquer sur Nouvelle page

   Choisissez le Périmètre (par exemple Site web public), la Clé de la page (par exemple landing), un Titre (Fall SAT Bootcamp) et, pour les pages du site web, un Slug (sat-bootcamp).

2. Choisir un modèle de départ

   Dans Modèle de départ (facultatif), choisissez Utiliser un modèle. Il existe 30 modèles de page que vous pouvez filtrer par type et par objectif (capter des contacts, vendre, événement), tels que Préparation au SAT/ACT, Centre de soutien scolaire K-12 ou Événement / webinaire. Ou choisissez Commencer à vide.

   

3. Décider des styles globaux

   Quand vous appliquez un modèle, le Studio demande s’il faut aussi appliquer son style (couleurs, polices, bordures) à toutes vos pages sous forme de Styles globaux. Répondez oui pour votre première page afin d’obtenir un site cohérent.

3. Modifier les blocs

Le panneau de gauche comporte trois onglets :

• Composants : recherchez ou parcourez neuf catégories : Bases, Académie et cours, Mise en page, Marketing, Navigation, Contenu, Formulaires, Avancé et Espace élève. Chaque bloc existe en plusieurs variantes avec une miniature. Cliquez pour l’ajouter.
• Structure : l’arborescence de votre page, ainsi que le Guide de démarrage qui vérifie que vous avez un en-tête, un hero, un contenu principal, un pied de page et du SEO.
• Sections : des sections complètes prêtes à l’emploi (par exemple un en-tête avec menu, un tableau de tarifs, des témoignages).

1. Ajouter un bloc

   Exemple : dans Académie et cours, ajoutez une grille de cours sous le hero ; dans Marketing, ajoutez un bloc de témoignages avec trois citations de parents.

2. Le sélectionner et le modifier

   Cliquez sur n’importe quel bloc du canevas pour modifier ses textes, ses images (depuis la Médiathèque), ses liens, ses couleurs et ses espacements dans le panneau de droite. Les espacements et la visibilité peuvent être définis par appareil.

3. Ajouter du mouvement (facultatif)

   Choisissez un préréglage d’animation de page (Minimal, Dynamique, Percutant, Élégant), une animation d’entrée par élément, ou un effet de composant dans Effet (style FlyonUI) : apparition échelonnée, soulèvement au survol, inclinaison 3D, bordure lumineuse, compteur animé, défilement continu, texte 3D rotatif, parallaxe douce, dégradé animé, balayage lumineux ou révélation d’image. Les boutons ont des effets au survol, au clic et d’« attention continue ».

4. Enregistrer ce que vous réutilisez

   Composants réutilisables vous permet d’enregistrer un bloc (comme votre pied de page) et de le réutiliser sur toutes les pages ; mettez-le à jour une seule fois et comparez les versions.

4. Renseigner le SEO de la page

Ouvrez SEO de la page depuis la structure de la page et renseignez : Titre de la page, URL / slug, Titre SEO (facultatif) (jusqu’à 190 caractères, par exemple SAT Prep in Austin, TX | Brightpath Tutoring), Méta-description (jusqu’à 300 caractères, avec un compteur) et une image Open Graph mise en avant pour le partage sur les réseaux sociaux. Cliquez sur Enregistrer le SEO. Plus de détails dans SEO et Google Search Console.

5. Publier

1. Prévisualiser

   Cliquez sur Aperçu pour voir la page exactement comme les visiteurs la verront.

2. Cliquer sur Publier

   Publier fige une nouvelle version avec le design actuel ; c’est ce que voient les visiteurs. Votre brouillon reste modifiable, ce qui vous permet de continuer à travailler sans affecter la page en ligne. Les pages du site web ne sont accessibles à leur URL qu’une fois publiées.

3. La définir comme page d’accueil

   De retour dans le Studio, utilisez Définir comme accueil sur la page. L’ancien accueil est conservé, renommé home_backup.

Une erreur ? Versions ouvre l’Historique des versions, où vous pouvez comparer et Restaurer la version.

Bibliothèque Uiverse : des centaines d’éléments d’interface prêts à l’emploi

Outre les blocs du Studio, l’onglet Composants comporte une carte Bibliothèque Uiverse avec plus de 300 éléments open source de Uiverse.io : boutons, cartes, indicateurs de chargement, champs de texte, interrupteurs, cases à cocher et boutons radio, formulaires, infobulles, notifications et motifs d’arrière-plan.

1. Trouver un élément

   Cliquez sur Bibliothèque Uiverse, choisissez une catégorie (par exemple Boutons) ou saisissez dans Rechercher dans Uiverse (texte, auteur ou style). D’autres éléments se chargent au fur et à mesure avec Charger plus.

2. L’ajouter

   Cliquez sur la miniature pour l’ajouter à la colonne sélectionnée, ou faites-la glisser sur la page.

3. Le personnaliser

   Dans Propriétés, vous ne voyez que ce que cet élément prend en charge : ses textes (par exemple le Libellé du bouton), le Lien du bouton (une page comme /courses ou une URL complète), le texte indicatif d’un champ, Utiliser la couleur de l’académie ou une Couleur principale, et l’alignement. Les motifs d’arrière-plan ont aussi une hauteur et un titre facultatif. Remplacer par un autre élément le remplace en conservant le lien et les couleurs.

Les éléments sont utilisés sous licence MIT. Les crédits et le texte de la licence se trouvent dans Licence et crédits, en bas du panneau de la bibliothèque ; chaque élément affiche son auteur quand vous le sélectionnez.

Formulaires et contacts

Les blocs Formulaire de contact et Inscription à la lettre d’information enregistrent chaque envoi dans Communication → Contacts et e-mail marketing et vous envoient un avis par e-mail. Ils sont protégés contre les robots de spam.

Créer votre site avec Kody (IA)

Kody est l’assistant IA du Website Builder (plans Professional et Institutional). Cliquez sur Créer mon site avec Kody dans le Website Studio et répondez à quelques questions : type d’académie (préparation au SAT/ACT, soutien scolaire K-12, soins infirmiers, lycée en ligne, langues…), nom, public visé, ce qui vous distingue, vos cours principaux, ton, utilisation ou non de la couleur de votre marque, langue du site (anglais, espagnol ou les deux), objectif principal (s’inscrire, demander des informations ou acheter un plan) et sections souhaitées (témoignages, tarifs, FAQ, équipe). Surprenez-moi laisse Kody choisir le style et la mise en page.

1. Kody construit une proposition

   Vous verrez sa progression étape par étape (réflexion, structuration des sections, rédaction des textes, design de la connexion et de l’inscription, mise en page). Il n’utilise que de vrais blocs, styles et designs de connexion du Studio : tout reste donc modifiable.

2. La vérifier

   Prévisualisez l’accueil, la connexion et l’inscription sur ordinateur et sur mobile (et dans chaque langue). Vous pouvez Régénérer une section, Essayer un autre style (gratuit, sans IA) ou l’Abandonner.

3. Utiliser le brouillon

   Utiliser ce brouillon ou Ouvrir dans l’éditeur crée la page comme brouillon : Kody ne publie jamais. Si vous avez déjà une page d’accueil, elle est créée comme nouvelle page et votre page actuelle n’est pas touchée ; le design de connexion et d’inscription va dans leurs brouillons. Publiez ensuite depuis le Studio comme d’habitude.

Quota mensuel : Professional 5 sites web et Institutional 10 par académie. Le compteur sur la page de Kody (Sites web ce mois-ci : 1 / 5) indique ce que vous avez utilisé et se réinitialise le 1er de chaque mois. Vous pouvez conserver jusqu’à 20 sites web Kody à la fois : abandonnez-en un pour en créer un autre. Seuls les sites terminés comptent ; régénérer une section et essayer un autre style ne comptent pas. Si vous passez à un plan inférieur, les sites web déjà générés restent là où ils sont.

Questions fréquentes

Puis-je créer la page en anglais et en espagnol ?

Oui. La barre supérieure comporte un sélecteur Langue de la page (EN/ES) pour que vous puissiez modifier les versions anglaise et espagnole d’une même page.

Quelle taille peuvent avoir mes images ?

Les fichiers de la Médiathèque peuvent atteindre 4 Mo chacun (images, vidéos, SVG ou polices). Organisez-les avec des dossiers et des étiquettes.

Puis-je utiliser mon propre domaine pour le site web ?

Oui, avec les plans Professional et Institutional : consultez Connecter votre propre domaine.