Configuration de la conception et du contenu pour le site instantané (version nouvelle génération)

Le site instantané d'Ecwid est un site Web gratuit que vous obtenez avec votre compte Ecwid. Il comprend une boutique en ligne intégrée qui vous permet de commencer à vendre immédiatement.

Avec la version nouvelle génération de notre site instantané, vous pouvez :

• Créer un site Web à partir de sections de contenu personnalisables ;
• Utiliser des modèles de sites Web prêts à l'emploi adaptés aux différents types de magasins : restaurants, produits cosmétiques, vente d'œuvres d'art, cours de formation, etc. ;
• Ajouter une grande variété de sections comme des couvertures ou des offres spéciales à partir de la bibliothèque ;
• Créer des menus de navigation pour faciliter la navigation des clients dans votre boutique ;
• Traduire le contenu de votre site, y compris le titre et la description du référencement.

Pour modifier votre site instantané, allez dans Site Web et cliquez sur Modifier le site. Si le site instantané n'est pas votre site principal, accédez à Aperçu → Gérer le site instantané dans l'interface d'administration d'Ecwid et cliquez sur le bouton Modifier le site.

Choix d'un modèle de site

Pour accélérer la configuration du site instantané, vous pouvez choisir parmi un ensemble de modèles de site Web prêts à l'emploi. Ces modèles peuvent être modifiés comme vous le souhaitez pour s'adapter à votre entreprise.

Pour choisir un modèle pour votre site :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site. Si le site instantané n'est pas votre site principal, accédez à Aperçu → Gérer le site instantané et cliquez sur Modifier le site.
2. Cliquez sur Paramètres → Modèles de site.
3. Parcourez la liste des modèles pour trouver celui qui vous plaît le plus.
4. Pour voir à quoi ressemble un modèle, passez votre souris dessus et cliquez sur Aperçu du modèle. Pour appliquer le modèle, cliquez sur Utiliser le modèle :

   

C'est tout ! Vous avez sélectionné un modèle pour votre site instantané. Vous pouvez maintenant continuer avec la configuration du site et apporter des modifications à ce modèle dans l'éditeur.

Présentation du mode d'édition

Lorsque vous ouvrez votre site instantané pour l'éditer (Site Web → Modifier le site ou Aperçu → Gérer le site instantané → Modifier le site si le site instantané n'est pas votre site principal), vous pouvez voir la liste des Sections de la page d'accueil dont votre site instantané se compose actuellement.

Tous ces section sont visibles sur l'aperçu du site instantané à droite, où ils apparaissent dans le même ordre que celui dans lequel ils apparaissent dans la liste :

Pour visiter votre site sur le web et voir comment il se présente dans un onglet séparé, cliquez sur Votre site instantané en haut de l'éditeur.

Ajouter des section

Si vous avez besoin de sections supplémentaires pour votre site Web (p. ex., une section « Offre spéciale », des section comprenant des informations sur la livraison/le paiement, ou un section "À propos de nous" supplémentaire) ou si vous voulez remplacer la section par celui qui convient le mieux à votre boutique, vous pouvez ajouter autant de nouveaux section que vous le souhaitez en toute facilité. Lorsque vous avez beaucoup de sections, vous pouvez les renommer pour faciliter la navigation sur le site.

Pour ajouter un section à votre site instantané :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur Ajouter un section.
3. Sur la page ouverte, cliquez sur l'aperçu du section dont vous avez besoin. Les sections sont regroupés par sujet.
4. Une fois que vous cliquez sur la section, il apparaît pour être édité et ajouté à votre liste de Sections de la page d'accueil, juste avant la section de pied de page.
5. (facultatif) Pour renommer un section, cliquez dessus dans le menu latéral gauche de l'éditeur, puis cliquez sur son nom pour saisir un nom personnalisé :

   

Vous pouvez modifier la mise en page et le contenu du section à votre goût et modifier sa position sur votre site Web. Si vous avez des sections en double (p. ex., vous avez ajouté un nouveau section de couverture avec la mise en page qui vous plaît le plus), vous pouvez toujours supprimer ceux qui sont en surplus.

Modifier des sections

Votre site Web peut avoir les textes, couleurs et images qui correspondent le mieux aux besoins de votre entreprise. Vous pouvez modifier le contenu et la mise en page de chacun des sections présents dans la liste des Sections de la page d'accueil de l'éditeur du site instantané.

