Cómo agregar texto sobre una imagen en WordPress (3 métodos)

Agregar texto sobre una imagen es una técnica popular para mejorar el atractivo visual de su contenido o sitio web. Además, es una excelente manera de hacer que sus imágenes sean más informativas y atractivas.

En este artículo, hemos encontrado tres formas fáciles de agregar texto encima de una imagen en WordPress. Si prefiere usar el editor de bloques, un complemento o código personalizado. ¡Averigüemos!

Por qué es importante agregar el texto en la parte superior de las imágenes.

Antes de avanzar a los métodos, debe saber la razón detrás de por qué es importante agregar el texto en la parte superior de las imágenes.

1. Llamar la atención

Si los usuarios se desplazan rápidamente a través del contenido, agregar imágenes solo puede no ser suficiente para llamar su atención. Es por eso que necesita agregar texto encima de una imagen para ayudarlo a llamar la atención de los usuarios y transmitir su mensaje de manera más efectiva.

2. Mejorar la experiencia del usuario

Es cierto que las imágenes pueden proporcionar mucho valor por su cuenta, sin embargo, agregar texto encima de ellas, como subtítulos, citas u otro contenido basado en texto, puede hacerlas aún más útiles. Además, los usuarios pueden comprender el contexto de la imagen y cómo se relaciona con su contenido.

3. Mejora de la accesibilidad

También puede ayudar a mejorar la accesibilidad para los usuarios que pueden tener dificultades para ver la imagen en sí. Al proporcionar una alternativa de texto, puede asegurarse de que su contenido sea accesible para una gama más amplia de usuarios.

4. Boosting SEO

Agregar palabras clave relevantes a sus subtítulos de imagen o texto Alt puede ayudar a mejorar la clasificación del motor de búsqueda del sitio web . Esto se debe a que los motores de búsqueda usan esta información para comprender el contenido de su sitio web y determinar qué tan relevante es para las consultas de búsqueda de los usuarios.

3 Métodos Cómo agregar texto sobre una imagen en WordPress

1. Use el editor de bloques de WordPress

Primero, vaya a la página o publique en la que vaya a agregar el texto a través de la imagen.

Elija la portada para escribir el texto a través de la imagen.

Después de eso, comenzará a aparecer en su pantalla. Le muestra la imagen predeterminada, pero puede cambiar la imagen como desee.

También puede reemplazar la imagen predeterminada con su imagen personalizada. Haga clic en el botón Reemplazar y luego cargue la imagen o simplemente elija desde la biblioteca de medios .

Se verá así, luego puede escribir el texto sobre la imagen como desee.

Haga doble clic en el texto, obtendrá la opción Editar para el texto. Puede ajustar el tamaño, el color y muchos más según sus requisitos.

Por último, haga clic en el botón Actualizar, o si ha agregado la nueva publicación o página, luego haga clic en el botón Publicar.

2. Use CSS

Abra el editor de bloques de WordPress y seleccione el bloque de imágenes donde desea agregar texto. En la barra lateral a la derecha, haga clic en la avanzada .

En el de clase CSS adicional , agregue una clase personalizada para el bloque de imágenes.

Guarde los cambios y publique o actualice la página o publicación.

