Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Familia de plantillas York

La familia de plantillas York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor y York) fue diseñada para presentar el trabajo de ilustradores, fotógrafos, agencias creativas y otros productores de contenidos gráficos. Con una Página de índice en cuadrícula y Páginas de proyectos exclusivas, estas plantillas te proporcionan herramientas para exhibir y compartir tu obra creativa.

Esta guía se refiere a las funciones y a las opciones de diseño de la familia York. Los ajustes de Estilos del sitio están en negritas y se vinculan a la lista de todos los ajustes de York para ayudarte a navegar por el panel.

Consejo: Las Páginas de vista previa en vivo de Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori y York muestran sitios de reales de clientes que usan estas plantillas. 

Tipos de páginas que se admiten

York admite estos tipos de páginas:

Encabezado

Los visitantes usan el encabezado de todo el sitio de la parte superior para navegar por el sitio. En York, el encabezado está dividido en tres áreas: izquierda, centro y derecha. Puedes incluir cualquiera de los siguientes elementos en el encabezado:

Modifica el diseño del encabezado en la sección Sitio: Diseño del encabezado:

  • Elige Diseño a la izquierda, Diseño centrado o Diseño a la derecha para cambiar el diseño de Horizontal a Apilado. Estas opciones aparecen después de que hayas agregado dos o más elementos en el área del encabezado.
  • Elige cómo se verá el encabezado con el ajuste Encabezado en todo el ancho

Modificar el estilo del encabezado

Modifica el estilo del contenido del encabezado en Sitio: Encabezado:  

  • Selecciona la fuente y el color del título del sitio web con Título del sitio
  • Configura la fuente y el color del eslogan con Eslogan del sitio
  • Cambia el tamaño del logotipo con Altura del logotipo (máxima)
  • Selecciona la fuente, el color y el estilo del carrito de compras con Carrito de compras

Modifica el estilo de la navegación en Sitio: Navegación:

  • Ajusta la Navegación principal y la Navegación secundaria con Primaria y Secundaria.
  • Oculta o muestra el icono de intercalación al lado de los menús desplegables con Mostrar el indicador de carpetas.

folder_indicator_caret.png

Más ayuda con los encabezados

Consejos: 

Encabezados y pies de página

Los encabezados y pies de página son una gran forma de personalizar cada página. Para agregar bloques, posiciona el cursor sobre la parte superior o inferior de la página y, luego, haz clic en Editar, en las notas de Contenido del encabezado de una colección o Contenido del encabezado del pie de página.

York tiene encabezados y pies de página de página en las siguientes páginas:

  • Páginas de Álbum
  • Páginas de Blog
  • Páginas de Eventos
  • Páginas de Galería
  • Páginas de Índice
  • Páginas de Productos
  • Páginas de Proyecto

Para que estén en todo el sitio, marca Mostrar encabezado de página o Mostrar pie de página en la sección Página. Los Bloques de texto del encabezado y el pie de página de la página tienen los mismos ajustes de Sitio: Tipografía

Ten en cuenta lo siguiente:

  • Cada elemento de la colección, por ejemplo, las publicaciones de blog, no admite un encabezado y un pie de página.
  • El contenido oculto en el encabezado o en el pie de página podría seguir apareciendo cuando compartes una página en las redes sociales. Para evitarlo, borra el contenido antes de ocultar el encabezado o el pie de página.
  • Las páginas dentro del Índice muestran la navegación debajo del pie de página de la página.

Pie de página de todo el sitio

Si deseas habilitar un pie de página para todo el sitio, marca Mostrar el pie de página de todo el sitio en Sitio: Pie de página. Para añadir bloques, posiciona el cursor sobre el pie de página y haz clic en Editar. Si quieres una lista completa de los pasos, consulta Editar el pie de página.

Cabeceras de página

Incluye una imagen o video de banner arriba de estos tipos de páginas: 

  • Páginas de Álbum
  • Páginas de Blog
  • Páginas de Eventos
  • Páginas de galería (solo imágenes)
  • Páginas de Índice
  • Páginas de Diseño
  • Páginas de Productos
  • Páginas de Proyecto

Para agregar una imagen o video en el banner, agrega una imagen en miniatura o una URL de video en la pestaña Medios, en su configuración de página. 

Ten en cuenta lo siguiente:

  • Estos banners también crean una navegación con miniaturas en las Páginas de índice
  • Si la página no tiene una imagen en miniatura, el banner muestra un color de fondo. Es posible que debas cambiar la transparencia.
  • La configuración de los banners es universal para cada tipo de página. Oculta o muestra el banner de cada tipo de página con los ajustes de banner en la sección de Página.
  • El título y la descripción de la página pueden superponerse al banner.
  • Los banners admiten cargas animadas de página.

Banner solo en la página de inicio

