¿Quiere utilizar el editor de bloques de Gutenberg (también llamado editor de WordPress) pero no está 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? Vamos a empezar:
Cómo utilizar el editor de bloques de Gutenberg
Utilizarás el editor de bloques al crear publicaciones. Y páginas en WordPress. Es una herramienta intuitiva que te permite agregar contenido a tu sitio web sin tener que escribir el HTML tú mismo, aunque puedes 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 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 ligeramente diferente en la interfaz. También instalamos 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 ingresando 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 tu publicación. Agregar un título ahora simplemente te ayudará a reconocer el borrador al ver la lista de Todas las publicaciones.
Solo debes saber que el título que ingreses aquí representará el título que tendrá tu publicación en tu sitio web y cuando se comparta en las redes sociales.
Haga clic en Guardar siguiente borrador. Este es un enlace ubicado en el menú en la parte superior derecha del editor. Alternativamente, presione Ctrl/Cmd+S en su teclado. El editor de WordPress tiene una función de guardado automático incorporada, pero guardar 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.
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 creada 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 título y finalmente una imagen, en realidad tienes dos bloques de párrafo, un bloque de título 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 también vienen con sus propios bloques.
Por ahora, ciñámonos a los bloques predeterminados de WordPress. Comience haciendo clic donde dice Comenzar a escribir. Esto crea automáticamente un bloque de párrafo 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 su tema de forma predeterminada para que su publicación se vea como aparecerá en la interfaz a medida que la crea. Es por eso que el texto en nuestras capturas de pantalla probablemente se vea ligeramente diferente al suyo.
Cuando coloca el cursor dentro de un bloque de párrafo, aparece una barra de herramientas flotante. Le permite transformar el texto de un 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 observa la barra lateral en el lado derecho del editor, notará que hay dos pestañas: una para la configuración de publicación completa (Publicar) y otra para la configuración de bloque individual (Bloquear).
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 la fuente utilizada por 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 sin cambios a menos que desee que este párrafo en particular tenga configuraciones diferentes. En su lugar, personalice la configuración de tipografía predeterminada de su tema yendo a Apariencia → Personalizador.
El panel Color está cerrado de forma predeterminada. Haga clic en él para abrirlo, pero tenga en cuenta que el color del texto es otra configuración global que puede 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 aviso 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 al mismo tiempo, 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 cambiar 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 debe usarse para crear múltiples bloques reutilizables a la vez.
Por cierto, cuando haces clic en el menú de tres puntos para grupos y bloques individuales, también verás una opción llamada Agregar a bloques reutilizables.
Esto le permite guardar los bloques que ha creado en su biblioteca personal. Guardará su contenido y configuración. También puedes darles nombres únicos, como Llamado a la acción de las redes sociales. Cuando quieras utilizar el bloque en otra página, todo lo que tienes que hacer es buscarlo al agregar un nuevo bloque.
En cuanto a los bloques de párrafo, los bloques reutilizables son excelentes para la información que repites con frecuencia 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 coloca un bloque reutilizable en la publicación A, la publicación B y la publicación C, luego lo agrega a la publicación D con la configuración modificada, 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 curso
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 siglos.
Las páginas web contienen hasta seis títulos: H1 a H6 o Título 1 a Título 6. Las etiquetas H1-H6 son etiquetas HTML que representan el tamaño y la importancia de un título 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 títulos 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 Entrar. 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 sea necesario.
La configuración es la misma para las etiquetas de párrafo, por lo que no nos molestaremos en examinarlas. Solo debes saber que la configuración de tipografía de tu tema en el personalizador también debe tener configuraciones globales para los encabezados.
Congelación de imagen
Siga los mismos pasos para agregar un bloque de Imagen, pero esta vez seleccione Imagen.
WordPress te ofrece tres formas de subir imágenes:
- Cargando – 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.
- biblioteca multimedia – Elija una imagen de la biblioteca multimedia de WordPress. Esta biblioteca le permite administrar archivos multimedia en WordPress. Elegir esta opción también te permite cargar varias imágenes a la vez, pero aun así eliges 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, la imagen puede eliminarse de la URL que ingresa, lo que provoca que se rompa en su sitio. En segundo lugar, puedes terminar cometiendo una infracción de derechos de autor si la imagen que publicas no carece de atribución. Finalmente, lo mejor es que crees tus propias imágenes originales para que tu blog luzca más profesional.
Cuando tenga una imagen seleccionada, aparecerá una barra de herramientas flotante como ocurre con los bloques Párrafo y Encabezado. Le permite cambiar la alineación de la imagen hacia la izquierda, derecha o centro, agregar un enlace a la imagen, agregar texto en la parte superior e incluso recortarla.
También puede agregar un título debajo de la imagen.
Para la configuración, puede agregar un estilo a la imagen y texto alternativo. Utilice un título breve pero descriptivo como texto alternativo que represente la imagen. Esto es para fines de SEO.
En la mayoría de los casos, también debes elegir Tamaño completo como tamaño de imagen. 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 decíamos, WordPress cuenta con toda una biblioteca repleta de decenas 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.
Éstos son algunos de los más comunes que puede utilizar:
- Lista
- Citación
- 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 varios bloques, utilice un complemento de bloques de terceros. Esto le brinda acceso a más bloques de contenido, algunos de los cuales son mejoras a 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 excelentes si prefieres usar el editor Gutenberg más liviano para construir tu sitio en Elementor.
El complemento agrega 15 bloques a su colección que ofrecen mejores versiones de los bloques predeterminados de Gutenberg además de algunos extras. Estos incluyen testimonios, panel de conocimientos, acordeón, índice, cuenta regresiva y más.
Tú Dulces 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 ser importadas y utilizadas.
Los paquetes iniciales 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 fácilmente su funcionalidad al editor de bloques. 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 precios, datos y tablas de comparación bien diseñados 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 en comparación con los editores WYSIWYG como el Editor clásico de WordPress, pero es increíblemente fácil de usar una vez que superas estos obstáculos. También 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 te permiten copiar tus publicaciones y pegarlas en el editor de bloques de Gutenberg, mientras importas enlaces, encabezados y estilos de texto desde esas aplicaciones. Google Docs también exportará sus imágenes.
Lectura relacionada:
