Référence du design et des styles

Ce document est une référence pour l'écran Design & Styles de l'extension ADP Car Market Hub (Car Market Hub → Design & Styles). Il explique chaque carte, la signification de chaque jeton de couleur et de typographie, ainsi que la manière dont l'extension interagit avec votre thème actif.

Quand utiliser ce document

Utilisez cette référence lorsque vous souhaitez aligner l'apparence des pages de véhicules avec votre marque, modifier la typographie pour des contextes frontend spécifiques, configurer le partage social ou le bouton de fiche technique PDF, contrôler le chargement différé des images ou ajouter du CSS personnalisé.

Aperçu

L'écran est organisé selon les cartes suivantes :

1. Color scheme & branding (Palette de couleurs et image de marque) — palette principale et couleurs des boutons.
2. Other design settings (Autres réglages de design) — jetons de couleur supplémentaires, arrondi des angles (border radius) et préréglage de la taille des boutons.
3. Typography System (Système de typographie) — typographie par contexte de page (Détail du véhicule, Archive et grille, Favoris, Comparer).
4. Social sharing buttons (Boutons de partage social) — réseaux affichés sur les pages de véhicule individuel et leur emplacement.
5. PDF Datasheet (Fiche technique PDF) — option pour afficher un résumé de véhicule optimisé pour l'impression.
6. Performance — chargement différé (lazy loading) natif pour les images.
7. Layout Manager (Gestionnaire de mise en page) — pointeur vers l'onglet dédié Layout Manager et option globale pour utiliser l'ordre des blocs personnalisé.
8. Custom CSS (CSS personnalisé) — CSS brut ajouté après tous les styles de l'extension.

L'écran suit le principe du « Thème d'abord » (Theme First) : tout champ qui le prend en charge peut être laissé vide pour hériter du thème actif.

Configuration requise ou prérequis

• Autorisation de gérer l'extension.
• Pour que l'option du Layout Manager prenne effet, vous devez avoir configuré l'écran Layout Manager.
• Pour la fiche technique PDF, le bouton visuel est affiché sur les pages de véhicule individuel ; la mise en page du PDF elle-même est configurée dans le PDF Manager.

Instructions étape par étape

1. Ouvrez Car Market Hub → Design & Styles.
2. Dans Color scheme & branding, définissez les couleurs de votre marque. Utilisez le sélecteur de couleur ou collez des valeurs hexadécimales.
3. Ouvrez Other design settings pour affiner les jetons facultatifs tels que les couleurs des prix/liens, l'arrondi des angles et la taille des boutons.
4. Ouvrez Typography System et configurez chaque onglet (Détail du véhicule, Archive et grille, Favoris, Comparer). Laissez les champs vides pour hériter du thème.
5. Dans Social sharing buttons, activez le partage, choisissez les réseaux visibles et sélectionnez l'emplacement.
6. Activez Enable PDF datasheet si vous souhaitez un bouton d'impression/enregistrement en PDF sur les pages de véhicule individuel.
7. Dans Performance, activez Lazy loading pour utiliser l'attribut natif loading="lazy" du navigateur pour les images de véhicules.
8. Dans Layout Manager, décidez s'il faut appliquer l'ordre des blocs personnalisé enregistré dans l'onglet Layout Manager.
9. Ajoutez d'éventuelles surcharges finales dans Custom CSS si nécessaire.
10. Enregistrez. Chaque carte possède son propre bouton Save Design & Styles settings ; l'enregistrement de l'une d'elles conserve l'ensemble du formulaire.

Référence de configuration

Color scheme & branding

Other design settings

Typography System

La carte de typographie comporte quatre onglets correspondant aux contextes du frontend :

Dans chaque onglet, la matrice définit la typographie par rôle de texte. Les lignes correspondent aux rôles de texte et les colonnes aux jetons de typographie que vous pouvez définir pour chaque rôle :

Tout champ laissé vide hérite du thème actif. La matrice complète (y compris la ligne Labels) apparaît sur les onglets Vehicle Detail, Archive & Grid et Compare. L'onglet Favorites utilise les mêmes colonnes mais n'inclut pas la ligne Labels.

