… O cómo sentirte diseñador web sin tener ni papa.
ACTUALIZACIÓN
Si quieres ver la versión 2022 y, por lo tanto, más actualizada de este artículo y aprender a sacarle aún más partido al editor de bloques WordPress, echa un ojo aquí.
FIN DE LA ACTUALIZACIÓN 😉
¿Sigues evitando a Gutenberg como si fuera el mismísimo Anticristo? ¿O lo usas a regañadientes echando pestes de Matt Mullenweg cada vez que añades contenido en tu web?
En este artículo + vídeos guiados vas a aprender:
- Que puedes trabajar con el nuevo editor tal y como lo hacías con el clásico (igual, igual, en serio).
- Instrucciones paso a paso para conseguir mejores resultados que antes gracias a los bloques nativos de WordPress.
- Cómo ampliar las posibilidades de Gutenberg para sentirte diseñador o desarrollador por un día sin tener ni idea de código.
Sin trampa ni cartón.
De una usuaria básica de WordPress (puesto que yo soy copywriter, no desarrolladora web ni diseñadora gráfica) para cualquiera que tenga ganas de fliparse un poco con el nuevo editor de bloques. 😉
Presentación completa «Gutenberg para Dummies»
Aquí tienes la grabación de la charla que di en la Meetup WordPress Terrassa sobre Gutenberg para principiantes y usuarios:
Ojo, que son 57 minutos…
¿Prefieres leer? Aquí tienes el contenido de la charla resumido en bloques:
Ventajas del editor de bloques vs editor clásico de WordPress
¿Para qué usabas el editor clásico de WordPress?
Lo más probable es que tu respuesta sea: «Para crear entradas de blog».
La estructura del contenido que podías añadir era muy sencilla: texto, imágenes, vídeos y poco más.
Pero ahora, ¿para qué puedes utilizar el nuevo editor?
- Entradas de blog
- Entradas de CPTs
- Páginas estáticas
- Landing
- Contacto
- Sobre mí/nosotros
- Home
- …
En definitiva, con el nuevo editor de bloques puedes crear tu web al completo, ya que la cantidad (y versatilidad) de los bloques que pone a tu alcance te permite «diseñar o dar estilos» a una estructura con un atractivo visual muy superior al que conseguías antes.
¡Ojo! Para que el resultado sea profesional necesitas tener conocimientos de diseño. No es lo mismo tener las herramientas que saber usarlas.
Por esta razón, la primera parte de esta guía de Gutenberg para principiantes está enfocada a la creación de entradas de blog.
¿Empezamos?
Cómo usar el editor de bloques nativo de WordPress
Gutenberg cuenta con todos los bloques que normalmente necesitas para crear una entrada en tu blog.
Lo único que te falta es aprender a manejarlos. Como cuando aprendes a montar en bici, pero mucho más fácil. 😉
BLOQUES BÁSICOS
- Títulos
- Párrafos
- Listas
- Imágenes
- Vídeos
- Columnas
- Espaciadores
- Separadores
- Citas
- Otros artículos
- Botones / CTAs
- Cabeceras
ACCIONES
- Añadir
- Borrar
- Modificar
- Mover
- Arrastrar
- Incluir
- Agrupar
Y lo más sencillo es que te familiarices con ellos poco a poco, conforme los vas necesitando.
Así que… ¡empezamos!
1. Añadir, cambiar y eliminar bloques
En este vídeo tienes cómo introducir encabezados, párrafos y listados:
Cuando creas una entrada o página con el editor de WordPress, el primer bloque ya está creado justo debajo del título.
Si comienzas a escribir en él, tomará por defecto el formato de párrafo.
Pero, ¿y si quieres otro tipo?
Existen 3 formas de cambiar de bloque, sea el que sea:
- Pulsando la tecla «intro» se creará un bloque de párrafo, pero si necesitas otro, solo tienes que escribir dentro de él «/» (barra inclinada hacia la derecha) seguida por el nombre del bloque que deseas. Fíjate que incluso si empiezas a escribir «título», el editor te sugiere el bloque correcto «encabezado», ya que son sinónimos.
- Otra forma de elegir el tipo de bloque es pinchar en el icono superior que lo identifica y convertir a bloques similares. En este caso el editor solo sugiere bloques que puedan contener la misma información que el formato actual.
- Por último, puedes pinchar sobre el icono «+» que aparece a la izquierda del bloque (o encima o debajo de él, para añadir uno nuevo) y navegar por todas las opciones hasta encontrar la tuya. Aquí también puedes apoyarte en el buscador superior que aparece para encontrarlo más rápido.
2. Agregar y eliminar bloques
Aquí puedes ver varias formas de añadir y eliminar bloques:
- Añadir usando los diferentes iconos «+»
- Izquierda.
- Arriba y abajo.
- En la barra superior del documento.
- Desde el menú del propio bloque.
- Pulsando la tecla intro.
- Eliminar:
- Desde el menú de cada bloque.
- En grupo.
- Borrando con la tecla de retroceso.
3. Añadir y modificar imágenes
Con el nuevo editor de bloques puedes elegir si deseas visualizar las imágenes en:
- Ancho normal
- Ancho ampliado
- Ancho completo
Además puedes cambiar el tamaño de forma manual o el formato final: circular, con esquinas redondeadas…
4. Agregar vídeos o incrustados
En el nuevo editor tienes la posibilidad de añadir enlaces incrustados específicos:
- Vídeos de YouTube
- Vimeo
- WordPressTV
- Formularios
- Redes Sociales
- …
¿No encuentras el que buscas?
Entonces añade un bloque de incrustado general y agrega tu enlace.
Si existía y no lo habías encontrado, se transformará solo. 😉
5. Crear columnas y arrastrar bloques a su interior
¿Columnas?
No es un elemento esencial dentro de una entrada, pero ¡ey! Ahora que tienes la opción, ¿por qué no aprovecharla?
Aquí tienes una muestra de cómo insertarlas e introducir bloques dentro de ellas, ya sea creando o arrastrándolos a su interior:
Las columnas también pueden adquirir ese aspecto de ancho normal, ampliado o completo.
¿Una de las columnas es mucho más alta que la otra?
Pues la centras y ya lo tienes.
6. Añadir espaciadores y separadores
Los espaciadores y separadores pueden resultar muy útiles para crear espacios en una entrada de blog o separar secciones:
Solo tienes que elegir el tamaño del espaciador o el formato y color del separador, y ya lo tienes. 😉
7. Introducir citas
Aunque puedes añadir una cita seleccionando el bloque oportuno, también puedes crear una a partir de uno o varios párrafos:
Tienes a tu disposición 2 formatos, bastante simples, uno con un tamaño de letra superior al otro.
¿Necesitas un estilo de cita más sofisticado?
Entonces tendrás que asignarle una clase de CSS, pero para esto ya necesitas saber algo de código.
Si, como yo, no tienes ni idea de CSS, pídele a tu «webmaster» que te cree esa clase para que tú puedas asignarla siempre que lo necesites.
8. Crear botones, entradas y bloques reutilizables
Ahora imagina que ya has terminado de escribir tu entrada pero quieres añadir al final algo recurrente, como una lista con las últimas entradas o un botón a contacto:
Al crear un bloque reutilizable, este se guarda en tu lista de bloques para que puedas insertarlo siempre que lo necesites.
¿Para modificarlo? Tienes dos opciones:
- Editarlo como bloque reutilizable, en cuyo caso se alterarían todas la páginas o entradas donde hayas introducido anteriormente ese bloque.
- Convertir a bloque normal. De esta forma puedes modificar su contenido sin que cambien los posts donde ya lo hayas insertado.
9. Construir una cabecera Hero con el editor de bloques
¿Te encantan esas cabeceras estilo Hero (de ancho completo) que llevan una imagen de fondo bajo el titular?
Pues con Gutenberg también puedes crearlas usando el bloque «fondo»:
Este bloque te deja elegir:
- Dónde centrar la imagen.
- El color y transparencia de la sombra sobre la fotografía.
- La altura de la cabecera.
¿Ves qué fácil?
10. Trabajar con el editor clásico dentro de Gutenberg
¿Aún no te sientes a gusto para dar el salto a Gutenberg por completo?
Entonces busca el bloque clásico y aparecerá el editor de toda la vida.
En él puedes escribir, añadir fotografías, poner encabezados… Exactamente igual que antes.
Cuando hayas terminado solo tienes que pinchar en los tres puntos que aparecen en el editor del bloque y, de entre todas las opciones, elegir «Convertir a bloques».
Así de simple, has trabajado como siempre pero has terminado con un artículo o página en bloques. 😉
EditorsKit: ampliando las funcionalidades de Gutenberg
EditorsKit permite ampliar funcionalidades que puedes echar de menos en el editor de bloques como, por ejemplo:
- Resaltado
- Cambio de color individual
- Subíndice/superíndice
- Justificar
- Cambiar contorno imagen
- Modo responsive 2.0
¿Quieres ver cómo funciona?
11. Edición de texto con EditorsKit (Gutenberg)
Al comienzo de este vídeo puedes ver la diferencia de opciones para editar texto que aparecen si tienes o no el plugin EditorsKit activado.
Recuerda, aunque te dé la opción, ¡nunca justifiques en páginas web!
La justificación crea espacios extraños e incongruentes, lo cual dificulta la lectura en documentos digitales, así que déjasela a la imprenta. 🙂
12. Edición de imágenes y visibilidad con EditorsKit
Además de editar texto, EditorsKit añade nuevos formatos de imagen.
Y, aún más interesante, es la posibilidad de ocultar bloques en determinados tamaños de pantalla.
Atomic Blocks: el siguiente paso en bloques de Gutenberg
Atomic Blocks te ofrece un amplio listado de bloques con mayor capacidad de personalización que los que vienen por defecto en Gutenberg:
- Secciones y plantillas
- Columnas avanzadas
- Suscripción
- Bloque de precios
- Entradas
- Contenedor
- Testimonios
- Importante o resaltado
- Acordeón
- Compartir en RRSS
- CTA
- Botones avanzados
- Espaciador y divisores
- Caja de autor
- Citas
Pero recuerda:
Un gran poder conlleva una gran responsabilidad.
Franklin D. Roosevelt
O lo que es lo mismo, si no tienes nociones de diseño, usa sus bloques con precaución.
13. Crear una cabecera Hero con Atomic Blocks
En este vídeo puedes ver cómo crear una cabecera Hero igual que la que puedes obtener con los bloques nativos de WordPress:
En concreto este modelo está dentro de los «layouts» de Atomic Blocks.
¿La mayor diferencia?
Puedes cambiar el padding o espaciado entre los bloques interiores y los límites de la imagen, además de los márgenes entre este bloque y los de alrededor, o el tamaño de la caja de texto interior.
14. Diferencias entre columnas de Gutenberg y Atomic Columns
En este vídeo puedes apreciar algunas diferencias entre columnas creadas con el nuevo editor de bloques de WordPress o Atomic Blocks:
De nuevo, la posibilidad de modificar el padding o espaciado, los márgenes y el espaciado entre columnas da algo más de juego; aunque te obliga a tener mucho más en cuenta la adaptación a dispositivos móviles.
15. Insertar acordeones con Atomic Blocks
Los acordeones de Atomic Blocks son bastante simples:
Para crear varios debes duplicar el bloque y tan solo te permite cambiar el tamaño de la cabecera, no el color de fondo, que es una de las características que quizás quieras modificar para adecuarlo a tu propia paleta de marca.
16. Añadir bloques de testimonio con Atomic Blocks
Atomic Blocks te permite añadir testimonios de forma individual o usando uno de sus «layouts» ya maquetados:
Como ves, en este caso las opciones de personalización son más que suficientes:
- Color de fondo o letra.
- Añadir imagen de usuario.
- Nombre y posición en la empresa.
- Alineación derecha o izquierda…
Si quieres añadir iconos para que el lector pueda ojear tus RRSS y seguirte, con Atomic Blocks necesitarás usar el bloque de «caja de autor».
Pero si lo que quieres es que compartan el contenido de la página, introduce un bloque de «social sharing» y modifica la visualización a tu gusto:
- Color del botón
- Contenido en iconos o texto
- Tamaño…
CoBlocks: el poder de la personalización en Gutenberg
CoBlocks tiene aún más posibilidades de personalización que Atomic Blocks o, según se mire, te da más posibilidades de «liarla parda». 😉
- Acordeón
- Atención
- Caja de autor
- Botones avanzados
- Galería carrusel
- Compartir en Twitter
- Separador dinámico
- Características
- Comida y bebidas
- Formulario
- Gif
- GitHub Gist
- Hero
- Resaltado
- Iconos
- Logos
- Mapa
- Galería masonry
- Tarjeta de medios
- Tabla de precios
- Columnas
- Servicios
- Divisor
- RRSS
- Compartir en RRSS
- Formatos de galerías
Lo más peligroso (en mi opinión) es que te permite cambiar las fuentes a tu antojo, y esto puede terminar una jaula de grillos a la mínima.
Así que intenta ajustarte siempre a la selección de fuentes (¡no más de 2 familias!) y paleta de colores que hayas seleccionado al crear tu plataforma de marca.
18. Diferencias entre un acordeón de Atomic Blocks y CoBlocks
Has visto que los bloques acordeón de Atomic Blocks tan solo te permiten cambiar el tamaño de letra.
¿Pero qué hay de los acordeones de CoBlocks?
- Cambiar el color de fondo
- El tipo de letra
- El espaciado, altura, tamaño…
Recuerda usar solo tus tipos de letra o tu web acabará pareciendo un Picasso, pero mal. 😉
19. Divisor de formas con CoBlocks
Aunque este plugin contiene muchos bloques comunes con Atomic Blocks (siempre con más opciones de personalización), he preferido centrar el resto del análisis en bloques de CoBlocks que no existen en Atomic Blocks (al menos, hasta ahora).
¿Por ejemplo? Las formas divisorias.
Se entiende mejor con el ejemplo del vídeo:
Este bloque te permite cambiar formas, colores, altura, orientación…
Nada mal, ¿verdad?
20. Mapa de localización con CoBlocks
Otro bloque útil dentro de CoBlocks es el de «mapa»:
Solo tienes que añadir la dirección, establecer el nivel de zoom y ¡listo!
21. Bloque de características/beneficios
¿Sabes ese bloque, generalmente con 3 columnas, que resume los beneficios de un servicio o producto con 3 iconos seguidos de subtítulo y pequeño párrafo?
Pues CoBlocks te pone esto muy fácil:
Como ves, la variedad de iconos a elegir es enorme y los puedes modificar a tu gusto (colores, tamaño…).
¿Tienes un restaurante?
Entonces este bloque de CoBlocks te va a gustar:
Puedes elegir si mostrar o no el precio, cuántas cartas añadir, mostrar o no imagen en cada elemento e incluso añadir iconos identificativos de un plato vegano, picante o sin gluten.
23. Bloques de galería CoBlocks
¿Te apetece meter una galería un tanto diferente?
CoBlocks te ofrece varias posibilidades dentro de una sección propia de galerías:
- Carrusel
- Collage
- Muro
- Apilado
- Compensación
Además de la disposición, estos bloques te permiten modificar el aspecto de las fotografías para darles un toque de filtro sepia, vintage o con escala de grises entre otros.
Kadence Blocks: diseñando con Gutenberg
Este plugin ofrece menos bloques que CoBlocks, pero con aún más opciones de personalización:
- Plantilla cruda
- Galería avanzada
- Formulario
- Encabezados avanzados
- Botón avanzado
- Categorías avanzadas
- Acordeón
- Testimonios
- Iconos
- Espacios/separadores
- Caja de información
- Lista de iconos
24. Crear una cabecera Hero con Kadence Blocks
Cuando ves las opciones que te da Kadence para crear, por ejemplo, una cabecera modelo Hero, te das cuenta de las posibilidades que te da este plugin:
Y todo esto, sin tener ni idea de diseño (ya ves que el resultado final no promete mucho).
Imagina lo que puedes hacer con nociones de diseño, proporciones y un poco de buen gusto. 🙂
Pero, ¿y si tú sabes de diseño, pero el resto de usuarios de tu web (editores, autores, etc…) no?
En ese caso puedes usar el menú lateral de Kadence para restringir las capacidades de edición según el perfil de usuario:
26. Bloque de acordeón con Kadence
Para que veas las posibilidades de personalización de Kadence echa un ojo a las posibilidades que te ofrece el bloque de acordeón, por ejemplo:
¿Ves? Puedes:
- Elegir un formato de partida.
- Cambiar colores para el estado inactivo, «hover» o abierto.
- Modificar las formas
- …
27. Bloque de pestañas
¿Un bloque curioso dentro de Kacence Blocks?
El de pestañas o «tabs»:
De nuevo aquí, las opciones de personalización son muy elevadas.
Ultimate Addons para Gutenberg
Este plugin ofrece algunos bloques curiosos y poco comunes.
- Encabezado avanzado
- Columnas avanzadas
- Cita
- Llamada a la acción
- Diseñador de Contact Form 7
- Diseñador de Gravity Forms
- Cronología de contenidos
- Mapa de Google
- Lista de iconos
- Caja de información
- Botón de marketing
- Multibotones
- Carrusel de entradas
- Cuadrícula de entradas
- Muro de entradas
- Cronología de entradas
- Lista de precios
- Sección
- Compartir en redes sociales
- Tabla de contenidos
- Equipo
- Recomendación
¿Por ejemplo?
28. Bloque cronológico con UAG
Puedes personalizar espacios, iconos, el color de la línea que conecta el cronograma según navegas…
29. Bloque cronológico de entradas
¿Sabes para qué podría resultar muy útil también una cronología?
Para mostrar tus entradas si llevas un diario de viaje en tu blog, por ejemplo.
Y para ello también tienes un bloque en UAG:
Gutenberg Blocks Design Library: diseños sencillos
¿Te da miedo volverte tarumba con tantas opciones?
Entonces puede que las plantillas de Gutenberg Blocks Design Library te vengan como anillo al dedo.
Son minimalistas, sencillas y creadas con bloques nativos de WordPress, por lo que no necesitas instalar nada más.
30. Bloques de Gutenberg Blocks Design Library
Aquí tienes una muestra de las plantillas que puedes encontrar dentro de este plugin:
Y cuando termines de elegir, puedes eliminar todos los diseños cargados.
Poniendo un poco de orden en tus bloques
¿Demasiadas opciones para ti?
No hay problema.
Decide qué bloques de Gutenberg, ya sean nativos o de plugin, te resultan útiles y oculta el resto:
Con esto solo te facilitas el trabajo diario, pero no eliminas el bloque. Puedes volver a activarlo cuando quieras.
¿Y ahora?
¡A jugar con el nuevo editor de bloques de WordPress! 🎉
Y después de jugar, te recomiendo quedarte e instalar solo uno de los plugins de bloques avanzados, aquel que te proporcione los bloques y posibilidades de personalización que realmente necesites.
Para un blog sencillo, con EditorsKit + los bloques nativos tienes suficiente.
Si te gusta diseñar páginas o añadir bloques más elaborados, ya conoces las opciones.
¿Alguna pregunta? Déjamela en los comentarios. 😉
¿Quieres que te escriba cuando tenga algo interesante que contar o publique un nuevo artículo en el blog?
Entonces deja tus datos en este formulario:
"*" señala los campos obligatorios
Muchas gracias, preciosa Celi.
Escucharte fue una delicia. Se nota que te gusta jugar con las palabras que, capitaneadas por tu sonrisa y envueltas en esa dulzura que destilan tus ojos, convierten una fría charla sobre un tema informático en -casi-casi- un juego de niños.
No había probado el Gutenberg por falta de tiempo (los Dummies también podemos ser perezosos), pero después de escuchar tu interesante, completita e ilustrativa charla, no entiendo la reticencia de la mayoría a cambiar de editor… Hay que ver cuánto cuesta salir de la zona de confort, por limitada que sea, y aventurarse a cambiar.
Ojalá te nombren «Chica 3D» (Directora Departamento Dummies) y, de ahora en adelante, nos sigas explicando con la misma alegría una cosita nueva de WordPress cada día 😉
Gracias de nuevo por tu tiempo y tu generosidad ♥ Chica 3D
¡Ay, Magui! Si tú supieras que fuiste mi salvavidas durante la charla. 🙂
Desde mi posición, en cuanto comencé a hablar todo el mundo se puso muy serio (pero mucho, mucho). Algunos hasta fruncían un poco el ceño.
Tú eras la única que sonreía.
Habíamos hablado justo antes y tú me habías preguntado: «¿Qué podemos hacer para que estés menos nerviosa?». Y yo te había contestado, como quien siente un presagio: «Con que sonrías será suficiente».
¡Bendita la hora que te dije aquello! Cada vez que veía tantas caras serias (luego me aclararon que era de concentración pura, no de descontento, menos mal), te miraba a ti y me relajaba con tu sonrisa-salvavidas. Me agarraba a ella cada vez que sentía que perdía fuerza.
Así que seré tu «Chica 3D» encantada de la vida siempre que quieras si me prometes estar ahí para sostenerme con tu mirada amable cuando te necesite. 🤗
Un abrazo enorme y gracias (mil gracias) a ti, de corazón. ❤️
¡Pero qué linda eres! 🌷
Gracias por tus palabras. No necesitas pedirme nada porque es mi corazón el que sonríe con Amor a tu dulzura y tu generosidad infinitas. Cuando nos veamos te contaré un par de historias sobre mi sonrisa… ☺️
He estado “cotilleando” por la red y debo decirte que me fascina tu trabajo, así que estaré “ahí”, o dónde haga falta, para acompañarte y aprender de ti, todo lo que quieras compartir 🤓
Un largo y cálido abrazo de invierno ❤️
¡Ay! Que maravilla que la vida ponga en mi camino a personas como tú.
Decir gracias a tus comentarios es quedarse corto, así que tendré que buscar otra forma de demostrarte mi agradecimiento.
Me ha dicho un pajarillo que te gusta el café. 😉
Gracias Celi!
Somos una asociación de turismo responsable, que bien que seas copy en ese sector, podemos ver como colaborar.
¡Hola, Sergio! Me alegro de que me hayas encontrado. 😉
Ponte en contacto conmigo a través de este formulario o escríbeme directamente a hola@celigaroe.com y cuéntame cómo puedo ayudarte. Estaré encantada.
Un abrazo.
Hola gran artículo tengo una pregunta el plugin de la zanahoria no funciona no carga los bloques, y después yo quiero colocar 4 columnas en una página con el addon Columnas y dentro colocar una imagen con un enlace, pero solo lleva 3 columnas el addon de Gutenberg, como hago para colocar 4 y como hago para que todas queden iguales a la misma altura porque he colocado 3 pero me salen a diferentes alturas. Gracias
Hola, José.
Gracias por tu comentario. 🙂
No sé por qué no te carga el plugin de la zanahoria, ¿has descargado las plantillas? Echa un ojo de nuevo al vídeo, de esa sección, puede que se te haya pasado cargarlas.
Con respecto a las columnas, desde la pestaña de bloque que aparece en el menú derecho cuando tienes el menú seleccionado puedes modificar el número de columnas a tu antojo.
Y por defecto, la primera foto o (o cualquier otro bloque) de cada columna quedará alineada en la parte superior de la columna a no ser que tú le indiques que prefieres centrado o alineado en la parte inferior desde el menú superior cuando seleccionas el bloque de columna individual (dentro del bloque general de columnas tienes bloques independientes para cada columnas, dentro de los cuales añades tus bloques de contenido, como una matrioska).
Espero haberte ayudado un poco. 🙂
Un abrazo.
¡Muchas gracias por el excelente aporte!
¡Gracias, Xavi! Me alegro de que te haya gustado. 🙂
Un abrazo.
Hola, me gustaría saber si se puede poner un menú
Hola, Tamara.
El menú se podrá poner con el editor de bloques en cuanto esté el Full Site Editing (FSE) implantado en WordPress (ya falta poco). 🙂
Un abrazo.