¿Quieres utilizar el editor de bloques de Gutenberg (también llamado editor de WordPress) pero no estás seguro de cómo agregar o utilizar bloques?
En esta publicación, aprenderá cómo utilizar el nuevo editor de WordPress y cómo ampliar sus capacidades.
¿Listo? Empecemos:
Cómo utilizar el editor de bloques de Gutenberg
Usarás el editor de bloques cuando crees publicaciones. y páginas en WordPress. Es una herramienta intuitiva que le permite agregar contenido a su sitio web sin tener que escribir HTML usted mismo, aunque puede cambiar libremente entre los editores visuales (bloques) y de código (HTML).
Las páginas y publicaciones se denominan “tipos de publicaciones” en WordPress. El editor de bloques es más o menos el mismo para todos, con algunas diferencias aquí y allá según el tipo de publicación.
Nos quedaremos con las publicaciones, un tipo de publicación que puede crear colocando el cursor sobre Publicaciones en el menú de administración en el lado izquierdo del panel y seleccionando Agregar nuevo.
También usaremos el tema Kadence WordPress, por lo que nuestro editor puede tener algunas configuraciones diferentes a las suyas y nuestra publicación puede verse un poco diferente en la interfaz. También tenemos instalado el complemento SEOPress SEO, por lo que verá algunos paneles relacionados con SEO en nuestras capturas de pantalla.
El editor de bloques te recibe con un recorrido de bienvenida cuando lo abres por primera vez (y, desafortunadamente, cuando borras el caché de tu navegador). No dudes en tomarte un segundo para explorarlo.
Comience insertando un título en el campo denominado “Agregar título”. No es necesario que este sea el título real que deseas utilizar todavía. Puedes usar un título provisional hasta que estés listo para publicar la publicación. Agregar un título ahora simplemente te ayudará a reconocer el borrador cuando veas tu lista de Todas las publicaciones.
Solo debes saber que el título que pongas aquí representará el título que tiene tu publicación en tu sitio web y cuando se comparte en las redes sociales.
Haga clic en Guardar borrador a continuación. Este es un enlace ubicado en el menú superior derecho del editor. Alternativamente, presione Ctrl/Cmd+S en su teclado. El editor de WordPress tiene una función de guardado automático incorporada, pero guardarlo manualmente de vez en cuando elimina el riesgo de perder el borrador si de repente se corta la energía o la conexión a Internet.
Si desea ver cómo se ve su publicación en la interfaz incluso sin publicarla, haga clic en el enlace Vista previa y luego seleccione Vista previa en una pestaña nueva.
Nota: Tan pronto como presione el botón Publicar, su publicación estará disponible para que todos los que visiten su sitio la vean. Por eso es mejor presionar Guardar borrador para mantenerlo fuera de línea por ahora.
Esto te permite ver cómo se ve tu publicación con el estilo de tu tema.
Usando la biblioteca de bloques de Gutenberg
Cualquier publicación o página que cree con el editor de bloques de WordPress se compone de bloques de contenido. Esto significa que si tu publicación tiene dos párrafos, luego un encabezado y finalmente una imagen, en realidad tienes dos bloques de párrafo, un bloque de encabezado y un bloque de imagen.
WordPress tiene unas pocas docenas de bloques de forma predeterminada, pero puedes ampliar tu biblioteca con complementos. Algunos temas y complementos de terceros incluso vienen con sus propios bloques.
Sigamos con los bloques predeterminados de WordPress por ahora. Comience haciendo clic donde dice Comenzar a escribir. Esto crea un bloque de párrafo automáticamente y puede comenzar a escribir si desea agregar un párrafo.
En su lugar, haga clic en el botón más + si desea utilizar un bloque diferente.
El editor de bloques de Gutenberg hereda los estilos de fuente de tu tema de forma predeterminada para que tu publicación se vea como aparecerá en la interfaz mientras la creas. Es por eso que el texto de nuestras capturas de pantalla probablemente se vea un poco diferente al suyo.
Cuando coloca el cursor dentro de un bloque de párrafo, aparece una barra de herramientas flotante. Te permite transformar el texto del párrafo de muchas maneras, como agregando estilos en negrita o cursiva o incluso incluyendo un enlace. No es muy diferente de Microsoft Word o Google Docs.
Hablemos de la configuración del bloque, comenzando con el bloque Párrafo. Si miras la barra lateral en el lado derecho del editor, notarás que hay dos pestañas: una para la configuración de toda la publicación (Publicar) y otra para la configuración del bloque individual (Bloque).
Haga clic en la pestaña Bloquear si aún no está allí. El bloque Párrafo tiene configuraciones de tipografía que puede usar para personalizar el tamaño de fuente que usa este párrafo en particular, así como la altura que debe tener cada línea dentro del párrafo.
Su tema ya utiliza un tamaño de fuente y una altura de línea globales, por lo que recomendamos dejar estas configuraciones como están a menos que desee que este párrafo en particular tenga configuraciones diferentes. Personaliza la configuración de tipografía predeterminada de tu tema yendo a Apariencia → Personalizador.
El panel Color está cerrado de forma predeterminada. Haz clic en él para abrirlo, pero ten en cuenta que el color del texto es otra configuración global que puedes configurar en el Personalizador. Aun así, este panel te permite personalizar los colores de un párrafo específico e incluso agregarle un fondo.
Esta última configuración puede resultar útil cuando desee llamar la atención sobre una nota o advertencia especial.
Cada nuevo párrafo que crea es un bloque de párrafo diferente y, por lo tanto, tiene configuraciones diferentes. Si desea controlar la configuración de varios bloques de párrafo a la vez, debe agruparlos.
Resalte varios párrafos con el cursor, luego haga clic en el menú de tres puntos que se encuentra sobre ellos y seleccione Grupo.
Ahora puede editar la configuración de color para varios bloques de párrafo. Desafortunadamente, las configuraciones de texto aún deben configurarse individualmente, ya que la funcionalidad de grupo está diseñada para usarse para crear múltiples bloques reutilizables a la vez.
Hablando de eso, cuando haces clic en el menú de tres puntos para bloques grupales e individuales, también notarás una opción llamada Agregar a bloques reutilizables.
Esto le permite guardar bloques que haya creado en su propia biblioteca personal. Guardará su contenido y configuración. Incluso puedes darles nombres únicos, como “Llamado a la acción de las redes sociales”. Cuando quieras usar el bloque en otra página, todo lo que necesitas hacer es buscarlo cuando agregues un nuevo bloque.
En lo que respecta a los bloques de párrafo, los bloques reutilizables son excelentes para la información que suele repetir en varias publicaciones. Esto incluye divulgaciones de enlaces de afiliados y llamadas a la acción que utiliza con frecuencia, como “sígueme en Twitter e Instagram” con enlaces a ambos perfiles incluidos.
Los bloques reutilizables funcionan como bloques globales. Esto significa que si inserta un bloque reutilizable en la Publicación A, Publicación B y Publicación C, luego lo agrega a la Publicación D con la configuración editada, esa configuración también cambiará en las Publicaciones A, B y C.
Si solo desea cambiar el bloque para la Publicación D, deberá hacer clic nuevamente en el menú de tres puntos y seleccionar Convertir a bloque normal.
bloque de rumbo
Los títulos nos ayudan a dividir las publicaciones del blog en secciones y esas secciones en subsecciones. No es diferente a la forma en que los artículos de periódicos y revistas se han dividido en diferentes secciones durante años.
Las páginas web contienen hasta seis encabezados: del H1 al H6 o del encabezado 1 al 6. Las etiquetas H1-H6 son etiquetas HTML que representan el tamaño y la importancia de un encabezado en SEO.
Su tema usa H1, el encabezado más grande e importante, para los títulos de las publicaciones, por lo que debe usar H2 para los encabezados principales en toda su publicación y H3 para los títulos secundarios. H4-H6 son menos comunes, pero puedes usarlos cuando sea necesario.
Si tiene problemas para encontrar el botón más nuevamente, coloque el cursor al final del último párrafo y presione Enter. Luego, usa el botón para agregar un bloque de encabezado a tu publicación.
La etiqueta H2 está seleccionada de forma predeterminada. Haga clic en él para seleccionar una etiqueta diferente cuando lo necesite.
La configuración es la misma para las etiquetas de párrafo, por lo que no nos molestaremos en repasarlas. Solo debes saber que la configuración de tipografía de tu tema en el Personalizador también debe tener configuraciones globales para los títulos.
bloque de imagen
Siga los mismos pasos para agregar un bloque de Imagen, pero seleccione Imagen esta vez.
WordPress te ofrece tres formas de subir imágenes:
- Subir – Elija un archivo de su dispositivo para cargarlo en WordPress. El archivo se almacenará en su servidor de alojamiento de forma predeterminada a menos que configure una función de descarga para archivos multimedia.
- Mediateca – Elija una imagen de la biblioteca multimedia de WordPress. Esta biblioteca le permite administrar archivos multimedia en WordPress. Elegir esta opción también le permite cargar varias imágenes a la vez, pero aun así elegir asignar solo una a este bloque en particular.
- Insertar desde URL – Agrega una URL que contenga tu imagen, luego elige qué imagen insertar en tu publicación. Esta opción no es aconsejable por muchas razones. En primer lugar, es posible que la imagen se elimine de la URL que inserte, lo que provocará que se rompa en su sitio. En segundo lugar, puede terminar cometiendo una infracción de derechos de autor si la imagen que inserta no está libre de atribución. Finalmente, es mejor que crees tus propias imágenes originales para que tu blog parezca más profesional.
Cuando haya seleccionado una imagen, aparecerá una barra de herramientas flotante tal como apareció para los bloques Párrafo y Encabezado. Le permite cambiar la alineación de la imagen a izquierda, derecha o centro, agregar un enlace a la imagen, agregar texto sobre ella e incluso recortarla.
Incluso puedes agregarle un título debajo de la imagen.
Para la configuración, puede agregar un estilo a su imagen y texto alternativo. Utilice un título breve pero descriptivo como texto alternativo que represente lo que es la imagen. Esto es para fines de SEO.
También debes elegir “Tamaño completo” como tamaño de imagen en la mayoría de los casos. WordPress reducirá automáticamente su imagen al ancho del contenido de su blog.
Asegúrese de consultar nuestra guía sobre optimización de imágenes para la web para obtener más ayuda en esta área.
Otros bloques y bloques de terceros
Como dijimos, WordPress tiene una biblioteca completa llena de docenas de bloques de contenido organizados en diferentes secciones. Cuando vaya a agregar un nuevo bloque, haga clic en el botón Examinar todo para verlos todos.
A continuación se muestran algunos de los más comunes que puede utilizar:
- Lista
- Cita
- Pullquote
- Mesa
- Galería
- Cubrir
- Medios y texto
- Video
- Botones
- columnas
- Iconos sociales
- Inserciones de redes sociales
- Preguntas más frecuentes
Si desea acceder a más bloques, utilice un complemento de bloques de terceros. Esto le brinda acceso a más bloques de contenido, algunos de los cuales son mejoras en los bloques predeterminados de WordPress.
Bloques definitivos es una de las opciones más populares que existen. Este complemento gratuito le brinda acceso a 20 bloques adicionales para el editor Gutenberg. Estos incluyen testimonios, llamados a la acción, alternancia de contenido, contenido con pestañas, tabla de contenido y más.
Otra gran opción es Bloques de cadenciay una excelente combinación con el tema Kadence WordPress. El tema Kadence tiene demostraciones de sitios para el editor Gutenberg y Elementor, por lo que los bloques Gutenberg adicionales son fantásticos si prefieres usar el editor Gutenberg más liviano para construir tu sitio sobre Elementor.
El complemento agrega 15 bloques a su colección que ofrecen mejores versiones de los bloques predeterminados de Gutenberg, así como algunos extras. Estos incluyen testimonio, cuadro de información, acordeón, índice, cuenta regresiva y más.
Tú poder use Ultimate Blocks y Kadence Blocks uno al lado del otro si desea agregar ambos conjuntos de bloques a su colección.
Kadence Blocks también tiene la Biblioteca de diseño, un botón que encontrarás en el menú superior del editor de bloques. Esta biblioteca tiene tres nuevas categorías de elementos de diseño para su uso. En primer lugar, tiene Secciones, que son secciones de página prediseñadas, como una tabla de precios, un formulario de contacto o una fila para mostrar a los miembros del equipo, listas para que usted las importe y use.
Los paquetes de inicio contienen páginas completamente diseñadas. La categoría Estructura alámbrica contiene elementos de diseño similares a la categoría Secciones, excepto que los elementos de estructura alámbrica no tienen contenido de demostración.
Algunos complementos no son complementos de Gutenberg dedicados, pero tienen bloques que puedes usar para agregar sus funcionalidades al editor de bloques con facilidad. Este es el caso de WP Table Builder, un complemento de tablas desarrollado por el mismo equipo detrás de Ultimate Blocks.
Ahora, puede insertar tablas de precios, datos y comparación bien diseñadas en el editor de bloques sin tener que depender de un creador de páginas.
Pensamientos finales
El editor de bloques Gutenberg tiene una pequeña curva de aprendizaje cuando lo comparas con editores WYSIWYG como el editor clásico de WordPress, pero es increíblemente fácil de usar una vez que superas esos obstáculos. Además, le permite utilizar más elementos de diseño en las publicaciones de su blog sin tener que recurrir a un complemento de creación de páginas.
También te permite ser más eficiente si escribes tus borradores fuera de WordPress en aplicaciones como Google Docs o Microsoft Word. Estas aplicaciones le permiten copiar sus publicaciones y pegarlas en el editor de bloques de Gutenberg mientras importa sus enlaces, encabezados y estilos de texto desde esas aplicaciones. Google Docs incluso exportará tus imágenes.
Lectura relacionada:
