Tutoriel WordPress Gutenberg sur la façon de créer un site Web personnalisé à l'aide de blocs

Il s'agit d'un tutoriel WordPress Gutenberg écrit par des développeurs Web qui ont une expérience significative dans la création de sites Web WordPress à l'aide de son nouvel éditeur de blocs.

Dans ce guide, nous allons vous montrer comment créer un site Web complexe qui comprendra des modèles de contenu, des archives et une recherche personnalisée. Nous utiliserons l'éditeur de blocs WordPress connu sous le nom de Gutenberg et Toolset Blocks pour créer le site Web.

Pourquoi Gutenberg est maintenant un excellent moyen de créer des sites Web

Gutenberg est sorti depuis près d'un an et est suffisamment mature pour devenir un moyen efficace et fiable de concevoir le site Web exact que vous aviez prévu.

Gutenberg utilise des blocs pour créer vos pages. Les blocs sont des éléments qui contiennent différents types de contenu afin que vous puissiez créer vos mises en page.

L'éditeur de blocs évolue encore mais il est déjà incroyablement intuitif et flexible. Vous n'avez pas besoin d'être un expert en codage pour créer du contenu. De plus, lorsque vous le combinez avec des plugins tels que Toolset Blocks, vous pouvez facilement créer des sites Web complexes qui ont fière allure.

Gutenberg est également beaucoup plus facile à utiliser sur mobile que son prédécesseur. Compte tenu de la quantité croissante de travail que nous effectuons sur nos mobiles, il s'agit d'un pas important dans la bonne direction.

Les meilleurs types de thèmes à utiliser avec Gutenberg

Il existe de nombreux thèmes WordPress premium compatibles avec l'éditeur de blocs Gutenberg et prenant également en charge d'autres plugins premium.

Vous pouvez rapidement parcourir les meilleurs thèmes en consultant notre liste de plus de 30 thèmes WordPress compatibles avec Gutenberg.

Le meilleur plugin de blocs à utiliser avec Gutenberg

Depuis le lancement de Gutenberg il y a plus d'un an, un certain nombre d'excellents plugins ont été publiés qui complètent le nouvel éditeur WordPress.

Pour notre didacticiel WordPress Gutenberg, nous utiliserons Toolset Blocks avec Gutenberg pour créer notre site Web WordPress. Toolset Blocks offre un certain nombre d'avantages qui permettront aux codeurs et aux non-codeurs de concevoir et de mettre en œuvre rapidement leurs sites Web plus facilement :

• Votre flux de travail sera beaucoup plus simple . Vous n'avez désormais plus besoin de concevoir vos pages, puis de les mettre en œuvre. Vous pouvez simplement les créer sur WordPress et voir instantanément à quoi ils ressembleront.
• Pas besoin de basculer entre le back-end et le front-end . Au lieu de cela, vous pouvez simplement concevoir vos modèles sur le back-end et voir instantanément à quoi ils ressembleront.
• Les non-développeurs peuvent créer les sites Web de leurs rêves . Vous n'avez plus besoin d'être un expert en codage pour créer le site Web que vous vouliez. Avec les blocs, vous pouvez facilement ajouter vous-même des éléments complexes sans html ni css.
• Passez moins de temps à lire la documentation . La nature simple et intuitive de Toolset Blocks signifie que vous n'avez pas besoin de lire des tas de documentation pour comprendre comment construire certains éléments. La plupart des blocs décrivent ce que vous pouvez réaliser et peuvent être utilisés et expérimentés facilement.
• Aucune intégration supplémentaire avec des plugins tiers . Avec l'éditeur WordPress classique, vous auriez dû installer un constructeur de page et des plugins compatibles supplémentaires. Cela pourrait gonfler votre site Web et le ralentir considérablement. Vous comptez également sur des tiers pour mettre à jour leurs plugins et les sécuriser. Toolset Blocks est intégré à Gutenberg et WordPress et ne causera donc pas les mêmes problèmes.
• Suivez le même flux de travail que le noyau WordPress . Vous n'avez pas à vous soucier de changer votre façon de travailler avec le nouvel éditeur WordPress.

Tutoriel WordPress Gutenberg sur la façon de créer un site Web personnalisé à l'aide de blocs

Nous pouvons maintenant commencer à créer notre site Web personnalisé. À titre d'exemple, nous créerons un site Web de démonstration que vous pourrez utiliser pour rechercher le meilleur gymnase ou entraîneur personnel de votre région.

