L’une de mes choses préférées à faire chaque semaine est de lire les derniers sujets pour atterrir dans le répertoire des sujets WordPress. Il existe souvent des concepts de design fascinants. La plupart du temps, cependant, je suis déçu d’apprendre que les conceptions de page d’accueil par beaucoup sont basées sur des options de thème plutôt que sur l’éditeur de blocs.

Bien que l’éditeur ait certaines limites de conception, les auteurs du sujet ont beaucoup de place à 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 sujets les plus récents qui a attiré mon attention. J’ai aimé la grande zone des héros et certains é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 via les options de thème. Cependant, l’auteur du sujet aurait pu créer cette page entièrement à partir de blocs et envelopper chaque section ou même la conception entière dans des motifs de blocs.

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

Afin de pouvoir pratiquer ce que je prêche, j’ai pris quelques heures et j’ai recréé la démo de la page d’accueil pour le sujet directement à partir de l’éditeur de blocs. Aucun code nécessaire. Il y avait quelques pièces délicates dans lesquelles je vais entrer. Cependant, ce n’était pas si difficile à créer et aurait pu être rendu plus facile si le thème avait pris 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 soutien de bloc du sujet a entraîné une rupture fondamentale de certaines choses. Au lieu de cela, j’ai activé un thème avec des similitudes de conception comme les polices et les couleurs. Parce que je savais déjà Ariele Lite a travaillé avec l’éditeur de blocsIl é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 une réplique avec des blocs à ce sujet Ariele Lite Sujet (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 effectués par le concepteur de thème. Compte tenu de plus de temps et de changements via un plugin comme Éditeur PlusJ’aurais pu ajuster cela suffisamment pour obtenir une réplique plus précise. Cependant, mon objectif était de rester aussi proche que possible du cœur de WordPress. Techniquement, j’ai installé la dernière version du plugin Gutenberg, il se peut donc que certains é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 juste besoin d’Editor Plus pour faire quelques ajustements de marge sur le bloc de groupe. J’aurais pu le laisser seul, mais je voulais réduire l’espace entre les sections de la page pour une réplique plus précise. À l’avenir, nous verrons plus de contrôles de distance dans WordPress, donc j’ai vu cela comme un juste compromis.

Cette expérience est conçue pour montrer aux auteurs de sujets qu’ils peuvent créer leurs conceptions personnalisées à l’aide du système de blocs. La suppression des options de thème de la vieille école signifie beaucoup moins de travail de code pour les développeurs, afin qu’ils puissent se concentrer davantage sur le style. Les utilisateurs finaux bénéficient également d’une plus grande flexibilité, par ex. B. ajouter des éléments personnalisés ou supprimer des pièces dont vous ne voulez 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 aucun code. L’éditeur de blocs et un thème complet et prêt pour les blocs peuvent vous mener assez loin.

Nouvelle création de la page d’accueil de l’artiste musical

À partir d’une base d’Ariele Lite, cela signifiait que le design était emballé. Cependant, le thème dispose d’un modèle de page «Blank Canvas» personnalisé que les utilisateurs peuvent utiliser pour concevoir la page entière.

Il y avait des éléments que je ne pouvais pas recréer complètement avec l’éditeur de blocs en raison de limitations. D’autres parties étaient des problèmes ou des décisions de conception qui découlaient du sujet.

Ce qui suit est un aperçu général de la façon dont j’ai construit chaque section de la page d’accueil. Je vais sauter des parties comme l’ajout de couleurs et la modification de la taille des polices pendant que je me concentre sur les concepts liés à la mise en page.

Département des héros

Bloc de couverture avec fond d'album de musique et section d'icônes sociales.

Le bloc de couverture 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 pris l’image d’arrière-plan de la démo originale et l’ai mise. J’avais fait le premier vrai pas de ce voyage.

Ensuite, j’ai ajouté un bloc de titre et ajusté un peu sa taille. Je l’ai suivi avec un bloc d’espacement et d’icônes sociales.

J’ai frappé deux crochets tout de suite. Le premier était que WordPress n’a pas d’icône de réseau social iTunes. Je n’ai pas trouvé de problème ouvert pour cela dans le référentiel Gutenberg. Ce n’est peut-être pas une fonctionnalité fréquemment demandée. Le deuxième problème était que le bloc Icônes sociales ne produisait pas les étiquettes de réseau social, donc je ne pouvais pas reproduire cette partie de la conception.

Section discographie

Zone discographique dans laquelle sont répertoriés les albums d'un artiste.

Il existe plusieurs façons de traiter cette section. Par exemple, supposons que les albums répertoriés sont un type de publication personnalisé. Quel que soit le plugin d’où proviennent ces albums, idéalement, ils auront un bloc personnalisé pour la sortie. Les utilisateurs peuvent également utiliser le bloc Messages récents pour les articles de blog ou le bloc Requêtes à venir.

Par souci de simplicité, j’ai décidé d’ajouter un bloc de colonnes et d’inclure trois images liées.

Zone multimédia et texte

Deux colonnes.  Une vidéo YouTube intégrée sur la gauche.  A droite un titre, un paragraphe et un bouton.

Mon plan pour cette section était d’utiliser le bloc principal Media & Text. Cependant, seuls les médias auto-hébergés sont pris en charge. Je n’ai pas pu intégrer une vidéo YouTube.

Au lieu de cela, je suis allé avec un bloc de colonnes. Dans la colonne de gauche, j’ai mis une URL de vidéo YouTube. Sur la droite, j’ai ajouté des blocs de titre, de paragraphe et de bouton.

Zone vidéo

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

C’était une section relativement facile à créer. Seul un bloc d’en-tête suivi d’un bloc de colonnes était requis pour la mise en page. Ensuite, j’ai obtenu quelques liens vidéo de YouTube et j’ai collé les URL dans l’éditeur.

Section des derniers messages

Section à trois colonnes avec les derniers articles avec des images sélectionnées.

C’était la partie de la mise en page avec laquelle j’ai eu le plus de problèmes. WordPress propose le bloc « Derniers messages », qui peut être défini dans une grille. Cependant, Ariele Lite n’a pas géré correctement 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 laissé tomber un bloc de requête pour avoir plus de contrôle sur les colonnes des articles. Ensuite, je suis revenu à Ariele Lite.

La conception originale peut être réalisée avec le bloc Messages récents actuel, ce n’est donc pas un problème avec l’é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. Cela fait partie du pied de page du sujet sur le site. J’ai décidé de l’ajouter car j’étais déjà sur une lancée.

Cette section nécessite le bloc de colonnes. À partir de ce moment, vous devez insérer un bloc d’en-tête pour chaque colonne. J’ai ajouté un bloc de paragraphe, de calendrier et de galerie pour recréer les trois « widgets ».

La conception des blocs de calendrier d’Ariele Lite fonctionne mieux sur un fond clair. C’était un petit point de douleur que j’ai manqué. À long terme, WordPress devrait fournir des contrôles de conception pour les blocs qui en manquent.



Source link

Recent Posts