Cómo superponer una imagen en WordPress

Si está emocionado de hacer que su sitio web sea notable, siempre se esforzará por embellecerlo. Hay millones de formas de hacer de su sitio una musa, y una de ellas se mencionará en nuestra publicación hoy: superponiendo una imagen.
Se esconde el contenido
1. ¿Qué es una superposición?
2. Cómo superponer una imagen en WordPress
2.1. Método 1: Uso del bloque de cobertura de Gutenberg
2.2. Método 2: Uso de CSS
3. Veredicto
¿Todavía te preguntas qué es? ¡Simplemente tómelo lentamente y déjanos sacarte! ¿Qué es una superposición?

Como puede ver, utilicé una imagen con texto y superposición como título; que hizo una gran diferencia al escribir un título de texto simple. Se ve mucho más elegante y más atractivo en comparación con el normal, ¿verdad?
Más importante aún, la superposición de la imagen ayuda a resaltar el texto, al tiempo que preserva la imagen de fondo visible. Puede agregar fácilmente un texto con texto y superponerse en publicaciones/páginas de este tipo y usarlo para diferentes fines. En esta publicación, le mostraremos cómo hacerlo en simples pasos. ¿Has estado emocionado todavía? ¡Vamos a empezar! Cómo superponer una imagen en WordPress Hay dos formas en que puede intentar superponer una imagen de WordPress: usando el bloque de cobertura de Gutenberg y el uso de CSS. Si bien el uso de Gutenberg lo ayuda a construir una publicación/página que incluye una imagen de superposición incluso desde una hoja vacía, el uso de CSS lo ayudará a personalizar las imágenes en una página preconstruida.
Ambos dos métodos son fáciles de usar de ciertas maneras y le mostraremos cómo usarlos uno por uno. Método 1: Uso del editor de páginas de Gutenberg Block Access Gutenberg. Paso 1: inserte una imagen con el bloque de cobertura. Haga clic en Agregar bloque y elija el tipo de bloque como cubierta. Luego 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 ha agregado previamente a una imagen de portada si es necesario. Haga clic en la imagen, elija Cambiar el estilo o el tipo de bloque y elija la portada:

En mi caso, elegiré este gorro como fondo y escribiré un texto aleatorio en él. También puedo establecer el ancho de mi imagen en la configuración a continuación. Solo lo alinearé en el centro.

Ahora mi bloque de portada está listo con un fondo y una imagen de texto. Por defecto, el bloque de portada ya tiene una superposición negra, por lo que veremos cómo podemos editarlo a continuación:

Paso 2: Personalice la superposición del bloque de cobertura a continuación, continuará con la configuración del bloque para superar. Haga clic en el bloque> Haga clic en el botón Opciones (que se muestra como un botón de tres puntos)> Elija Mostrar más configuración.

El menú de configuración de bloque ahora debe estar listo en el lado derecho de la pantalla. Vaya a la sección de superposición.

Le ofrece dos opciones de color que son sólidas y gradientes para superponer la imagen de la portada:

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

Ahora usted puede:

Elija un color en el menú sugerido;
Elija un color personalizado. Puede elegir un color en la paleta o ingresar un código de color. El color personalizado se muestra a continuación. Elegí un color rosa dulce para mi superposición. Además, puedo cambiar la opacidad (nivel de transparencia) de la superposición:
La tasa de opacidad del 30 al 60% es un valor adecuado. Si establece la opacidad bajo o sobre la tasa sugerida, la superposición podría ser casi invisible o demasiado atrevida para ver los antecedentes. Mantendré la tasa de opacidad al 50% por defecto. ¡Todo está preparado aquí! Así es como puede simplemente agregar una superposición de color sólido a la imagen de la portada. Ahora pasemos a la opción Color de gradiente. El color de gradiente superpone un color de gradiente, como se mencionó anteriormente, es un esquema de al menos dos colores elegidos. O simplemente dicho, el color de la superposición cambiará, respectivamente, gradualmente del primero al segundo color elegido (y así sucesivamente).

Veamos cómo hago una superposición de gradiente para entenderlo mejor. Primero, cambié el modo de color de sólido a gradiente. También elegí un conjunto de colores de gradiente en el menú de sugerencias. Así es como se ve:

Como puede ver, la superposición consta de 3 puntos de control. Cada uno usa un color sólido y puede mover estos puntos de control para ajustar el esquema de color superpuesto. La disposición predeterminada de los colores al elegir el color de gradiente está equilibrado. Intentaré ajustarlo un poco y para que cambie:
Otro ajuste que puede hacer 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 superposición.

Para dominar esta opción de color de gradiente, necesitará un mejor sentido artístico y también aprenderá cómo mezclar y combinar los colores para hacer la mejor combinación para superposición. Método 2: Uso de CSS Si desea agregar una superposición a una imagen utilizando el editor clásico, se requiere el uso de CSS. Tienes que agregar algunos CSS. Aspecto de acceso> Personalización> CSS adicional. Para superposición en el gradiente, agregue este código para superposición en el gradiente:. Gradiente de fondo {posición: relativo;

}
.Construal-Gradiente :: antes {
Contenido: ”;
Antecedentes: gradiente lineal (135deg,#0693E3,#9B51E0);
Posición: Absoluto;
Arriba: 0;
Izquierda: 0;
Abajo: 0;
Derecha: 0;
IND ÍNDICE: 1;
Opacidad: .5;
}
Para superposición sólida: agregue este código para una superposición sólida:
.Background-opacy {
Posición: relativo;
}
.Background-opacy: antes {
Contenido: ”;
Posición: Absoluto;
Arriba: 0;
Izquierda: 0;
Abajo: 0;
Derecha: 0;
IND ÍNDICE: 1;
Opacidad: .5;
Color de fondo: #000;
}
Nota: Este código lo ayudará a agregar solo la superposición, no el texto en la imagen. Puede agregarlos en ambos si desea agregar muchas imágenes con diferentes tipos de superposición. Para definir la superposición como un color sólido o de gradiente, vaya al editor de texto y agregue una clase a la imagen que desea superponerse:
Solid:
…
Gradiente:
…
P.ej: