Une de mes activités préférées chaque semaine est de parcourir les derniers thèmes à atterrir dans le répertoire de thèmes WordPress. Souvent, il existe des concepts de conception intrigants. Cependant, la plupart du temps, je suis déçu d’apprendre que la conception de nombreuses pages d’accueil repose sur des options de thème au lieu de l’éditeur de blocs.

Bien que l’éditeur ait plusieurs limites de conception, les auteurs de thèmes ont beaucoup d’espace à explorer. Il a suffisamment de puissance pour tirer certaines de ces conceptions de page d’accueil personnalisées avec beaucoup moins de travail de code.

Artiste musical était l’un des derniers thèmes à attirer mon attention. J’ai adoré la grande zone des héros et plusieurs éléments de la conception du thème. Après l’avoir installé, j’ai réalisé que la mise en page de la page d’accueil était gérée par les options de thème. Cependant, l’auteur du thème aurait pu construire cette page entièrement à partir de blocs et envelopper chaque section ou même la conception entière dans des modèles de blocs.

Tout cela est faisable avec l’éditeur de blocs.

Pour pratiquer ce que je prêche, j’ai pris quelques heures et recréé la démo de la page d’accueil pour le thème directement à partir de l’éditeur de blocs. Aucun code requis. Il y avait quelques pièces délicates dans lesquelles je vais entrer. Cependant, ce n’était pas si difficile à construire et aurait pu être rendu plus facile si le thème prenait en charge l’éditeur de blocs.

Le plan était de reproduire la page personnalisée avec le thème Music Artist installé. Cependant, le manque de support de bloc du thème signifiait que certaines choses étaient fondamentalement brisées. Au lieu de cela, j’ai activé un thème avec des similitudes de conception, telles que les polices et les couleurs. Parce que je savais déjà Ariele Lite a travaillé avec l’éditeur de blocs, il était logique de voir si je pouvais construire avec. Cela s’est avéré être une base solide.

Ce qui suit est une comparaison de la page d’accueil originale du thème Music Artist (en premier) et d’une récréation utilisant des blocs via le Ariele Lite thème (deuxième):

Il existe évidemment des différences d’espacement, de couleurs, de typographie et d’autres éléments. Cela dépend en grande partie des choix stylistiques des concepteurs de thèmes. Compte tenu de plus de temps et de modifications via un plugin comme Éditeur Plus, J’aurais pu ajuster cela suffisamment pour obtenir une réplique plus proche. Cependant, mon objectif était de rester aussi proche que possible du cœur de WordPress. Techniquement, j’ai la dernière version du plugin Gutenberg installée, il se peut donc que quelques éléments n’aient pas encore atterri dans WordPress.

Pour cette expérience, j’ai utilisé:

  • WordPress 5.7 Bêta
  • Gutenberg 10.1 bêta
  • Ariele Lite 1.0.8
  • Editor Plus 2.6

J’avais seulement besoin d’Editor Plus pour effectuer quelques ajustements de marge sur le bloc Groupe. J’aurais pu le laisser seul, mais je voulais réduire une partie de l’espacement entre les sections de la page pour obtenir une récréation plus proche. À l’avenir, nous verrons plus de contrôles d’espacement dans WordPress, j’ai donc considéré cela comme un compromis équitable.

Cette expérience vise à montrer aux auteurs de thèmes qu’ils peuvent créer leurs conceptions personnalisées avec le système de blocs. La suppression des options de thème old-school signifie beaucoup moins de travail de code pour les développeurs, ce qui leur permet de se concentrer davantage sur le style. Les utilisateurs finaux bénéficient également d’une plus grande flexibilité, comme l’ajout d’éléments personnalisés ou la suppression de pièces dont ils ne veulent pas. Cela n’inclut même pas les options de style au niveau du bloc individuel.

L’objectif secondaire est de montrer aux utilisateurs qu’ils peuvent créer certaines de ces pages d’accueil sans code. L’éditeur de blocs et un thème complet et prêt pour les blocs peuvent vous mener assez loin.

Recréer la page d’accueil de l’artiste musical

Commencer par une base d’Ariele Lite signifiait que le design était encadré. Cependant, le thème a un modèle de page «Blank Canvas» personnalisé qui permet aux utilisateurs de concevoir la page entière.

Il y avait des éléments que je ne pouvais pas recréer entièrement à cause des limitations de l’éditeur de blocs. D’autres parties étaient des problèmes ou des choix de conception provenant du thème.

