Texto encima de imagen (css adicional + html)  

 
Rafael
 Rafael
Usuario eminente

Me gustaría implementar imágenes de cabecera en mi web con uno texto h1 encima, y no me gustaría tener que instalar un plugin para ello, porque ya tengo bastantes cargando en la web.

Es decir, que insertando un código en la caja de css adicional de mi tema, y aplicando un div en la página que yo desease, pudiese insertar diferentes imágenes en diferentes páginas, y que encima de la imagen, en su lado inferior, y centrado, y a poder ser con un poco de trasnparencia, tuviera un texto en h1 (a poder ser con una fuente específicamente añadida para este tipo de div, no con la fuente de h1 por defecto).

He visto este tutorial en internet, que precisamente hace esto:
https://www.youtube.com/watch?v=edCuCED3Zmo

Pero no sé como implementarlo en mi web.

Gracias de antemano.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 04/01/2018 2:02 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Rafael.

las etiquetas H1 se utilizan para título del contenido de una página web. Importante en este punto delimitar de forma clara la diferencia entre sitio web y página web: un título H1 debe hacer referencia a una página de tu sitio web, y no al sitio web en general.

No es bueno utilizar mas de una etiqueta H1 en cada página, mas bien no es nada recomendable de cara al seo, puedes utilizar otras como h2, h3, h4, etc....

Para añadir un texto lo puedes hacer con HTML :

Texto que quieras mostrar

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 04/01/2018 3:09 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Rafael
 Rafael
Usuario eminente

Mmmmm, me parece que no se ha entendido bien:
Yo hasta ahora tengo, en cada página web, en primer lugar una imagen de cabecera, y después de esta el título, en h1 obviamente, y sin repetirse en el resto de la página.

Pero me gustaría que tuviera un aspecto "más elegante" y que el texto en h1 se integrara encima de la imagen, no después de ésta, en el borde inferior de la misma, aplicandole algo de estilo (cambiar tipografía, algo de transparencia,..) tal y como descrito en el texto inicial

ResponderCitar
Respondido : 04/01/2018 3:23 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Te refieres poner un texto encima de la imagen de por ejemplo este artículo?:
Contenido solo visible a usuarios registrados

He visto tu video, y efectivamente se puede realizar de forma sencilla, sin embargo para que sea sencilla la implementación de esto es muy importante tener una estructura HTML adecuada, en tu caso la imagen y el texto no estan en el mismo contenedor, esto dificulta mucho la implementación.

En resumen, si el theme que usas no genera una estructura HTML en donde la imagen y el título se encuentren ambos dentro del contenedor, lo veo complicado realizarlo.

Algo que podrías evaluar es hacer la estructura como parte del contenido de tu entrada, en este caso definirías la estructura para cada artículo, colocando manualmente la imagen y el título dentro de un mismo contenedor. Sin embargo tendrías que eliminar la imagen destacada de tu artículo ya que lo colocarás como parte del contenido y también el título tendrías que modificar tu theme para que no lo muestre, tal vez no valga la pena hacer estas modificaciones.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/01/2018 4:41 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Rafael
 Rafael
Usuario eminente

¿Seguro que no hay una solución más sencilla? Mira, indagando un poco más por internet, he dado con esta solución:

http://sientema-cp31.wordpresstemporal.com/viajar/fez-escapada/

Puedes ver ahora que la cabecera tiene el texto h1 encima. Éste es el código:

);height:425px;width:940px;margin-top:20px">

Escapada a Fez desde Tarifa y la Costa del Sol

Lo malo es que así la imagen no se adapta la ancho de la ventana (se queda fija).

Otra opción es esta:

);margin-top:20px">

Escapada a Fez desde Tarifa y la Costa del Sol

Pero entonces la imagen se adapta al texto, no se visualiza completa.

ResponderCitar
Respondido : 04/01/2018 6:43 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

En el caso que indicas la imagen esta como fondo no como elemente img, es decir la estructura es otra y el código CSS también.

En tu código para que se vea correctametne en móvil elimina width:940px; del estilo en línea, es decir no definas un ancho.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/01/2018 8:04 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Rafael
 Rafael
Usuario eminente

si elimino al ancho éste, efectivamente, se adapta a la resolución de la pantalla pero el alto se mantiene fijo, es decir, no visualiza por completo la imagen, sino un trozo vertical, en virtud del ancho de la pantalla.

Y si elimino también el alto la imagen se adapta a la dimensiones del texto, es decir que se recorta en alto.

Con respecto a esto que me indicas:
"En el caso que indicas la imagen esta como fondo no como elemente img, es decir la estructura es otra y el código CSS también."
A ver, a mi me da igual la solución que se plantee. Yo lo que quiero es insertar una imagen, que se adapte a la resolución del dispoisitivo, y que encima de ésta haya un texto H1, en su borde inferior, y me da igual que código o elementos sea necesario utilizar, siempre que no sea necesario tener que instalar otro plugin en wordpress.

Gracias de antemano

ResponderCitar
Respondido : 05/01/2018 11:09 am
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Para que las modificiaciones que hagas sean los más simples posibles, mejor evita usar estilos inline, sólo usalos para la imagen que entiendo que cambiará de artículo en artículo, es decir usa el siguiente código HTML

Escapada a Fez desde Tarifa y la Costa del Sol

En este código he eliminado todo los estilos inline, salvo la imagen de fondo para el contenedor, y he creado dos clases, fondo-imagen y texto-imagen

Luego usa estas clases para definir los estilos, puedes agregtarlas al final de algún archivo CSS,
por ejemplo al final del archivo : wp-content/themes/tourpackage-v2-00/style-custom.css

.texto-imagen{
	color:white;
	padding:20px;
	line-height:40px
}

.fondo-imagen{
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center center;
}

@media ( min-width:768px){
	.fondo-imagen{
		min-height:300px;
	}
}

Refresca tu navegador luego de agregar este código CSS y verifica :
Contenido solo visible a usuarios registrados

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 05/01/2018 4:36 pm

Cursos Gratuitos WordPress

Por favor Iniciar Sesión o Registro