Avisos
Vaciar todo

[Resuelto] Cabecera  

 
Antonio
 Antonio
Honorable Member

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 6:17 pm
Argenis
 Argenis
Soporte CMS Webempresa 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 6:33 pm

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

Antonio
 Antonio
Honorable Member

@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 8:17 pm
Argenis
 Argenis
Soporte CMS Webempresa 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 8:29 pm

Cursos Gratuitos WordPress

Antonio
 Antonio
Honorable Member

@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 8:36 pm
Argenis
 Argenis
Soporte CMS Webempresa 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 8:44 pm

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

Antonio
 Antonio
Honorable Member

@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 8:59 pm
Bruno
 Bruno
Soporte CMS Webempresa 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 9:10 pm

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

Antonio
 Antonio
Honorable Member

@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 6:48 am
Pepe
 Pepe
Soporte CMS Webempresa 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 10:16 am

Antonio
 Antonio
Honorable Member

@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 10:41 am
Pepe
 Pepe
Soporte CMS Webempresa 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 10:47 am

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

Antonio
 Antonio
Honorable Member

@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 3:52 pm
Pepe
 Pepe
Soporte CMS Webempresa 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 3:59 pm

Cursos Gratuitos WordPress