Ce qui suit est un aperçu général de la façon dont j’ai réalisé la construction de chaque section de la page d’accueil. Je sauterai des parties comme l’ajout de couleurs et la modification de la taille des polices tout en me concentrant sur les concepts liés à la mise en page.

Section des héros

Couvrir le bloc avec un fond d'album de musique et une section d'icônes sociales.

Le bloc Cover de WordPress reste l’un de mes blocs préférés. Il permet aux utilisateurs de créer des sections de héros sans trop de travail. J’ai attrapé l’image d’arrière-plan de la démo originale et je l’ai insérée. J’avais franchi la première étape réelle de ce voyage.

Ensuite, j’ai ajouté un bloc d’en-tête, en ajustant un peu sa taille. Je l’ai suivi avec un bloc d’espacement et d’icônes sociales.

J’ai immédiatement frappé deux chicots. Le premier était que WordPress n’incluait pas d’icône sociale iTunes. Je n’ai pas pu trouver de problème ouvert sur le référentiel Gutenberg pour cela. Ce n’est peut-être pas une fonctionnalité souvent demandée. Le deuxième problème était que le bloc Icônes sociales ne sortait pas les étiquettes de réseau social, donc je ne pouvais pas reproduire cette partie de la conception.

Section discographie

Section discographie qui répertorie les albums d'un artiste.

Il existe plusieurs façons de gérer cette section. En supposant que les albums répertoriés sont un type de publication personnalisé, quel que soit le plugin dont ces albums proviennent, il aurait idéalement un bloc personnalisé pour les sortir. Les utilisateurs peuvent également utiliser le bloc Derniers articles s’il s’agit d’articles de blog ou du bloc de requête à venir.

Pour plus de simplicité, j’ai décidé d’ajouter un bloc Colonnes et d’y déposer trois images liées.

Section Médias et Texte

Deux colonnes.  Sur la gauche, une vidéo YouTube intégrée.  Sur la droite, un titre, un paragraphe et un bouton.

Mon plan pour cette section était d’utiliser le bloc principal Media & Text. Cependant, il ne prend en charge que les médias auto-hébergés. Il n’y avait aucun moyen pour moi d’intégrer une vidéo YouTube.

Au lieu de cela, je suis allé avec un bloc Colonnes. Dans la colonne de gauche, j’ai déposé une URL de vidéo YouTube. Sur la droite, j’ai ajouté des blocs Titre, Paragraphe et Boutons.

Section Vidéos

Une section avec deux colonnes, chacune avec une vidéo YouTube intégrée.

C’était une section relativement simple à recréer. Pour la mise en page, il suffit d’un bloc d’en-tête suivi d’un bloc de colonnes. Ensuite, j’ai attrapé quelques liens vidéo sur YouTube et collé les URL dans l’éditeur.

Section des derniers messages

Section des derniers articles à trois colonnes avec des images en vedette.

C’était la partie de la mise en page avec laquelle j’ai eu le plus de problèmes. WordPress fournit le bloc Derniers messages, qui peut être défini dans une grille. Cependant, Ariele Lite n’a pas correctement géré les colonnes.

Alors, j’ai un peu triché.

Je suis passé à un thème basé sur des blocs qui prend en charge la prochaine fonctionnalité d’édition complète du site. Ensuite, j’ai ajouté un bloc de requête pour avoir plus de contrôle sur les colonnes de messages. Ensuite, je suis revenu au thème Ariele Lite.

La conception originale peut être réalisée avec le bloc Latest Posts actuel, il ne s’agit donc pas d’un problème d’éditeur de blocs.

Section de la barre latérale du pied de page

Une section en trois colonnes: à propos de nous, calendrier et galerie d'images.

Techniquement, la barre latérale du pied de page sort du cadre de la conception de la page d’accueil. Il fait partie du pied de page du thème sur l’ensemble du site. Cependant, j’ai décidé de l’ajouter car j’étais déjà sur une lancée.

Cette section nécessite le bloc Colonnes. À partir de là, il s’agit de déposer un bloc Titre pour chaque colonne. J’ai ajouté un bloc Paragraphe, Calendrier et Galerie pour recréer les trois «widgets».

La conception du bloc Calendrier d’Ariele Lite fonctionne mieux sur un arrière-plan de couleur claire. C’était un petit point douloureux que j’ai négligé. À long terme, WordPress devrait fournir des contrôles de conception sur les blocs qui en manquent.


Source link