YAOTW Stylo – Design System Importer

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.