Maîtriser l'éditeur de thème : le guide complet

Votre vitrine est la devanture de tout ce que vous vendez, et sur Dirora vous la façonnez avec l'éditeur de thème visuel — un espace de travail en glisser-déposer où vous construisez des pages, définissez les couleurs et les polices de votre marque, et voyez chaque changement apparaître instantanément dans un aperçu en direct. Il n'y a aucun code à écrire et rien à casser : vous agencez les éléments, le moteur de mise en page se charge du balisage responsive et performant en dessous. Ce guide parcourt tout l'éditeur, du premier clic à un design prêt à être lancé.

Si vous vous demandez encore si vous pouvez créer une boutique sans développeur, la réponse courte est oui — et notre article sur la nécessité ou non de coder pour lancer une boutique en ligne développe l'argument. L'éditeur de thème est là où cette promesse devient réalité.

Ce qu'est réellement l'éditeur de thème

Voyez l'éditeur comme deux éléments qui fonctionnent ensemble. Au-dessus se trouve un canevas WYSIWYG — ce que vous voyez est vraiment ce que vos clients obtiendront. En dessous se trouve le moteur de mise en page, qui prend les sections et les widgets que vous déposez sur la page et les restitue sous forme de HTML propre, côté serveur, qui se charge rapidement et s'affiche correctement sur chaque appareil. Vous ne touchez jamais directement cette couche ; vous travaillez entièrement à travers des contrôles visuels, et le moteur garde le rendu soigné.

Tout ce que vous assemblez est enregistré avec votre thème, de sorte que votre design, vos couleurs, vos polices et vos mises en page voyagent ensemble. Cela compte lorsque vous voulez dupliquer un thème pour expérimenter, ou revenir à un design plus tard sans perdre votre travail.

Se repérer dans l'interface

Lorsque vous ouvrez l'éditeur, vous avez sous les yeux trois zones :

• Le panneau de gauche est votre surface de contrôle — c'est là que vous ajoutez et réorganisez les widgets, ouvrez les réglages d'un widget et passez d'une partie de votre boutique à l'autre. L'éditeur fonctionne par modes : En-tête, Pages et Pied de page pour la structure, plus des modes dédiés Typographie, Ressources et CSS pour le style global, le regroupement des images et le code avancé. La plupart de votre temps se passe dans les modes visuels ; les trois derniers sont là quand vous voulez un contrôle plus poussé.

• Le canevas central est un aperçu en direct de votre vitrine. Cliquez sur n'importe quel élément pour le sélectionner ; modifiez un réglage et l'aperçu se met à jour en temps réel, de sorte que vous ne devinez jamais l'effet d'un ajustement.

• La barre d'outils supérieure contient vos outils globaux : le sélecteur d'appareil pour l'aperçu responsive, l'annulation et le rétablissement, ainsi que les commandes d'enregistrement et de publication.

Parce que l'aperçu est véritablement en direct, la façon la plus rapide d'apprendre l'éditeur est de modifier quelque chose de petit et d'observer ce qui se passe. Rien de ce que vous faites dans un brouillon n'est public tant que vous n'avez pas choisi de le publier, il est donc sans risque d'explorer.

Construire des pages avec des widgets

Chaque page est assemblée à partir de widgets — des blocs de construction autonomes que vous faites glisser sur le canevas, puis empilez et réorganisez pour composer une page. Dirora est livré avec 41 widgets de vitrine couvrant les éléments dont une vraie boutique a besoin, de sorte que dans la plupart des cas vous choisissez et agencez plutôt que de partir de zéro. Ceux que vous utiliserez le plus souvent incluent :

• Bannière héros — une zone de titre pleine largeur avec une image d'arrière-plan, un texte d'accompagnement et un bouton d'appel à l'action. C'est généralement la première chose qu'un visiteur voit, elle mérite donc le plus d'attention.

• Produits en vedette et grilles de produits — importez des articles directement depuis votre catalogue dans une grille soignée, en choisissant combien de produits et de colonnes afficher. Associez cela à des visuels forts issus de nos conseils de photographie de produits et cela vend beaucoup à lui seul.

• Listes de collections — mettez en valeur vos catégories visuellement pour que les acheteurs naviguent d'eux-mêmes vers ce qu'ils veulent.

• Texte avec image — un bloc côte à côte pour raconter l'histoire de votre marque, avec l'image à gauche ou à droite.

• Témoignages et avis — une preuve sociale disposée en colonnes pour renforcer la confiance au moment de la décision.

• Inscription à la newsletter — collectez des adresses e-mail pour bâtir une audience que vous possédez plutôt que de la louer.

• Texte enrichi, galeries d'images, comptes à rebours et badges de confiance — les seconds rôles pour les lancements, les promotions et la réassurance.

• HTML personnalisé — un widget dédié pour insérer votre propre balisage lorsque vous avez besoin de quelque chose que les widgets standard ne couvrent pas, comme un outil tiers intégré ou une intégration sur mesure. Il se place aux côtés des widgets visuels, de sorte que vous n'y recourez que lorsque vous en avez vraiment besoin.

