domingo, 30 Ago 2026

Ressources et outils exclusifs pour les experts en conception et développement web

Explorer
BiblioWeb

Biblioweb.es

Tout sur la technologie web

  • Accueil
  • Catégories
    • Développement Web et Plugins
    • IA & Automatisation web
    • Cybersécurité et Sécurité Web
    • Plugins WordPress
    • Résolution d’erreurs web
    • Hébergement & Performance Web
  • WordPress
    • Todo sobre WordPress
    • Plugins WordPress
    • Développement Web et Plugins
    • IA y Automatización web
    • WooCommerce
    • Hosting y Rendimiento Web
    • Cybersécurité et Sécurité Web
    • Solución de errores web
    • Tiendas online y Funnels
  • À propos des plugins
    • Yoast Seo
    • Woocommerce
    • Rank Math SEO
    • Moteur IA
    • WP Rocket
    • WPCode
    • WP Translate Master
    • CartBounty
    • WP SEO Pro
  • Outils
    • Générateur de mots de passe
    • Générateur de code QR
    • Compteur de mots
    • Formateur JSON
    • Compresor de Vídeo para Web
    • Generador de Firmas de Email
    • Convertisseur d’Images en WebP
    • Vérificateur d’Adresses E-mail
  • Bibliothèque de plugins
  • Español
  • English
  • 🇨🇳 中文(简体)
  • Français ✓
  • Deutsch
  • Italiano
Historique
  • WordPress
  • Plugins WordPress
  • Créer une page web
  • Woocommerce
  • Astuces WordPress
  • Voir tout
BiblioWebBiblioWeb
Ajuster la taille de la policeAa
  • Historique des Actualités
Rechercher
  • Accueil
  • Catégories
    • Développement Web et Plugins
    • IA & Automatisation web
    • Cybersécurité et Sécurité Web
    • Plugins WordPress
    • Woocommerce
    • Hébergement & Performance Web
    • Résolution de problèmes et erreurs web
    • Boutiques en ligne & Entonnoirs de Vente (Funnels)
  • WordPress
    • Todo sobre WordPress
    • Plugins WordPress
    • Développement Web et Plugins
    • IA y Automatización web
    • WooCommerce
    • Hosting y Rendimiento Web
    • Cybersécurité et Sécurité Web
    • Solución de errores web
    • Tiendas online y Funnels
  • À propos des plugins
    • Rank Math SEO
    • Moteur IA
    • WP Rocket
    • WPCode
    • WP Translate Master
    • CartBounty
    • WP SEO Pro
  • Blog
    • Español
    • English
    • 🇨🇳 中文(简体)
    • Français ✓
    • Deutsch
    • Italiano
  • Mon compte
    • Historique des Actualités
  • Outils
    • Générateur de mots de passe
    • Générateur de code QR
    • Compteur de mots
    • Formateur JSON
    • Convertisseur d’Images en WebP
    • Vérificateur d’Adresses E-mail
    • Compresor de Vídeo para Web
    • Generador de Firmas de Email
Have an existing account? Sign In
Suivez-nous
© 2026 BiblioWeb — Todos los derechos reservados.
Page d'accueil » Blog » Guide de l'éditeur de blocs WordPress (Gutenberg)
WordPress

Guide de l'éditeur de blocs WordPress (Gutenberg)

Adrián Alcalá
Last updated: 08/08/2026 21:10
Par Adrián Alcalá
Partager
14 min de lecture
Guide de l'éditeur de blocs Gutenberg
PARTAGER

L' éditeur de blocs Gutenberg est, depuis WordPress 5.0, la manière native de créer du contenu sur la plateforme : chaque paragraphe, image, titre ou bouton est une pièce indépendante (un bloc) que vous pouvez déplacer, configurer et combiner pour mettre en page des pages complètes sans écrire de code ni installer de constructeurs externes. Pour de nombreux utilisateurs, le passage de l'éditeur classique les a déroutés à l'époque, mais la réalité de 2026 est que Gutenberg a mûri pour devenir un outil de mise en page sérieux : colonnes, motifs prédéfinis, blocs réutilisables et un contrôle fin de la typographie, de la couleur et de l'espacement qui rend de nombreux plugins inutiles. Dans ce guide, vous apprendrez à maîtriser l'éditeur de blocs avec aisance : l'interface et ses raccourcis, les blocs essentiels et comment les configurer, la mise en page avec des colonnes et des groupes, les motifs et blocs synchronisés qui multiplient votre productivité, et les astuces utilisées par ceux qui publient quotidiennement pour travailler plus vite qu'avec n'importe quel éditeur classique.

