Guide pratique de GenerateBlocks Styles globaux : explication détaillée de trois utilisations efficaces

existent WordPress La conception des pages, la réutilisation des modules, l'unité de style et l'efficacité de l'édition sont depuis longtemps la clé de la construction d'un site web moderne.Générer des blocs (utilisé comme expression nominale) Styles globaux Cette fonctionnalité a révolutionné la manière dont les pages sont conçues.

Ce billet présente des exemples pratiques de trois façons d'appliquer les styles globaux que vous pouvez commencer à utiliser immédiatement, notamment CSS Disposition de la grilleetCréation de classes de style utilitaire (par exemple, espacement et ombres) aussi Styles d'en-tête personnalisés.

1) Création d'une grille CSS avec des styles globaux

effet de levier Générer des blocs Les styles globaux facilitent la création de mises en page basées sur des grilles CSS sans avoir à définir manuellement la largeur ou l'alignement des conteneurs à chaque fois.

La procédure est la suivante :

• existent WordPress L'éditeur insère un Conteneur GenerateBlocks.
• Cliquez sur "Ajouter un style" dans le panneau de droite, nommez-le grille-1-2(Indique 1 copie à gauche et 2 copies à droite).

• Fixer le style à affichage : grilleet remplir la structure des colonnes comme suit 1fr 2fr.

• L'ajout de deux conteneurs enfants au conteneur principal génère automatiquement une mise en page avec des proportions différentes pour la gauche et la droite.

Cette approche se compare favorablement à l'approche traditionnelle de la Flex La grille CSS s'adapte automatiquement à l'espace et permet de contrôler plus facilement les proportions de la structure et de réorganiser le contenu par simple glisser-déposer.

2. créer des classes de hauteur et d'ombre (classes utilitaires)

Afin d'utiliser rapidement les mêmes styles visuels dans plusieurs zones, il est recommandé d'utiliser les styles globaux pour définir des styles communs tels que l'espacement, les ombres, etc. et de les gérer sous un seul nom.

Exemple 1 : Classe de pitch

• Ajouter un style appelé écart-2

• mettre en place écart entre les rangs avec écart entre les colonnes en raison de 2rem
• Appliqué à n'importe quel conteneur, l'espacement peut être généré de manière uniforme.

Lorsque vous devez ajuster l'espacement, il suffit de modifier la définition de cette catégorie, la station entière est mise à jour de manière synchrone, il n'est pas nécessaire de modifier chaque module.

Exemple 2 : Classe fantôme

• Ajouter un style appelé ombre
• Définir l'attribut box-shadow (par ex. 0 4px 10px 0)

• Peut être largement utilisé dans les cartes, les boîtes de contenu, pour renforcer le sens de la hiérarchie de l'interface.

3. définir des styles d'en-tête personnalisés (par exemple, styles alternatifs H1)

Il est fréquent de rencontrer un scénario dans lequel la conception est "structurée comme H1, mais vous ne voulez pas être stylé comme le H1 par défaut". Dans ce cas, vous pouvez utiliser les styles globaux pour créer d'autres styles d'en-tête.

Exemple d'opération :

• Créer un style appelé h1-alt

• Définir les propriétés suivantes :
  • La couleur de la police est bleue
  • toutes les capitales
  • En gras (par exemple, 700)
  • L'espacement des mots est de 0.125rem
  • La taille de la police est fixée à 2rem ou une valeur plus appropriée

Ce style peut être appliqué aux éléments H1 de plusieurs pages, de sorte qu'il suffit de modifier le paramètre de style une seule fois pour unifier les performances de toutes les pages, ce qui est pratique pour la maintenance et les modifications futures.

Pourquoi Global Styles ?

utiliser Générer des blocs Le système de style global permet non seulement d'économiser beaucoup de temps sur les opérations répétitives, mais aussi de faciliter la gestion du style du site web. Ses avantages sont les suivants

• Une modification, toute la page est mise à jour
• Maintenir la cohérence stylistique
• Réduire l'encombrement du style local
• Amélioration de la réutilisation des modules multiples
• Mieux adapté au travail en équipe et aux projets à long terme

remarques finales

Générer des blocs Les styles globaux sont une caractéristique importante de la construction de pages, qu'il s'agisse de créer des mises en page complexes ou d'unifier des styles visuels, l'utilisation de styles globaux peut rendre votre travail plus efficace. WordPress La conception du site web est plus efficace et plus professionnelle.

Il est recommandé d'encapsuler les mises en page, les ombres, l'espacement et les styles typographiques courants dans des classes d'utilité dans le projet actuel, ce qui rend non seulement la conception plus systématique, mais aussi plus facile à gérer en cas de mises à jour futures du contenu.

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.