en cours de construction WordPress Les boutons sont l'un des éléments d'interaction les plus courants dans les sites web. Pour améliorer la cohérence de la conception et l'efficacité de la maintenance, l'utilisation de Générer des blocs pro Styles globaux（La fonction (Styles globaux) vous aide à créer un ensemble de styles de boutons réutilisables et gérables de manière centralisée.

Cet article vous guidera pas à pas dans le processus de création, d'optimisation et de réutilisation des styles de boutons.

Pourquoi utiliser les styles globaux ?

Alors que le style traditionnel des boutons doit être ajusté manuellement sur chaque page ou module, GenerateBlocks Pro fournit un système de style global qui vous permet de le définir une fois et de le réutiliser à plusieurs endroits. Que vous ayez besoin de créer des boutons principaux, des boutons secondaires ou des boutons de lien, tous peuvent être gérés de manière centralisée et rapidement mis à jour.

Deuxièmement, créez le premier style de bouton (Primaire)

étape 1 : Ajouter l'élément bouton

• Modifier une page ou un article
• Ajouter des blocs de boutons pour GenerateBlocks (cliquer sur l'élément de bouton avec l'ic?ne bleue)
• Réglage du bouton affichage attribut inline-flexPour éviter les erreurs d'affichage dans l'éditeur

étape 2 : Créer un style global

• Cliquez sur "Créer un style", il est recommandé d'utiliser des noms de classe préfixés, tels que btn-primaireEn outre, il réduit la probabilité de conflits avec d'autres plug-ins.

• Sélectionnez "Démarrer à partir de zéro"

étape 3 : Définition des propriétés du style

• Couleur d'arrière-plan : choisissez une couleur de marque foncée dans le thème

• Bordure : 1px de largeur, la couleur correspond à celle de l'arrière-plan

• Coins arrondis : 100px, donnant l'apparence de boutons de pilules arrondis

• Marges intérieures : en haut et en bas 1rem, à gauche et à droite 2rem
• Style du texte :
  • Couleur : blanc
  • Taille : 1.125rem
  • Poids du mot : 500
  • Uppercase (Transformation du texte : Uppercase)

étape 4 : Mise en place de l'effet de survol

• Cliquez sur l'onglet "Hover" pour entrer dans les paramètres de l'état de survol.
• Couleur d'arrière-plan : changer pour une nuance plus claire de la même couleur

• Couleur de la bordure : mise à jour synchrone en couleur claire pour éviter les conflits visuels

• Ajout d'une ombre : générée à l'aide du générateur d'ombre de bo?te CSS Ombre du code et collage

• Ajouter une animation de transition : définir un effet de transition de 0,2 seconde pour le bouton afin de rendre le survol plus naturel.

Création de bo?tes à outils Box Shadow réutilisables

Pour faciliter les appels, les ombres peuvent être définies comme une classe de style indépendante.

• Nouveau style global nommé ombre-primaire

• Ajouter un effet → Box Shadow → Coller le code du générateur

• Il suffit d'ajouter le nom de la classe au bouton pour utiliser le même effet d'ombre

Quatre, exemple de variante de style de bouton

1. style de bouton secondaire (secondaire)

• Arrière-plan transparent

• La couleur du texte est la couleur principale de la marque

• Remplir la couleur d'arrière-plan au survol, le texte devient blanc

• héritable btn-primaire L'uniformité visuelle des bordures, des coins arrondis, des marges intérieures, etc.

2. style de bouton de lien (Link)

• Bordure transparente

• Seule la couleur de la bordure est affichée au survol, sans modification de l'arrière-plan.

• Couleur d'arrière-plan : transparente et couleur de la bordure foncée.

• Au survol, l'effet de bordure s'affiche

• Effet en l'absence de survol

V. Priorité au style et description de l'ordre

existent Générer des blocs → Styles globaux :

• Possibilité de visualiser des propriétés et des états spécifiques (par défaut, survol) pour chaque classe de style

• Comme pour le CSS, une classe ajoutée ultérieurement remplacera le style de la classe qui la précède.

• L'ordre des classes peut être modifié en faisant glisser le curseur pour contr?ler la priorité des styles qui prennent effet.

VI. avantages de la maintenance et de la gestion unifiées

Une fois les classes de boutons créées, ces classes de style peuvent être utilisées directement n'importe où sur le site. Il suffit de les modifier une fois pour que les boutons soient synchronisés sur l'ensemble du site, ce qui contribue à améliorer l'efficacité et la cohérence.

Exemple :

• modifications btn-primaire ou des coins arrondis, et tous les boutons qui y font référence synchroniseront automatiquement l'ajustement du
• Après la mise à jour de l'effet de survol, il n'est pas nécessaire de répéter le réglage.

remarques finales

Générer des blocs Le système de style global de Pro est un outil utile pour créer des boutons modulaires. La division et la réutilisation de propriétés telles que le bouton principal, l'ombre, la bordure, la couleur, etc. permettent de gagner du temps et de réduire les actions répétitives.

Si vous utilisez GenerateBlocks pour construire le fichier WordPress il est recommandé que le style global des boutons fasse partie du processus de développement standard afin de vous aider à créer rapidement des composants de site Web au style uniforme.

Bienvenue sur Photon Fluctuations pour plus de tutoriels sur la construction de sites WordPress efficaces et de contenu sur la pratique de la conception.

Mises à jour récentes

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.