Puedes mostrar un banner en tu página de inicio, pero ocultarlo en todas las demás páginas del mismo tipo. Por ejemplo, si tu página de inicio es una Página de diseño, debes seguir estos pasos:

  1. Ve a la página de inicio.
  2. Abrir Estilos del sitio.
  3. Desplázate hasta Página.
  4. Quita la marca de Mostrar banner de página. Así se ocultará el banner de todas las Páginas de diseño.
  5. Marca Mostrar banner de la página de inicio. Así aparecerá el banner en la Página de diseño que sea la página de inicio.

El título y la descripción de la página continuarán siendo universales. Por ejemplo, marcar Mostrar el título de la página exhibe el título de la página en la página de inicio y en todas las demás Páginas de diseño.

Modificar el estilo de los banners

Modifica el estilo de los banners en la sección Banners. Estos ajustes afectan a todos los banners de tu sitio.

  • En las páginas con imágenes en miniatura, configura la altura del banner con Altura.
  • Posiciona la imagen dentro del banner con Alineación de la imagen
  • Si se ha seleccionado Alineación de la imagen a la derecha o a la izquierda, usa Recortar imagen para completar la mitad derecha o izquierda de la imagen. Para que llene todo el banner, configura Alineación de la imagen como centro y marca Recortar imagen.
  • Marca Color automático del fondo y el banner automáticamente seleccionará un color de fondo de la misma imagen en miniatura. Esto es muy útil para las ilustraciones y las imágenes que tienen un único color de fondo predominante porque la imagen aparentará extenderse más allá de los bordes del banner.
  • Marca banner sin bordes para extender el banner hasta los bordes del navegador.
  • Los banners de la navegación del índice tienen su propia configuración de estilo.

El Color de fondo aparece en los siguientes casos: 

  • En los banners que no tienen imágenes en miniatura.
  • Mientras se carga la imagen o el video de un banner.
  • Detrás de las imágenes en miniatura que no llenan todo el banner, si Color automático del fondo no está marcado.

banner_sample_1.png

banner_sample_2.png

banner_sample_3.png

banner_sample_4.png

Títulos y descripciones de páginas

Muestra el título y la descripción de la página desde configuración de página en la parte superior de cualquier página. Las Página de proyectos y las Página de galería también pueden incluir categorías para cada imagen.

  • Esta configuración es universal para cada tipo de página.
  • Usa Título, Descripción y Categoría en la sección Página para ocultar o mostrar el texto. 
  • El texto puede superponerse al banner de página o mostrarse aparte.
  • Oculta la descripción de una página borrándola de la configuración de página.

Texto en banners frente a no tener un banner

Puedes asignar diferentes opciones de estilo para cuando el texto aparece sobre el banner, en lugar de cuando aparece sobre la página. La sección de Estilos del sitio que uses depende de si tu página tiene un banner habilitado:

Usa Título, Descripción y Categoría para cambiar el estilo del texto.

Las páginas sin banners tienen otras opciones:

  • Selecciona los márgenes laterales del texto con Ancho del texto.
  • Configura el espacio arriba y debajo del texto con Altura del texto.

El texto que aparece sobre un banner tiene estas opciones adicionales: 

  • Usa Alineación para posicionar tu texto dentro del banner.
  • Selecciona los márgenes laterales para el texto con Ancho.
  • Añade color detrás del texto con los ajustes de Destacar. Usa Margen del texto destacado para seleccionar el ancho del color de fondo.

text_on_a_banner.png

Páginas de Proyecto

La Página de proyecto organiza las imágenes, los títulos y las leyendas en diseños elegantes. Esta es una alternativa exclusiva de la Página de galería, especialmente si usas una combinación de texto e imágenes.

Para informarte mejor, consulta Páginas de proyecto

york-project.png

Páginas de Índice

Las Páginas de índice de York crean miniaturas de navegación en un banner o una cuadrícula que los visitantes pueden usar para navegar a las distintas páginas.

  • La cuadrícula de navegación muestra las imágenes en miniatura de la página. Incluso si una página tiene un banner de video, su imagen en miniatura aparece en la cuadrícula.
  • Puedes agregar un banner de página, un título de navegación y el texto de la descripción, y las áreas de encabezado y pie de página que se pueden personalizar.
  • En los dispositivos móviles, las Páginas de índice muestran una miniatura por fila.
  • Las Páginas de índice no tienen el Ancho máximo del sitio.

index-with-page-banner-and-navigation-banners.png

Páginas compatibles

Puedes agregar las siguientes páginas en un Índice: 

  • Páginas de Álbum
  • Páginas de blog 
  • Páginas de Galería
  • Páginas de Eventos
  • Páginas de Productos
  • Páginas de Proyecto
  • Páginas de Diseño

Imágenes en miniatura

Añade una imagen en miniatura o una URL de video en la configuración de una página para que aparezcan en la miniatura de navegación del Índice.  Modifica el estilo de las miniaturas en Índice: imagen del elemento:

  • Usa Alineación de la imagen para alinear la imagen dentro de la miniatura.
  • Llena la mitad derecha, la mitad izquierda o toda la miniatura con Recortar imagen. Esta opción aparece cuando se selecciona Alineación de la imagen a la Derecha, la Izquierda o el Centro
  • Elige cuánto color del fondo se trasluce en la imagen con Opacidad de la imagen
  • Usa Opacidad con el posicionamiento del cursor para ajustar cuánto se difumina la imagen si los visitantes posicionan el cursor sobre ella.
  • Elige Alineación de la imagen: Centro y marca Recortar imagen para que llene toda la miniatura.
  • Para configurar que las miniaturas obtengan automáticamente el color del fondo de la imagen en miniatura o del video, marca Color automático del fondo.
  • Elige un Color de fondo del elemento para mostrar en las miniaturas que no tengan imágenes o videos. Este aparece si Color automático del fondo no está marcado.

El color de fondo de la miniatura aparece en los siguientes casos:

  • Cuando las miniaturas de navegación no tienen imágenes ni videos.
  • Detrás de las imágenes que no llenan toda la miniatura.
  • A través de las imágenes en miniatura si ajustaste su opacidad.

Diseño de la miniatura

Las miniaturas de navegación del índice pueden aparecer como banners o en una cuadrícula. Configura el estilo en la sección Índice: Diseño.

  • Usa Ancho del elemento para que las miniaturas aparezcan como banners. Elige Completo o Medio para que haya uno o dos banners por fila. 
  • Usa el ajuste de Altura del elemento para seleccionar la altura de los banners.
  • Para que las miniaturas aparezcan en una cuadrícula, selecciona Ancho del elemento: cuadrícula. Usa los ajustes de Columnas y la Relación de la miniatura para modificar el estilo de la cuadrícula.
  • Selecciona el espacio entre los banners o las piezas de la miniatura con Espaciado de los elementos.
  • Marca Índice sin bordes para ampliar las miniaturas hasta los bordes del navegador. Si no está marcado, las miniatura tienen el mismo relleno que el sitio. Esto también afecta al banner del encabezado de página.
  • Marca Alternar anchos para alternar entre filas que incluyan un banner y dos banners. Esta opción aparece cuando se configuran los banners de este modo: Alineación de la imagen: Centro y el Ancho del índice está configurado como Completo o Medio.
  • Marca Alternar lados para alternar el lado del cual se muestra la imagen. Esta opción aparece cuando se configuran los banners en Alineación de la imagen: Derecha o Izquierda y el Ancho del índice está configurado como Completo.

Las miniaturas del índice pueden mostrar el título de la navegación de cada página y las categorías que hayas añadido en las imágenes de las Páginas de galería y de proyecto. El título de la navegación aparece en las miniaturas del Índice, y el título de la página se muestra en la parte superior de cada página. Esto significa que puedes elegir un texto distinto para que aparezcan en estos dos lugares. 

Usa la sección Índice: Texto del elemento para cambiar la fuente, el color y el tamaño del texto.

  • Elige cómo se verán los títulos en Visualización del título.
  • Quita la marca de Mostrar categorías para ocultar el texto de las categorías.
  • Marca Usar el fondo del título y Usar el fondo de la categoría para añadir colores de fondo personalizables detrás del texto.
  • Elige dónde aparecerá el texto con Alineación del texto.

index_thumbnails_with_titles.png

Navigation

Para modificar el estilo de la navegación del Índice, selecciona una página dentro del Índice y, luego, abre Estilos del sitio. 

La navegación se muestra en la parte inferior de todas las páginas dentro de un Índice. Para ocultarla, quita la marca en Mostrar navegación del índice. Para modificar su estilo, usa la sección Índice: Navegación:  

  • Configura Estilo del enlace como Lista para mostrar todas las páginas dentro del Índice como enlaces de navegación.
  • Ajusta Estilo del enlace como Siguiente para que aparezca un rótulo de Siguiente. Quita la marca de Mostrar solo el rótulo para que aparezca el nombre de la próxima página después del rótulo de Siguiente.

link-style-list.png

link-style-next.png

Para cualquiera de los estilos, puedes mostrar el texto como Incorporado o Apilado y cambiar el color, la fuente y la escala del texto. Usa los demás ajustes de Índice: Navegación para seleccionar el estilo del enlace, incluido el espaciado, la fuente y cómo se separan los enlaces.

Carga de las páginas

Las plantillas de York admiten Ajax, un método de carga que hace que tu sitio sea más rápido cargando únicamente el contenido visible en la página. Para crear una experiencia perfecta de navegación, te recomendamos que actives la carga con Ajax. Si necesitas más ayuda, consulta Carga con Ajax.

