Catégories
Astuces et Design

5 façons de créer des sites Web sans code à l'aide de Gutenberg de WordPress

Les concepteurs de sites Web pourraient être pardonnés si leurs yeux brillaient à la simple mention de la création d'un site Web personnalisé. La création d'un site Web avancé nécessitait auparavant des connaissances en programmation et des heures de codage.

Mais grâce à Gutenberg, même ceux qui ne connaissent pas leur code HTML à partir de leur CSS pourront créer des sites Web professionnels qui se démarquent de la concurrence.

La première réaction à la sortie de Gutenberg était certainement accablante: «… Inutile… Une blague… Terrible…»

Vous pouvez discuter de la façon dont WordPress a géré le lancement de son nouvel éditeur de blocs de contenu (et vous pourriez avoir raison de penser que ce n'était pas génial), mais le sale secret est qu'après un certain nombre de mises à jour, Gutenberg est devenu un excellent outil pour création de sites Web.

Ci-dessous, je vais vous montrer 5 façons dont un concepteur Web avec une expérience de codage limitée peut tirer parti de Gutenberg pour créer les types de sites Web personnalisés que les entreprises recherchent.

J'ai créé un site Web de voyage avec un certain nombre de fonctionnalités personnalisées à l'aide de ces trois outils:

  • Gutenberg
  • Toolset – Ses nouveaux Toolset Blocks vous permettent d'ajouter des fonctionnalités personnalisées à vos sites Web, notamment des types de publication personnalisés, une recherche et du contenu dynamique.
  • GeneratePress – Un thème léger et rapide qui est facile à utiliser pour les débutants.
image3 "width =" 1856 "height =" 1252 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image3-300x202.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image3-768x518.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image3-1024x691.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Je vais maintenant vous dévoiler un secret. Je ne suis pas développeur. En fait, j'ai une expérience de codage limitée. Pourtant, j'ai pu utiliser Gutenberg pour créer un site Web professionnel avec un certain nombre de fonctionnalités dont les sites Web personnalisés auraient besoin. Ci-dessous, je vais en parcourir cinq.</p>
<p class=

1. Vous pouvez créer du contenu dynamique

Un avantage qu'il a sur les constructeurs de pages est que Gutenberg est livré avec un certain nombre d'extensions de blocs pour améliorer vos sites Web. L'un d'eux est Toolset qui offre des capacités de contenu dynamique.

Le contenu dynamique signifie que vous pouvez créer un élément (comme une image) qui tirera le contenu correct de la base de données. Ainsi, lorsque vous créez une liste de publications, il vous suffit d'ajouter une seule fois chaque bloc pour chaque élément, mais ce bloc affichera un contenu différent pour chaque publication.

Par exemple, j'ai créé une liste de publications sur les visites guidées – j'expliquerai plus tard comment vous pouvez le faire avec Gutenberg. Avez-vous remarqué quelque chose d'étrange dans les titres ci-dessous?

image9 "width =" 1856 "height =" 1202 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357065_208_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image9-300x194.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image9-768x497.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image9-1024x663.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Le titre est exactement le même pour chacune de mes tournées. C'est parce que les titres sont statiques, à l'opposé de dynamiques. Cela signifie que lorsque j'ajoute mes blocs, quel que soit le texte que j'entre dans l'en-tête sera affiché pour chacun des articles. Cependant, quand il est dynamique, vous verrez le bon cap à chaque tour.</p>
<div class=Pour illustrer, voici mon article sur la visite de la Cisjordanie en arrière-plan. Vous pouvez voir le titre du message en haut.
image21 "width =" 1856 "height =" 1227 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_135_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image21-300x198.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image21-768x508.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image21-1024x677.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Je veux afficher ce billet de tour avec le titre correct dans ma liste de contenu. Tout ce que je dois faire grâce à Gutenberg et Toolset est le suivant:</p>
<ol>
<li>Sélectionnez le bloc de titre de Toolset – contrairement aux blocs Gutenberg normaux, Toolset vous permet de rendre votre contenu dynamique;</li>
<li>Sélectionnez l'option dynamique;</li>
<li>Choisissez la source de votre rubrique;</li>
<li>Confirmez que l'en-tête est correct.</li>
</ol>
<div class=image7 "width =" 1856 "height =" 1221 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_295_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image7-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image7-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image7-1024x674.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Vous pouvez créer du contenu dynamique pour un certain nombre d'autres blocs disponibles sur Gutenberg, y compris des images, des champs personnalisés et le lien pour les boutons.</p>
<p class=

2. Affichez des listes de contenu personnalisées

Sur un site Web personnalisé, il y aura des moments où vous voudrez lister votre contenu à partir d'un type de publication particulier sur différentes parties de votre site Web. Par exemple, une liste de propriétés à vendre sur votre page d'accueil immobilière.

image13 "width =" 1856 "height =" 1222 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_995_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image13-300x198.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image13-768x506.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image13-1024x674.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Chacune de ces propriétés utilise la même disposition, affichant les mêmes informations telles que le prix, le nombre de chambres et le nombre de salles de bain de la même manière. Ces informations sont ajoutées à l'aide de champs personnalisés qui sont des informations que vous pouvez ajouter au contenu WordPress. Les créateurs de pages ne peuvent pas créer à eux seuls des champs personnalisés. Cependant, vous pouvez les créer en utilisant Gutenberg et ses plugins de blocs.</p>
<p>Ci-dessous pour mon site Web de voyage, j'ai affiché un curseur avec une liste des visites en vedette. La liste comprend un certain nombre de champs personnalisés, y compris le prix, l'évaluation et la durée.</p>
<div class=image8 "width =" 1856 "height =" 1214 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_448_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image8-300x196.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image8-768x502.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image8-1024x670.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>J'ai utilisé Gutenberg et Toolset pour créer les champs personnalisés que vous pouvez voir dans ma liste ci-dessus. Voici tous les champs personnalisés que j'ai créés. J'ai mis en évidence le champ de prix à titre d'exemple.</p>
<div class=image2 "width =" 1856 "height =" 1218 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_117_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image2-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image2-768x504.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image2-1024x672.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Sur le back-end, je peux utiliser le bloc View de Toolset pour créer une liste de publications. Je peux choisir les articles que je veux afficher et comment je veux les afficher.</p>
<p>Par exemple, vous pouvez voir ci-dessous que je peux sélectionner le contenu que je souhaite afficher.</p>
<div class=image5 "width =" 1856 "height =" 1218 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_822_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image5-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image5-768x504.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image5-1024x672.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Je peux également décider comment je souhaite afficher ma liste, que ce soit sous forme de grille, de liste ordonnée, non formatée ou bien plus encore.</p>
<div class=image10 "width =" 1856 "height =" 1220 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_549_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image10-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image10-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image10-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Je peux maintenant sélectionner les champs que je souhaite afficher. Beaucoup de ces champs seront les champs personnalisés que j'ai créés précédemment. Chacune de mes visites affichera les champs dans la même disposition. Encore une fois, j'ai mis en évidence le champ personnalisé des prix ci-dessous. Pour chaque champ, je crée un bloc, puis je choisis la source du contenu (comme le prix) dans la barre latérale droite.</p>
<div class=image17 "width =" 1856 "height =" 1220 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_578_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image17-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image17-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image17-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Une fois que j'ai arrangé la mise en page de mes publications, je peux décider exactement quelles publications afficher et dans quel ordre. En utilisant Gutenberg et Toolset, je peux sélectionner:</p>
<ul>
<li>L'ordre dans lequel j'affiche les articles tels que le dernier article de blog;</li>
<li>Le nombre de messages que j'affiche;</li>
<li>Si je veux un filtre sur mes messages, par exemple n'afficher que les visites guidées qui coûtent moins qu'un certain montant.</li>
</ul>
<p>J'ai ajouté un filtre pour afficher uniquement les visites en vedette. Dans le cadre de mes champs personnalisés, j'ai créé un champ pour les «Visites en vedette» sur lequel vous pouvez cliquer pour chaque message sur le back-end.</p>
<div class=image16 "width =" 1856 "height =" 1222 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_477_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image16-300x198.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image16-768x506.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image16-1024x674.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Je peux utiliser Gutenberg et Toolset pour créer un filtre à l'aide de la barre latérale de droite qui indique à ma liste de contenu d'afficher uniquement les messages de visites qui sont présentés.</p>
<div class=image1 "width =" 1856 "height =" 1222 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_529_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image1-300x198.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image1-768x506.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image1-1024x674.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Remarquez comment je suis en mesure de personnaliser complètement mes listes de publications sur Gutenberg sans utiliser de codage. Même les concepteurs sans aucune expérience en programmation pourront ajouter une liste de publications à leur site Web.</p>
<p class=

3. Créez un modèle pour votre contenu

Un modèle est votre modèle pour vos types de messages qui fournit à chacun de vos messages une structure. Par exemple, j'ai créé un modèle pour mes types de publication de visites, ce qui signifie que chaque publication de visite aura exactement la même structure lorsque vous la regardez sur le front-end.

image6 "width =" 1856 "height =" 1219 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_244_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image6-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image6-768x504.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image6-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<div class=image12 "width =" 1856 "height =" 1220 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_893_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image12-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image12-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image12-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Comme vous pouvez le voir, les deux publications proviennent du même modèle. Vous le savez car chaque article a la même mise en page, le contenu suivant la même structure.</p>
<p>Tout ce que je devais faire pour créer mon modèle sur mon éditeur Gutenberg était d'insérer mes blocs et d'ajouter du contenu dynamique. Pendant que j'ajoute le contenu, je peux utiliser le menu déroulant en haut de la page pour basculer entre les publications et voir à quoi ressemble le modèle avec un contenu de publication différent.</p>
<div class=image14 "width =" 1856 "height =" 1225 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_329_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image14-300x198.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image14-768x507.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image14-1024x676.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

4. Créez une recherche personnalisée

L'une des fonctionnalités les plus importantes d'un site Web personnalisé est la recherche.

Si vous concevez un site Web d'annuaire qui vend des articles, par exemple, vous souhaiterez faciliter le plus possible la recherche de produits par vos clients potentiels. La meilleure solution consiste à effectuer une recherche contenant des filtres afin qu'ils puissent affiner les résultats et trouver exactement ce qu'ils recherchent.

Ci-dessous, vous pouvez voir la recherche personnalisée que j'ai créée en utilisant Gutenberg et Toolset pour mes visites. Il contient un certain nombre de filtres. L'un des filtres consiste à n'afficher que les visites avec une note de 3 à 5 étoiles.

image4 "width =" 1856 "height =" 1220 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_441_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image4-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image4-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image4-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>La création d'une recherche personnalisée comprend deux étapes. Premièrement, créer la recherche (que vous pouvez voir ci-dessus) et deuxièmement, concevoir les résultats.</p>
<div class=image20 "width =" 1856 "height =" 1218 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_408_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image20-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image20-768x504.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image20-1024x672.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>J'ai créé la recherche à l'aide du bloc Affichage de Toolset sur une nouvelle page. Voici les options pour améliorer le bloc. Je peux sélectionner l'option de recherche, ajouter un tri frontal pour que l'utilisateur puisse trier les résultats lorsqu'ils apparaissent (du prix le plus bas au plus élevé, par exemple) et une pagination pour diviser le contenu en pages.</p>
<div class=image11 "width =" 1856 "height =" 1222 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_188_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image11-300x198.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image11-768x506.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image11-1024x674.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Une fois que j'ai ajouté le bloc, je peux ajouter des filtres supplémentaires tels que le prix maximum. Je peux également inclure une carte et des marqueurs pour afficher les résultats. Encore une fois, grâce à Gutenberg et à ses extensions, je n'ai pas besoin d'utiliser de codage. Je sélectionne simplement les blocs et ajuste les options sur la barre latérale droite.</p>
<div class=image22 "width =" 1856 "height =" 1220 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_823_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image22-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image22-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image22-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Pour les résultats, j'ai ajouté des blocs comme je l'ai fait pour le modèle et la liste de contenu personnalisée.</p>
<div class=image18 "width =" 1856 "height =" 1216 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_753_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image18-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image18-768x503.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image18-1024x671.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Et juste comme ça, j'ai une recherche personnalisée pour mes visites. Je peux maintenant entrer des recherches en utilisant les filtres sur le front-end.</p>
<div class=image19 "width =" 1856 "height =" 1220 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357066_467_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image19-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image19-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image19-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

5. Créer une archive de messages similaires

Une archive permet aux utilisateurs de trouver plus facilement tous les messages que vous avez publiés. Si vous voulez une archive avec des champs standard tels qu'un en-tête et un contenu de publication, un constructeur de page tel qu'Elementor est une excellente option. Cependant, si vous souhaitez inclure des champs personnalisés avec du contenu dynamique, vous devrez utiliser Gutenberg,

J'ai construit une archive pour toutes mes visites sur mon site de voyage. Lorsque quelqu'un clique sur l'archive, il verra chaque visite que j'ai créée. Vous pouvez créer une visite guidée pour n'importe lequel de vos messages.

Tout comme avec la liste de contenu personnalisée, je peux ajouter les blocs pour le contenu et organiser les messages comme je le souhaite.

Je peux également styliser les blocs en changeant la couleur du texte, en ajoutant un remplissage / une marge, en ajoutant la couleur d'arrière-plan, et bien plus encore.
image15 "width =" 1856 "height =" 1220 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591357067_760_5-facons-de-creer-des-sites-Web-sans-code-a.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image15-300x197.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image15-768x505.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image15-1024x673.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Vous n'avez pas besoin d'être un développeur professionnel pour créer des sites Web professionnels

Maintenant que vous avez vu comment même un débutant en codage peut créer des sites Web personnalisés complets, il est temps pour vous de l'essayer vous-même. Voici quelques tutoriels et documentation qui méritent d'être consultés:

  • Si vous êtes nouveau sur Gutenberg, Colorlib propose un bon tutoriel WordPress Gutenberg qui vous expliquera comment créer des blocs.
  • Le plugin que j'ai utilisé avec Gutenberg, Toolset, propose une formation sur la façon dont vous pouvez utiliser les deux outils pour créer des sites d'annuaire WordPress. C'est un excellent moyen de comprendre exactement quelles fonctionnalités vous pouvez créer et comment pour tout type de site Web.
  • Pour se tenir au courant des modifications apportées à Gutenberg, il convient également de garder un œil sur le manuel de l'éditeur de blocs.

Gutenberg en est encore à ses balbutiements et est loin du produit fini. Mais cela ne signifie pas que cela ne peut pas révolutionner les contrats de construction de sites Web que vous pouvez prendre. Si vous profitez de son interface utilisateur visuelle et bloque les plugins, vous pourrez créer des sites Web personnalisés que vous n'auriez jamais imaginés auparavant.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *