Sélectionner une page


L’éditeur de blocs Gutenberg pour WordPress a changé la façon dont nous créons du contenu dans le CMS. Mais cela a également ouvert de nouvelles possibilités dans le front-end.

L’un des développements les plus intéressants dans ce domaine est la possibilité d’ajouter des blocs «complets» ou «larges» à une page ou à un article. Cette fonction offre la possibilité qu’un bloc Gutenberg s’écarte de la largeur standard du contenu d’un sujet – ce qui était presque impossible dans l’ancien éditeur classique.

Il existe un certain nombre d’utilisations pour un bloc entièrement ou largement aligné. Par exemple, vous pouvez introduire de nouvelles sections de page pleine largeur Bloc de couverture qui superpose du texte sur un arrière-plan d’image. Vous pouvez également utiliser la fonction pour créer une zone d’appel à l’action à ne pas manquer. Presque n’importe quel type de contenu pourrait être ajouté ici, ce qui fait partie de l’appel.

Il y a cependant une petite mise en garde: votre sujet doit prendre en charge des blocs complets et larges. Heureusement, c’est assez facile. Vous trouverez ci-dessous un tutoriel rapide sur l’ajout d’un support d’alignement étendu à votre thème WordPress et la mise en forme des blocs via CSS.

Ajout de la prise en charge du thème

La première étape consiste à ajouter un une seule ligne de code sur votre sujet actif functions.php Déposer. Téléchargez ce fichier depuis votre site Web si vous ne l’avez pas déjà fait (vous pouvez le trouver dans le /wp-content/themes/yourtheme/ Dossier – remplacez le nom réel du dossier par « votre thème ». Ensuite, copiez et collez l’extrait de code PHP suivant:

add_theme_support( 'align-wide' );

Téléchargez le code modifié une fois que vous l’avez ajouté functions.php Revenez dans le dossier de votre sujet.

Ce code indique que vous souhaitez activer des blocs complets et étendus. Maintenant, si vous vous connectez à WordPress et passez à l’éditeur de page / article, vous devriez constater que certains blocs (pas tous) ont les nouvelles options d’alignement « Complet » et « Large ».

Bloquer les alignements dans WordPress.

Utilisez-vous un thème commercial ou standard?
Si vous utilisez un thème WordPress commercial ou standard, assurez-vous d’en utiliser un Thème des enfants. Cela vous permet d’apporter des modifications au thème sans éventuellement les perdre après une mise à jour.

Style de bloc de base

Styliser un bloc large ou entièrement aligné peut être un peu délicat. Et il existe un certain nombre de techniques différentes. Celui utilisé ici est de cet exemple sur CodePen.

@media screen and (min-width: 960px) {
     .alignwide, .alignfull {
          width:  100vw;
          max-width:  100vw;
          margin-left:  calc(50% - 50vw);
     }
}

Notez que nous utilisons une requête multimédia CSS pour n’incorporer ce style que lorsque la taille de l’écran est de 960 pixels ou plus. C’est parce que nous ne voulons pas nécessairement cet effet sur les petits écrans.

Dans ce cas, nous avons utilisé les mêmes styles pour les deux orientations de bloc. Bien entendu, il est tout à fait possible de les concevoir séparément afin qu’ils offrent chacun un look unique sur le front-end.

Soyez également conscient d’un inconvénient potentiel: lorsque vous utilisez cette technique, vous pouvez voir une barre de défilement horizontale sur certaines mises en page. Cela peut être fait via CSS en ajoutant ce qui suit au body Élément:

body {
     overflow-x:  hidden;
}

Les résultats

Maintenant que nous avons activé la capacité de bloc complète et large, il est temps de tester les choses. Ici, nous avons créé une page avec un ensemble de blocs de pont pour une orientation large.

Création d'un bloc large dans WordPress.

Si vous regardez le front-end du site Web, le bloc de couverture fonctionne comme prévu. L’élément couvre toute la largeur de la page, tandis que le contenu en bas reste dans la largeur prédéfinie de 960 pixels du sujet.

Le bloc de couverture largement aligné est affiché à l'avant.

Cet élément, qui n’utilise que les styles standards, se démarque vraiment. Pourtant, il existe de nombreuses façons d’en faire plus avec le design.

L’ajout de classes CSS supplémentaires ou le ciblage de blocs spécifiques nous donne un vaste arsenal d’options de conception. Des choses comme les arrière-plans, Limites ou les chemins de détourage peuvent ajouter une touche unique.

Allez loin avec les thèmes WordPress

Dans une installation standard, Gutenberg n’offre pas toutes les cloches et sifflets d’un Générateur de pages Brancher. Mais les alignements de blocs nous permettent de nous essayer dans ce domaine.

C’est une bonne chose, car la conception Web a évolué depuis la sortie de l’éditeur classique. À cette époque, les sites Web avaient tendance à utiliser une largeur de contenu uniforme.

Aujourd’hui, les sections pleine largeur sont l’une des options de mise en page les plus populaires et les plus utiles. La possibilité de l’utiliser sans plugins ni hacks de thème rend WordPress encore meilleur pour les concepteurs.



Source link

Recent Posts