Sommaire
L'interface de l'éditeur de blocs Gutenberg : où se trouve chaque choseLes blocs essentiels et comment en tirer partiMettre en page avec des colonnes, des groupes et des lignesMotifs et blocs synchronisés : arrêtez de vous répéter87. Astuces de productivité au quotidien68. Gutenberg face aux constructeurs visuelsQuestions fréquentesConclusion

L'interface de l'éditeur de blocs Gutenberg : où se trouve chaque chose

Lors de la création d'un nouvel article ou d'une nouvelle page, vous trouvez trois zones principales :

  • Le canevas central, où vous écrivez et voyez le contenu tel qu'il apparaîtra (ou très similaire, selon votre thème).
  • La barre supérieure, avec l'inséreur de blocs (le bouton +), annuler/rétablir, la vue en liste (essentielle dans les compositions complexes), et à droite les boutons d'enregistrement, de prévisualisation et de publication.
  • La barre latérale des réglages, qui alterne entre les réglages du document (catégories, image mise en avant, extrait, URL) et ceux du bloc sélectionné (couleur, typographie, espacement). Elle s'affiche ou se masque avec l'icône de l'engrenage.

De plus, en sélectionnant n'importe quel bloc, une barre d'outils flottante avec ses actions rapides : changer de type, aligner, déplacer vers le haut ou vers le bas, et le menu à trois points avec des options comme dupliquer, copier ou convertir en motif.

La façon la plus rapide de travailler n'est pas la souris, mais le clavier. Écrivez / au début d'une ligne vide suivi du nom du bloc (/imagen, /tabla, /columnas) et vous l'insérerez sans toucher l'inséreur. Autres raccourcis qui méritent une mémoire musculaire :

  • Ctrl + Shift + D: dupliquer le bloc sélectionné.
  • Ctrl + Alt + T: insérer un bloc avant l'actuel.
  • Ctrl + Shift + Alt + M: alterner entre l'éditeur visuel et l'éditeur de code.
  • ## + espace : convertit la ligne en un titre H2 (### pour H3, et ainsi de suite).

Les blocs essentiels et comment en tirer parti

Gutenberg apporte des dizaines de blocs, mais 90 % du travail quotidien se fait avec quelques-uns. Connaître leurs options en profondeur fait la différence :

Paragraphe et Titre

Les deux piliers. Dans la barre latérale, vous pouvez ajuster la taille typographique, la couleur du texte et de l'arrière-plan, et la lettrine. Avec les titres, respectez la hiérarchie SEO : un seul H1 (le titre de l'article), H2 pour les sections et H3 pour les sous-sections. Si vous travaillez le référencement, un plugin SEO vous alertera sur ces détails ; vous avez notre guide pour installer et configurer Yoast SEO dans WordPress si vous ne l'avez pas encore fait.

Vous Pourriez Aussi Aimer

Cómo actualizar WordPress de forma segura (núcleo, tema y sin sustos)
Los mejores recursos para aprender WordPress en español
¡Tu primera web en marcha! 🎉 Cómo instalar WordPress sin estrés y con la confianza de un experto (¡Te lo ponemos fácil!).
¿Quieres saber cómo instalar WordPress como un PRO? 🚀 Guía definitiva para elegir el hosting perfecto (¡y que tu web vuele!)

Image et Galerie

Le bloc Image permet l'alignement (y compris pleine largeur et largeur large si le thème le prend en charge), le lien, le texte alternatif et l'arrondi des coins. Téléchargez toujours des images optimisées : le poids des photos est la cause numéro un des sites web lents, et les convertir d'abord au format moderne avec un convertisseur d'images en WebP réduit la taille jusqu'à 80 % sans perte visible.

Liste, Citation et Tableau

Les listes acceptent l'imbrication et le style numéroté ou ordonné ; les tableaux permettent un en-tête, un pied de page et des cellules à largeur fixe. Pour les contenus comparatifs, un tableau bien utilisé améliore la lisibilité et est récompensé dans les résultats enrichis de Google.

Boutons, Séparateur et Espacement

Le bloc Boutons crée des appels à l'action avec des couleurs, des bordures et des rayons configurables sans CSS. L'Espacement (hauteur réglable en pixels) résout ces espaces verticaux qui nécessitaient auparavant des astuces.

Médias et texte, et Fichier HTML personnalisé

Médias et texte place une image et du texte dans deux colonnes responsives en un clic. Et lorsque vous avez besoin d'intégrer quelque chose d'exotique, le bloc HTML personnalisé accepte n'importe quel code : c'est la soupape de sécurité pour les cas limites.

Mettre en page avec des colonnes, des groupes et des lignes

C'est là que l'éditeur de blocs Gutenberg passe d'éditeur de texte à outil de conception :

Colonnes

Le bloc Colonnes divise la largeur en 2 à 6 colonnes avec des proportions prédéfinies (50/50, 30/70…) ou personnalisées en pourcentage. Dans chaque colonne, vous pouvez insérer n'importe quel bloc, y compris d'autres colonnes. Sur mobile, elles s'empilent automatiquement verticalement.

Groupe

El bloque Grupo envuelve varios bloques en un contenedor con fondo, borde, padding y margen propios: es la forma de crear “cajas” destacadas (un aviso, una oferta, un resumen) sin plugins. Selecciona varios bloques y usa Grouper depuis la barre d'outils.

Ligne et Pile

Variantes du groupe avec disposition horizontale (Ligne) ou verticale (Pile) basées sur flexbox : parfaites pour aligner une icône à côté d'un texte ou une série de logos.

Mérite une mention spéciale le largeur large et la pleine largeur: si tu tema los soporta, los bloques de imagen, cubierta, grupo y columnas pueden extenderse más allá de la columna de texto e incluso ocupar todo el ancho de la pantalla. Es el recurso que da aspecto “de diseño profesional” a una página: alterna secciones a ancho completo con fondo de color y contenido centrado, y tendrás una landing digna sin tocar una línea de CSS.

Un conseil de flux de travail : dans les compositions imbriquées (groupes dans des colonnes dans des groupes), sélectionner le bon bloc avec la souris est frustrant. Ouvrez la vue en liste de la barre supérieure : vous verrez l'arborescence complète des blocs et pourrez sélectionner et faire glisser n'importe quel bloc avec une précision totale.

Motifs et blocs synchronisés : arrêtez de vous répéter

Les deux fonctions qui apportent le plus de productivité à ceux qui publient fréquemment :

Motifs