.custom-class {posición: relativa; } .custom-class p {posición: absoluto; arriba: 50%; Izquierda: 50%; transformar: traducir (-50%, -50%); tamaño de fuente: 24px; Color: #ffffff; Shadow de texto: 2px 2px 2px #000000; } 

En el código de arriba, reemplace la " clase personalizada " con la clase personalizada que agregó al bloque de imágenes. También puede personalizar el tamaño de fuente, el color y otras opciones de estilo para que coincidan con sus preferencias.

3. Use el complemento de WordPress

Si desea la libertad de crear diseños de página completamente personalizados, necesitará un complemento de constructor de páginas. Uno de los complementos de WordPress Page Builder es Seedprod, que le permite agregar texto encima de cualquier imagen en todo su sitio web.

Primero, instale y active el complemento SeedProd. Tras la activación, deberá ingresar una clave de licencia. Inicie sesión en su cuenta Seedprod, luego haga clic en la pestaña

Descargar Una vez hecho esto, copie la clave en la de licencia .

Ahora puede pegar esta clave en su área de administración de WordPress yendo a la página de configuración de SeedProd » .

Una vez que esté aquí, continúe y pegue su clave en el campo Clave de licencia. Luego, simplemente necesita hacer clic en Verificar la tecla .

A continuación, irá a las páginas de destino de Seedprod » y haga clic en Agregar nueva página de destino .

Después de eso, elija una plantilla. No importa la plantilla de SeedProd que elija, puede personalizar cada parte de la plantilla para adaptarse perfectamente a su sitio web y marca.

Sin embargo, si prefiere comenzar con un lienzo en blanco, haga clic en la plantilla en blanco .

Una vez que haya encontrado una plantilla, pase su mouse sobre ella. Luego puede hacer clic en el icono de vista previa .

Si está satisfecho con cómo se ve esta plantilla, continúe y haga clic en el botón Choose this Plantplate .

En el Nombre de la página , escriba un nombre para la página.

Si desea cambiar la URL creada automáticamente, edite el texto en el URL de la página .

Haga clic en Guardar y comenzar a editar el botón de página. Esto abrirá la plantilla en el editor de arrastrar y soltar de SeedProd.

En la barra lateral izquierda, verá todos los bloques y secciones que puede agregar a su página usando arrastrar y soltar.

A menos que esté utilizando la plantilla en blanco, su página Seedprod ya tendrá algunos bloques y secciones. Para editar cualquiera de este contenido, haga clic para seleccionar el bloque o la sección .

El menú izquierdo de Seedprod ahora mostrará todas las configuraciones que puede usar para personalizar este bloque o sección.

La forma más fácil de agregar texto encima de una imagen es usar una de las secciones de héroes preparadas para Seedprod.

Estas secciones tienen un marcador de posición, una imagen de fondo de ancho completo, con algún texto de marcador de posición agregado en la parte superior. Simplemente puede reemplazar la imagen de fondo y el texto predeterminados con su propio contenido.

Haga clic en la pestaña de sección en el menú izquierdo.

Luego, haga clic en Hero para ver todas las secciones de héroe preparadas que puede agregar a su página.

Para seguir adelante y agregar esta sección de héroes a su diseño, simplemente haga clic en elige esta sección.

Haga clic en la imagen de stock para seleccionarla si desea reemplazar el stock de la plantilla con su propia imagen.

de la imagen de fondo de desplazamiento hasta que aparezca un icono de basura. Luego puede seguir adelante y hacer clic en este icono para eliminar la imagen del marcador de posición.

A continuación, haga clic en Usar su propia imagen . Luego puede elegir una imagen de la biblioteca de medios de WordPress o usar una imagen de stock.

Una vez que haya agregado una imagen, está listo para reemplazar el texto del marcador de posición.

Haga clic para seleccionar el bloque de texto . Luego, en el área de texto , simplemente escriba el texto que desea usar.

Algunas de las plantillas de héroes de Seedprod tienen contenido adicional, como botones de llamada a acción.

Si desea cambiar este contenido, haga clic para seleccionar el bloque y luego realice sus cambios en el menú izquierdo de SeedProd.

Otra opción es eliminar el bloque de la plantilla de héroe.

Para hacer esto, haga clic para seleccionar el bloque y luego haga clic en el icono de basura .

Si está satisfecho con el diseño de su página, haga clic en el botón Guardar .

Desde aquí, puede elegir publicar la página o guardarla como una plantilla.

Conclusión

Esos son los tres métodos para agregar texto encima de una imagen en WordPress. Fácil, ¿verdad? Elija el enfoque que mejor se ajuste a su nivel de habilidad y preferencias de diseño.

Además, organice, optimice y administre sus archivos multimedia como un Pro con WP Media Folder . ¡Es el momento adecuado para decir adiós a las bibliotecas desordenadas!