Cómo superponer una imagen en WordPress

Si está entusiasmado con hacer que su sitio web sea sobresaliente, siempre trabajará duro para embellecerlo. Hay millones de formas de hacer de su sitio una musa, y una de ellas se mencionará en nuestra publicación de hoy: superponer una imagen .

¿Todavía te preguntas qué es? ¡Tómatelo con calma y deja que te saquemos!

¿Qué es una superposición?

Como puede ver, utilicé una imagen con texto y superposición como encabezado; eso marcó una gran diferencia con respecto a escribir un encabezado de texto simple. Parece mucho más elegante y atractivo en comparación con lo normal, ¿verdad?

Más importante aún, la superposición en la imagen ayuda a resaltar el texto mientras mantiene visible la imagen de fondo. Puede agregar una imagen con texto y superponer en publicaciones / páginas como esa con facilidad y usarla para diferentes propósitos. En esta publicación, le mostraremos cómo hacerlo en sencillos pasos.

¿Estás emocionado todavía? ¡Empecemos!

Cómo superponer una imagen en WordPress

Hay dos métodos que puede intentar superponer una imagen en WordPress: usando el bloque de portada de Gutenberg y usando CSS. Si bien el uso de Gutenberg lo ayuda a crear una publicación / página que incluye una imagen con superposición incluso desde una hoja vacía, el uso de CSS lo ayudará a personalizar rápidamente las imágenes en una publicación / página prediseñada.

Ambos métodos son fáciles de usar de alguna manera, y le mostraremos cómo usarlos uno por uno.

Método 1: usar el bloque de cubierta de Gutenberg

Vaya al editor de páginas de Gutenberg.

Paso 1: inserte una imagen con el bloque de portada.

Haga clic en Agregar bloque y elija el tipo de bloque como Portada .

A continuación, elija una imagen de fondo para mostrar en ese bloque de portada. Puede cargar una imagen o elegir una imagen de su biblioteca.

También puede cambiar una imagen que agregó anteriormente a una imagen de portada si es necesario. Haga clic en la imagen, elija Cambiar estilo o tipo de bloque y elija Portada :

En mi caso, elegiré este gorro como fondo y también escribiré un texto aleatorio en él.

Además, puedo establecer el ancho de mi imagen en la configuración a continuación. Simplemente lo alinearé en el centro.

Ahora mi bloque de portada está listo con una imagen de fondo y texto. Por defecto, el bloque Cover ya tiene una superposición de color negro, por lo que veremos cómo podemos editarlo en la siguiente parte:

Paso 2: personalice la superposición del bloque de cubierta

A continuación, procederá con la configuración del bloque para hacer una superposición.

Haga clic en el bloque> haga clic en el botón Opciones (se muestra como un botón de tres puntos)> elija Mostrar más configuraciones .

El menú de configuración de bloque ahora debería estar listo a la derecha de su pantalla. Vaya a la sección Superposición .

Le brinda dos opciones de color que son Sólido y Degradado para superponer su imagen de portada:

Intentaremos ambas opciones. Primero, probemos la superposición de color sólido.

Superposición de color sólido

Ahora usted puede:

• Elija un color del menú sugerido;
• Elija un color personalizado. Puede elegir un color en la paleta o insertar un código de color. El color personalizado se muestra a continuación.

Acabo de elegir un color rosa dulce para mi superposición. Además, también puedo cambiar la opacidad (el nivel de transparencia) de la superposición:

La tasa de opacidad del 30 al 60% es un valor adecuado. Si establece la opacidad por debajo o por encima de la tasa sugerida, la superposición puede ser casi invisible o demasiado audaz para ver el fondo. Mantendré la tasa de opacidad al 50% por defecto.

¡Todo está listo aquí! Así es como puede simplemente agregar una superposición de color sólido a su imagen de portada.

Ahora pasemos a la opción de color degradado.

Superposición de color degradado

Un color degradado, como se mencionó anteriormente, es un esquema de al menos dos colores elegidos. O simplemente dicho, el color de la superposición cambiará respectivamente y gradualmente del primer al segundo color elegido (y así sucesivamente).

Veamos cómo hago una superposición de degradado para entenderla mejor.

Primero, cambié el modo de color de Sólido a Degradado. Además, elegí un conjunto de colores degradados del menú de sugerencias. Así es como se ve:

Como puede ver, la superposición consta de 3 puntos de control. Cada uno tiene un color sólido y puede mover estos puntos de control para ajustar el esquema de color de la superposición.

La disposición de color predeterminada al elegir el color degradado está equilibrada. Intentaré ajustarlo un poco, y así es como cambia:

Otro ajuste que puede realizar es el tipo de esquema de color. Puede elegir entre tipo lineal y radial . Con el tipo lineal , también puede elegir la dirección de la superposición.

Para dominar esa opción de color degradado, necesitará un mejor sentido artístico y también aprenderá a mezclar y combinar colores para hacer la mejor combinación para la superposición.

Método 2: usar CSS

Si desea agregar superposición a una imagen con el Editor clásico, es necesario usar CSS. Necesitas agregar algo de CSS. Vaya a Apariencia> Personalizar> CSS adicional .

Para superposición de degradado

Agregue este código para superposición de degradado:

 .background-gradient {
    posición: relativa;
}
.background-gradient :: before {
    contenido: '';
    fondo: gradiente lineal (135deg, # 0693e3, # 9b51e0);
    posición: absoluta;
    arriba: 0;
    izquierda: 0;
    abajo: 0;
    derecha: 0;
    índice z: 1;
    opacidad: .5;
}

Para superposición sólida:

Agregue este código para superposición sólida:

 .background-opacity {
    posición: relativa;
}
.background-opacity: antes de {
    contenido: '';
    posición: absoluta;
    arriba: 0;
    izquierda: 0;
    abajo: 0;
    derecha: 0;
    índice z: 1;
    opacidad: .5;
    color de fondo: # 000;
}

Nota: este código le ayudará a agregar solo la superposición, no el texto de la imagen.

Puede agregar ambos si desea agregar muchas imágenes con diferentes tipos de superposición. Para definir la superposición como color sólido o degradado , vaya al editor de texto y agregue una clase a la imagen que desea superponer:

• Sólido: <div class="background-opacity"> … </div>
• Degradado: <div class="background-gradient is-style-default"> … </div>

Por ejemplo:

¡Así es como lo hago!

Veredicto

Agregar superposición a las imágenes realmente lo ayuda a decorar sus publicaciones / páginas y causar una mejor impresión en los visitantes. Vale la pena investigar cómo hacer una superposición perfecta, por lo que le recomiendo que se ponga manos a la obra de inmediato. También puede hacer que su sitio web sea más atractivo con controles deslizantes, banner emergente, fondo de video,… Espero que mis instrucciones sean lo suficientemente claras para usted, y no dude en dejar preguntas y comentarios a continuación, si los hubiera. ¡Chau!