Las plantillas de York también admiten animaciones de página especiales:

  • Las imágenes y las leyendas de las Página de proyecto aparentan deslizarse de arriba abajo cuando te desplazas hacia abajo en la página. Desmarca el ajuste Las imágenes y las leyendas en cascada para quitar este efecto.
  • El contenido de las páginas de un Índice aparenta deslizarse hacia arriba con la carga inicial. Quita la marca del ajuste Animación de la transición de página para quitar este efecto.
  • Los banners de página se cargan con un efecto de difuminado.  

No se verán todas las animaciones cuando hayas iniciado sesión. Para acceder a una vista previa de los efectos, visita tu sitio en modo privado o incógnito.

image-sliding-up.gif

page_banner_fading_in.gif

Botones Compartir

Aparecen botones Compartir personalizables en las publicaciones de blog y en las páginas de detalles:

  • Usa la sección del botón Compartir para seleccionar su tamaño, el espaciado, el color y el estilo. Según el estilo que elijas, aparecerán más ajustes para personalizar los botones en mayor medida.
  • Usa la sección Productos: Detalles para seleccionar cómo se verá el botón Compartir en el elemento del producto. Oculta los iconos para los elementos del producto quitando la marca de Mostrar botón Compartir.
  • En las Páginas de blog, los botones Compartir siempre aparecen debajo de las publicaciones de blog.
  • El botón Compartir en Pinterest solo aparece en las páginas con imágenes en miniatura.
  • Las Páginas de álbum y de eventos incluyen un enlace para compartir con botones Compartir emergentes. Estos botones no tienen los estilos personalizados.  

Diseño y fondo

Configura el relleno de tu sitio en la sección Sitio:

  • Configura el espacio entre el contenido del sitio y la parte superior del navegador con Espaciado del sitio.
  • Selecciona el espacio entre el contenido del sitio y los lados del navegador con Relleno externo del sitio.
  • Si Encabezado de ancho completo no está seleccionado, el encabezado tiene la Alineación del sitio y el Ancho máximo del sitio.
  • Selecciona el color del fondo de todo el sitio con Fondo del sitio

Fuentes

Cambia el estilo de las fuentes de tu sitio con estas opciones de Estilos del sitio:

Puedes seleccionar que cierto texto se amplíe o reduzca según el ancho del navegador. Así puedes hacerlo para el texto del Encabezado 1:

  1. En la sección Sitio: Tipografía, marca Escalar el Encabezado 1.
  2. Selecciona el tamaño máximo de la fuente con Encabezado 1.
  3. Escoge el tamaño mínimo de la fuente con Mínimo del encabezado 1.

Te recomendamos seleccionar un tamaño mínimo de la fuente de cada encabezado que sea mayor que el tamaño de la fuente del cuerpo del texto. Si deseas obtener más información, visita Escalar fuentes.

Barra lateral

Las plantillas de York no admiten una barra lateral en ninguna página. Para ver una lista de plantillas con barras laterales, visita Editar las barras laterales.

Íconos de las redes sociales

Las plantillas de York no admiten iconos integrados de las redes sociales. En su lugar, debes agregar un Bloques de enlaces a las redes sociales en el pie de página o al contenido de tu página.

Móvil

Gracias al diseño adaptativo integrado en Squarespace, tu sitio se adapta para lucir fantástico en cualquier dispositivo. En los dispositivos móviles y en los navegadores más angostos, el contenido se apila en vertical.

En las secciones Dispositivos móviles, cambia el aspecto de tu sitio en dispositivos móviles:  

  • Usa Posición de la barra en dispositivos móviles para elegir si la barra de dispositivos móviles se desplazará hacia arriba con la página o permanecerá fija en la parte superior o inferior. La barra de dispositivos móviles contiene el título o el logotipo de tu sitio, el icono de navegación, la leyenda y el carrito de compras.
  • Usa Posición de la personalización de la marca para configurar dónde aparecerán la personalización de la marca y el icono del menú en el sitio.
  • El título del sitio web, el eslogan, los enlaces de navegación y el carrito de compras pueden tener distintos estilos para dispositivos móviles. Para que la personalización de la marca sea uniforme en todos los dispositivos, usa los mismos estilos que en la sección Sitio.
  • Selecciona una imagen de reserva para dispositivos móviles que aparecerá si no carga el video de banner en los dispositivos móviles. 
  • Siempre aparece ☰ en los dispositivos móviles, incluso si las Navegaciones principal y secundaria están vacías.

Ten en cuenta lo siguiente:

smartphong-and-tablet-view.png

Opciones de idioma

York admite dos opciones de idioma: 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 43 de 96
Familia de plantillas York