Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
El editor de bloques WordPress Gutenberg ha proporcionado un poder a los creadores de contenido como nunca antes habían tenido. Ha traído la capacidad de crear diseños de página que pueden presentar varios tipos de contenido, todo sin necesidad de utilizar un plugin constructor de páginas. Los bloques de WordPress Gutenberg te proporcionan lo básico y mucho más.
Para empezar, Gutenberg viene con una variedad de tipos de bloques predeterminados. Algunos están pensados para proporcionar funcionalidad, mientras que otros están más orientados al diseño. Pero ninguno permite que tu contenido destaque tanto como el bloque cabecera.
El bloque cabecera es un elemento totalmente personalizable que puede servir a una diversa serie de propósitos. Se podría utilizar como un banner clásico de cabecera, con un fondo consistente en una foto a ancho completo y un texto superpuesto. O podría ser el medio perfecto para presentar un mensaje o una llamada a la acción seleccionados. El aspecto y el contenido dependen de tu elección.
Hoy, te presentaremos el bloque Fondo y te mostraremos cómo sacar el máximo partido de él. En el camino, proporcionaremos algunos ejemplos que demuestran qué posibilidades nos brinda esta versátil característica. ¡Allá vamos!
Descarga recursos de diseño para tu bloque de Fondo en Envato Elements
De todos los bloques de Gutenberg, el bloque Fondo es un elemento de diseño de alto impacto. Aprovéchalo añadiendo un increíble fondo de fotos, gráficos o vídeos de Envato Elements.
Una suscripción te proporciona acceso a cientos de miles de videos, fotos y gráficos de stock de alta calidad. Seguro que encontrarás los recursos de diseño que pueden convertir tu bloque Fondo en una obra maestra.
Por qué es tan increíble el bloque Fondo
En primer lugar, echemos un vistazo a lo que hace que el bloque Fondo sea tan atractivo. Combina una serie de las mejores características de Gutenberg, entre las que se incluyen:
Un montón de posibilidades de fondo personalizadas
Puedes elegir entre varios tipos de fondo, incluyendo un fondo de imagen, de vídeo, de color sólido y con degradado. Los fondos pueden establecerse opcionalmente en una posición fija, proporcionando un efecto similar a un paralaje al desplazarte.
Además, se puede añadir una superposición de color o de degradado a los fondos de imagen para crear un singular efecto visual y para que el texto sobre ellos sea más legible. También puedes ajustar a tu gusto la opacidad de la superposición.
Múltiples opciones tipográficas
Aunque podrías utilizar el bloque Fondo solo para crear tu fondo, añadir texto es una excelente forma de atraer la atención hacia el contenido más importante. Afortunadamente, existen varias opciones que pueden satisfacer diferentes necesidades.
De forma predeterminada, se inserta un bloque Párrafo dentro del bloque Fondo. Con él, puedes ajustar el tamaño y el color de la fuente, o añadir una letra capital. Pero este no es de ninguna manera el límite. También puedes utilizar otros tipos de bloques de WordPress Gutenberg basados en texto como Lista, Cita y Encabezado.
Añadir más bloques Gutenberg para varios tipos de contenido
El contenido del bloque Fondo no tiene que ser solo de texto. Prácticamente se pueden utilizar también todos los demás bloques de WordPress Gutenberg. Se pueden añadir elementos de diseño como columnas o botones, junto con incrustaciones multimedia o incluso HTML personalizado.
Esto abre la puerta a todo tipo de creativos casos de uso. El bloque Fondo puede ser un elemento totalmente personalizado.
Crear y personalizar un bloque Fondo
Ahora que hemos visto lo que el bloque Fondo puede hacer, vamos a darle un buen empleo. Así es como puedes añadir uno a tu propio sitio web de WordPress.
1. Asegúrate de que el editor de bloques Gutenberg esté activo
Antes de poder usar el bloque Fondo, querrás asegurarte de que tu sitio web esté configurado para usar el editor de bloques. El editor de bloques de Gutenberg ha sido parte del núcleo de WordPress desde la versión 5.0. Sin embargo, muchos usuarios optaron por seguir con el editor "Clásico" a través de un plugin.
Si tienes instalado el plugin Classic Editor, ve a Configuración > Escritura en WordPress. Desde allí, selecciona si deseas que el editor de bloques sea la opción predeterminada o permitir que los usuarios de tu sitio cambien de editor a su gusto.
Configura el plugin de la manera que más te convenga. La clave está en asegurarse de que el editor de bloques esté disponible para su uso.
2. Añade un bloque Fondo a tu contenido
A continuación, es hora de añadir un bloque Fondo a tu contenido. Puede ser en cualquier página o entrada, ya sea nueva o existente de tu sitio web.
Dentro del editor de bloques, haz clic en el botón Añadir un bloque (que consta de un símbolo "+" blanco sobre un fondo negro o azul), situado en la parte superior izquierda de la pantalla.
Verás una lista completa de los bloques disponibles en Gutenberg. El bloque Fondo aparece dentro de la categoría Medios. Alternativamente, puedes usar el cuadro de búsqueda para encontrar más fácilmente el bloque Fondo.
Haz clic en el bloque para añadirlo a tu página.
3. Ajusta la alineación del bloque
El editor de bloques Gutenberg es en muchos sentidos agnóstico respecto al tema, lo que significa que funciona con casi cualquier tema de WordPress. Pero existen un par de excepciones. La alineación de bloques es una de ellas.
La alineación de un bloque Fondo a la izquierda, al centro o a la derecha debería ser compatible con la mayoría de los temas. Sin embargo, las alineaciones a ancho amplio o ancho completo deben ser específicamente compatibles para poder funcionar en tu sitio web.
Por lo tanto, si no ves opciones para alineaciones de Ancho amplio o Ancho completo en el bloque Fondo, es probable que se de el caso de que tu tema aún no lo admita.
Dado que nuestro tema admite estas alineaciones adicionales, elegiremos una a ancho amplio.
4. Elige un fondo para el bloque Fondo
¡Aquí es donde comienza la diversión! Una vez que el bloque Fondo haya sido añadido a tu página, tendrás la opción de elegir un fondo. Podría tratarse de una imagen, un vídeo, un color sólido o un degradado.
Hay algunos elementos a tener en cuenta, dependiendo de la opción que elijas:
Color sólido
Un color sólido ofrece una manera sencilla de hacer una llamativa declaración. Sin embargo, es importante tener en cuenta las relaciones de contraste de color, ya que pueden afectar a la accesibilidad.
Si no estás seguro del contraste de una combinación de colores, utiliza una herramienta como webAIM Contrast Checker para comprobarlo.
Degradado
Si deseas utilizar un fondo degradado, primero debes seleccionar un color sólido. Desde allí, haz clic en el bloque Fondo y edita las opciones de color en el lado derecho de la pantalla del editor.
Imagen o video
Cuando se trata de imágenes y videos, el tamaño es un factor importante. Idealmente, la resolución del fondo de imagen o vídeo del bloque Fondo coincidirá con la anchura y la altura máximas del bloque.
Si estás utilizando una alineación de bloque de ancho completo, eso significa que el fondo debe recortarse para verse bien con ese tamaño. De lo contrario, el fondo podría pixelarse en pantallas más grandes.
Al mismo tiempo, el tamaño del archivo también debe ser una preocupación. Los vídeos de varios megabytes de tamaño podrían ralentizar los tiempos de carga y frustrar a los usuarios con conexiones más lentas. Intenta optimizar los archivos cuando sea posible.
Para este ejemplo, hemos encontrado la foto de naturaleza perfecta en Envato Elements que usaremos en nuestro bloque Fondo. Se ha recortado a una resolución de 1920x500.
5. Añadir texto y mucho más
Como mencionamos anteriormente, un bloque Fondo podría contener casi cualquier tipo de contenido. Pero el párrafo de texto es la opción predeterminada.
¿Quieres usar alguna otra cosa? Hay un par de maneras de cambiar el tipo de contenido:
Cambiar el tipo de bloque o su estilo
Al hacer clic en el botón Cambiar tipo de bloque o estilo, se puede cambiar el tipo de bloque utilizado. De forma predeterminada, solo se ofrece una pequeña selección de bloques de Gutenberg relacionados.
En este caso, podríamos cambiar a un bloque de Encabezado, Lista, Cita, Grupo, Preformateado, Párrafo de cita o Verso. Para nuestros propósitos, usaremos un bloque de Cita.
Empezar desde cero
Si los bloques de Gutenberg basados en texto no satisfacen tus necesidades, no te preocupes. Al eliminar el bloque de Párrafo incluido (puedes hacerlo haciendo clic en el botón Más opciones y seleccionando Eliminar bloque), se abrirá todo un mundo de nuevas opciones.
Una vez eliminado el bloque Párrafo, haz clic en un área vacía del bloque Fondo. Ahora Gutenberg te permitirá añadir cualquier tipo de bloque que desees.
Consejos para crear un atractivo bloque de Fondo
1. Utiliza visuales relevantes
Los bloques de cubierta ofrecen mucha libertad creativa. Sin embargo, sigue siendo importante asegurarse de que los colores, gráficos, fotos y vídeos encajen tanto con el diseño de tu sitio web como con el tema de tu contenido. Hacerlo te ayudará a transmitir tu mensaje de manera más eficaz.
2. Ten en cuenta las pantallas pequeñas
Un bloque Fondo de ancho completo se puede utilizar para lograr un efecto impresionante en una pantalla grande. Pero, ¿qué pasa con los dispositivos móviles? Tómate un tiempo para probar el diseño y el contenido de tu bloque Fondo en teléfonos móviles y tabletas para ver cómo se mantienen. Algunos ajustes en el CSS de tu tema de WordPress podrían resultar muy útiles.
3. Siéntete libre de experimentar con la colocación de los bloques
Si quieres crear un impacto inmediato, tendría mucho sentido colocar un bloque Fondo en la parte superior de una página o entrada de blog. La naturaleza de los bloques de WordPress Gutenberg es que se pueden colocar en cualquier lugar. Por ejemplo, podrías usar un bloque de Fondo para separar secciones dentro de pasajes de contenido más largos. Siéntete libre de experimentar y encontrar lo que funciona mejor para ti.
4. Más ancho no siempre es mejor
La capacidad de crear bloques de fondo de amplio ancho y de ancho completo es realmente impresionante. Aún así, hay algo que decir sobre los bloques que abarcan el mismo ancho que el resto del contenido. Ofrecen un efecto más sutil que puede resultar ser un mejor ajuste para algunos sitios web.
5. Mantenlo simple (y accesible)
Con características visuales como el bloque Fondo, la solución más simple suele ser la mejor. Ya sea un título de sección, una llamada a la acción o una cita, el bloque debe ser fácil de leer. En la práctica, eso significa limitar la cantidad de texto, mantener un buen contraste de color y utilizar fuentes legibles.
Una manera fácil de hacer que tu contenido destaque
Los bloques de Gutenberg permiten un enfoque más orientado a los detalles para la creación de contenido. Ahora, disponemos de una manera fácil de crear páginas y entradas que coincidan con la personalidad de tu sitio. Y el bloque Fondo posiblemente sea el elemento más emocionante en la caja de herramientas de Gutenberg.
El bloque Fondo te permite salir de las limitaciones tradicionales del diseño y ayudarte a crear imágenes que llamen la atención. Combínalo con tu imaginación para construir algo atractivo.
Aprende más sobre el editor de Gutenberg con Tuts+
¡Comienza con Gutenberg viendo nuestra guía rápida para principiantes, aprende consejos y trucos con nuestros tutoriales, o sumérgete en los temas y recursos para Gutenberg a través de una de nuestras recopilaciones!
