Asegurarse de que el contenido o la copia de su sitio web sea legible es tan importante como asegurarse de elegir las palabras correctas. Por supuesto, también es importante obtener la apariencia general correcta para su sitio web. Pero sin contenido legible y valioso, lo más probable es que el propósito de un sitio se pierda.
Cuando está creando su sitio web con Divi , tiene diferentes opciones de diseño que le permiten asegurarse de que la copia que está compartiendo sea legible en cualquier tipo de imagen de fondo que esté usando. De eso se tratará este post. Vamos a compartir algunos consejos y trucos y opciones de Divi que asegurarán que el contenido escrito que compartes en los fondos de las imágenes sea legible y fácil de entender.
¡Vamos a ver!
Suscríbete a nuestro canal de Youtube
1. El contraste es el rey, pero evite los contrastes extremos (blanco y negro)
El primer punto y aspecto esencial de la creación de contenido legible es asegurarse de que haya suficiente contraste entre el contenido escrito que proporciona y la imagen de fondo que utiliza. Si está utilizando una imagen de fondo que se inclina demasiado hacia el color de su fuente, el contenido que está compartiendo puede perderse fácilmente. Escoger entre:
- Usar un color de fuente claro en combinación con una imagen de fondo más oscura
- Uso de un color de fuente oscuro en combinación con una imagen de fondo más clara
Los colores de contraste más obvios son el blanco y el negro. Sin embargo, usarlos en combinación puede ser pesado para los ojos. Por lo tanto, opte por dos colores contrastantes que no sean tan pesados a la vista como lo son el blanco y el negro. En lugar de elegir un color negro para el fondo, elige un color gris oscuro o cualquier otro tipo de color oscuro. Lo mismo vale para un color de fuente claro; elige un color gris claro o cualquier tipo de color claro que se incline hacia el blanco.
2. Use colores neutros y familias de fuentes sobrias
Lo siguiente que determinará si su contenido es legible o no es el color y la familia de fuentes que elija. Claro, usar colores llamativos y llamativos llamará la atención. Pero si está compartiendo demasiada copia en ese color en particular, es probable que las personas dejen de leer el contenido que está proporcionando debido a lo molesto que es para los ojos.
Por eso es recomendable utilizar colores neutros que no molesten a la vista y permitan a los visitantes centrarse en el mensaje que intentas llevar. Nunca puede equivocarse eligiendo una familia de fuentes sobria para la mayor parte de la copia que comparte también. Sin embargo, eso no significa que siempre debas usar fuentes predeterminadas, como Arial, únicamente. También puede optar por algo que sea un poco más sofisticado para sus títulos, siempre que la legibilidad esté ahí.
3. Usa colores brillantes para resaltar las llamadas a la acción
Como se mencionó en el punto anterior, un buen sitio web utiliza principalmente colores neutros y familias de fuentes sobrias. Al hacerlo, permite que los visitantes presten especial atención a sus llamadas a la acción.
Para asegurarte de que tus CTA se destaquen del resto del contenido escrito que proporcionas, tendrás que encontrar un color que contraste tanto con la imagen de fondo como con el color de la fuente. Los visitantes están acostumbrados a este tipo de estructura de sitio web y reconocerán automáticamente sus llamadas a la acción si se asegura de que sean lo primero que llame la atención.
4. Agregue una superposición de color de fondo a su imagen de fondo
En muchos casos, la imagen de fondo que desea utilizar es una combinación de colores claros, oscuros y brillantes. Eso hace que sea difícil encontrar un color de fuente legible. Afortunadamente, puede agregar superposiciones de color a sus imágenes de fondo dentro del propio constructor Divi. Estas superposiciones están disponibles para cualquier fila, columna, módulo o sección que esté utilizando y se pueden encontrar en la subcategoría Fondo de la pestaña Contenido. También puede agregar superposiciones a las imágenes con el software de edición de fotos, pero el uso de las opciones integradas de Divi en combinación con Visual Builder le permite ver los cambios en tiempo real y hace que el uso del software de edición de fotos no sea necesario.
Puede cambiar el color de superposición hasta el punto en que sienta que el contenido escrito es legible. Al hacerlo, algunos de los colores de tus imágenes se perderán, eso es un hecho. Pero eso es algo que tendrás que sacrificar voluntariamente. Si desea mantener una imagen colorida en su forma original, usarla en una estructura de dos columnas sin superposición de texto es el camino a seguir.
Una vez que agregue una superposición de color de fondo a la configuración de Divi, deberá elegir el tipo de combinación de imágenes que desea, como se marca en la pantalla de impresión a continuación.
5. O use una superposición de fondo degradado en su lugar
Otra opción que tiene es usar una superposición de fondo degradado. Esto le brinda las mismas posibilidades que la superposición de colores, pero le permite agregar un degradado de dos colores en su lugar. Una vez que agregue un fondo degradado, tendrá, nuevamente, la opción de elegir su Mezcla de imagen como se marca en la pantalla de impresión a continuación.
6. Usa sombra de texto
Sin embargo, si desea utilizar el mismo color para la fuente y la imagen de fondo al mismo tiempo; hay una alternativa Puede usar la opción integrada Text Shadow de Divi. Para esta opción, deberá usar un color de sombra que sea el opuesto al color de la fuente y la imagen de fondo o el color de superposición. No solo podrá mantener el mismo color para su fuente e imagen de fondo al mismo tiempo, sino que la opción Sombra de texto también le permite crear cierta profundidad, lo que es una contribución útil para la apariencia de su sitio web.
Pensamientos finales
En esta publicación, le mostramos varias formas de hacer que su contenido escrito o copiado sea legible cuando se usan fondos de imágenes. Por supuesto, no tienes que aplicar todos estos métodos al mismo tiempo, pero es genial tenerlos en mente mientras diseñas tu próximo sitio web. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!
Imagen destacada de FernPat / shutterstock.com