Pregunta sobre Storefront de Wordpress:

Tema de Shopfront: tamaño de la imagen del encabezado

Un usuario preguntó 👇

Estoy usando Storefront y el encabezado dice «Su tema funciona mejor con una imagen con un tamaño de encabezado de 1950 × 500 píxeles». (apariencia, personalización, etc.) Así que elijo Canva y el diseño de encabezados así. Pongo la imagen en el encabezado y es demasiado grande. solo la parte central de mi imagen se muestra en el encabezado y los bordes están colgando. Verifiqué la función en Photoshop y el encabezado es definitivamente 1950 x 500. ¿Alguien puede decirme las dimensiones reales del encabezado de Storefront? ¡Hice clic en explorar pero realmente no entiendo lo que veo!

(@jameskoster)

Hace 2 años, 1 mes

Oye,

Esa es la cantidad correcta para recomendar. Dejame explicar;

Storefront establece la imagen del encabezado como fondo, por lo que el contenido como su logotipo / menú secundario aparece en la parte superior. Eso significa que cambiará de tamaño según la ventana del navegador. Si abre su sitio y cambia el navegador, verá esto en efecto. El uso de una imagen de 1950 × 500 garantiza que la imagen no se reproduzca en pantallas muy grandes.

Esta imagen se maneja mejor como fondo para obtener mejores resultados. IE no agrega ningún texto o contenido importante, sino que usa las regiones de widgets disponibles para hacerlo.

Gracias

Diseñador James @ Automattic

(@aprender)

Hace 2 años, 1 mes

Hola James. Estoy seguro de que sabe de lo que está hablando, pero no lo entiendo. Mi sitio aún no está listo para ser público, así que configuré otro rápidamente y puse la imagen de encabezado del mismo tamaño en él. aquí está la URL del segundo sitio:
http://storefront-trial-co-uk.stackstaging.com/sample-page/
Para su consejo sobre el tamaño de la pantalla, miré esto en una pantalla de 24 pulgadas, una pantalla de 14 pulgadas y un ipad. El mismo problema en todos. Apreciaríamos tu ayuda. TIA

(@jobthomas)

Ingeniero Automático de Felicidad

Hace 2 años, 1 mes

Hola @learnlite. Siempre será difícil tener una característica de diseño importante en el borde / esquinas en el sentido de que esto significará calcular la altura en función del ancho. Esto sería posible con algunos JS y CSS personalizados, pero realmente no recomendaría hacerlo.

Aquí hay algunos CSS que puede configurar. Acerca de Personalizar> CSS adicional, puede agregar el siguiente código:

/*----
Heigth header
----*/

/* Make sure the covering is happening */

.site-header {
    background-size: cover;
}

/* Make sure the design looks okay on desktop */

@media (min-width: 768px) { 
    .site-header {
        min-height: 500px;
        padding-top: 400px;
    }
}

Verá ahora, cuando mire 1950px, se verá perfecto, pero tan pronto como se ensanche un poco o menos, las esquinas se verán extrañas. Sin embargo, por motivos visuales y de accesibilidad, es mejor tener una altura fija y no saltar con demasiada altura del encabezado. Si desea obtener más información sobre CSS, le recomiendo encarecidamente tutoriales gratuitos en w3schools. Aquí puede encontrar los conceptos básicos de selectores (cómo enfocarse en el aspecto correcto de la página), y propiedades (cómo cambiar el elemento en la página).

Esta respuesta fue modificada hace 2 años, hace un mes por.

(@aprender)

Hace 2 años, 1 mes

Gracias. Le voy a dar una oportunidad. Sé un poco de CSS, un día podría aprender un poco más.

(@jobthomas)

Ingeniero Automático de Felicidad

Hace 2 años, 1 mes

@learnlite. Buena suerte con eso. Hay algunos cursos de CSS realmente buenos en teamtreehouse.com (ahí es donde aprendí muchas de mis habilidades).

Marcaré este hilo como ahora resuelto.

(@ rosebox3403)

Hace 1 año, 10 meses

Cada trabajo que puedo conseguir es sobre cómo cambiar la imagen de mis encabezados, y lo intenté, pero nada funcionó. Sin embargo, cambió la altura de todas las demás imágenes de mi tema y ahora no puedo volver a cambiarlas. . Dónde encontrar el código de la imagen del encabezado. Tengo experiencia con el diseño web, pero soy muy nuevo en wordpress, que es muy difícil de usar para mí. Gracias por tu ayuda.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.