L'éditeur de blocs de WordPress et la mise en œuvre d'une mise en page réactive Astuces

Aujourd'hui, lors de la création d'un site web avec WordPress, de nombreuses personnes choisissent d'utiliser la zoneéditeur de blocs(alias l'éditeur Gutenberg) pour éditer les pages. Il est livré avec des modules qui sont non seulement faciles à utiliser, mais qui se renforcent en termes de mise en page, et la prise en charge du responsive design en particulier est assez bonne.

Cet article examine ce que vous pouvez faire avec les fonctions de WordPress.Éditeur de blocsComment créer des mises en page qui s'affichent et fonctionnent bien sur les ordinateurs, les tablettes et les téléphones portables.

Construire une infrastructure avec les blocs "groupe" et "colonne

existentÉditeur de blocsdans lequel les mises en page réactives courantes sont généralement créées à l'aide de l'option Bloc "Groupe" (Groupe) répondre en chantant "Bloc "Colonnes pour y parvenir.

"formulaire"Les blocs peuvent envelopper plusieurs éléments ensemble, ce qui facilite l'uniformisation des arrière-plans, de l'espacement, etc. Et "colonnes"Les blocs peuvent être créés avec des structures gauche-droite, trois colonnes ou plusieurs colonnes divisées, parfaites pour afficher des contenus graphiques côte à côte.

Par exemple, pour créer un module avec une structure gauche-droite :

• Ajoutez un bloc "Colonnes" et sélectionnez "Disposition en deux colonnes".

• Mettre une image à gauche, un titre + un paragraphe + un bouton à droite

Sur mobile, ces deux colonnes deviendront automatiquement la structure supérieure et inférieure sans traitement supplémentaire, ce qui est très pratique.

Utilisez "largeur", "espacement" et "alignement".

L'éditeur de blocs comporte des paramètres de style associés à chaque bloc. Apprendre à ajuster ces paramètres peut rendre la mise en page plus flexible.

• Réglage de la largeurVous pouvez choisir entre les modes "Largeur du contenu", "Large", "Pleine largeur" et autres. Si vous souhaitez que la couleur d'arrière-plan s'étende sur l'ensemble de l'écran, vous pouvez utiliser "Pleine largeur".
• espacementL'utilisation de l'"espacement des blocs" et des "marges intérieures" permet de laisser suffisamment d'espace blanc entre les éléments pour que la page soit plus agréable à lire.
• ArrangementLe contenu des blocs de groupe peut être disposé verticalement ou horizontalement, et le contenu peut également être centré, à gauche ou à droite, pour s'adapter à différents besoins d'affichage.

Ces paramètres n'affectent pas seulement les images, mais permettent également une meilleure adaptation du contenu aux différents écrans.

Améliorer l'optimisation mobile grâce à l'"empilage" et au "masquage"

Il arrive que nous souhaitions afficher davantage de contenu sur l'ordinateur, mais que celui-ci ne convienne pas au téléphone portable. Certains thèmes d'éditeurs de blocs prennent en charge la fonction "masquer un bloc sur le téléphone portable ou l'ordinateur de bureau", ce qui permet une certaine souplesse.

Par exemple :

• Affichez une bannière sur votre bureau et remplacez-la par une image verticale sur votre téléphone portable.
• Masquer le texte redondant sur les téléphones portables et ne conserver que les informations essentielles
• Rendre les boutons un peu plus grands et plus faciles à cliquer sur les téléphones portables

Si vous utilisez un thème ou un plugin qui prend en charge la fonction "afficher les conditions", par exemple Kadence peut-être Générer des blocs des plug-ins qui permettent également un contrôle plus fin.

N'oubliez pas de tester différents dispositifs

Une fois l'éditeur terminé, veillez à visualiser les résultats sur un appareil réel. Bien qu'il soit possible de prévisualiser différents appareils dans l'éditeur, les résultats sur un vrai téléphone reflètent mieux le problème.

Il est recommandé de vérifier la page en ouvrant une fenêtre de téléphone portable, de tablette ou de navigateur de taille différente :

• L'image se charge-t-elle correctement ?
• Si le contenu est aligné en haut ou en bas
• Les boutons sont-ils suffisamment grands pour être facilement cliqués ?
• Les polices de caractères sont-elles claires et les paragraphes trop denses ?

Si la page comporte des tableaux, des galeries d'images ou des vidéos, il est recommandé d'utiliser les paramètres "adaptatifs" fournis par le bloc pour éviter que le contenu ne déborde sur les petits écrans.

résumés

Le faire avec l'éditeur de blocs de WordPresspage web réactiveL'essentiel est de faire bon usage des groupes, des colonnes, de l'espacement, de l'alignement et du masquage. Tant que la structure est bien construite, la page s'adaptera naturellement aux téléphones mobiles et aux tablettes, sans qu'il soit nécessaire d'écrire du code.

Beaucoup de gens pensent que l'utilisation de plug-ins avancés ou d'outils de visualisation pour faire du responsive, WordPress est livré avec l'éditeur est assez puissant, aussi longtemps que vous utilisez familier, vous pouvez également faire une page web belle et pratique.

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.