--- title: "Créer sa page d'accueil et des pages de contenu avec l'éditeur visuel" description: "Construisez votre page d'accueil et vos pages de contenu avec l'éditeur visuel par blocs : galerie de médias, couleurs, mobile et liste des blocs." url: https://www.ciklik.academy/fr/contenu-pages/creer-sa-page-d-accueil-et-des-pages-de-contenu-avec-l-editeur-visuel/ lang: fr lastUpdated: 2026-10-09 --- # Créer sa page d'accueil et des pages de contenu avec l'éditeur visuel > Boutique box > > Cette page concerne les boutiques box, hébergées par Ciklik. Vous utilisez le module PrestaShop ? [Voir la documentation PrestaShop](https://www.ciklik.academy/fr/prestashop/). ## Accéder à la vidéo [Vidéo](https://player.vimeo.com/video/669353829) L’éditeur visuel est disponible pour personnaliser votre page d’accueil, vos pages de contenu libre, un espace de contenu libre en-dessous de vos formules et de vos cartes cadeaux, votre tunnel de désabonnement et le descriptif de vos produits du shop. > Astuce > > Préparez vos visuels (images et icônes) aux bons formats et compressés avant de les importer dans votre galerie de médias depuis l’éditeur visuel. La [check-list visuels](https://www.ciklik.academy/fr/personnalisation-site/check-list-visuels/) détaille la méthode avec Photopea et Squoosh. Vous pouvez créer des sous-dossiers dans votre galerie de médias pour classer vos visuels. Veillez à **ne pas mettre d’espace ni de caractères spéciaux** dans les noms attribués à vos sous-dossiers. Vos couleurs se personnalisent depuis le champ **Variables CSS**, et vos polices de texte et de titre depuis les champs **Police du texte** et **Police des titres**, quand vous allez dans **Paramètres > Sites** puis **Éditer**, dans l’onglet **Apparence pour** (suivi du nom de votre site). ## Présentation de l’éditeur visuel L’éditeur visuel comprend 2 parties : - la **galerie de blocs** disponibles à gauche - la **prévisualisation** de la page à droite (en **version ordinateur et mobile**) La **disposition des blocs** entre eux se modifie en sélectionnant un bloc et en le glissant à l’endroit voulu dans la partie de gauche (gestion des blocs et de leur contenu). La **disposition des éléments au sein d’un bloc** est aussi personnalisable par un simple glisser/déposer. Pour chaque bloc dans le contenu d’une page, vous pouvez indiquer s’il est visible en version ordinateur, en version mobile ou les 2 (depuis l’onglet Apparence du bloc). Puis, accédez au **détail du bloc** dans la partie de gauche pour en personnaliser le contenu. ![Liste des blocs de la page dans l'éditeur visuel, avec la flèche qui ouvre le détail du bloc Bannière](https://www.ciklik.academy/doc-resources/images/assets/detail-bloc.png) Dans le **contenu des blocs**, vous trouverez 2 onglets : - **Contenu** pour personnaliser le contenu du bloc - **Apparence** pour personnaliser les couleurs de texte et images de fond, en version ordinateur et mobile, et son remplissage Vous avez aussi la possibilité de modifier les couleurs de texte et de fond en accédant à une palette de couleurs. Construisez votre **palette de couleurs** (variables `--color1` à `--color11`) : sortez de l’éditeur visuel et allez dans **Paramètres > Sites** puis **Éditer** (icône du petit crayon). Dans l’onglet **Apparence pour**, renseignez vos codes couleur html dans le champ **Variables CSS**. C’est également dans la fenêtre des variables CSS que vous pourrez personnaliser les couleurs de vos boutons, du pied de page, … Pour vous aider à définir vos couleurs, vous pouvez vous appuyer sur le site [Coolors](https://coolors.co/022b3a-1f7a8c-bfdbf7-e1e5f2-ffffff). Un bloc peut être **supprimé**. Un **bloc** peut être **copié**. Puis appuyez sur CTRL+V pour coller le bloc. Le **contenu d’une page** peut être **copié**. Puis appuyez sur Ctrl+V pour coller son contenu. Une fois vos modifications terminées, **sauvegardez les modifications** apportées. ## Liste des blocs disponibles La galerie de blocs classe les blocs par catégorie. Les noms ci-dessous sont ceux affichés dans l’éditeur. **Spécial** - **HTML** : pour construire directement le contenu de vos pages en HTML - **Markdown** : pour des pages de texte, type CGV ou mentions légales - **Texte formaté** - **Texte encadré** - **Bannière** : voir [Ajouter une bannière](https://www.ciklik.academy/fr/personnalisation-site/ajouter-une-banniere/) - **Newsletter** : formulaire d’inscription à votre newsletter - **Témoignages** - **Etapes** - **Étapes avec images** - **Bloc centré** - **Avis google** - **Avis trustpilot** - **Call to action hover** - **Texte avec image** - **Compte à rebours** - **Titre avec boutons à droite** - **FAQ / Caractéristiques** - **Caractéristiques détaillées** - **Formule en avant avec cartes** - **Arguments commerciaux** - **Citation** - **Table** - **Checklist** - **Sticky bar** - **Vu à la tv** : vidéo mise en avant **Colonnes** - **Colonnes** - **Section avec icônes** - **Section avec titre & icônes** - **Evaluations** - **News** - **Contenu alterné droite / gauche** - **Produits** - **Statistiques** - **Selecteur de programme** **Images** - **Images survolables** - **Carrousel d’images** - **Carrousel produits** - **Galerie d’image** : accepte aussi des liens vers vos réseaux sociaux (Facebook, Instagram, Pinterest, Youtube, Twitter, Tiktok), affichés sous forme d’icônes. Les images s’ajoutent une par une dans le bloc. - **Image à cheval** **Carousel** - **Carousel de texte avec image** **HTML** - **HTML Centré** - **HTML avec texte** D’autres blocs, conçus pour un site précis, ne s’affichent pas dans votre galerie. ## Voir aussi [Personnaliser le design de son site : couleurs et polices](https://www.ciklik.academy/fr/personnalisation-site/personnaliser-le-design-de-son-site-couleurs-et-polices/) [Check-list visuels](https://www.ciklik.academy/fr/personnalisation-site/check-list-visuels/) [Ajouter une bannière](https://www.ciklik.academy/fr/personnalisation-site/ajouter-une-banniere/) [Personnaliser la page S'abonner](https://www.ciklik.academy/fr/contenu-pages/personnaliser-la-page-s-abonner/)