Social sharing buttons

À quoi ressemble chaque emplacement et comment il se comporte sur mobile :

• Below gallery (Sous la galerie) — une rangée horizontale de boutons de partage directement sous la galerie photo. Visible sur toutes les tailles d'écran.
• Sticky right sidebar (Barre latérale droite collante) — une barre compacte fixée sur le bord droit de l'écran qui reste en place lorsque le visiteur fait défiler la page. Dans cet emplacement, la barre contient également les boutons d'accès rapide Favoris, Comparer et Fiche technique PDF (chacun n'étant affiché que lorsque cette fonctionnalité est activée). Pour éviter de masquer le contenu sur les petits écrans, cette barre est masquée sur les téléphones (fenêtre d'affichage ≤ 600 px). Sur les écrans de taille téléphone, choisissez donc Below gallery ou End of page si vous souhaitez que le partage reste visible.
• End of page (Fin de page) — une rangée horizontale tout en bas de la page du véhicule, sous la section de contact. Visible sur toutes les tailles d'écran (ainsi, sur un téléphone, elle apparaît sous la zone de contact).

Si vous voyez la barre de partage en bas de la page sur un téléphone « sous le bouton de contact », l'emplacement est défini sur End of page (ou le visiteur utilise une tablette entre 601 px et 960 px, où la Sticky right sidebar est toujours affichée). Il s'agit du comportement attendu, contrôlé par l'option Placement ci-dessus.

PDF Datasheet

Performance

Layout Manager card

Custom CSS

Notes opérationnelles

• Le principe du « Thème d'abord » signifie que laisser un champ vide redonne le contrôle au thème actif. C'est le choix par défaut le plus sûr lors de l'intégration avec un nouveau thème.
• La couleur de survol de l'arrière-plan se rabat sur une nuance dérivée si elle est laissée vide, de sorte que les boutons principaux ont toujours un état de survol visible.
• Certaines zones auparavant disponibles sur cet écran ont été déplacées : les badges et les étiquettes se trouvent désormais dans le Layout Manager sous Car Archive Cards, le calculateur de financement se trouve désormais dans Settings → Frontend Features.
• L'interrupteur PDF Datasheet ici contrôle uniquement si le bouton est visible. Si le bouton est affiché mais que le PDF ne s'affiche pas correctement, configurez la mise en page dans le PDF Manager.
• L'enregistrement de n'importe quelle carte soumet l'ensemble du formulaire. Pour réinitialiser une section, restaurez la valeur par défaut vide et enregistrez à nouveau.

Dépannage

• Les changements de couleur n'apparaissent pas. Videz les caches du frontend ou du CDN. Confirmez que le sélecteur de couleur a bien enregistré une valeur (le champ doit afficher un code hexadécimal).
• Les champs de typographie semblent n'avoir aucun effet. Les champs vides héritent volontairement du thème. Définissez une valeur explicite si vous devez surcharger les styles du thème.
• Le chargement différé (lazy loading) ne fonctionne pas. Certains thèmes ou extensions tierces remplacent le balisage des images. Confirmez que la balise <img> générée inclut loading="lazy". Vérifiez dans la version actuelle de l'extension avant de publier.
• Le bouton de fiche technique PDF est manquant. Confirmez que l'option est activée et que le modèle de véhicule individuel inclut toujours la zone de bouton de l'extension. Le bouton est généré uniquement sur les pages de véhicule individuel.
• L'option « use custom block order » est activée mais la mise en page semble inchangée. Ouvrez l'onglet Layout Manager et confirmez qu'une mise en page personnalisée est enregistrée pour la zone concernée.
• Le CSS personnalisé a cassé une page. Supprimez ou raccourcissez le code et enregistrez à nouveau. Le CSS personnalisé surcharge tout le reste.

Documents connexes

• Référence du gestionnaire de mise en page
• Référence des réglages
• Référence du PDF Manager
• Référence des shortcodes et des widgets