Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

Conception de blocs Gutenberg large et pleine largeur dans WordPress

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 à l'avant.

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 fonctionnalité ajoute la possibilité pour un bloc Gutenberg de s'écarter de la largeur par défaut du contenu d'un thème, ce qui était presque impossible dans l'ancien éditeur classique.

Il existe plusieurs utilisations possibles pour un bloc aligné en largeur ou en largeur. Vous pouvez, par exemple, introduire de nouvelles sections de page avec un bloc de couverture pleine largeur qui superpose le texte sur un arrière-plan d'image. Ou vous pouvez profiter de la fonctionnalité 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.

Cependant, il y a une petite mise en garde: votre thème doit prendre en charge des blocs alignés complets. Heureusement, c'est assez facile à faire. Ce qui suit est un tutoriel rapide pour ajouter un support d'alignement large à votre thème WordPress et concevoir les blocs via CSS.

Ajouter un support de thème

La première étape consiste à ajouter une seule ligne de code au fichier functions.php de votre thème actif. Téléchargez ce fichier depuis votre site Web si vous ne l'avez pas déjà fait (il peut être trouvé dans le dossier / wp-content / themes / yourtheme /, en remplaçant "yourtheme" par le nom réel du dossier). Copiez et collez ensuite l'extrait PHP suivant:

add_theme_support( 'align-wide' );

Une fois que vous avez ajouté le code, chargez le fichier Functions.php modifié dans le dossier de votre thème.

Ce code signifie que vous souhaitez activer les blocs alignés pleine largeur et largeur. Maintenant, lorsque vous vous connectez à WordPress et accédez à l'éditeur de page / publication, vous devez remarquer 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 par défaut?

Si vous utilisez un thème WordPress par défaut ou professionnel, vous devez vous assurer que vous utilisez un thème enfant. Cela vous permettra d'apporter des modifications au thème sans les perdre potentiellement après une mise à jour.

Style de bloc de base

La conception d'un bloc large ou entièrement aligné peut être un peu délicate. Et il existe un certain nombre de techniques différentes qui circulent. Celui que nous utiliserons ici provient de cet exemple dans CodePen.

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

Veuillez noter que nous utilisons une requête multimédia CSS pour incorporer uniquement ce style 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 des écrans plus petits.

Dans ce cas, nous avons utilisé les mêmes styles pour les deux alignements de blocs. Bien sûr, il est tout à fait possible de les concevoir séparément afin que chacun offre un look unique à l'avant.

Il convient également de noter un inconvénient possible: une barre de défilement horizontale peut apparaître dans certains modèles lors de l'utilisation de cette technique. Cela peut être corrigé via CSS avec les éléments suivants ajoutés à l'élément body:

body {
     overflow-x:  hidden;
}

Les résultats

Maintenant que nous avons activé la fonctionnalité de bloc complet et aligné, il est temps de tester les choses. Ici, nous avons créé une page avec un bloc de couverture, avec un alignement large.

Créez un bloc aligné large dans WordPress.

Lorsque vous regardez l'extrémité avant du site Web, le bloc de couverture fonctionne comme prévu. L'élément s'étend sur toute la largeur de la page, tandis que le contenu ci-dessous reste dans la largeur par défaut de 960 pixels du thème.

Le bloc de couverture aligné large est illustré à l'extrémité avant.

En utilisant uniquement les styles par défaut, cet élément se démarque vraiment. Pourtant, il existe de nombreuses possibilités de faire plus avec le design.

En ajoutant des classes CSS supplémentaires ou en ciblant des blocs spécifiques, nous avons un arsenal complet de possibilités de conception à notre disposition. Des éléments tels que les arrière-plans, les bordures ou les chemins de détourage peuvent ajouter une touche unique.

Expansion avec des thèmes WordPress

Dans une installation par défaut, Gutenberg ne fournit pas toutes les fonctionnalités d'un plugin de création de page. Mais les alignements de blocs nous permettent de nous aventurer sur ce territoire.

C'est bien, car la conception Web a évolué depuis l'époque où le Classic Editor est apparu pour la première fois. À l'époque, les sites Web avaient tendance à utiliser à tout moment une largeur de contenu uniforme.

De nos jours, les sections pleine largeur sont parmi les options de conception les plus populaires et les plus utiles. La possibilité de profiter de cela sans avoir besoin de plugins ou de hacks de thème rend WordPress encore meilleur pour les concepteurs.

Table of Contents