CSS

Conseils et astuces : apprenez à personnaliser votre site Internet grâce au CSS en consultant ces billets.

  • Comment personnaliser l'apparence de votre boutique en ligne

    Un nouvel outil de personnalisation des boutiques vient d'être mis en ligne sur votre manager. Cet éditeur permet d'exploiter très facilement toute la puissance des feuilles de styles CSS, sans la moindre ligne de CSS, pour régler la couleur, la taille, le fond, les bordures, les marges de chaque élément affiché sur votre boutique en ligne.

    Aperçu des modifications apportées en temps réel

    Aperçu des modifications apportées en temps réel

    L'outil (ou éditeur) en question permet d'intervenir sur une série de modèles, correspondant chacun à une partie de votre boutique. Vous réglez donc indépendamment les look des listes de catégories, listes de produits, éléments de menus verticaux, fiches produits, etc.

    Vous pouvez enregistrer plusieurs modèles, correspondant par exemple à des événements récurrents (anniversaire du site, fêtes de noël, Saint Valentin), et activer celui de votre choix pour qu'il soit immédiatement utilisé sur les pages publiques de votre boutique.

    L'éditeur CSS intégré autorise le copier-coller, ce qui vous offre la possibilité de partager vos styles, d'en créer pour les autres, ou pourquoi pas d'en faire un vrai business! (Je songe d'ailleurs à me créer une boutique en ligne sur e-monsite pour vendre des styles e-commerce! ;-))

    Vous aurez peut être remarqué que l'onglet Réglages > images a disparu. Et bien c'est à présent directement dans votre éditeur de design que vous pouvez paramétrer vos images (taille, format, rotation, effets, ...).

    Modification du format de l'image depuis l'éditeur

    Modification du format de l'image depuis l'éditeur

    Sur quelles parties de ma boutique puis-je intervenir ?

    Presque toutes, vous pouvez modifier indépendamment l'apparence des blocs de contenu suivants:

    • listes de catégories
    • listes de produits
    • fiche produit
    • produits dans les menus verticaux
    • modules de la page d'accueil
    • fil d'ariane

    Quelles modifications puis-je apporter à ces blocs de contenu ?

    Exemple de modèle d'affichage pour les poroduits dans les menus verticaux

    Exemple de modèle d'affichage pour les poroduits dans les menus verticaux

    Presque toutes! la liste est un peu longue, puisque l'éditeur de design propose d'intervenir sur plus de 40 paramètres, parmi lesquels:

    • police, couleur, taille et alignement du texte
    • couleurs des liens (y compris au survol)
    • dimensions des blocs, marges intérieurs et extérieures
    • couleur ou image de fond
    • couleur, taille et style des bordures
    • effets sur les images: redimensionnement, rotation, noir et blanc, négatif, etc...

    Dans un futur proche, il vous sera possible de personnaliser l'apparence des formulaires de votre boutique en ligne, et vous pourrez bientôt profiter de modèles prédéfinis à utiliser directement sur vos sites.