Avisos
Vaciar todo

[Resuelto] Cabecera

14 Respuestas
4 Usuarios
0 Reactions
39 Visitas
Respuestas: 560
Honorable Member
Topic starter
 

Buenas tardes,

No sé como ajustar la imagen que he puesto en la cabecera, las dimensiones son 1950x300, pero se recorta porque es muy grande.

Que tengo que hacer para que se ajuste bien a la pagina?

Adjunto imagen.

La URL es www.isoladorecamper.com

Sin título

 

Gracias

Contenido solo visible a usuarios registrados


 
Respondido : 04/07/2022 5:17 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Antonio,

Veo que utilizas storefront, para este tema este tipo de ajustes debes hacerlo por medio de código:

header#masthead {
background-image: url( https://isoladorescamper.com/wp-content/uploads/2022/07/Logo-Isoladorescamper.jpg );
background-size: cover;
background-repeat: no-repeat;
}

Agrega este en Apariencias > Personalizar > Css adicional, esto hará que se visualice de forma completa sin embargo al ser tan grande este en móvil no se vera completo, tendrás que evaluar el agregar otra imagen diferente.

Un saludo 🖐️ 


 
Respondido : 04/07/2022 5:33 pm
Respuestas: 560
Honorable Member
Topic starter
 

@argenis

Buenas tardes,

Que tamaño de imagen me aconsejas para que tambien se visualice bien en el movil?

No es que lo quiera tan grande, lo que quiero es que se vea bien, pero al no saber me salió así de enorme.

Gracias


 
Respondido : 04/07/2022 7:17 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Antonio, 

Podemos verificar si te podemos crear un código para sustituir esta imagen solo en móvil, pero debes subirla primero, para moviles te recomiendo que sea un poco mas alta la imagen el problema es que esta muy achatada, y con esta que nos compartes mira como queda:

image

También te comento que no veo aplicado el css aun en la web, sigo viéndola sin el css:

image

Ya lo has ingresado?

Un saludo 🖐️ 


 
Respondido : 04/07/2022 7:29 pm
Respuestas: 560
Honorable Member
Topic starter
 

@argenis

Hola,

No lo he ingresado, si me aconsejas que ponga esta imagen con una medida concreta para que no tenga problemas desde un pc ni desde un mobil, dime que medida es la ideal. Según veo en la informacion que hay en el mismo Worpress dice "Tu tema funciona mejor con una imagen con tamaño de cabecera de 1950 × 500 pixels — podrás recortar tu imagen una vez la subas para un ajuste perfecto"

Gracias


 
Respondido : 04/07/2022 7:36 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Antonio,

Es posibie, cuando tengas la imagen subida nos comentas para compartirte el css, aunque si solo modificas la imagen puedes cambiar la url del mismo código que te compartimos, para la version movil puedes aplicar este luego del que te compartimos:

@media screen and (max-width: 500px) {
header#masthead {
background-size: contain !important;
}}

Es decir tendrias dos codigos.

Un saludo 🖐️ 


 
Respondido : 04/07/2022 7:44 pm
Respuestas: 560
Honorable Member
Topic starter
 

@argenis

Hola de nuevo, mañana cambiaré la imagen para ver si trae menos problemas. Haré un logo que se adapte bien sobre el fondo blanco de la web y cuando lo tenga subido os escribo.

Gracias


 
Respondido : 04/07/2022 7:59 pm
Bruno
Respuestas: 6466
Illustrious Member Moderator
 

Que tal Antonio,

Estaremos atentos a tus comentarios cuando hagas los ajustes que nos comentas, mantendremos la consulta abierta

Saludos!


 
Respondido : 04/07/2022 8:10 pm
Respuestas: 560
Honorable Member
Topic starter
 

@argenis

Buenos días,

al final lo que he hecho es lo que me indicó Argenis, he puesto los códigos en css adicional, ahora la imagen se ajusta bien en un Pc y en el móvil, pero tengo unas dudas respecto a esa imagen.

Veo que el menú principal queda dentro y apenas se ve, ¿cómo puedo hacer que el menú principal quede por debajo del logo?

Otra pregunta, me aconsejáis que me olvide de ese logo y lo ponga más pequeño y colocado en el lado izquierdo/superior, usando el apartado "identidad del sitio" en lugar de "cabecera"?

la URL es www.isoladorescamper.com

Gracias

 


 
Respondido : 05/07/2022 5:48 am
Pepe
 Pepe
Respuestas: 41113
Illustrious Member Admin
 

Hola Antonio.

Veo que estas añadiendo la imagen como Imagen de fondo de cabecera

Prueba lo siguiente.

.- Elimina el código anterior.

.- Accede apariencia -> Personalizar 

.- Accede a Cabecera y elimina la imagen que tienes.

.- Accede a Identidad del sitio y añade el logotipo:

screenshot mary52.webempresa.eu 2022.07.05 11 12 20

.- Accede a CSS Adicional y añade lo siguiente:

@media (min-width: 768px) {
.site-header .site-branding img {
height: auto;
max-width: 600px;
}

}

El resultado seria algo parecido a esto:

screenshot mary52.webempresa.eu 2022.07.05 11 15 45

 

Un saludo


 
Respondido : 05/07/2022 9:16 am
Respuestas: 560
Honorable Member
Topic starter
 

@pepesoler

Hola Pepe,

acabo de hacer las modificaciones que me indicas. Adjunto una captura de pantalla para que veas como queda, tendria que ajustarlo para que visualmente quede mejor.

Imagino que modificando las dimensiones del css adicional la imagen podría ser más ancha, pero mi duda es si en lugar de hacer lo que pretendo, podría quedar mejor un logo mas pequeño en esa misma ubicación. Estéticamente puede quedar mejor.

Voy a hacer pruebas para ver si visualmente es más agradable.

Un saludo

Sin título

 

 


 
Respondido : 05/07/2022 9:41 am
Pepe
 Pepe
Respuestas: 41113
Illustrious Member Admin
 

Hola Antonio:

Imagino que modificando las dimensiones del css adicional la imagen podría ser más ancha

puedes modificar el valor de max-width para darle un ancho mayor 

max-width: 800px;

 

Estéticamente puede quedar mejor.

Todo es probarlo y ver lo que más te guste.

 

Un saludo


 
Respondido : 05/07/2022 9:47 am
Respuestas: 560
Honorable Member
Topic starter
 

@pepesoler

Hola Pepe,

he modificado el valor y ahora sí se adapta mejor y visualmente resulta más atractivo. También he cambiado un poco el logo.

Tema resuelto por el momento.

Gracias


 
Respondido : 05/07/2022 2:52 pm
Pepe
 Pepe
Respuestas: 41113
Illustrious Member Admin
 

Hola Antonio.

Genial !!! Me alegra que fuese lo que buscabas.

Cualquier consulta que tengas no dudes en comunicarlo.

 

Un saludo


 
Respondido : 05/07/2022 2:59 pm