Comment redimensionner un bloc dans WordPress

L’éditeur de blocs Gutenberg, officiellement introduit dans WordPress 5.0, offre aux utilisateurs la possibilité de personnaliser complètement le contenu et le site WordPress. Gutenberg n’a plus besoin d’être créé dans l’outil WYSIWYG comme tinymce Classic Editor, mais fournit un bloc distinct pour chaque élément du contenu d’un billet ou d’une page. En contrôlant les paramètres de chaque bloc spécifique, les utilisateurs peuvent concevoir le contenu WordPress plus facilement que jamais. L’une des façons les plus simples de faire ressortir un design est de dépasser les paramètres par défaut. Ensuite, nous apprendrons comment redimensionner les blocs dans WordPress afin que vous puissiez commencer à penser (et concevoir) en dehors de la boîte.
En raison de la réactivité du bloc, la plupart des redimensionnements dans l’éditeur de bloc restent limités à la zone de contenu du site. Si vous définissez la zone de contenu de la page à pleine largeur, vous travaillez dans cet espace. Par exemple, si vous définissez la zone de contenu du message à 580px ou 1200px, vous y travaillerez. Les méthodes que nous vous avons apprises dans wordpress pour redimensionner des blocs sont basées sur l’idée que vous resterez dans les limites d’un conteneur de bloc spécifique. Comment redimensionner les blocs dans l’éditeur certains blocs (mais pas tous) ont des options de redimensionnement intégrées. Pour des raisons évidentes, ce sont les plus faciles à redimensionner. Cependant, selon le bloc, les options de redimensionnement se trouvent à différents endroits.
Exemple 1: bloc d’image cliquez sur un bloc pour afficher un menu raccourci où l’option de redimensionnement est en fait l’option d’espacement. Cependant, l’alignement large et large change la taille du bloc d’image à la largeur du conteneur (largeur) ou à la largeur de la page entière (pleine). Vous pouvez également redimensionner le bloc d’image uti
Déverrouillage de la barre latérale droite. La section taille de l’image correctement nommée a un certain nombre d’options que vous pouvez utiliser pour redimensionner les blocs. WordPress dispose d’un menu déroulant pour un redimensionnement rapide, vous permettant de sélectionner des presets à partir de vignettes, de taille moyenne, grande et pleine. Le choix de la taille complète variera selon le sujet, qu’il soit en fait entièrement affiché ou adapté à la zone de contenu. Vous pouvez également ajuster spécifiquement la largeur et la hauteur de chaque pixel. En dessous de cette valeur, vous pouvez ajuster en pourcentage. Les pourcentages sont basés sur les valeurs numériques dans les champs largeur et hauteur. N’est pas la taille de l’image prédéfinie sélectionnée dans le menu déroulant.
Enfin, vous pouvez cliquer sur l’image elle – même pour afficher une bordure bleue avec un ancrage circulaire blanc. Vous pouvez les faire glisser pour redimensionner les blocs. Vous pouvez redimensionner l’image en cliquant et en faisant glisser n’importe quel point d’ancrage. Ceci Redimensionne les champs hauteur et largeur dans le menu paramètres du bloc. Exemple # 2: bloc d’événements pour les blocs d’événements, les paramètres de redimensionnement ne peuvent être trouvés que dans le menu contextuel de l’éditeur lui – même. (le bloc d’événements est un plug – in autonome que vous installez et ne fait pas partie de l’éditeur principal de Gutenberg.) Comme pour certaines options de bloc d’image, l’option de redimensionnement ici est techniquement l’option d’espacement. Mais ces deux options sont alignées sur le Centre et la largeur. Vous pouvez sélectionner un centre dans le conteneur ou la largeur totale de l’écran. Le réglage de la hauteur du bloc dans l’éditeur est un peu compliqué, mais il fonctionne. Si vous appuyez simplement sur Entrée \/ retour dans le champ bloc vide, vous pouvez augmenter la hauteur en insérant un bloc de paragraphe vide supplémentaire. C’est loin d’être idéal. Mais c’est un v.
Eloce et Engineering sont à un moment critique, en particulier compte tenu des blocs d’événements qui n’ont pas vraiment d’option de réglage de la hauteur.
Exemple 3 #: redimensionner un bloc en utilisant des colonnes dans WordPress si un bloc qui doit être redimensionné n’inclut pas l’option de redimensionnement dans le panneau de configuration ou dans le menu raccourci, l’utilisation des colonnes de l’éditeur de bloc est une autre façon de redimensionner n’importe quel bloc. Vous pouvez rechercher des blocs de colonnes en appuyant sur l’un des boutons + pour ajouter un nouveau bloc. Dans un bloc de colonne, vous pouvez ajouter tout autre bloc que vous voulez. Les options de recherche affichent également le modèle d’éditeur de bloc. Ces modèles peuvent être insérés dans des articles ou des pages dont le contenu a été redimensionné et positionné en attendant que le contenu remplace les substituants.
Dès le début, le bloc colonnes vous permet de sélectionner la taille de la colonne elle – même. Il est divisé en six directions différentes, chacune avec un pourcentage différent de pages pour chaque colonne. Ce ne sont pas les seules configurations que vous pouvez utiliser. Vous pouvez ajouter de nouvelles colonnes à tout moment en utilisant le bouton bleu + dans le bloc. Chaque colonne a son propre panneau de configuration où vous ne pouvez ajuster la largeur qu’en pourcentage. Certaines expériences peuvent être nécessaires pour obtenir la bonne taille pour votre conception. Cependant, une fois terminé, vous pouvez avoir un contenu bien conçu et bien espacé en première page. N’oubliez pas que toutes les colonnes vides de l’éditeur de bloc apparaissent également vides à l’avant. En ajustant la largeur, la position et le nombre des différentes colonnes, vous pouvez redimensionner et positionner les blocs de presque n’importe quelle façon. Avez – vous besoin de plus d’options de taille? Penser à un gène
Nous sommes conscients que certaines de ces méthodes de redimensionnement des blocs semblent avoir des limites. Si vous pensez qu’ils sont trop limités pour vous, il est peut – être temps de passer en revue les générateurs de page plus avancés. Par exemple, notre Divi offre des options de redimensionnement et de transformation pour chaque module (bloc) qui offre plus de contrôle sur la forme, la taille et l’espacement que Gutenberg. Même les constructeurs de page les plus avancés le font, donc si vous pensez que les options de Gutenberg sont trop limitées, vérifier quelque chose comme Divi peut être la meilleure étape suivante.
Comment utiliser css pour redimensionner des blocs dans WordPress chaque bloc a une section CSS dans le panneau paramètres sous Paramètres avancés. En plus de tout autre paramètre avancé spécifique au bloc, chaque paramètre a un champ pour d’autres classes CSS. Vous pouvez assigner autant de sélecteurs à un seul bloc que vous le souhaitez, qu’ils existent déjà sur votre site ou que vous créiez des sélecteurs spécifiquement pour ce bloc. En général, nous vous recommandons d’utiliser un ID CSS au lieu d’une classe pour un seul bloc, mais l’éditeur de bloc ne le supporte pas (du moins par défaut). Par conséquent, vous n’avez besoin que de plusieurs classes pour suivre un seul bloc au lieu d’un Id. les classes sont conçues pour écraser les types d’éléments d’une grande catégorie, et les ID sont conçus pour un seul élément. Dans ce cas, nous vous recommandons d’utiliser une convention de nommage claire pour garder votre code simple.
Quoi qu’il en soit, il suffit d’entrer la classe dans le champ texte. N’incluez pas de points avant le nom de la classe dans ce champ. Vous devriez maintenant aller à apparence – Personnaliser et trouver d’autres sections CSS en bas. Écrivez ou collez le code CSS pour redimensionner les blocs comme vous le souhaitez. Nous recommandons