Imagen de inicio¶
Dónde: menú Imagen de inicio de la administración. Quién: administradores y editores.
Lectura previa
Antes de componer una imagen de inicio, es importante entender para qué sirve: se dirige a las personas que descubren el sitio por primera vez, y debe darles una primera impresión positiva e inmediata.
Te recomendamos encarecidamente que leas primero la sección La imagen de inicio: crear una primera impresión positiva de la página «Filosofía y principios de diseño del sitio». Así sabrás qué mensaje, qué imagen y qué tono elegir.
La imagen de inicio es la gran imagen de la parte superior de la página de inicio, con su texto encima. Aquí ajustas la imagen, el texto y su formato; una vista previa en directo te muestra el resultado antes de guardar, y un botón Ver en la página de inicio te permite verla en condiciones reales antes de publicarla.
Puedes crear varias imágenes de inicio: en cada visita, el sitio muestra una al azar. Es práctico para ir rotando los mensajes (una imagen por actividad, por temporada…).
1 Vista previa de la imagen: el resultado en directo, tal como aparecerá en el sitio. 2 Texto de la imagen: el mensaje escrito sobre la imagen. 3 Ajustes del texto: tamaño, interlineado, color, alineaciones, contorno. 4 Ajustes de la imagen: reflejo, alineación para las pantallas pequeñas. 5 Ver en la página de inicio: abre la página de inicio del sitio con esta imagen, para juzgarla en condiciones reales, incluso mientras está en borrador. 6 Publicar o Actualizar: guarda la imagen de inicio.
Entenderlo en un minuto¶
- Una imagen de inicio = una imagen + un texto + su formato.
- Puede haber varias publicadas a la vez: el sitio muestra una al azar cada vez que se muestra la página.
- Para quitar una imagen de inicio del sitio, envíala a la papelera o vuelve a ponerla en borrador.
- Una imagen en borrador (o pendiente de revisión) nunca se muestra a los visitantes: solo se eligen al azar las imágenes publicadas. Para verla de verdad antes de publicarla, usa el botón Ver en la página de inicio (ver más abajo).
La lista¶
El menú Imagen de inicio abre la lista de las imágenes de inicio. Un clic en una de ellas la abre para editarla; el botón Añadir nuevo Imagen de inicio crea una nueva. Debajo de cada línea, el enlace Ver en la página de inicio abre la página de inicio del sitio con esa imagen (consulta Ver la imagen en la página de inicio).
El campo Título de la ficha no se usa: las imágenes de inicio solo se distinguen por su contenido.
Crear o modificar una imagen de inicio¶
- Haz clic en Añadir nuevo Imagen de inicio (imagen nueva) o en una imagen existente.
- Ajusta la imagen y el texto (ver más abajo) ayudándote con la vista previa.
- Guarda con Guardar borrador y luego haz clic en Ver en la página de inicio para juzgar el resultado en condiciones reales.
- Cuando la imagen te convenza, haz clic en Publicar (o Actualizar).
La vista previa se actualiza a medida que haces los ajustes; no se guarda nada antes de hacer clic en Publicar o Actualizar.
Vista previa de la imagen¶
Haz clic en la zona de vista previa para elegir la imagen en la biblioteca de medios, o sube una nueva.
El tamaño adecuado de la imagen
Tamaño recomendado: 1050 x 400 px. Una imagen de otras dimensiones puede quedar recortada o verse borrosa: comprueba la vista previa.
En las pantallas pequeñas (móvil), la imagen se reduce, pero su texto también: el diseño sigue siendo el mismo, en más pequeño. Por debajo de 1000 px de ancho, la altura disminuye en proporción (250 px como mínimo).
Texto de la imagen¶
El editor de texto escribe el mensaje que se muestra sobre la imagen. Funciona como el editor de texto habitual: negrita, cursiva, saltos de línea.
Un salto de línea en el editor es un salto de línea en la imagen.
Insertar un icono¶
Para poner un icono en el texto, coloca el cursor en el lugar deseado, haz clic en Insertar
un icono (debajo del campo Texto de la imagen), busca el icono y haz clic en él: su código,
de la forma [icon name="…"], se inserta en la posición del cursor y la vista previa se actualiza
al instante.
Ajustes del texto¶
| Ajuste | Lo que hace |
|---|---|
| Tamaño del texto | Tamaño de las letras, en píxeles. 35 por defecto. El texto se reduce en proporción en las pantallas pequeñas. |
| Interlineado del texto | Espacio entre las líneas. 0 por defecto (líneas juntas); cada punto adicional separa un poco más las líneas. |
| Color del texto | Color de las letras. Blanco (#FFFFFF) por defecto. |
| Alineación vertical del texto | arriba, centrado o abajo de la imagen. |
| Alineación horizontal del texto | izquierda, centro (por defecto) o derecha. |
| Mostrar un contorno | Interruptor, activado por defecto. Añade un ribete alrededor de las letras y de los iconos, para que sigan siendo legibles sobre una imagen clara o recargada. |
| Color del contorno | Color del ribete. Solo aparece si Mostrar un contorno está activado. |
| Estilo del contorno | suave (por defecto): contorno difuminado, como un halo; sólido: contorno nítido. Solo aparece si Mostrar un contorno está activado. |
| Grosor del contorno | De 1 a 5 px (2 por defecto). Solo aparece si Mostrar un contorno está activado. |
Un texto legible
Un texto blanco con un contorno oscuro sigue siendo legible sobre casi todas las imágenes. Para un texto oscuro, elige un contorno claro.
Ajustes de la imagen¶
| Ajuste | Lo que hace |
|---|---|
| Reflejar la imagen | sí: la imagen se invierte de izquierda a derecha. Útil para desplazar a una persona o el motivo sin modificar la imagen. |
| Alineación horizontal de la imagen (en la versión móvil) | En una pantalla pequeña, la imagen es más estrecha que la pantalla y su encuadre se corta por los bordes. Elige la parte que se conserva: izquierda, centro o derecha. |
Visualización en móvil (vista previa)¶
El interruptor Visualización en móvil no guarda nada: cambia el tamaño de la vista previa para simular un móvil (320 px de ancho). Úsalo para comprobar que el texto cabe y que la imagen está bien encuadrada en una pantalla pequeña, antes de publicar.
Ver la imagen en la página de inicio¶
Una imagen en borrador no se muestra a los visitantes: por tanto, no puedes verla en el sitio sin publicarla. El botón Ver en la página de inicio resuelve este problema: abre la página de inicio, en una pestaña nueva, con la imagen en la que estás trabajando, como la verían los visitantes, con el diseño real del sitio (el menú, los colores, el tamaño de la pantalla). Es la mejor manera de comprobar que el texto es legible antes de publicar.
Se encuentra en dos lugares:
- en el cuadro Vista previa, en la parte superior de la columna derecha de la pantalla de edición (5 en la captura);
- debajo de cada imagen de la lista, con el enlace Ver en la página de inicio.
Guarda primero
El sitio muestra la imagen tal como está guardada, no tal como está en la pantalla. Para una imagen nueva, guarda primero el borrador (el botón solo aparece después); para una imagen existente, haz clic en Actualizar o Guardar borrador antes de abrir la vista previa; si no, verás la versión antigua.
Solo tú ves esta vista previa
La vista previa solo la ves tú, conectado con permiso para modificar la imagen. Los visitantes siguen viendo las imágenes publicadas, elegidas al azar. Este botón no publica nada.
Dónde se muestra la imagen¶
La imagen de inicio se muestra en el lugar donde la página de inicio ha colocado el bloque de imagen de inicio: esta colocación ya está hecha en tu sitio. No se muestra ninguna imagen si no hay ninguna imagen de inicio publicada.
Preguntas frecuentes¶
Mi imagen no aparece en la página de inicio. Comprueba que está publicada (y no en borrador ni pendiente de revisión): solo las imágenes publicadas se muestran a los visitantes. Para ver una imagen que todavía no está publicada, usa Ver en la página de inicio. Luego recarga la página con Ctrl + F5 (en Mac: Cmd + Mayús + R).
La página de inicio muestra una imagen distinta en cada visita. Es intencionado: con varias imágenes de inicio publicadas, el sitio elige una al azar. Para conservar solo una, envía las demás a la papelera.
El texto es difícil de leer. Activa Mostrar un contorno, o cambia el color del texto o del contorno. Comprueba también con Visualización en móvil.
El texto se corta en el móvil. Reduce el tamaño del texto, o acórtalo. Comprueba con Visualización en móvil.
¿Puedo poner un enlace o un botón en la imagen? No: la imagen de inicio solo contiene imagen y texto.