Pour en ajouter un, faites-le glisser depuis le panneau de gauche jusqu'à l'endroit voulu sur la page ; pour le déplacer, faites-le glisser vers le haut ou le bas ; pour le configurer, cliquez dessus et ajustez ses réglages. Chaque widget est responsive dès le départ, de sorte qu'une grille qui affiche quatre colonnes sur ordinateur se réduit gracieusement à une seule sur un téléphone sans aucun travail supplémentaire de votre part.

Le choix des widgets, c'est du design, mais c'est aussi de la conversion. Si vous voulez créer des pages qui vendent réellement, nos guides sur les pages produits à fort taux de conversion et sur l'intégration de la confiance dans votre tunnel de paiement s'associent bien à cette section.

Définir vos couleurs et vos polices

Une palette et une typographie cohérentes sont ce qui distingue une vitrine qui a l'air sur mesure d'une qui a l'air d'un modèle. L'éditeur vous donne des contrôles dédiés pour les deux :

• Couleurs — définissez les couleurs de votre marque une seule fois et appliquez-les aux arrière-plans, textes, boutons et accents. Comme les changements sont globaux, un seul ajustement se répercute de façon cohérente dans toute la boutique, plutôt que de vous laisser traquer des nuances discordantes page par page.

• Polices — choisissez les caractères de vos titres et de votre texte courant et définissez leurs tailles et graisses pour que votre boutique se lise clairement et fidèlement à votre marque.

Les choix de couleurs pèsent plus lourd que la plupart des gens ne le pensent — ils façonnent la perception de fiabilité, de haut de gamme ou d'accessibilité d'une boutique avant même qu'un seul mot ne soit lu. Si vous ne savez pas par où commencer, notre article sur la psychologie des couleurs dans l'e-commerce est une bonne introduction. En règle générale : choisissez une ou deux couleurs de marque, un neutre pour les arrière-plans et un seul accent pour les boutons, puis résistez à l'envie d'en ajouter davantage.

Typographie avancée et polices personnalisées

Les polices font un travail discret et constant : elles donnent le ton de toute votre boutique, et une typographie cohérente est l'un des signaux les plus clairs d'une marque professionnelle. Le mode Typographie dédié va bien au-delà d'un simple choix titre-et-corps, vous permettant de définir la famille, la taille et la graisse de police indépendamment pour chaque rôle de texte dans votre boutique :

• Texte courant — la base que vos clients lisent le plus, la lisibilité y compte donc le plus.

• Titres, de H1 à H6 — contrôlez chaque niveau séparément pour construire une hiérarchie visuelle claire tout au long de la page.

• Texte des boutons — ajustez la typographie de vos appels à l'action pour qu'ils apparaissent délibérés et cliquables.

• Texte de navigation — gardez vos menus nets et fidèles à votre marque sur chaque page.

Vous pouvez associer ces rôles librement — une police d'affichage au caractère marqué pour les titres face à une police de corps propre et lisible, par exemple. Il y a plus de 50 Google Fonts sélectionnées parmi lesquelles choisir, vous n'êtes donc pas limité aux valeurs système par défaut et pouvez trouver quelque chose qui correspond vraiment à votre marque. Vos réglages de typographie sont appliqués de manière à remplacer de façon fiable les valeurs par défaut au niveau des composants, ce qui signifie que les choix que vous faites ici tiennent de façon cohérente dans toute la vitrine plutôt que d'être discrètement écrasés par le style intégré d'un widget.

Ressources de thème : regrouper vos images avec le thème

Certaines images appartiennent au design plutôt qu'à un produit particulier — une texture d'arrière-plan, un motif de marque, un visuel de remplacement. Le mode Ressources est là où elles vivent. Vous y téléversez des images et elles sont regroupées avec le thème lui-même, puis référencées depuis les réglages de vos widgets à l'aide d'une référence de ressource plutôt que d'une URL ponctuelle.

Le bénéfice, c'est la portabilité : parce que les images voyagent avec le thème, vous pouvez dupliquer un thème pour expérimenter, ou déplacer un design entre environnements, sans que vos visuels ne se brisent ou ne disparaissent. C'est exactement pourquoi les ressources comptent si vous voulez un jour partager ou réutiliser un thème — le design arrive complet, illustrations incluses, au lieu de pointer vers des fichiers qui se sont égarés. Pour la photographie de produits et de style de vie qui se trouve dans votre catalogue plutôt que dans votre thème, le gestionnaire de médias est un meilleur foyer ; les conseils de nos conseils de photographie de produits s'appliquent aux deux.

CSS personnalisé : un contrôle fin pour qui le souhaite

L'éditeur visuel couvre la grande majorité de ce dont une vitrine a besoin, mais parfois vous voulez ajuster un détail précis qu'aucun réglage n'expose. C'est à cela que sert le mode CSS — un éditeur de code complet et optionnel pour quiconque est à l'aise pour écrire quelques lignes de CSS, tapi tranquillement à l'écart de tous ceux qui ne le sont pas.

