Comment utiliser l'éditeur de blocs Gutenberg

Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtriser WordPress 6 pour la création de site web
Revoir le teaser Je m'abonne
3,0
Transcription

Cette leçon fait partie de la formation
59,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,0
Cette leçon fait partie de la formation
59,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Notre objectif est de vous donner les compétences nécessaires pour devenir un maître de WordPress. Pour ce faire, nous explorerons ensemble l'interface conviviale de WordPress, vous apprendrez à créer des articles et des pages, à démystifier les nuances entre les thèmes, et bien plus encore. De l'installation initiale à la personnalisation avancée, en passant par les aspects cruciaux de la sécurité et du référencement, chaque étape sera soigneusement détaillée.

Dans cette formation captivante, nous vous invitons à plonger au cœur de l'univers de WordPress, le système de gestion de contenu (CMS) incontournable qui a conquis des millions de créateurs de sites à travers le globe.

Peu importe que vous soyez un blogueur passionné, un entrepreneur ambitieux, un artiste créatif ou le propriétaire d'une boutique en ligne florissante, WordPress vous offre une solution puissante et incroyablement flexible pour concrétiser vos projets en ligne.

Notre formation vous guidera à travers les multiples facettes de ce logiciel exceptionnel et vous montrera comment il peut répondre spécifiquement à vos besoins, tout en propulsant votre présence sur la toile.

Rejoignez-nous dans cette aventure passionnante et enrichissante où nous explorerons ensemble le monde captivant de la création de sites web. Grâce à notre formation, vous ne serez pas seulement spectateur de cette aventure, mais vous deviendrez le créateur éclairé de votre propre présence en ligne.

N'attendez plus, embarquez dès aujourd'hui dans le monde passionnant de la maîtrise de WordPress et apprenez à façonner vos idées en sites web professionnels et fonctionnels.

Voir plus
nous avons vu préalablement du coup comment ajouter des posts, comment ajouter des articles, donc on va passer un petit peu plus de temps maintenant sur le Gutenberg qui peut être vraiment très puissant quand on sait l'utiliser. Donc on va créer une nouvelle page qui va s'appeler landing page 2 et on va commencer à utiliser du coup Gutenberg un peu plus en profondeur. Donc on a vu qu'il y avait beaucoup de types de blocs, donc on va passer sur les principaux. Donc les paragraphes on a vu, c'est du texte tout simplement que l'on peut écrire, donc ça va être des blocs de paragraphes. Donc il faut savoir que par exemple si on écrit du texte, si on va à la ligne, ça nous crée un deuxième bloc de paragraphes. Donc ça c'est un bloc, ça c'est un bloc, d'accord. Hop, on peut les retirer comme on a déjà dit en faisant les trois petits points en retirer. Donc si on retourne là, donc là on a les paragraphes, là on a les titres. Donc ça, ça permet vraiment de faire un titre tout simplement. Si on le met là, on va pouvoir choisir notamment si c'est du titre H2, H3, H4, H5, H6. Alors vous allez me dire, bah oui, mais je ne sais pas c'est quoi les titres H2, H3. Tout simplement, il faut savoir que chaque page a un seul titre H1, c'est vraiment important pour le SEO. C'est son gros titre, d'accord. Donc par exemple si une page d'accueil, c'est une page d'accueil, le gros titre c'est accueil. Si une page contact, c'est contact. La page H1, c'est contact. Ensuite le H2, ça va être le premier sous-titre. Donc c'est-à-dire que pour hiérarchiser, le titre là, on va mettre H2. Ensuite quand on va ajouter un titre, soit c'est un H2, soit c'est un H3. C'est-à-dire que si ce n'est pas un sous-bloc de H2, ça sera un H2. Si c'est par contre un sous-bloc de H2, ça sera du coup un H3. En fait finalement, c'est comme les sous-titres dans les livres, etc. Donc on a le titre principal, après on a les sous-titres, et les sous-sous-titres, etc. Plus on diminue, moins c'est un titre qui a d'importance. Donc dans un H2, on met un H3, dans un H3, on met un H4, etc. Mais dans un H2, on peut très bien avoir plusieurs H3, et pas avoir de H4. Donc voilà un petit peu l'organisation des H1, H2, H3. Donc on n'oublie pas, il n'y a qu'un seul H1, et ça c'est vraiment primordial. Donc il y a les paragraphes, il y a les titres, il y a les listes, tout simplement les bullet points. Donc ça c'est très pratique, par exemple, pour mettre mes compétences, et vous mettez une petite liste de vos compétences. Donc après, on supprime notre bloc. Donc là, en retirant la liste, il faut vraiment sélectionner tout le bloc pour pouvoir retirer la liste. Ensuite, nous avons les citations. Donc si vous souhaitez citer quelqu'un, tout simplement, ça va mettre un petit bloc comme ça. Donc là, on met la citation, et ici, on met la source. Ensuite, nous avons, ça on s'en fiche un petit peu, c'est l'éditeur classique de WordPress, ça on ne passera pas dessus. Vous avez le code. Alors ça, ça peut être pas mal, c'est tout simplement, si vous êtes un petit peu dans le développement, etc. Pour afficher un bout de code, c'est ce bloc-là qui va être utilisé. Tout simplement, ça va faire un bloc spécial avec une écriture spéciale. Le pré-formaté, on ne va pas passer dessus. Le tableau, ça peut toujours être utile, ça crée un tableau standard dans Excel. Ensuite, on a les images, la galerie d'images qui peut être plutôt sympa. Donc là, on va aller chercher plusieurs images. Et voilà, ça va nous mettre une galerie. Forcément, à chaque fois, comme je vous ai dit, on peut, bien sûr, modifier pas mal de choses, donc notamment le style, les bordures, etc. Et après, on a aussi plusieurs petites fonctionnalités qui sont ici. On ne passera pas dessus pour la galerie, mais en tout cas, ça peut être sympa et on peut faire pas mal de choses avec les galeries. Donc, on a les images, les galeries. On peut mettre, bien sûr, de l'audio. Il suffit tout simplement d'aller chercher une URL audio ou de mettre un fichier MP4. Les bannières, ça reste une bannière standard. On peut mettre des fichiers à télécharger. Donc par exemple, si vous avez un fichier, je ne sais pas, un fichier... Donc là, je n'en ai pas, mais un fichier PDF, etc. Si on le met, on va pouvoir ensuite, après, avoir un petit bouton de télécharger pour télécharger ce fichier. Ça peut être très utile, par exemple, si vous avez des fichiers à faire télécharger aux gens, par exemple, par un catalogue PDF, etc. Ensuite, nous avons forcément les boutons qui sont très utiles. Les colonnes, comme nous avons vu sur les pages, puisque les colonnes, du coup, ça va nous permettre d'aligner plusieurs éléments. Les groupes, c'est tout simplement, on va pouvoir mettre plusieurs éléments ensemble et ça va faire un groupe. Donc, c'est-à-dire qu'on pourra mettre un fond d'écran, etc. à ce groupe-là. Bon, ça, ça reste pareil. Ça reste des éléments pour formater un petit peu. Le séparateur, c'est une ligne qui va être ici. Ça peut être une petite ligne, mais on peut très bien mettre une ligne large. Et on va pouvoir aussi la customiser, c'est-à-dire choisir, en fait, finalement, quelle couleur on veut qu'elle soit. Voilà, comme ceci. Ça peut être sympa aussi pour faire une petite hiérarchie dans vos pages, etc. Faire bien un bloc séparateur. Ensuite, on a tout ce qui est widgets. Donc, les widgets, souvent, on les met plutôt dans les sidebars, mais ça peut être quand même utile. Tout à l'heure, on a vu Derniers articles. Notamment, Derniers articles, vous avez vu que ça faisait juste, finalement, les titres des articles. C'est pour ça que ça, c'est plutôt dans les sidebars. C'est plutôt des petites choses, par exemple, les icônes des réseaux sociaux et tout, qu'on met dans les bars sur le côté. Ensuite, on a tout ce qui touche à notre thème. Donc, le menu, forcément. Donc, forcément, celle-là, ça peut être très utile d'avoir notre menu. Néanmoins, comme il est dans notre header, donc on ne va pas le rajouter ici. On va avoir aussi tout ce qui est, du coup, le logo, le titre du site, la description du site. Et enfin, là, les publications. Là, c'est un peu mieux parce que, tout simplement, si vous cliquez dessus, on va choisir. Et là, en fait, on va voir différents styles pour voir comment, tout simplement, on souhaite que cela s'affiche. Par exemple, ici, on peut voir que c'est un peu plus sympa, quand même, le visuel que tout à l'heure. Donc, voilà. Donc là, on a encore pas mal de choses. Donc, les publications, les produits, on peut mettre le petit avatar. Il y a vraiment beaucoup de choses autour des publications et des produits, ici. Ensuite, on a tout ce qui est contenu embarqué. Donc, par exemple, si on veut mettre une vidéo YouTube, si on veut mettre un tweet, si on veut mettre... Voilà. Tout ce qui est un petit peu réseau, sociaux et tout, ça va être ici. Ensuite, on peut faire une fac. Donc, tout simplement, une question-réponse. Et ensuite, il y a tout ce qui touche à WooCommerce. Donc ça, on verra un petit peu plus tard, quand vous aurez fait la partie WooCommerce. Mais par exemple, rechercher un produit, afficher tous les produits, afficher tous les avis, voir le compte client, les différents filtres, etc. Donc, vous avez vu, c'est quand même très complet, les blocs, puisqu'on peut faire finalement beaucoup de choses avec les blocs. En sachant qu'il y a énormément de plugins qui existent. Et les plugins rajoutent aussi des blocs. Par exemple, à Gutenberg, je ne sais pas, par exemple, vous avez fait un super slider. Eh bien, on pourra rajouter soit directement le slider, puisque ça ajoute un bloc. Soit, vous cherchez... Code, voilà. Qui est le code court. Et en fait, quand c'est comme ça, par exemple, on a fait notre slider, on l'a publié. Le plugin va nous donner un code court. Je suis à l'heure de mettre le code court ici. Vous tapez le code court qu'on vous a donné. Et ça viendra mettre le slider à la place de votre code. Donc ça, c'est vraiment très puissant. Il y a énormément de plugins qui fonctionnent avec les codes courts. Donc, on a vu les blocs. Mais ici, vous pouvez voir qu'il y a Composition et Médias. Alors, Médias, c'est tout simplement, ça va afficher votre bibliothèque de médias ici. Vous allez pouvoir directement les placer ici. Ça, ça reste utile. Mais bon, ce n'est pas le plus utile. Mais par contre, Composition, ça va être très sympa. C'est en fait des templates déjà préfaits de sections. Donc, dans Mise en avant, vous pouvez voir que, par exemple, ici, on peut mettre directement une sorte de section plein écran, qui peut être assez sympa. Ensuite, on va en ajouter une autre. Donc, on va aller surtout parcourir Composition. Et ici, Mise en avant, vous avez vu qu'il y avait trois colonnes avec du texte. Donc, on peut mettre en dessous les trois colonnes avec le texte. Vous voyez, ça rentre tout de suite très bien. Parce qu'en fait, c'est vraiment des sections faites pour ça. C'est-à-dire que c'est des sections préfaites qui peuvent vous être très utiles. Donc là, on a tout ce qui est mis en avant. Donc, c'est des sections assez visuelles. Par exemple, celle-là, elle est assez sympa. Si on va dessus, vous voyez, ça donne un effet assez sympa. Et on peut modifier, bien sûr, les éléments. Donc là, les textes. Là, c'est du fond d'écran. C'est une image, tout simplement. Ici aussi, c'est une image en fond d'écran avec du texte par-dessus. Et après, on va avoir plusieurs types de compositions. Donc ça, c'est tout ce qui est mis en avant. Donc, ça va être plutôt du texte avec des images. Ensuite, on a les publications. Donc, ça va être plein de formats différents de publications. On va avoir aussi du formatage de texte. Donc, des choses affichées d'une manière assez sympa. Donc, que des textes affichés d'une manière assez sympa. Des galeries d'images. C'est pareil. Des appels à l'action. Donc, ça peut être justement les plugins. Les plugins de réseaux sociaux, etc. Ou justement, un blog, ben voilà, prévoir une visite. Donc là, si on va dessus, vous voyez, ça fait un blog assez sympa pour contacter nous. On a des bannières. On a des en-têtes. On a aussi les pieds de page. Les pieds de page, tout simplement, on va à la fin de notre page. On le met et vous voyez, tout de suite, on a justement les followers, les différentes pages, etc. Qu'on peut bien sûr tout modifier. Donc du coup, ça, c'est entièrement modifiable. Mais par contre, ça nous permet de construire des pages très rapidement. Donc, si vous n'êtes pas très à l'aise avec l'éditeur, vous avez encore du mal à prendre un petit peu en main, ben les compositions sont vraiment très utiles puisque finalement, assez rapidement, vous pouvez avoir un rendu assez sympa. Enfin, il y a tout ce qui est témoignages. Donc, les témoignages clients, par exemple, ça peut permettre de rassurer les clients qui viennent sur votre site, de mettre des commentaires. Idéalement, c'est mieux quand c'est des vrais commentaires, bien entendu. Et enfin, on a la partie où vous commerce, tout simplement, pour afficher, par exemple, des bannières promotionnelles, pour afficher les produits, etc. On peut aussi mettre, par exemple, une bannière de newsletter pour demander aux personnes de rentrer leurs e-mails. Donc là, on a à peu près fait le tour des blocs et des compositions. Donc, on n'oublie pas qu'on a mis un bloc. Après, tout ce qui est style, ça va être vraiment ici, sur le côté. Néanmoins, par exemple, ici, si on veut mettre... Alors, là, par exemple, tout est en gras. Donc, on peut enlever le gras ici. On peut faire pas mal de choses. On peut aligner le texte, etc. Il y a vraiment pas mal de petites choses qui peuvent être faites directement ici. Néanmoins, le plus gros est vraiment là. Donc, par exemple, la taille du texte. En sachant qu'à chaque fois, on peut régler vraiment précisément l'ASML pour que ça soit plus simple pour les personnes. Mais ici, on va pouvoir mettre, par exemple, 25px. Pareil, sur les dimensions, ça va être ici. Tout ce qui est marge interne, marge externe. Les marges internes, c'est tout simplement... Lorsqu'on est dans un bloc, on est dans le bloc. Les marges internes, ça va être tout ce qui va être ici. Donc, par exemple, on ne veut pas que le contenu s'approche trop près du bord ici. Et les marges externes, ça va être plutôt tout ce qui est ici. C'est-à-dire, par exemple, faire baisser ce bloc-là et mettre les marges externes soit sur le bloc noir en haut, soit sur le bloc jaune en bas. Donc, tout ce qui est style, ça va être vraiment ici. Donc, tout ce qui est arrière-plan, couleur, taille de texte, marge, etc. Si on est sur les boutons, c'est pareil. Ça va être sur le style du bouton, l'arrière-plan, la taille, la marge interne. Là, vous pouvez voir, on peut vraiment jouer sur les marges. Mais notamment, là, vous avez l'impression, bah oui, ça met de la marge à gauche, à droite, en haut ou en bas. On peut aussi le différencier en mettant ici. On en a en haut et sur les côtés. Vous voyez, c'est totalement différent, bien entendu. Donc, voilà. On a fait à peu près le tour de Gutenberg. J'espère que ça vous a aidé et que vous pourrez maintenant créer des pages et des articles beaucoup plus sympas.

Programme détaillé

Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
1 commentaire
3,0
1 vote
5
4
3
2
1
sophie_23
Il y a 3 months
Commentaire
Formation de niveau débutant mais sans méthodologie réelle pour créer un site. Bons conseils sur les extensions utiles.

Débit trop rapide, explications manquantes (Swamp ne fonctionne pas). vocabulaire limité, pas de méthodologie mais une simple revue des menus, verbiage technique non expliqué (mais paraphrasé), bruits gênants sur certaines vidéos, au moins une des vidéos était coupée avant la fin.
Merci tout de même pour la liste des extensions utiles.
Nos dernières formations WordPress

éditeur de vidéos pédagogiques

Des supports pédagogiques en vidéo, produits avec les meilleurs experts. Dans nos studios à Paris, Lyon ou Montpellier. Vous souhaitez travailler avec nous ?
image-micro