Un motif est une composition de blocs prédéfinie (un en-tête avec un appel à l'action, une grille de services, une section de questions fréquentes) que vous insérez et personnalisez ensuite. WordPress inclut une bibliothèque officielle et de nombreux thèmes ajoutent les leurs. Vous pouvez également créer les vôtres : sélectionnez les blocs, menu à trois points, Créer un motif. Si un design vous convient une fois, convertissez-le en motif et ne le maquettez plus à partir de zéro.

Blocs synchronisés

Lors de la création d'un motif, vous pouvez le marquer comme synchronisé100. : alors toutes ses copies sont la même entité, et le modifier à un endroit le met à jour sur toutes les pages où il apparaît. C'est l'outil parfait pour les éléments répétés qui changent avec le temps : une boîte d'auteur, une mention légale, un appel à l'action de campagne. Le jour où votre offre change, vous la modifiez une fois et tout le site web est mis à jour.

99. Fonction 98. Qu'est-ce que c'est 97. Quand l'utiliser
96. Motif (non synchronisé) 95. Modèle de blocs qui est copié 94. Designs que vous réutilisez mais personnalisez à chaque utilisation
93. Motif synchronisé 92. Bloc unique partagé entre les pages 91. Éléments identiques sur de nombreuses pages qui doivent être mis à jour simultanément
90. Groupe avec styles 89. Conteneur avec son propre design 88. Boîtes ponctuelles que vous ne répéterez pas

87. Astuces de productivité au quotidien

  1. 86. Écrivez d'abord, mettez en page ensuite. 85. Rédigez tout le contenu en paragraphes et titres, et seulement à la fin ajoutez des images, des colonnes et des boîtes. Mélanger rédaction et design double le temps.
  2. 84. Collez depuis Word ou Google Docs sans crainte. 83. Gutenberg nettoie le format et convertit automatiquement les titres, les listes et les gras en blocs corrects.
  3. 82. Faites glisser les images directement 81. d'un dossier de votre ordinateur vers le canevas : ils sont téléchargés et insérés automatiquement.
  4. 80. Convertit les blocs entre les types. 79. Un paragraphe peut être converti en citation, titre ou liste depuis sa barre d'outils, sans rien réécrire.
  5. Usa “Copiar estilos” y “Pegar estilos” 77. (menu à trois points du bloc) pour répliquer la couleur, la typographie et l'espacement entre les blocs.
  6. 76. Contrôle la longueur du contenu. 75. Pour les articles SEO, il convient de surveiller la longueur totale ; un passage par le 74. compteur de mots et de caractères 73. vous indique instantanément si vous atteignez l'objectif.
  7. 72. Verrouille les blocs critiques. 71. Depuis le menu du bloc, 70. Verrouiller 69. empêche de le déplacer ou de le supprimer par accident : utile sur les sites édités par plusieurs personnes.

68. Gutenberg face aux constructeurs visuels

67. La question inévitable : un constructeur comme Elementor ou Divi est-il toujours nécessaire ? Cela dépend du projet. Gutenberg gagne en vitesse de chargement (il génère un HTML propre, sans couches supplémentaires de CSS et JavaScript), en stabilité à long terme (il fait partie du noyau, pas un plugin qui peut être abandonné) et en rapidité d'édition pour le contenu éditorial. Les constructeurs offrent toujours plus de contrôle de conception au pixel près, des effets visuels avancés et des modèles commerciaux plus spectaculaires.

66. En règle générale : pour les blogs, les médias, la documentation et les sites web d'entreprise avec beaucoup de contenu, Gutenberg est aujourd'hui l'option la plus sensée ; pour les pages de destination très conçues ou les clients qui exigent des effets visuels complexes, un constructeur peut se justifier. Gardez également à l'esprit que le résultat visuel de Gutenberg dépend beaucoup du thème actif : un thème moderne préparé pour les blocs multiplie ses possibilités, et dans notre guide sur 65. comment choisir le thème parfait pour votre site WordPress 64. nous expliquons à quoi faire attention.

Questions fréquentes

63. Puis-je revenir à l'éditeur classique de WordPress ?

62. Oui, le plugin officiel Classic Editor est toujours disponible et maintenu. Mais sauf cas très spécifiques (flux de travail hérités, plugins incompatibles), il est aujourd'hui préférable d'investir cet effort dans l'apprentissage de l'éditeur de blocs : tout le développement présent et futur de WordPress tourne autour de lui.

61. L'éditeur de blocs Gutenberg est-il mauvais pour le SEO ?

60. Au contraire. Il génère un HTML sémantique et léger, favorise les titres hiérarchiques et s'intègre à tous les plugins SEO. Une page mise en page avec des blocs natifs se charge généralement plus rapidement que son équivalent réalisé avec un constructeur visuel, et la vitesse est un facteur de positionnement.

59. Qu'advient-il de mes anciennes publications de l'éditeur classique ?

Se muestran dentro de un “bloque clásico” que conserva su contenido intacto. Puedes dejarlas así indefinidamente o convertirlas a bloques con la opción 57. Convertir en blocs56. , qui sépare automatiquement les paragraphes, les titres et les images. Vérifiez le résultat après la conversion, surtout s'ils utilisaient des shortcodes ou du HTML personnalisé.

55. Ai-je besoin de plugins de blocs supplémentaires ?

54. Pour commencer, non : les blocs natifs couvrent la plupart des besoins. Si vous manquez de blocs spécifiques (accordéons, tableaux de prix, témoignages), des suites comme Spectra ou Stackable les ajoutent. Installez une seule de ces suites, pas plusieurs : chacune charge ses propres ressources et les dupliquer pénalise les performances.

Conclusion

53. L'éditeur de blocs Gutenberg a parcouru un long chemin depuis ses débuts : ce qui a commencé comme un éditeur controversé est aujourd'hui un outil de mise en page complet, rapide et parfaitement intégré à WordPress. La courbe d'apprentissage réelle est courte : interface, une demi-douzaine de blocs essentiels, colonnes et groupes pour la mise en page, et motifs pour ne pas répéter le travail. Avec ces bases et les raccourcis clavier, publier du contenu bien conçu devient une question de minutes. Notre conseil est pratique : dans votre prochaine publication, essayez de résoudre avec des blocs natifs ce que vous faisiez auparavant avec des shortcodes ou des plugins de mise en page. Il est fort probable que vous découvrirez que l'éditeur fourni par WordPress était l'outil que vous cherchiez depuis longtemps.

Partager cet article
E-mail Copier le lien Imprimer
ParAdrián Alcalá
Follow:
Adrián Alcalá es desarrollador WordPress y consultor SEO, autor del plugin WP Translate y creador de BiblioWeb. Desde aquí comparte guías, tutoriales y herramientas gratuitas para quienes crean, optimizan y posicionan páginas web. Lleva años ayudando a negocios de toda España a sacar el máximo partido a WordPress, y todo lo que publica está probado en proyectos reales.
Article précédent Erreur 500 dans WordPress : causes et solutions 3. Erreur 500 dans WordPress : qu'est-ce que c'est et comment la résoudre
Article Suivant Qu'est-ce qu'un thème enfant WordPress et comment le créer Qu'est-ce qu'un thème enfant dans WordPress et comment le créer
como instalar wordpress - ¡Adiós al miedo! Cómo instalar WordPress en tu propio servidor local (¡Perfecto para experimentar s
¡Adiós al miedo! Cómo instalar WordPress en tu propio servidor local (¡Perfecto para experimentar sin riesgos y crear tu #CrearPaginaWeb!)
WordPress
Pourquoi WordPress est gratuit
¿Por qué WordPress es gratis? Así se financia el proyecto
WordPress
La communauté WordPress et comment participer
La comunidad WordPress: WordCamps, meetups y cómo participar
WordPress
Outils internes pour les agences web
Herramientas internas para agencias web: cuándo y cómo crearlas
Développement Web et Plugins
- Publicité -

Vous aimerez aussi

Sauvegarde WordPress : guide complet
WordPress

29. Comment faire une sauvegarde WordPress

08/08/2026
Instalar WordPress - ¿Instalar WordPress con IA? Descubre el FUTURO de y monta tu sitio en tiempo récord.
WordPress

Comment installer WordPress avec l'IA étape par étape

08/08/2026
Installer WordPress en local avec XAMPP ou Local WP
WordPress

Cómo instalar WordPress en local (XAMPP, Local WP y más)

08/08/2026
Comment mettre WordPress en mode maintenance
WordPress

Comment mettre WordPress en mode maintenance

08/08/2026
Afficher plus
  • Plus d'actualités :
  • WordPress
  • Installer
  • Guide
  • CréerPageWeb
  • comment installer WordPress
  • Créer
  • installation
  • futur
  • Découvrez
  • Yoast
  • Extensions
  • astuces
  • installation wordpress
  • Adieu
  • Passerelles
  • page
  • Créer une page web
  • truco
  • Error
  • Construcción
BiblioWeb

Biblioweb.es

Actualité de la technologie web

Informations auxquelles vous pouvez faire confiance : guías y soluciones prácticas de tecnología web — WordPress, plugins, ciberseguridad, hosting, rendimiento y solución de errores.

Rss

Enlaces de interés

  • Sobre nosotros
  • Contacto
  • Herramientas gratuitas
  • Pluginteca

Abonnez-vous maintenant pour recevoir des mises à jour en temps réel sur les dernières nouvelles !

Légal

  • Mentions légales
  • Conditions générales
  • Politique de cookies
  • Politique de confidentialité

Dernières nouveautés

como instalar wordpress - ¡Tu primera web en marcha! 🎉 Cómo instalar WordPress sin estrés y con la confianza de un experto (

¡Tu primera web en marcha! 🎉 Cómo instalar WordPress sin estrés y con la confianza de un experto (¡Te lo ponemos fácil!).

25/08/2026
Continuer la lecture
como instalar wordpress - ¿Quieres saber cómo instalar WordPress como un PRO? 🚀 Guía definitiva para elegir el hosting perfe

¿Quieres saber cómo instalar WordPress como un PRO? 🚀 Guía definitiva para elegir el hosting perfecto (¡y que tu web vuele!)

24/08/2026
Continuer la lecture

© 2026 BiblioWeb — Todos los derechos reservados.

Gestionar consentimiento
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios (no) personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o los ID's únicos en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Always active
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Préférences
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
  • Manage options
  • Manage services
  • Manage {vendor_count} vendors
  • Read more about these purposes
Ver preferencias
  • {title}
  • {title}
  • {title}
Welcome to Foxiz
Username or Email Address
Password

Lost your password?