Vous ciblez les éléments à l'aide des sélecteurs intégrés de la vitrine — par exemple .dirora-store pour le conteneur global, .dirora-header et .dirora-footer pour ces régions, des sélecteurs de type de section tels que .section-hero, ou une section individuelle par son propre id. Votre CSS personnalisé est chargé après tous les autres styles, il a donc la priorité et l'emporte de façon fiable quand vous en avez besoin. L'éditeur inclut des commodités comme un bouton de formatage pour ranger votre code et un mode plein écran pour les modifications plus longues. C'est entièrement optionnel — vous n'avez jamais besoin de l'ouvrir pour construire une boutique professionnelle — mais il est là dès que vous voulez ce dernier degré de contrôle.

Aperçu en direct et design responsive

Plus de la moitié du trafic e-commerce se fait sur mobile, un design qui n'a l'air correct que sur un ordinateur portable est donc un design qui perd des ventes. L'éditeur de Dirora vous permet de prévisualiser votre boutique sur ordinateur, tablette et mobile à l'aide du sélecteur d'appareil dans la barre d'outils supérieure. Chaque widget s'adapte automatiquement, mais l'aperçu vous permet de vérifier les détails — comment un titre héros se répartit sur un écran étroit, si l'espacement semble à l'étroit, comment une grille de produits se réagence.

Prenez l'habitude de basculer en mobile avant de publier quoi que ce soit. Une mise en page qui semble équilibrée sur un grand moniteur peut paraître clairsemée ou maladroite sur un téléphone, et l'aperçu est le moyen le plus rapide de le détecter. La vitesse compte tout autant que la mise en page ; notre guide sur l'optimisation des performances de la boutique explique comment les visuels et le poids des pages affectent les temps de chargement.

Travailler en toute sécurité : brouillons, annulation et rétablissement

L'un des avantages discrets de l'éditeur est qu'expérimenter ne comporte aucun risque. Vos changements vivent dans un brouillon jusqu'à ce que vous les publiiez activement, de sorte que votre vitrine en ligne ne change jamais sous les pieds de vos clients pendant que vous êtes en pleine refonte. Quand vous êtes satisfait, vous publiez ; jusque-là, les acheteurs voient la dernière version que vous avez approuvée.

Au sein d'une session, vous disposez aussi d'un historique complet d'annulation et de rétablissement. Vous faites glisser un widget au mauvais endroit, vous hésitez sur une couleur, vous supprimez une section par erreur — revenez en arrière avec l'annulation, ou avancez à nouveau avec le rétablissement. Entre les brouillons et l'historique d'annulation, il n'existe pas d'erreur irrécupérable, ce qui est exactement la confiance que vous voulez quand vous apprenez l'outil.

Personnaliser votre en-tête et votre pied de page

Votre en-tête et votre pied de page apparaissent sur chaque page, ils font donc un gros travail de navigation et de construction de la confiance. Dans l'éditeur, vous les modifiez de la même manière que vous modifiez les pages — en ajoutant et en agençant des blocs. Un en-tête typique porte votre logo, la navigation principale, un point d'entrée de recherche et le panier ; un pied de page contient généralement des colonnes de liens, une inscription à la newsletter, des liens sociaux, des icônes de paiement et vos mentions légales et coordonnées. Prenez le temps de bien les régler tôt, car ils encadrent chaque autre page sur laquelle un visiteur atterrit.

Un flux de travail simple pour votre premier design

Si vous fixez un canevas vierge, cet ordre garde les choses gérables :

1. Définissez d'abord les bases de votre marque. Choisissez vos couleurs et vos polices avant de construire des pages, afin que tout ce que vous ajoutez hérite du bon aspect dès le début.

2. Réglez l'en-tête et le pied de page. Mettez en place les éléments de navigation et de confiance pour que le cadre soit stable.

3. Construisez la page d'accueil de haut en bas. Commencez par un héros, ajoutez un bloc de produits en vedette ou de collection, puis superposez la preuve sociale et une inscription à la newsletter.

4. Vérifiez le mobile au fur et à mesure. Basculez l'aperçu appareil après chaque section majeure plutôt qu'à la toute fin.

5. Publiez quand l'ensemble tient debout. Vous pouvez toujours revenir — l'éditeur récompense l'itération.

Tout nouveau sur la plateforme ? Notre guide de démarrage parcourt la création de compte et l'ajout de produits, ce qui s'associe naturellement à la conception de la vitrine ici.

Ce que coûte cette façon de construire

L'éditeur de thème et le moteur de mise en page font partie de la plateforme sur chaque forfait, y compris le forfait gratuit Starter — il n'y a pas de « module de design » séparé ni de frais pour utiliser l'éditeur. Tout aussi important, Dirora ne prend aucun frais de transaction sur aucun forfait ; le seul prélèvement est une petite commission de plateforme qui diminue à mesure que vous grandissez, de 1,5 % sur Starter à 0,75 % sur Pro, 0,25 % sur Business et 0 % sur Enterprise. Vous pouvez voir le détail complet sur la page des tarifs, et si vous pesez vos options, notre page de comparaison expose comment cela se compare aux autres plateformes. Lorsque vous êtes prêt à passer en ligne sur votre propre adresse, le guide des domaines personnalisés couvre la connexion d'un domaine avec SSL automatique.