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.

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:

  • Cambia la navegación principal y la navegación secundaria por 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 excelente 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 Contenido del encabezado de una colección o Contenido del pie de página de una colección.

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.
  • Coloca la imagen en el banner con Alineación de imagen
  • Cuando Alineación de imagen se establece a la derecha o izquierda, rellena la mitad derecha o izquierda de la imagen con Recortar imagen. Para rellenar todo el banner, establece Alineación de imagen en el centro y selecciona 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.
  • Para extender el banner a los bordes del navegador, selecciona Banner sin bordes.
  • 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.
  • Oculta o muestra el texto con Título, Descripción y Categoría en la sección Página.
  • 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:

Modifica el estilo del texto con Título, Descripción y Categoría.

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: 

  • Coloca el texto en el banner con Alineación.
  • Selecciona los márgenes laterales para el texto con Ancho.
  • Agrega un color detrás del texto con los retoques Resaltar. Establece el ancho del color de fondo con Resaltar sangría de texto.

text_on_a_banner.png

Páginas de Blog

La familia de plantillas York utiliza una Página de blog estándar en cuadrícula/lista. Infórmate más sobre las funciones y opciones de estilo exclusivas de este tipo de blog en Páginas de blog estándar en cuadrícula/lista.

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:

  • Alinea la imagen en la miniatura con Alineación de imagen.
  • 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
  • Cambia el grado de difuminado de la imagen cuando los visitantes se desplazan sobre ella con Opacidad de desplazamiento.
  • Para rellenar toda la miniatura, selecciona Alineación de imagen: Centro y selecciona Recortar imagen.
  • 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 de elemento para mostrar en miniaturas que no tengan imágenes o videos. Este retoque aparece cuando el fondo de color automático no está seleccionado.

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 imágenes en miniatura si cambiaste 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.

  • Muestra las miniaturas como banners con Ancho del elemento. Elige Completo o Mitad para mostrar uno o dos banners por fila. 
  • Establece la altura de los banners con Altura del elemento.
  • Para mostrar las miniaturas en una cuadrícula, selecciona Ancho del elemento: Cuadrícula. Cambia el estilo de la cuadrícula con los retoques Columnas y Relación de miniaturas.
  • Selecciona el espacio entre los banners o las piezas de la miniatura con Espaciado de los elementos.
  • Para extender las miniaturas hasta el borde del navegador, selecciona Índice sin bordes. Cuando no están seleccionadas, las miniaturas siguen el relleno del sitio. Esto también afecta al banner del encabezado de la página.
  • Para alternar entre filas que muestren uno y dos banners, selecciona Anchos alternativos. Esta opción aparece cuando los banners se establecen en Alineación de imagen: Centro y Ancho del índice se establece en Completo o Mitad.
  • Para alternar el lado en el que se muestra la imagen, selecciona Lados alternativos. Esta opción aparece cuando los banners se establecen en Alineación de imagen: Derecha o izquierda y Ancho de índice se establece en 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. 

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

  • Elige cómo se verán los títulos en Visualización del título.
  • Para ocultar el texto de la categoría, selecciona Mostrar categorías.
  • Para agregar colores de fondo personalizables detrás del texto, selecciona Usar fondo de título y Usar fondo de categoría.
  • Elige dónde aparecerá el texto con Alineación del texto.

index_thumbnails_with_titles.png

Navegación

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. Establece el estilo de vínculos, incluido el espaciado, la fuente y la forma en que se separan los vínculos, con los demás retoques en Índice: Navegación.

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

Estructura y estilo

Botones Compartir

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

  • Define su tamaño, espaciado, color y estilo en la sección Botones Compartir. Según el estilo que elijas, aparecen más retoques para personalizar aún más los botones.
  • Selecciona los botones Compartir elementos del producto que aparecen en la sección Productos: Detalles. Oculta los íconos de elementos del producto desmarcando Mostrar botones Compartir.
  • Utiliza Compartir íconos en Blog: Elemento para elegir si los botones Compartir se muestran encima o debajo del contenido de las publicaciones individuales del 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.

Iconos de 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:  

  • Elige si la barra móvil se desplaza hacia arriba con la página o permanece fija en la parte superior o inferior con Posición de la barra móvil. La barra móvil contiene el título o logotipo del sitio, el ícono de navegación, el eslogan y el carrito de compras.
  • Establece dónde aparecen la personalización de la marca del sitio y el ícono de menú con Posición de personalización de la marca.
  • 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 97
Familia de plantillas York