Pour modifier le contenu d'un section :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur la section.
3. Sur l'onglet Contenu, cherchez l'élément dont vous avez besoin.
4. Effectuez les modifications nécessaires (modifier le texte, télécharger une nouvelle image, configurer les liens d'action, etc.) Vous pouvez également renommer une section en cliquant sur son titre en haut. 

Les textes présaisis dans les modèles de section contiennent des conseils sur ce qu'il faut écrire dans les champs.

Vous pouvez télécharger des images au format JPG, PNG, JPEG2000, GIF, WEBP et TIFF d'une taille inférieure à 20 Mo chacune. La taille recommandée est de 1500-2000px. Comme la mise en page du site s'adapte à la taille d'écran de l'appareil du client, essayez de recadrer vos images pour que les informations les plus importantes se trouvent au centre. Si vous voulez ajouter du texte à vos images, vous pouvez le faire dans l'éditeur du site instantané (plutôt qu'un éditeur de photos).

Pour modifier la conception d'un section :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur la section.
3. Ouvrez ensuite Conception et apportez les changements nécessaires :
   

   

4. Apportez les changements nécessaires (définissez la mise en page du section : elle permet de définir les positions des éléments les uns par rapport aux autres, de modifier la police/le style/les couleurs pour les éléments de ce section, de configurer l'arrière-plan, de choisir quels éléments afficher, etc.)

Vous pouvez toujours revenir à la version précédemment enregistrée de votre site en cliquant sur Brouillon enregistré → Ignorer les modifications en haut de l'éditeur. Pour les modifications apportées dans l'onglet Conception du section, vous pouvez également utiliser le lien Restaurer le section par défaut situé en bas. Veuillez noter que ce lien ramène les paramètres initiaux du modèle de conception pour ce section.

Une fois que vous avez fini de modifier votre site Web, cliquez sur le bouton Enregistrer et publier dans le coin supérieur droit de l'éditeur.

Modification de l'ordre des sections

Les sections de votre site instantané sont affichés dans l'ordre dans lequel ils sont repris dans la liste des Sections de la page d'accueil de l'éditeur du site instantané (Site Web → Modifier le site). Vous pouvez modifier l'ordre de tous les sections, sauf pour l'en-tête et le pied de page : ils sont toujours le premier et le dernier section de votre site Web.

Pour modifier l'ordre des sections, il suffit de faire glisser et de déposer vos sections le Site Instantané dans la partie gauche de l'éditeur :

Supprimer des section

Vous pouvez supprimer une section de la liste des Sections de la page d'accueil si vous n'en avez pas besoin sur votre site instantané. Par exemple, vous êtes en train de configurer votre boutique et n'avez pas encore de témoignages de client à mettre en vedette.

Pour supprimer un section de votre site instantané :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur la section.
3. Faites défiler vers le bas et cliquez sur Supprimer la section en bas :
   

   

Si vous avez besoin de ce section sur votre site Web plus tard, vous pouvez toujours ajouter des sectiones similaires depuis la bibliothèque.

Traduction des sections

Vous pouvez traduire le contenu de la section dans une autre langue et créer ainsi un site multilingue. Le contenu du site comprend l'en-tête du menu, le pied de page, les avis des clients, les nouveautés, les informations de livraison et de paiement, les offres spéciales, les informations de l'entreprise, les lieux, et le titre et la description SEO du site.

Chaque nouvelle langue apparaît dans le sélecteur de langue afin de permettre aux clients de choisir leur langue préférée.

Découvrez comment traduire le contenu du site instantané →

Personnaliser l'apparence de l'en-tête

L'en-tête du site Web est la section supérieure de votre site. Il contient un logo (ou le nom de votre boutique), une barre de recherche, des liens d'action, une icône de panier, un menu de navigation et les informations de contact. Vous pouvez modifier la conception de l'en-tête pour qu'il corresponde à l'identité de votre marque.

Pour modifier la conception de l'en-tête :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web et cliquez sur Modifier le site.
2. Dans le menu Section de la page d'accueil, cliquez sur En-tête et menu.
3. Cliquez sur l'onglet Conception pour personnaliser l'apparence :
   • Mise en page. Choisissez l'apparence de votre en-tête.
     
   • Logo du site. Modifiez la police, la taille et la couleur du nom de la boutique. Vous pouvez également ajouter plus d'espace entre les lettres et mettre le nom en majuscules.
   • Arrière-plan. Vous pouvez rendre l'en-tête transparent, ajouter des niveaux de gris ou choisir une couleur unie. Pour changer la couleur, sélectionnez la couleur unie dans la liste déroulante.
   • Menu et icônes. Changez la police et la couleur pour l'ensemble du contenu de l'en-tête. Ici, vous pouvez également spécifier les éléments à afficher dans l'en-tête (menu de navigation, icône du panier, barre de recherche et/ou lien du compte client).
   • Liens d'action. Personnalisez le style de bouton d'appel à l'action dans l'en-tête. Vous pouvez également désactiver ou activer le bouton avec le bouton Afficher l'élément.
4. Cliquez sur Publier.

Ajouter un menu de navigation

Le menu de navigation ou du site Web est une liste de liens affichés sur votre site :

Un menu de site Web permet aux clients de naviguer plus facilement dans votre boutique pour trouver ce qu'ils recherchent. Vous pouvez choisir d'afficher le menu en tant que barre de liens horizontale en haut de votre site ou en tant que menu hamburger. Les clients mobiles verront le menu hamburger, quel que soit la conception que vous choisissez.

Chaque lien dans le menu de la barre de navigation peut vous rediriger vers un section spécifique de votre site ou vers toute autre page sur Internet. Vous pouvez également créer un lien click-to-call ou mail-to pour permettre aux clients de vous contacter.

Pour configurer un menu de navigation :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web et cliquez sur Modifier le site.
2. Dans la Sections de la page d'accueil , cliquez sur En-tête et menu.
3. Dans l'onglet Contenu, cliquez sur Menu de navigation.
4. Vous pouvez cliquer sur le lien existant pour le modifier ou créer un nouveau lien en cliquant sur + Ajouter un élément du menu.
5. (facultatif) Pour réorganiser l'ordre des liens, faites-les glisser comme vous le souhaitez.
6. Cliquez sur l'élément de menu pour le personnaliser. Dans le champ Nom, saisissez un nom explicite pour les clients. Par exemple, À propos de nous, Appelez-nous, etc.
7. Choisissez l'action à effectuer lors du clic :
   • Faire défiler jusqu'à un section du site : le client sera redirigé vers l'un des sections de votre site.
   • Ouvrir une page : vous pouvez saisir n'importe quelle URL pour rediriger les clients sur cette page.
   • Composer un e-mail : après avoir cliqué sur le lien, le service de messagerie par défaut sur l'appareil du client s'ouvrira.
   • Appel téléphonique : après avoir cliqué sur le lien, le téléphone du client composera votre numéro.
   • Accéder à la boutique : le client sera redirigé vers votre vitrine.
8. Cliquez sur Retour, puis de nouveau sur Retour, puis sur Conception.
9. Dans la section Mise en page, sélectionnez comment vous voulez afficher votre menu de navigation.
10. Cliquez sur Publier.

Ajouter un menu de catégories

Les catégories de produits sont des groupes d'articles que vous regroupez pour les afficher sur la même page dans votre boutique. Par exemple, Tasses de café, Mode d'été, Meilleures ventes. Vous pouvez afficher le menu de vos catégories racines afin que les clients puissent rapidement trouver le produit qu'ils recherchent :

Pour créer un menu de catégories sur votre site instantané :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web et cliquez sur Modifier le site.
2. Dans le menu situé à gauche, cliquez sur En-tête en menu → Menu de navigation et cliquez sur + Ajouter un menu.
3. Nommez l’élément pour qu'il soit clair pour les clients qu'il s'agit du lien vers votre boutique.
4. Cliquez sur le menu déroulant Action lors du clic et sélectionnez Accéder à la boutique.
5. Assurez-vous que le bouton Afficher les catégories lors du survol du curseur est activé. Vous pouvez désactiver cette option pour masquer le menu des catégories.
6. Cliquez sur Enregistrer et publier.

Ajouter des liens d'action

Pour certaines sections de votre site instantané (par exemple, la couverture du site, les témoignages ou la section « Nous contacter »), il est possible d’ajouter des liens d’action. Les liens d'action sont des textes ou des boutons cliquables comprenant du texte. Quand un client clique sur ce texte (ou bouton), une certaine action est effectuée.

Par exemple, vous pouvez spécifier une adresse URL de produit qui s'ouvrira lors d'un clic ou rediriger les clients vers une section spécifique de votre site Web (p. ex., quand il y a une promotion).

Pour configurer un lien d'action :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur la section.
3. Dans l’onglet Contenu, cliquez sur Ajouter un lien d’action.
   
   La section de couverture comprend les boutons action principale et action secondaire à la place.
4. Saisissez le Titre. Il s'agira du texte de votre lien.
5. Choisissez Action lors du clic : Faire défiler jusqu'au section de site, Ouvrir la page, Composer un e-mail ou Appel téléphonique.
6. Choisissez le section du site/saisissez l'adresse URL/saisissez l'adresse e-mail ou le numéro de téléphone.
7. (facultatif) Modifiez l'apparence, la police, la taille, la forme et la couleur du lien d'action dans l'onglet Conception.

Exemple de conception d'un lien d'action pour un e-mail dans la section « Nous contacter » :

Configurer des sections de la boutique

Des sections peuvent montrer aux clients où accéder à la boutique sur votre site instantané : Boutique et Catégories racines. Par défaut, seul la section Boutique est présent dans la liste des sections du site :

La section Boutique inclut tous les produits qui sont attribués à la page d'accueil de la boutique. Ce section est un endroit parfait pour mettre en valeur les articles que vous voulez présenter le plus à vos clients. Une fois qu'un client clique sur un produit en vedette, il est redirigé vers la page de ce produit dans votre boutique.

Si vous avez un petit catalogue, vous pouvez simplement mettre tous les produits dans la section Boutique. Si vous avez un plus grand catalogue, cependant, vous aurez probablement besoin d'un système de catégories dans votre boutique. Pour afficher ces catégories directement sur la page d'accueil de votre site instantané, vous pouvez ajouter un section spécial Catégories racines. Ce section contiendra toutes les catégories racines dont vous disposez.

Pour ajouter la section Catégories racines :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur Ajouter la section.
3. Sur la page ouverte, faites défiler jusqu'à Produits.
4. Cliquez sur le section Parcourir par catégorie pour qu'il apparaisse dans la liste des sections de la page d'accueil :

Vous pouvez configurer à la fois la section Boutique et la section Catégories racines sur la page d'accueil de votre site instantané. Pour cela, accédez à la page Conception de l'interface d'administration d'Ecwid. Vous pouvez également modifier la disposition de ces sections (p. ex., le nom du produit et le prix, comment le bouton Acheter maintenant et l'image principale du produit sont affichés, etc.) dans l'éditeur du site.

Pour modifier la disposition des sections de la boutique dans l'éditeur de site :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur la section.
3. Effectuez les modifications nécessaires sur les onglets Contenu et Conception (définissez le titre du section, choisissez les éléments à afficher, modifiez les polices, le style et la couleur d'arrière-plan, etc.)

Ajout d'un curseur au site instantané

Le curseur, ou carrousel, montre une grande image à la fois comme un diaporama automatique ou manuel. Il contient également un petit extrait de texte et un bouton d'action. Il s'agit d'un excellent moyen de présenter en détail des produits particuliers, de lister les marques que vous vendez, de mettre en valeur un portefeuille d'œuvres artistiques ou d'expliquer pourquoi les clients ont besoin de choisir votre marque.

Disons que vous voulez mettre en valeur les marques que vous vendez.

Pour ajouter un curseur à la nouvelle version de votre site instantané Ecwid :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur + Ajouter une section.
3. Dans le menu de gauche, cliquez sur Curseurs promotionnels et sélectionnez le modèle. Vous pouvez modifier le contenu et le design de chaque diapositive. 
4. Pour modifier le contenu, cliquez sur le nom de la diapositive dans le menu de gauche pour remplacer le contenu par défaut par vos images et vos textes. Dans notre exemple, nous mettons en évidence les marques.
5. Pour modifier le bouton qui apparaît sur chaque diapositive, sous Lien d'action, cliquez sur le bouton pour modifier son titre et spécifier où il doit rediriger les visiteurs. Dans notre exemple, le bouton de chaque diapositive mènera à une catégorie de marque spécifique.
6. Pour modifier l'apparence du contenu des diapositives, cliquez sur Retour, puis passez à l'onglet Conception :
   

   

   Dans l'onglet Conception, vous pouvez choisir l'apparence de la diapositive sur les écrans d'ordinateur et de téléphone portable, activer ou désactiver le diaporama automatique, ajouter une superposition de couleurs pour les photos, modifier la police et le lettrage, et masquer le titre de la diapositive, la description et le bouton.

C'est tout ! La barre de promotion s'affichera maintenant en haut de la page d'accueil de votre site instantané :

Application des polices et CSS par défaut

Il y a deux façons principales de modifier les polices sur votre site instantané. Tout d'abord, vous pouvez définir les polices pour chaque élément de chaque section individuellement dans l'onglet Conception de ce section. Vous pouvez choisir le type de police, la taille et le style (gras ou italique) ainsi que la couleur du texte. Deuxièmement, vous pouvez définir la police par défaut pour tous les sections de votre site avec les paramètres de police globaux.

Par exemple, vous pouvez utiliser des paramètres globaux si vous essayez différentes options de mise en page et que vous n'avez pas besoin de polices différentes pour les différents éléments de vos sections de site. De cette façon, vous gagnerez du temps et assurerez une mise en page cohérente sur votre site Web en un clin d'œil.

Vous pouvez définir :

• Les polices de titre (il s'agit des polices des en-têtes de section)
• Les polices des corps de texte (il s'agit des polices des paragraphes de texte, des textes des boutons, et des sous-titres)

Les paramètres de police globaux que vous appliquez dans l'éditeur de site instantané ne sont utilisés que pour le site Web lui-même, y compris les sections de la boutique (un aperçu qui montre à vos clients où accéder à la boutique sur votre site). Ils ne sont pas utilisés dans votre boutique réelle où les clients naviguent pour trouver des produits, car la vitrine est considérée comme une partie indépendante de votre site Web.

Si vous avez besoin d'ajuster l'apparence (y compris les polices) de votre boutique ou si vous souhaitez personnaliser l'apparence de votre site instantané (en plus des paramètres disponibles dans l'éditeur), vous pouvez le faire en ajoutant des codes CSS personnalisés. Avec l'aide des feuilles de style en cascade (CSS), vous pouvez modifier les styles qui sont utilisés sur vos pages : ajuster la couleur des boutons ou les cacher, choisir les polices, masquer les prix, et bien plus.

Pour appliquer des polices et/ou des styles :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Cliquez sur Paramètres → Polices et styles.
3. Pour définir des polices par défaut pour votre site instantané, choisissez les polices dans les listes déroulantes Police de titre et Police de corps de texte.
4. Pour appliquer les styles, cliquez sur Paramètres avancés et saisissez votre code CSS :
   

   

Adapter la vue mobile du site instantané

Vous pouvez choisir comment l'image de couverture de votre site instantané s'adaptera aux écrans mobiles.

Il y a deux options disponibles :

• La couverture de votre site prend tout l'écran mobile. Dans ce cas, l'image est recadrée et le texte du site s'affiche au-dessus de celle-ci.
• La couverture de votre site correspond à la largeur de l'écran. Dans ce cas, l'image de la couverture reste entièrement visible et est affichée en haut de l'écran avec le texte du site placé en dessous.

Pour configurer l'affichage des images de couverture sur mobile :

1. Depuis l'interface d'administration d'Ecwid, accédez à Site Web → Modifier le site.
2. Dans Sections de la page d'accueil, cliquez sur Couverture et titre et accédez à l'onglet Conception.
3. (facultatif) Choisissez une mise en page de couverture.
   
   L'ajustement de l'affichage des images de couverture sur mobile n'est disponible que pour les mises en page en plein écran uniquement.
4. Cliquez sur Mise en page mobile pour sélectionner l'option de mise en page :
   

   

5. (facultatif) Changez le style et la couleur de l'arrière-plan si nécessaire.
6. Cliquez sur Publier.

C'est tout ! Vous pouvez maintenant vérifier l'apparence de votre site sur différents appareils mobiles.

Modifier l'adresse du site Web et le nom de la boutique

Vous pouvez modifier le nom et l'adresse du site Web de votre boutique afin qu'ils reflètent le concept et le nom de votre marque.

Pour modifier le nom de votre site Web :

1. Depuis l'interface d'administration d'Ecwid, accédez à Paramètres → Général → Profil de la boutique.
2. Saisissez le nom de la boutique dans le champ Nom de la boutique dans la section Nom de la boutique et adresse Web.
3. Cliquez sur Enregistrer.

Pour modifier l'adresse de votre site Web :

1. Depuis l'interface d'administration d'Ecwid, accédez à Aperçu → Gérer le site instantané (ou Site Web → Domaine).
2. Cliquez sur le bouton Modifier l'adresse.
3. Saisissez le nom que vous avez choisi pour votre adresse Web dans le champ « Utiliser notre sous-domaine ».
4. Cliquez sur Enregistrer.

Si vous avez souscrit un abonnement payant d'Ecwid, vous pouvez également connecter votre propre domaine.

Afficher la bannière de consentement à l'utilisation des cookies

Dans des pays comme l'UE, vous devrez peut-être afficher la bannière de consentement à l'utilisation des cookies sur le site Web de votre boutique. Pour l'afficher, accédez à Paramètres → Suivi et analyses dans l'éditeur du site instantané (Site Web → Modifier le site) et activez le bouton de la bannière de consentement à l'utilisation des cookies :

En savoir plus sur les notifications de cookies →