Avisos
Vaciar todo

Insertar Imagen en Cabecera / Wordpress  

 
Gershon
 Gershon
Estimable Member

Buenas tardes, quiero insertar una imagen en la cabecera, en el espacio vacio que tengo entre el logo y el carrito. He insertado esa imagen pero como parte del logo como habia leido en el foro, queda bien en web, pero en movil se distorsiona. ¿Como podría colocar esa imagen ? .
Otra cosa que me he dado cuenta y no se si tiene que ver con que la imagen insertada sea muy ancha, es que no se ve en el movil la parte superior de la tienda, como el buscador de productos, enlaces hacia RRSS y demas textos. El menu tampoco se aprecia, solo aparece un boton que hay que darle click y luego te aparece, lo cual me extraña porque tiene el mismo ancho que el slideshow y este se ajusta perfectamente a la pantalla movil.

Saludos

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 22/03/2014 9:53 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Gershon,

No veo ningún espacio en la cabecera, solo al lado derecho del cuadro de totales del checkout de WooComerce.

Saludos

ResponderCitar
Respondido : 22/03/2014 10:08 pm

Cursos Gratuitos WordPress

Gershon
 Gershon
Estimable Member

Es justamente donde esta la imagen de los perros , eso se ve bien en web pero en movil no se adecua la imagen, me imagino que es porque el la imagen y el logo estan adjuntadas como uno solo, como lo puedes ver en la imagen que te estoy adjuntando con la captura de pantalla, y si ves, el menu y los iconos de RRSS no aparecen ¿ Eso es normal? ¿ Hay alguna manera de que se vea bien la imagen y de que lo que pertene al TOP se pueda apreciar?

Saludos

ResponderCitar
Respondido : 22/03/2014 11:21 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Gershon,

La plantilla o theme es responsive y está diseñada para adaptarse a los dispositivos móviles, siempre y cuando respetes tu algunas cosas como que las imágenes de determinados elementos, como en este caso el logo, respeten las medidas originales previstas en el theme, de lo contrario es lógico que en dicho dispositivo tengan ese comportamiento.

De entrada yo probaría a dejar por un lago el logo y por otro la imagen de los perros de la derecha a ver que comportamiento tiene en el móvil.

Veo que usas imágenes con marca de agua de Fotolia que entiendo que has cogido de Google, buscador de imágenes, lo cual es mala idea. 😉

Imágenes gratuitas:

  1. http://commons.wikimedia.org/wiki/Main_Page
  2. http://www.sxc.hu/
  3. http://www.stockphotosforfree.com/

Saludos

ResponderCitar
Respondido : 22/03/2014 11:46 pm

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

Gershon
 Gershon
Estimable Member

Hola Luis, solo cogi una del slideshow pero para hacer una prueba, no es una imagen que se quedara, la imagen que queria en la cabecera la he comprado en Fotolia para eso. ¿No se podria poner esa imagen con codigo html en un widget de texto como los iconos de RRSS?
Aparte del problema de la imagen de la cabecera , el menu y lo que va en el Top tampoco aparecen.

Saludos

ResponderCitar
Respondido : 22/03/2014 11:53 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Dicha plantilla no cuenta con una posición para poder agregar la imagen de ese tamaño. Una opción es que deshabilites el modo responsive de la plantilla y se muestre del mismo tamaño en todos los navegadores o dispositivos.

Para deshabilitarlo tienes que dirigirte a Jano Theme => Avanzado => tipo layout => escoger un pixel fijo.

Saludos.

ResponderCitar
Respondido : 23/03/2014 5:06 pm

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

Gershon
 Gershon
Estimable Member

Ok, ya lo he probado , he quitado la imagen de la cabecera , pero en el movil sigo sin ver el menu, solo aparece un botón como ves en la imagen 1 ¿como puedo hacer para que se vea el menu? .

Luego de darle a ese boton recien te aparece el menu como se aprecia en la imagen 2, pero lo ideal es que se vea el menu. ¿Hay alguna solución?

Saludos

ResponderCitar
Respondido : 23/03/2014 8:16 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Gershon,

Te planteo otra opción más rápida, limpia y sin tocar código.

Revisa este artículo y coméntanos:

-

Es una opción para que tu web se vea correcta en dispositivos móviles sin necesidad de cambiar de theme ni de hacer cambios en el código o prescindir del uso de determinados plugins.

Total, por probar no pierdes nada 🙂 ..es gratis 😉

Nota: ...el vídeo se está procesando y tardará un rato en estar visible ¡sorry!
Saludos

ResponderCitar
Respondido : 23/03/2014 11:23 pm

Gershon
 Gershon
Estimable Member

Gracias Luis, lo he probado pero al final me quedo con el Responsive o si no lo dejare en visión normal de 1200 px., Lo unico que se me ocurre es poner la imagen en el Top, pero no creo que quede bien, al final todo lo que va en el Top no se aprecia en el movil.

Saludos y Gracias

ResponderCitar
Respondido : 04/04/2014 7:05 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla Gershon

Primero, creo que si quiere manejar el theme como responsive será necesario que :

1- Tu logo y tu imagen no sean una sola imagen, esto es evidente ya que la imagen es demasiado ancha, además estas que lo haces parte del logo lo cual no hace posible la redimensión, esto por tener un ancho fijo y mostrarse como fondo.

2- Con respecto al funcionamiento del menú, la plantilla es responsive, por eso cuando se reduce el espacio de visualización se muestra este botón alterno y te muestra el menú vertical, este es el comportamiento de la mayoría de plantillas, cambiar esto malograría tu diseño e implicaría cambios en el código de la plantilla.

Creo que puedes corregir el primer punto de alguna de las siguientes maneras:

1- Colocar la imagen en una posición a través de un widget , ubica la posición en la que se muestra el logo (usualmente header) y crea un nuevo widtget , deberá haber un separador diferenciando al widget de la imagen del widget de logo

2- Conservar tu logo como esta y a través de código css quitar el scroll horizontal , esto lo puedes hacer agregando el siguiente código por ejemplo en el archivo template.less :

body.layout-mode-responsive{
   overflow-x:hidden;
}

A este código una opción alterna es usar el css para sólo aplicar esta condición cuando sea menor a determinada resolución.

Saludos.

ResponderCitar
Respondido : 04/04/2014 10:30 pm

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

Gershon
 Gershon
Estimable Member

Gracias Jhon, ya esta solucionado, aunque la imagen no queda al 100% del tamaño que me gustaria por las posiciones del Layout. Tampoco se distorsiona en el movil, ahora se ve bien.

MuchasGracias

ResponderCitar
Respondido : 05/04/2014 12:31 am