Bloques de WordPress: una guía detallada
Publicado: 2021-10-02Los bloques de WordPress son el componente principal del sistema de edición Gutenberg de arrastrar y soltar de WordPress para sitios web.
La forma más fácil de aprender a usar bloques es a través de la práctica, pero comprender qué son los bloques y qué pueden hacer por usted puede hacer que la creación de su página sea más eficiente e incluso divertida.
Ya sea que sea nuevo en la creación de sitios de WordPress o esté buscando desarrollar algunas habilidades avanzadas, esta guía le enseñará más sobre qué son los bloques, qué bloques comunes usan las personas, cómo usarlos y otra información que puede mejorar su sitio.
Más información: Diseño de sitios web de WordPress: cómo crear un sitio web de WordPress desde cero
¿Qué son los bloques de WordPress?
Los bloques de WordPress son elementos discretos de texto, medios o código personalizado que puede agregar a una publicación de blog o página de sitio web utilizando el sistema de edición Gutenberg de WordPress.
La mayoría de las personas se enfocan en usarlo para blogs, pero funciona bien para la mayoría de las otras páginas en muchos sitios web.
Los bloques de WordPress existen para simplificar la creación de publicaciones y páginas que se ven bien para los lectores al eliminar la necesidad de codificar cada elemento manualmente. En su lugar, puede arrastrar y reorganizar cada bloque para personalizar el aspecto de su página.
Cada bloque es funcionalmente un elemento autónomo en la página, por lo que cambiar un bloque no modificará los demás.
Este no es el único sistema de edición de tipo bloque en el mercado. Algunos servicios de la competencia, como Ghost, también tienen editores sólidos que puede utilizar para crear sitios web.
Sin embargo, Ghost es principalmente una plataforma de blogs, y su editor se centra en eso, mientras que el editor de WordPress también es útil para crear páginas que no son blogs en su sitio web.
Estos bloques también son diferentes de Drupal, otro sistema de gestión de contenido.
Drupal se enfoca en bloques que pueden aparecer en múltiples partes de un sitio web, mientras que WordPress se enfoca en partes individuales de una página.
Puede duplicar contenido con bastante facilidad, pero los bloques en sí no están vinculados y no cambiarán todos cuando edite uno.
Más información: Diseño de página de destino: 10 páginas de destino inspiradoras y de alta conversión
Historia de Gutenberg
Gutenberg es el editor actual de WordPress.
Lanzado originalmente en 2018, ha crecido desde entonces hasta convertirse en un sistema más maduro capaz de ofrecer una edición rápida y poderosa para páginas web y publicaciones de blogs.
Todavía no está hecho porque los desarrolladores quieren usarlo para la edición completa del sitio, pero ahora tiene muchas más funciones que en el lanzamiento.
Gutenberg existe porque muchos usuarios de WordPress querían tener una forma más limpia y sencilla de bloguear sin editar código para que todo se viera bien.
Aquí, es esencial comprender que WordPress atrae a muchos usuarios ocasionales, muchos de los cuales tienen pocos conocimientos de codificación.
Esta es una gran diferencia con respecto a los primeros años de Internet, cuando ni siquiera tendría un sitio web a menos que tuviera un conocimiento de codificación relativamente avanzado para ese momento. En otras palabras, WordPress quiere respaldar el mercado informal, donde los procesos de hacer clic y arrastrar tienen más sentido.
Una consideración secundaria para Gutenberg es cómo y dónde las personas escriben blogs.
Algunos propietarios de sitios web utilizan sistemas de conversión de texto a voz en lugar de escribir las cosas manualmente, mientras que un sistema de edición de arrastrar y soltar facilita la creación de sitios web en teléfonos inteligentes, tabletas y otros dispositivos.
Sin embargo, algunas personas todavía prefieren el antiguo sistema de edición. Eso no es ninguna sorpresa porque todavía ofrece mucho más control y soporte para los usuarios capaces de administrar su código.
Gutenberg es un editor poderoso , pero por necesidad, limita algunas cosas que los usuarios pueden hacer. Nada es tan flexible como la codificación pura, pero Gutenberg es más rápido y más fácil para la mayoría de las necesidades.
Más información: Optimización de la tasa de conversión: la guía completa
Cambiar entre el editor clásico y el editor de bloques
WordPress sabe que la flexibilidad suele ser mejor que obligar a todos a usar un sistema, y es por eso que puede cambiar entre sus sistemas de edición clásicos y de bloques.
En la mayoría de los casos, debe ser el administrador del sitio para cambiar entre las vistas de edición.
Sin embargo, una vez que haya iniciado sesión con la cuenta correcta, puede cambiar el editor en cada página cuando la esté modificando haciendo clic en el botón en la parte superior de la pantalla.
Esto es todo lo que la mayoría de los usuarios necesitan saber, pero puede personalizar aún más las cosas.
Muchos complementos de WordPress le permiten crear páginas con una interfaz de arrastrar y soltar como Gutenberg, pero que quizás prefiera. Por lo general, también ofrecen opciones de edición que Gutenberg no ofrece.
Los complementos como el creador de Divi, SeedProd y el popular y fácil de usar Elementor ofrecen sistemas de edición más allá de los bloques que proporciona Gutenberg.
Estos complementos suelen contener herramientas de cambio de tamaño, componentes de varias partes y plantillas mejoradas que reducen aún más el proceso de creación de páginas.
Los complementos externos son útiles para las páginas que no son de blogs, que es donde Gutenberg a menudo se cae un poco. Puede hacer muchas de esas páginas, pero todavía no con la misma flexibilidad que otros sistemas.
Más información: Mapa del recorrido del cliente: mejores prácticas + plantillas listas
Cómo deshabilitar Gutenberg
¿Puede desactivar Gutenberg para usuarios específicos? ¿Se puede desactivar por completo?
La respuesta a ambos es sí. Hay varias formas de desactivar Gutenberg si no desea utilizarlo en su sitio.
Deshabilite Gutenberg instalando un complemento
El primer método, y para la mayoría de los usuarios, el mejor, es utilizar el complemento Classic Editor. Este es un complemento oficial del equipo de WordPress, con literalmente millones de instalaciones activas en los sitios.
El editor clásico le permite configurar el editor predeterminado para cada usuario, permite a los usuarios elegir un editor y viene con varias funciones adicionales para facilitar las cosas.
Técnicamente, esto no es tanto deshabilitar a Gutenberg como ocultarlo, pero el resultado práctico es el mismo. O, en otro sentido, instalar Classic Editor es una buena idea porque te permite usar el editor que quieras, y eso es simplemente mejor que estar atascado con un solo editor todo el tiempo.
Una alternativa basada en la comunidad usa el complemento Disable Gutenberg, que no es tan popular como Classic Editor pero no depende de tener soporte oficial.
Esta es una forma sencilla y práctica de deshabilitar Gutenberg por completo o deshabilitarlo para páginas, tipos de publicaciones, roles o temas específicos en un sitio.
Para instalar cualquiera de los complementos, los pasos son simples:
- Inicie sesión en su interfaz de WordPress
- A la izquierda, seleccione 'Complementos'
- En la pantalla de complementos expandida, seleccione 'Nuevo'
- En el campo de búsqueda en la parte superior, escriba el nombre del complemento que desea
- Elija el complemento que desee de los resultados y haga clic en el botón 'Instalar ahora'
- Una vez que haya terminado, haga clic en 'Activar complemento'
Deshabilitar Gutenberg editando functions.php
Finalmente, puede modificar el archivo functions.php en su sitio para deshabilitar cosas directamente.
Sin embargo, esto puede terminar arruinando su sitio si lo hace incorrectamente, por lo que no lo recomendamos para usuarios ocasionales. La instalación de uno de los complementos enumerados anteriormente es más simple y fácilmente reversible.
Si desea deshabilitar Gutenberg sin un complemento y es un principiante en el código de WordPress, puede seguir estos pasos. Este método lo desactiva para todos los usuarios.
- Inicie sesión en su interfaz de WordPress (deberá ser administrador)
- Busca "Apariencias" en la barra lateral izquierda y coloca el cursor sobre ella.
- Seleccione 'Editor de temas'
- En la lista de archivos de la derecha, seleccione 'functions.php'
- Haga una copia de su archivo functions.php antes como una copia de seguridad para que pueda restaurarlo si algo sale mal
- Cuando aparezca el editor, copie exactamente lo siguiente y péguelo en el archivo: add_filter ('use_block_editor_for_post', '__return_false');
- Haga clic en el botón Actualizar archivo a continuación
Más información: Mapa de calor explicado + Cómo se puede hacer un mapa de calor de un sitio web
Tipos comunes de bloques de WordPress
Estos son los tipos de bloques más comunes disponibles en el editor básico de WordPress.
Antes de Gutenberg, la mayoría de la gente codificaba estos bloques directamente, o con las herramientas de formato de texto e imagen del editor de texto enriquecido, y reorganizaba el código según fuera necesario para ajustar el diseño de la página.
Párrafo
Este es el bloque que la mayoría de la gente usa más que cualquier otro. Como sugiere el nombre, se centra en el contenido escrito.
El editor de texto convierte cada párrafo en un bloque para que pueda moverlos y reorganizarlos después de escribirlos.
Imagen
Los bloques de inserción de imágenes contienen gráficos individuales que puede mover por la página.
Estos vienen con varias opciones de alineación, incluido el cambio de tamaño de la imagen o incluso el ancho completo, más allá del límite habitual de un tema.
Los bloques de párrafo e imagen juntos son suficientes para crear una página web básica, por lo que todo lo demás está ahí para iterar y mejorar estos elementos, siguiendo los principios básicos de la jerarquía visual.
Encabezados
Los bloques de encabezado contienen textos de gran tamaño para dividir la página en secciones y facilitar a los usuarios la búsqueda de contenido. El editor le permite ajustar el tamaño de los encabezados, el formato, los hipervínculos y otros elementos según sea necesario.
WordPress admite hasta 6 niveles de encabezado, incluido h1 para el título de la página, pero la mayoría de las personas rara vez van más allá de h4.
Galería
El bloque de galería es una versión avanzada del bloque de imágenes básico y le permite agregar varias imágenes en un diseño predeterminado.
El editor actual admite un máximo de ocho columnas para imágenes, además de cambiar el tamaño, vincular y otras opciones de formato para la página.
Lista
Los bloques de listas crean listas numeradas o con viñetas.
Básicamente, esto es solo una aplicación del bloque de párrafo, pero la separación de listas en su propio componente hace que sea más fácil evitar modificar accidentalmente el formato.
Cita
Los bloques de citas son bloques de párrafos con un formato especial que ayudan a resaltar algo particularmente importante.
La mayoría de las personas los usan para una cita de una persona específica, pero también puede usarlos para proporcionar comentarios o resaltar información vital.
Audio
Los bloques de audio son relativamente raros en los sitios web, pero WordPress aún los admite.
Estos le permiten agregar cualquier archivo de audio que tenga, incluidas funciones como la reproducción automática del audio o la reproducción en bucle.
Recuerde que a la mayoría de los usuarios no les gusta el audio que se reproduce automáticamente a menos que quieran que eso suceda, así que trate de evitar sorprender a los visitantes con ruidos inesperados.
Cubrir
Los bloques de portada son un elemento de formato más avanzado. Este bloque le permite seleccionar una imagen o video, y a veces texto, que puede superponer en su página.
Estos medios pueden flotar en segundo plano, repetirse y, de otro modo, servir como un captador de atención instantáneo.
WordPress admite no tener transparencia en la superposición o transparencia total, pero recomienda una cantidad moderada para garantizar que su texto sea fácil de leer.
Archivo
Los bloques de archivos le permiten proporcionar enlaces directos a archivos en su sitio web para que los visitantes puedan descargarlos.
Puede cargar casi cualquier tipo de archivo en su sitio, pero su proveedor de alojamiento puede tener preguntas si intenta cargar algo demasiado grande u obtener demasiadas descargas para su plan.
Este es un buen ejemplo de la interconexión del desarrollo web.
Probablemente no incurrirá en límites si solo permite que las personas descarguen archivos de texto básicos, pero hable con el host de su sitio web antes de agregar cualquier otro archivo. Ellos pueden decirle qué está permitido en su plan o sugerir alternativas según sea necesario.
Video
Los bloques de video le permiten agregar contenido multimedia a su sitio, cargándolo directamente o vinculando contenido en otro sitio.
Los archivos de video tienden a ser extremadamente grandes, por lo que generalmente necesita un buen plan de alojamiento si desea tener los archivos en su sitio.
Hospedaje externo, como a través de YouTube y usando YouTube incrustado, es considerablemente más fácil. Gutenberg convierte automáticamente algunos enlaces de video a un tipo diferente de bloque según corresponda.
Cómo usar bloques de WordPress
Hay varias formas de agregar un bloque en el editor de Gutenberg. Puede agregarlos directamente desde la barra de iconos superior o haciendo clic en el botón de inserción.
Este botón parece un círculo con un signo más y le permite hacer clic en el tipo de bloque que desea agregar.
Una vez que los bloques están en la página, puede moverlos hacia arriba y hacia abajo haciendo clic en las flechas del lado izquierdo del bloque. Alternativamente, puede hacer clic en la cuadrícula de seis puntos y mantener presionado el botón del mouse, luego arrastrar el bloque a donde lo desee.
Para editar bloques, simplemente haga clic en su espacio. Esto abrirá automáticamente la información del bloque y le permitirá ajustar los componentes según sea necesario.
Puede utilizar las mismas funciones para cambiar el tipo de bloque. Las flechas en el panel de control se pueden usar para expandir o cerrar secciones del editor, mientras que el botón X le permite cerrar el editor de bloques y concentrarse en otras cosas.
Diferencia entre bloques y widgets de WordPress
Los bloques son principalmente contenido de páginas web, incluido texto y medios como imágenes y audio. Entonces, ¿qué es un widget de WordPress y en qué se diferencia de un bloque?
Los widgets de WordPress, por el contrario, son contenido que puede colocar en áreas especiales como barras laterales y pies de página. El editor de Gutenberg evita principalmente estas áreas, aunque puede incluir elementos similares a widgets en su contenido principal agregando bloques de código.
La interfaz del bloque suele estar en el lado derecho de la pantalla cuando el editor de páginas está abierto. El editor de widgets está disponible a través del área Apariencia> Personalizador y a través del menú de administración.
Los widgets suelen aparecer en todas las páginas de un sitio web, por lo que no puede editarlos desde el mismo lugar donde puede editar bloques.
Creación de plantillas de bloques de WordPress reutilizables
WordPress le permite crear plantillas de bloques reutilizables.
Esto es útil para tener una marca y un diseño consistentes en su sitio sin tener que volver a crear un diseño exacto cada vez. Esto es especialmente útil si está utilizando software como Vectornator o Adobe Illustrator para crear diseños y gráficos vectoriales avanzados.
Crear la plantilla en sí es simple. Todo lo que necesita hacer es seleccionar el bloque, hacer clic en los tres puntos en la barra de herramientas que aparece y luego hacer clic en Agregar a bloques reutilizables.
A partir de ahí, puede cambiarle el nombre a algo fácil de recordar y volver a trabajar en la página.
Las plantillas de bloques simplifican cosas como logotipos, botones personalizados creados en software de diseño gráfico, elementos de diseño y cualquier cosa que se use en la marca de un sitio web.
La plantilla permitirá que el elemento se agregue fácilmente en cualquier lugar que desee sin tener que rehacer un determinado elemento de marca o diseño cada vez que desee usarlo.
Reflexiones finales sobre los bloques de WordPress
Si bien los bloques de WordPress no son ideales para todos, son un poderoso punto de partida para crear páginas y organizar el contenido de una manera intuitiva y fácil de usar.
Sin embargo, leer sobre bloques no es suficiente para dominar su uso.
En su lugar, vaya a su sitio de WordPress ahora y comience a jugar en una página. Si adquiere un poco de práctica, podrá dominar su uso y comenzar a crear diseños avanzados en su sitio.
Al igual que andar en bicicleta, los bloques de WordPress son difíciles de olvidar una vez que los aprende y pueden ayudarlo a crear casi cualquier diseño de página estándar.