Voici ce que nous allons couvrir dans ce tutoriel WordPress Gutenberg :

• Ajouter, éditer, déplacer et supprimer des blocs
• Afficher le contenu côte à côte
• Naviguer dans vos blocs
• Affichage des champs dans vos conceptions d'éditeur de blocs
• Affichage d'une galerie d'images
• Styling Toolset blocs dans l'éditeur
• Contrôles typographiques
• Création d'un modèle
• Construire vos pages d'archives
• Création de listes de contenu personnalisées
• Ajouter une recherche personnalisée

Commençons!

Ajouter, éditer, déplacer et supprimer des blocs

Tout d'abord, passons en revue les bases de la création et de la suppression de vos blocs. Les blocs sont une toute nouvelle façon de créer des sites Web, mais cela ne devrait prendre que quelques minutes pour s'y habituer.

1. Sur une page ou un article, cliquez sur le bouton +.
2. Recherchez et cliquez sur le bloc que vous souhaitez utiliser pour l'insérer.

3. Entrez vos informations de contenu pour le bloc. Par exemple, ici, nous avons ajouté le bloc « En-tête » et insérerons un titre pour celui-ci.
4. Sur la gauche de chaque bloc, vous verrez un ensemble de commandes que vous pouvez utiliser pour déplacer vos blocs.

5. Utilisez la barre latérale droite pour modifier les options du bloc que vous avez sélectionné. Par exemple, vous pouvez modifier la couleur de la police, la taille de l'image ou l'alignement du texte.
6. Si vous cliquez sur l'option à trois points, vous pouvez voir des options supplémentaires telles que le bloc Supprimer

Comment afficher votre contenu côte à côte

Vous pouvez facilement afficher votre contenu côte à côte sur votre page en utilisant le bloc de colonnes.

1. Sélectionnez le bouton +.
2. Recherchez le bloc Colonnes et insérez-le.

3. Vous pouvez maintenant voir deux colonnes auxquelles vous pouvez ajouter des blocs normalement.

4. Augmentez le nombre de colonnes en sélectionnant le bloc de colonnes et en basculant le nombre sur la barre de droite.

Naviguer dans vos blocs

Au fur et à mesure que vous construisez votre site, certains de vos designs et modèles auront beaucoup de blocs. L'un des moyens les plus simples de sélectionner celui que vous souhaitez modifier consiste à utiliser le bouton de navigation dans les blocs en haut de l'éditeur et à sélectionner le bloc avec lequel vous souhaitez travailler.

Affichage des champs dans vos conceptions d'éditeur de blocs

Vous pouvez afficher des informations à partir des champs de publication (le titre, le corps, etc.) ou des champs personnalisés que vous avez peut-être créés à l'aide de Toolset Blocks.

Il existe trois façons pour vous d'afficher vos champs que nous décrirons ci-dessous dans le cadre du didacticiel WordPress Gutenberg :

1. Définir le contenu du bloc à partir des valeurs de champ

Chaque bloc de la bibliothèque Toolset Blocks vous permet de définir son contenu à partir de champs. Par exemple, vous pouvez définir n'importe quel texte d'en-tête pour qu'il provienne d'un champ de publication ou d'un champ personnalisé de l'ensemble d'outils.

Voyons ci-dessous comment cela fonctionne en ajoutant le texte d'en-tête d'un champ de publication au bloc d'en-tête de l'ensemble d' outils pour nos entraîneurs personnels.

1. Créez un nouveau modèle de contenu et choisissez le type de publication personnalisé que vous souhaitez afficher.
2. Sélectionnez le bouton +.
3. Ajoutez le bloc Toolset Heading .

4. Activez le texte d'en-tête dynamique.

5. Sélectionnez le champ de publication que vous souhaitez afficher. Ci-dessous, j'ai sélectionné le titre du message .

Vous pourrez désormais voir le titre correct pour chacun des messages liés à un certain type de message personnalisé.

2. Afficher les champs sous forme de blocs individuels

Vous pouvez afficher n'importe quel champ de publication ou champ personnalisé individuel créé à l'aide de Toolset sous forme de bloc. Par exemple, ci-dessous, nous ajoutons le contenu de la publication principale à notre modèle pour nos gymnases.

1. Sélectionnez le bloc Champ unique .
2. Dans la barre latérale droite sous Type de champ , sélectionnez le champ Standard .
3. Sous Champ de publication, sélectionnez l'option Contenu de publication (corps) .

La description de chacun des gymnases apparaîtra désormais dans leurs publications respectives.

3. Combinez les champs avec du texte dans un bloc

Vous devrez peut-être ajouter un mélange de champs et de textes à vos conceptions. Par exemple, vous devrez peut-être ajouter des étiquettes à côté de vos champs personnalisés.

1. Sélectionnez le bloc Champs et texte .

2. Tapez l'étiquette que vous souhaitez ajouter. Par exemple, j'ai ajouté « Rating » car je souhaite afficher les résultats du champ personnalisé Rating qui affiche le score de chaque salle de sport sur 5.

3. Sélectionnez parmi les icônes le type de contenu que vous souhaitez ajouter. Vous pouvez ajouter un champ, un formulaire ou une sortie conditionnelle. Dans notre cas, nous voulons ajouter un champ.

4. Sélectionnez le contenu que vous souhaitez ajouter (dans mon cas, il s'agit du champ Évaluation ) et cliquez sur Insérer un shortcode .

Afficher une galerie d'images

Vous pouvez également ajouter plusieurs images à vos publications à l'aide de blocs.

1. Sélectionnez le bloc Champ de répétition/Galerie .

2. Sélectionnez le groupe de champs personnalisés que vous souhaitez afficher.
3. Choisissez le champ personnalisé que vous souhaitez afficher.

Styliser vos blocs dans l'éditeur

Lorsque vous créez le site Web que vous aviez en tête, vous devrez styliser vos blocs. Par exemple, vous pourriez vouloir changer la police, les couleurs, l'arrière-plan ou les marges de vos blocs.

Vous pouvez styliser vos blocs de deux manières :

1. Styliser des éléments à l'aide de l'interface

1. Sélectionnez le bloc que vous souhaitez styliser. Par exemple, j'ai sélectionné le bloc Notes que j'ai ajouté précédemment.
2. Développez la section Paramètres de style dans la barre latérale.
3. Ici, vous pouvez ajuster votre couleur d'arrière-plan, le rembourrage, la bordure et bien plus encore.

Bien sûr, chaque bloc offrira différentes options de style. Par exemple, le bloc d'image contiendra un certain nombre de fonctionnalités de personnalisation supplémentaires telles que la possibilité d'ajuster la position de l'image, le flou ou sa rotation.

2. Utilisation du bloc Conteneur

Le Container Block est un bloc que vous ne pouvez trouver qu'avec les Toolset Blocks. Utilisez le bloc conteneur pour regrouper certains blocs et certains styles pour chacun d'eux qui seront affichés pour chacun des messages.

Par exemple, j'ai ajouté un bloc conteneur pour afficher toutes les informations pertinentes pour un entraîneur personnel dans une section uniforme, y compris l'image, le titre, la note et bien plus encore. Je peux maintenant styliser le bloc conteneur de sorte que chacun de mes messages Personal Trainer affiche les mêmes styles.

Encore une fois, je peux le faire en utilisant la barre latérale sur le côté droit.

Contrôles typographiques

Avec Toolset Blocks, vous pouvez facilement styliser et formater votre texte à l'aide de sa section Typographie.

Voici une liste de ce que vous pouvez régler :

• Type de police – choisissez parmi une vaste sélection de polices
• Taille de la police, hauteur de ligne et espacement des lettres
• Le style de police
• Transformation de texte – majuscule, majuscule, minuscule
• Couleur du texte
• Ombre de texte

Comment créer des modèles pour afficher des articles personnalisés

L'une des fonctionnalités les plus importantes que vous devrez créer pour un site Web personnalisé est le modèle. Lorsque vous créez un modèle, cela signifie que toutes les publications du même type de publication personnalisée auront la même mise en page et le même design.

Par exemple, nous pouvons concevoir un modèle pour chacun des gymnases que nous souhaitons afficher dans le cadre de notre type de publication personnalisé « Gyms ».

1. Accédez à Outils-> Tableau de bord et cliquez sur l'option Créer un modèle de contenu pour le type de publication pour lequel vous souhaitez concevoir un modèle.

2. Tout comme nous l'avons fait auparavant, vous pouvez commencer à ajouter des champs à votre modèle. Ci-dessous, j'ai ajouté un certain nombre de blocs différents, notamment le bloc Titre, Image et Champ unique qui contiennent tous des champs.

3. Une fois que vous avez enregistré et publié votre modèle, chacun de vos messages pour ce type de message personnalisé affichera la même mise en page et le même style.

Construire vos pages d'archives

Les archives sont la liste du contenu pour chaque type de publication personnalisé que WordPress génère pour vous. Vous pouvez utiliser Toolset Blocks et Gutenberg pour personnaliser l'apparence de chacune de vos pages d'archives.

Ci-dessous, dans le cadre du didacticiel WordPress Gutenberg, j'ai créé une archive pour mon type de publication personnalisé « Gyms ».

1. Accédez à Toolset->Dashboard et cliquez sur l'option Créer une archive à côté du type de publication pour lequel vous souhaitez créer une archive.

2. Dans l'éditeur de blocs, vous pouvez maintenant ajouter les différents éléments que vous souhaitez afficher pour chacun de vos messages. Par exemple, vous pouvez afficher tous vos champs standard et personnalisés (tels que les évaluations, l'adresse et les titres de publication que j'ai créés pour mes types de publication personnalisés « Gyms ») à l'aide des blocs d'outils.

3. Pour modifier le nombre de colonnes, cliquez sur l'option Bloquer la navigation et sélectionnez la boucle d'archive WordPress .
4. Sous Style de boucle, vous pouvez ajuster le nombre de colonnes.

5. Vous pouvez également apporter un certain nombre de modifications aux paramètres par défaut des archives, telles que la pagination, la commande et bien plus encore sous le bloc WordPress Archive.

6. Vous pouvez également ajouter des textes personnalisés et d'autres blocs avant ou après la boucle d'archive principale qui affichera vos messages. Cliquez simplement sur l'icône + avant ou après la boucle pour ajouter vos blocs ou votre texte.

Afficher des listes de contenu personnalisées

Vous pouvez utiliser Toolset Blocks et Gutenberg pour afficher n'importe lequel de vos messages sous forme de liste dans l'ordre de votre choix. Vous pouvez également concevoir la liste comme vous le souhaitez, par exemple dans une grille, du HTML simple, un tableau ou de toute autre manière. Dans Toolset, ce type de liste est appelé une vue.

Cette liste peut ensuite être ajoutée à n'importe quelle page. Par exemple, ci-dessous, j'ai ajouté une liste de gymnases en vedette à la page d'accueil.

1. Cliquez sur le bouton + sur la page à laquelle vous souhaitez ajouter votre vue.
2. Ajoutez le bloc Vues et nommez-le.
3. Sélectionnez le contenu que vous souhaitez que votre vue affiche. Par exemple, je veux afficher mes gymnases.

4. Ajoutez les blocs que vous souhaitez afficher dans votre vue.
5. Vous pouvez modifier l'ordre, le contenu affiché et plus encore lorsque vous cliquez sur Bloquer la navigation , sélectionnez votre vue et utilisez la barre latérale.

6. Sous View Loop, vous pouvez modifier un certain nombre de paramètres pour l'ensemble de la vue, y compris le nombre de colonnes.

Ajouter une recherche personnalisée

Vous pouvez ajouter à votre vue votre propre recherche qui permettra à vos utilisateurs d'affiner le contenu qui les intéresse sur le front-end. Par exemple, vous pouvez créer une recherche pour vos utilisateurs afin de trouver la meilleure salle de sport la plus proche d'eux.

1. Insérez le bloc Afficher sur votre page.
2. Activez l'option Rechercher dans l'assistant de création de vue.

3. Vous pouvez ensuite ajouter des champs de recherche, des boutons de recherche et bien plus encore dans la zone d'édition des vues.

4. Vous pouvez utiliser la barre latérale droite pour modifier les options de ce champ de recherche. Cela inclut les paramètres de champ principaux et les options d'étiquette et de style.

Voici à quoi ressemble notre recherche personnalisée du meilleur gymnase sur le front-end.

Commencez à créer votre site Web personnalisé dès aujourd'hui !

Maintenant que vous connaissez les bases après avoir lu ce didacticiel WordPress Gutenberg, vous pouvez commencer à concevoir et à créer votre propre site Web personnalisé. Vous pouvez télécharger WordPress et Toolset Blocks dès aujourd'hui pour voir à quel point il est facile pour vous de créer votre propre site Web.

Si vous avez des idées ou des questions, faites-le nous savoir dans les commentaires ci-dessous!