Description
Apportez un design system cohérent à l’ensemble de votre site WordPress, que vous construisiez avec Elementor, l’éditeur de blocs (Full Site Editing) ou du CSS classique.
YAOTW Stylo transforme un design system (couleurs, typographie, boutons, espacements, effets) en véritables réglages WordPress. Vous créez votre système visuellement dans l’application gratuite WPStylo (app.wpstylo.dev), vous exportez un seul fichier JSON, puis vous l’importez ici et l’appliquez à votre site en un clic.
Fini les codes hexadécimaux recopiés à la main et les titres qui ne correspondent pas entre votre constructeur de pages et vos modèles de blocs. Définissez vos tokens une seule fois, appliquez-les partout, et gardez chaque page fidèle à votre marque.
Créez votre design system sur app.wpstylo.dev. En savoir plus sur wpstylo.dev.
Pourquoi les designers et les développeurs l’utilisent
- Une seule source de vérité. Vos couleurs, vos polices et vos styles de boutons proviennent d’un unique fichier JSON, votre site reste donc cohérent de bout en bout.
- Compatible avec vos outils. Appliquez le même design system à Elementor, aux thèmes de blocs (FSE / theme.json), ou à n’importe quel thème via les propriétés personnalisées CSS.
- Aucun code requis. Créez visuellement, importez, appliquez. L’extension écrit les réglages pour vous.
- Non destructif par défaut. Votre contenu existant est préservé, des sauvegardes sont créées avant les opérations à risque, et tout peut être restauré ou retiré.
- Léger. Les styles sont livrés efficacement et l’administration reste rapide ; rien de lourd n’est chargé sur votre site public tant qu’une fonctionnalité n’en a pas besoin.
- Gratuit. L’extension et l’application WPStylo sont gratuites.
Appliquez votre design system à trois cibles
1. CSS Custom Properties (fonctionne sur tous les thèmes)
Injecte les propriétés personnalisées CSS --wps-* et des classes utilitaires prêtes à l’emploi (titres, texte courant et boutons) dans votre site. Utilisez-les partout dans votre propre CSS ou vos modèles. Idéal si vous n’êtes ni sur Elementor ni sur un thème de blocs.
2. Elementor
Applique vos tokens au Kit global d’Elementor (Réglages du site) : couleurs, typographie et styles de boutons, ombre portée des boutons comprise. Vous utilisez le design Atomic d’Elementor (v4+) ? Un clic supplémentaire injecte les variables et les classes CSS utilitaires correspondantes, sans écraser vos variables globales existantes.
3. Full Site Editing (theme.json)
Applique vos tokens au theme.json d’un thème de blocs, avec deux modes :
- Écrire (non destructif) : fusionne votre palette et vos polices avec celles déjà présentes dans le thème.
- Écraser : remplace la palette, les familles de polices et les tailles de police par les vôtres uniquement, pour repartir de zéro (les autres réglages theme.json, comme les espacements et la mise en page, ne sont pas modifiés).
Dans les deux cas, une sauvegarde est créée au préalable et peut être restaurée en un clic. Sur les thèmes de blocs, vous obtenez également cinq styles de blocs Bouton prêts à l’emploi (Stylo Primary, Secondary, Outline, Ghost, Link), sélectionnables directement depuis l’éditeur.
Effets d’apparition au défilement
Donnez à vos pages une finition soignée grâce aux animations de défilement intégrées (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) qui font apparaître les sections au fil de la lecture. Elles fonctionnent sur les cibles Elementor et FSE, respectent la préférence d’accessibilité « réduire les animations », et ne masquent jamais votre contenu si le JavaScript est désactivé. Activez-les ou désactivez-les à tout moment, sans nouvelle importation.
Ce qui est importé
Couleurs (rôles sémantiques), typographie fluide (dimensionnement responsive avec clamp()), variantes de boutons avec états survol et focus, ombre portée des boutons, rayon de bordure, transitions et effets d’apparition au défilement.
Pensé pour des workflows réels
- Réimportez un design system mis à jour à tout moment ; une nouvelle application préserve votre contenu personnalisé.
- Exportez la configuration actuellement importée sous forme de sauvegarde JSON, réimportable plus tard.
- Une administration claire, organisée en onglets : Importer & appliquer, Référence (classes prêtes à copier), Résumé, Outils, et un Guide intégré.
Créez votre design system sur app.wpstylo.dev. Documentation complète et tutoriels sur wpstylo.dev.
Captures d’écrans
Installation
- Installez l’extension depuis votre tableau de bord WordPress (Extensions > Ajouter > recherchez « YAOTW Stylo »), ou téléversez le zip de l’extension via Extensions > Ajouter > Téléverser une extension.
- Activez l’extension via le menu Extensions.
- Ouvrez YAOTW Stylo dans votre menu d’administration.
- Créez votre design system sur app.wpstylo.dev et exportez une configuration JSON (ou collez-en une que vous avez déjà).
- Dans l’onglet Importer & appliquer, téléversez ou collez votre JSON, cliquez sur Importer une configuration, puis appliquez-la à la cible que vous utilisez (CSS Custom Properties, Elementor ou Full Site Editing).
Conseil : testez toujours l’extension sur un site de préproduction ou de développement au préalable, et sauvegardez vos fichiers et votre base de données avant toute application en production.
FAQ
-
Ai-je besoin de l’application WPStylo ?
-
Oui. Vous créez votre design system visuellement dans l’application gratuite WPStylo sur app.wpstylo.dev et vous exportez un fichier JSON. Cette extension importe ce fichier et l’applique à votre site WordPress.
-
Est-ce gratuit ?
-
Oui, l’extension et l’application WPStylo sont gratuites.
-
Est-ce compatible avec Elementor ?
-
Oui. L’extension applique vos couleurs, votre typographie et vos styles de boutons au Kit global d’Elementor. Si vous utilisez le design Atomic d’Elementor (v4+), vous pouvez en plus injecter les variables CSS et les classes utilitaires correspondantes.
-
Est-ce compatible avec les thèmes de blocs et le Full Site Editing ?
-
Oui. Sur un thème de blocs, l’extension écrit vos tokens dans
theme.json(avec un mode « Écrire » non destructif et un mode « Écraser » qui repart de zéro) et ajoute cinq styles de blocs Bouton sélectionnables dans l’éditeur. -
Je n’utilise ni Elementor ni un thème de blocs. Puis-je quand même l’utiliser ?
-
Oui. La cible CSS Custom Properties fonctionne sur n’importe quel thème : elle injecte les variables
--wps-*et des classes utilitaires que vous pouvez utiliser dans votre propre CSS ou vos modèles. -
Est-ce que cela va écraser mes réglages existants ?
-
Cela dépend de la cible et de l’action. L’application à Elementor met à jour les couleurs système, la typographie et le bouton du Kit global ; vos couleurs et vos polices personnalisées sont préservées. Sur le FSE, « Écrire » fusionne avec la palette et les polices de votre thème, tandis que « Écraser » les remplace par les vôtres (une sauvegarde est toujours créée au préalable). Vous gardez la maîtrise de l’action que vous lancez.
-
Puis-je annuler les modifications ?
-
Oui. Vous pouvez restaurer votre
theme.jsondepuis la sauvegarde automatique, désactiver le CSS injecté, ou supprimer entièrement la configuration importée depuis l’onglet Outils. Notez que les valeurs écrites nativement (le Kit Elementor et un theme.json écrit) restent en place jusqu’à ce que vous les restauriez ou les modifiiez, tandis que les variables CSS, les classes injectées, les styles de blocs et les effets au défilement sont retirés à la désactivation de l’extension. -
Est-ce que cela va ralentir mon site ?
-
Non. Les styles sont livrés de manière efficace (en ligne quand c’est pertinent, mis en cache quand c’est possible), et les scripts publics ne sont chargés que lorsqu’une fonctionnalité comme les effets au défilement en a besoin. L’interface d’administration est légère et cloisonnée, elle n’affecte pas le reste de wp-admin.
-
Que sont les effets d’apparition au défilement ?
-
Des animations optionnelles (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) qui font apparaître les sections de la page au fil du défilement. Elles s’appliquent aux cibles Elementor et FSE, respectent le réglage d’accessibilité de réduction des animations, et ne masquent jamais le contenu si JavaScript n’est pas disponible.
-
Où trouver de l’aide ?
-
La documentation, les tutoriels et les actualités sont disponibles sur wpstylo.dev. Vous pouvez aussi utiliser le forum de support sur WordPress.org.
Avis
Il n’y a aucun avis pour cette extension.
Contributeurs/contributrices & développeurs/développeuses
« YAOTW Stylo – Design System Importer » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.
Contributeurs
“YAOTW Stylo – Design System Importer” a été traduit dans 1 locale. Remerciez l’équipe de traduction pour ses contributions.
Traduisez « YAOTW Stylo – Design System Importer » dans votre langue.
Le développement vous intéresse ?
Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.
Journal des modifications
2.0.0
- Nouveau : effets d’apparition au défilement (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) pour les cibles Elementor et FSE, avec un interrupteur d’activation à la volée et la prise en charge de la réduction des animations.
- Nouveau : mode « Écraser le theme.json » pour le Full Site Editing, qui remplace la palette, les familles de polices et les tailles de police par les vôtres uniquement (en complément du mode « Écrire » non destructif existant). Une sauvegarde est toujours créée au préalable.
- Nouveau : administration de l’extension entièrement redesignée (en-tête de marque, cartes de cibles plus claires et mieux expliquées, Guide et Outils restylés).
- Amélioration : le Full Site Editing associe désormais automatiquement les couleurs Texte et Arrière-plan aux rôles de votre design system.
- Amélioration : le Résumé affiche désormais les tokens de transitions et d’effet d’apparition au défilement, avec un décompte exact des tokens d’éléments.
- Amélioration : descriptions et avertissements plus clairs dans les onglets Importer & appliquer, Référence et Guide.
1.9.0
- Nouveau : styles de blocs Bouton pour le Full Site Editing (Stylo Primary, Secondary, Outline, Ghost, Link), sélectionnables depuis l’éditeur.
Pour l’historique complet des versions, consultez le fichier changelog.txt dans les fichiers de l’extension.