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

York Site Styles tweaks

This is a list of all Site Styles tweaks for the York family (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, and York).

La plataforma Squarespace evoluciona constantemente con el fin de brindarte las mejores herramientas posibles para crear tu página web. Si la plataforma cambió hace poco, es probable que veas opciones ligeramente diferentes de las siguientes. La mejor manera de conocer la función de cualquier ajuste es experimentar con él y ver qué cambia en tu sitio.

Tip: For general help, see the York template guide.

Antes de comenzar

Many fonts on York have the option to scale, so you can set the maximum and minimum font size. This helps you control how your site looks in different browsers.

Si deseas obtener más información, visita Escalar fuentes.

Sitio

Sitio

  • Site Background - Change the color behind the main content area and header.
  • Site Max Width - Set the width of the main content area. This doesn't affect Project, Gallery, or Index Pages. 
  • Site Spacing: Extra Small, Small, Medium, Large, Extra Large, Custom - Set the space between the site content and the top of the browser.
  • Site Custom Spacing - Appears when Site Spacing: Custom is selected.
  • Site Outer Padding: Extra Small, Small, Medium, Large, Extra Large, Custom - Set the space between the site content and the sides of the browser.
  • Site Custom Padding - Appears when Site Outer Padding: Custom is selected.
  • Site Alignment: Left, Center, Right
  • Enable Ajax Loading - Enable for optimal loading speeds.

Sitio: Encabezado

Style the header elements. These have separate mobile styles.

  • Fuente del título del sitio web
  • Site Title Color
  • Fuente del eslogan del sitio
  • Color del eslogan del sitio
  • Logo Height (Max)
  • Espaciado horizontal del encabezado
  • Espaciado vertical del encabezado
  • Full Width Header - When checked, the header ignores alignment and site width. The header still follows Site Outer Padding.
  • Cart Style: Text, Cart, Bag
  • Fuente del carrito
  • Color del carrito
  • Color de la cantidad del carrito
  • Color de texto de la cantidad del carrito

Sitio: Pie de página

  • Mostrar pie de página gobal del sitio

Sitio: Diseño del encabezado

For any of these header elements, choose Hide, Left, Center, or Right.

  • Posición de la marca
  • Posición del subtítulo
  • Posición de la navegación principal
  • Posición de la Navegación secundaria
  • Posición del carrito

These tweaks appear when two or more elements are added to each area of the header:

  • Left Layout: Horizontal, Stacked
  • Center Layout: Horizontal, Stacked
  • Right Layout: Horizontal, Stacked

Sitio: Navegación

Style the Main Navigation and Secondary Navigation. These have separate mobile styles.

  • Fuente principal
  • Color del enlace principal
  • Enlace primario activo
  • Fuente secundaria
  • Color del enlace secundario
  • Enlace secundario activo
  • Espacio entre enlaces
  • Show Folder Indicator - Hide or display the caret beside folder drop-down menus.

Sitio: Tipografía

Change the fonts for your main content area. Headings and Quote Blocks support scaling fonts. Project Page titles and captions have separate styles

  • Heading 1 Font
  • Escalar Encabezado 1
  • Mínimo del Encabezado 1
  • Heading 1 Color
  • Heading 2 Font
  • Escalar Encabezado 2
  • Mínimo del Encabezado 2
  • Heading 2 Color
  • Heading 3 Font
  • Escalar Encabezado 3
  • Mínimo del Encabezado 3
  • Heading 3 Color
  • Fuente del texto
  • Color del cuerpo del texto
  • Color del enlace del cuerpo de texto
  • Fuente de la cita
  • Escalar Cita
  • Mínimo de la Cita
  • Color de texto de la cita
  • Quote Alignment: Left, Center, Right
  • Mostrar comillas
  • Fuente del origen de la cita
  • Color del origen de la cita

Página

The banner tweaks in these sections apply to banners at the top of supported pages. They don’t apply to Index Page navigation banners.

These tweaks affect all pages of the same type across your site. For example, if you have two Album Pages, checking Show Album Title displays the page title at the top of both Album Pages.

Página

The Banner, Title, and Description tweak names change based on the page type. For example, on an Album Page you'll see Show Album Banner.

  • Show Banner - Hide or display the page thumbnail banner.
  • Show Homepage Banner - Add a banner image/color to the homepage while hiding it for all other pages of that type. This tweak appears when you're on the homepage and Show Banner is unchecked.
  • Show Title - Hide or display the page title.
  • Show Description - Hide or display the page description.
  • Show Categories - Hide or display categories on Gallery and Project Pages.
  • Show Page Header - Hide or display the page header.
  • Show Page Footer - Hide or display the page footer.

Banner

Style page banners

  • Height: Small, Medium, Large, Extra Large 
  • Image Alignment: Top, Right, Bottom, Left, Center
  • Crop Image - Available with the right, left, and center alignments. Crops to fill the right half, left half, or entire banner. 
  • Auto Color Background - Automatically pulls a background color from the thumbnail image.
  • Background Color - If Auto Color Background is unchecked, manually select the banner background color.
  • Full Bleed Banner - Display the banner at the width of the browser.

Texto del banner

Change the text that displays over banners

  • Alignment: Top Left, Left, Bottom Left, Top, Center, Bottom, Top Right, Right, Bottom Right
  • Width: Small, Medium, Large, Extra Large
  • Fuente del título
  • Escalar Tamaño del título
  • Mínimo del Título
  • Color del título
  • Espaciado del título
  • Category Font - Categories can display on Gallery and Project Pages.
  • Color de la categoría
  • Espaciado de la categoría
  • Description Font (Fuente de la Descripción)
  • Escalar Tamaño de la descripción
  • Mínimo de la Descripción
  • Color de la descripción
  • Highlight Text - Add a background color behind the page title and description text. 
  • Color de resaltado de texto
  • Text Highlight Indent: Small, Medium, Large, Custom - Choose how far the background color extends beyond the text.
  • Custom Highlight Indent - Appears when Text Highlight Indent: Custom is selected.

Página: Texto introductorio

Change the page title and description on collection pages without banner thumbnail images or videos. Indexes without banner images have their own font style.

  • Fuente del título
  • Escalar Tamaño del título
  • Mínimo del Título
  • Color del título
  • Espaciado del título
  • Fuente de la categoría
  • Color de la categoría
  • Espaciado de la categoría
  • Description Font (Fuente de la Descripción)
  • Escalar Tamaño de la descripción
  • Mínimo de la Descripción
  • Color de la descripción
  • Text Width: Small, Medium, Large, Extra Large 
  • Text Height: Small, Medium, Large, Extra Large - Set the spacing above and below the text.

Índice

Style the header banner and section banners that appear on Index Pages

Índice: Texto introductorio

This appears when Show Index Banner is unchecked. Use this to set a different style for the page title and description on Index Pages. This doesn't affect the section banners that display below the header banner. 

  • Fuente del título
  • Escalar Tamaño del título
  • Mínimo del Título
  • Color del título
  • Espaciado del título
  • Description Font (Fuente de la Descripción)
  • Escalar Tamaño de la descripción
  • Mínimo del tamaño de la descripción
  • Color de la descripción
  • Text Width: Small, Medium, Large, Extra Large
  • Text Height: Small, Medium, Large, Extra Large - Set the spacing above and below the text.

Índice: Diseño

Style the layout of Index Pages.

  • Item Width: Full, Half, Grid - Display one or two banners per row, or create a thumbnail grid.
  • Columns - For grid layouts, choose the number of thumbnails that display per row.
  • Tablet: Columns - For grid layouts, choose the number of thumbnails that display per row on tablet devices.
  • Mobile: Columns - For grid layouts, choose the number of thumbnails that display per row on smartphones.
  • Thumbnail Ratio - For grid layouts, set the height-to-width ratio of the thumbnails.
  • Item Height: Small, Medium, Large, Extra Large - For banner layouts, set the height of the banners.
  • Item Spacing: Small, Medium, Large, Custom - For banner layouts, set the space between banners.
  • Item Custom Spacing - Set the spacing when Item Spacing: Custom is selected.
  • Alternate Widths - Alternate between rows that display one banner and two banners. Appears when Image Alignment: Center and Item Width: Full or Half are selected.
  • Alternate Sides - Alternates the side that banner images display on. Appears when Item Width: Full and Image Alignment: Right or Left are selected.
  • Full Bleed Index - When checked, banners or thumbnails extend to the browser’s edge. When unchecked, banners and thumbnails follow the site width and padding. This also affects the page header banner.

Índice: Imagen del elemento

Style Index banner images.

  • Image Alignment: Top, Right, Bottom, Left, Center
  • Crop Image - Available with the right, left, and center alignment. Crops the image to fill the right half, left half, or entire banner.
  • Image Opacity - Set how much of the banner background color shows through the image.
  • Image Hover Opacity - Choose how much the image fades when visitors hover over it.
  • Auto Color Background - When checked, each banner with a thumbnail image automatically pulls a background color from the thumbnail image itself.
  • Item Background Color - If Auto Color Background is unchecked, manually select the banner background color.

Índice: Texto del elemento

Change the display settings for the page title and categories that can display over Index Page banners.

  • Title Display: Always On, Hidden, On Hover, On Scroll
  • Text Alignment: Top Left, Left, Bottom Left, Top, Center, Bottom, Top Right, Right, Bottom Right
  • Fuente del título
  • Escalar Tamaño del título
  • Title Min Size - Learn more about scaling fonts.
  • Color del título
  • Usar fondo del título
  • Color del fondo del título
  • Espaciado del título
  • Mostrar Categorías
  • Fuente de la categoría
  • Color de la categoría
  • Usar fondo de la categoría
  • Color de fondo de la categoría

Índice: Navegación

La navegación se muestra en la parte inferior de todas las páginas de un índice. Para ocultarla, desmarca el retoque Mostrar navegación de índice.

Define el tipo de navegación con Estilo de vínculo:

  • Estilo de vínculo: Lista (incorporada): muestra todas las páginas del índice como vínculos de navegación horizontales.
  • Estilo de vínculo: Lista (apilada): muestra todas las páginas del índice como vínculos de navegación verticales.
  • Link Style: Next (inline) - Displays a Next label. If Show Label Only is unchecked, the next page displays beside the Next label.
  • Link Style: Next (stacked) - Displays a Next label. If Show Label Only is unchecked, the next page displays below the Next label.
  • Show Label Only - Add a link for the next page below or beside the Next label.

Establece el estilo de vínculo con estos otros retoques:

  • Spacing: Small, Medium, Large, Custom
  • Espaciado personalizado
  • Fuente de los enlaces
  • Escalar el Tamaño del enlace
  • Index Link Min - Learn more about scaling fonts.
  • Link Color
  • Active Link Color
  • Link Delimiter: None, Slash, Bullet  - Appears with the Link Style: List tweaks.
  • Link Spacing: Small, Medium, Large, Custom
  • Animación de transición de página: elige si el contenido de las páginas de un índice se desliza hacia arriba en la carga inicial.

Proyecto

Style Project Pages.

Proyecto: Diseño

  • Image Alignment: Left, Center, Right - Align all captions and images to the right, left, or center.
  • Image Spacing: Small, Medium, Large, Custom - Set the space between each image in the Project.
  • Image Custom Spacing - Appears when Image Spacing: Custom is selected.
  • Banner Spacing: Small, Medium, Large, Custom - Set the space between the page header and the first image. (Text Height in the Page: Intro Text section may also affect this).
  • Project Banner Spacing - Appears when Banner Spacing: Custom is selected.
  • Show Project Captions - Hide or display all image titles and descriptions.
  • Portrait and Square Caption Style: Standard, Offset, Alternate
  • Align Alternate Captions to Image - Aligns the captions left or right. Available when Portrait and Square Caption Style is set to Alternate.
  • Landscape Caption Style: Standard, Offset, Inset
  • Allow Full Width Portrait and Square - Display portrait and square images at the width of the main content area. If Full Bleed Project is selected, they display at the width of the browser (full-bleed). Available when Portrait and Square Caption Style is set to Standard or Offset
  • Collapse Landscape Spacing - Removes the space below landscape images without captions.
  • Full Bleed Project - All landscape images on the page extend to the browser’s edge, depending on their size. This includes the header banner.
  • Cascade Images and Captions - Choose if images and captions slide up from the bottom as you scroll down the page.

Proyecto: Fuentes

Style the text of your image title and descriptions.

  • Fuente del título de la leyenda
  • Caption Title Align: Left, Center, Right
  • Escalar Título de la leyenda
  • Caption Title Min - Learn more about scaling fonts
  • Color del título de la leyenda
  • Espaciado del título de la leyenda
  • Fuente del cuerpo de la leyenda
  • Caption Body Align: Left, Center, Right
  • Escalar el Cuerpo de la leyenda
  • Caption Body Min - Learn more about scaling fonts
  • Color del cuerpo de la leyenda

Móvil

Use these tweaks to set separate style options for your mobile site, or ensure they match the desktop styles for consistency.

Dispositivos móviles: Barra

The mobile bar contains your title, logo, menu icon, and tagline.

  • Mobile Bar Position: Standard, Top Fixed, Bottom Fixed - Choose if the mobile bar scrolls up with the page, or stays fixed at the top or bottom of the screen.
  • Barra móvil transparente
  • Branding Position: Left, Center, Right
  • Menu Icon Position: Left, Right
  • Ancho del logotipo
  • Fuente del título del sitio web
  • Site Title Color
  • Color del icono del menú
  • Tagline Position: Hide, Below Branding, Beside Branding
  • Tagline Font
  • Color del eslogan
  • Espaciado del eslogan

Dispositivos móviles: Menú

Set the colors and fonts for your mobile elements. 

  • Color de fondo
  • Site Title Color
  • Color del icono del menú
  • Color del eslogan
  • Fuente del enlace principal
  • Color del enlace principal
  • Fuente del enlace secundario
  • Color del enlace secundario
  • Espaciado vertical

Dispositivos móviles: Carrito

The shopping cart can display in the navigation overlay.

  • Ocultar
  • Style: Text, Cart, Bag
  • Fuente
  • Color
  • Color de la cantidad
  • Color del texto de la cantidad
  • Espaciado del carrito

Iconos

  • Icon Weight: Hairline, Light, Medium, Heavy - Set the line weight of the search and shopping cart icons.

Eventos

Estos ajustes aparecen en las Páginas de Eventos.

  • Desactivar Páginas de Elementos
  • Mostrar Eventos pasados
  • Mostrar miniaturas 
  • Thumbnail Size 
  • Mostrar Etiqueta de Fecha
  • Mostrar Etiqueta de Fecha y Hora
  • Mostrar Categorías
  • Show Date 
  • Mostrar Hora
  • Mostrar Ubicación
  • Mostrar enlaces de exportación
  • Mostrar Botones de redes sociales
  • Mostrar fragmento 
  • Mostrar Botón
  • Show Back Link 
  • Horario en formato de 24 horas
  • Vista apilada

Productos

These tweaks appear on Advanced Products Pages.

Products: Layout

  • Elementos por fila
  • Espaciado entre elementos
  • Relación de aspecto de la imagen
  • Item Hover Behavior: Show Alternate Image, Fade, None
  • Espacios
  • Relleno superior
  • Nav Display: Breadcrumb Only, Pagination Only, Breadcrumb and Pagination, None
  • Pagination Style: Previous/Next, Titles
  • Nav Alignment: Left, Center, Right, Split
  • Fuente de la navegación
  • Color de la navegación
  • Color del separador de la navegación

Products: Details

  • Position: Under, Overlay
  • Position (Mobile): Under, Overlay
  • Alignment: Center, Left 
  • Alignment: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right 
  • Color de la superposición
  • Relleno de la superposición
  • Espacios
  • Mostrar título
  • Fuente del título
  • Color del título
  • Color del título (dispositivos móviles)
  • Espaciado del título
  • Mostrar precio
  • Fuente del precio
  • Color del precio
  • Color del precio (dispositivos móviles)
  • Color del Precio con descuento
  • Color del Precio con descuento (dispositivos móviles)
  • Espaciado del precio
  • Alineación: Izquierda, Centro, Derecha
  • Espacios
  • Mostrar título
  • Fuente del título
  • Color del título
  • Mostrar precio
  • Fuente del precio
  • Color del precio
  • Color del Precio con descuento
  • Mostrar fragmento
  • Excerpt Position: Above Price, Below Price, Below Add to Cart Button
  • Fuente del fragmento
  • Color del fragmento
  • Color del enlace del fragmento
  • Mostrar botones Compartir

Products: Sort + Filter

  • Mostrar: Oculto, Arriba, A la izquierda, A la derecha
  • Ancho
  • Margen
  • Espaciado entre elementos
  • Alineación: Izquierda, Centro, Derecha
  • Fuente
  • Color
  • Color del Área Activa

Products: Gallery

  • Posición: Izquierda, Derecha
  • Design: Slideshow, Stacked
  • Ancho
  • Relación de aspecto
  • Thumbnail Alignment: Left, Center, Right
  • Ancho de la imagen en miniatura
  • Espaciado de la imagen en miniatura
  • Espacios

Products: Options

  • Mostrar las variantes
  • Mostrar Cantidad
  • Style: Text-Only, Square, Rounded, Pill
  • Color del borde
  • Color de fondo
  • Fuente de la etiqueta
  • Color de la etiqueta
  • Fuente
  • Color del texto

Products: Add To Cart Button

  • Mostrar Botón
  • Style: Solid, Outline, Raised
  • Shape: Square, Rounded, Pill
  • Padding: Small, Medium, Large
  • Color
  • Color del texto
  • Fuente

Producto: Ampliación de Imagen

  • Activar la Ampliación de imagen
  • Factor de ampliación
  • Zoom Activates On: Hover, Click
  • Habilitar Lightbox

Productos: Productos relacionados

  • Elementos por fila
  • Espaciado entre elementos
  • Relación de aspecto de la imagen
  • Alineación de los detalles
  • Espaciado entre los títulos de los elementos

Productos: Rótulos de estado

  • Style: Rectangle, Square, Circle, None
  • Color de Venta
  • Color de agotado
  • Fuente
  • Padding (Relleno)
  • Position: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right
  • Inset: Floating, Flush, Dock Vertically, Dock Horizontally
  • Tamaño del recuadro

Products: Quick View Button

  • Style: Bar, Floating, Docked
  • Color
  • Fuente
  • Padding (Relleno)
  • Position: Top, Center, Bottom
  • Tamaño del recuadro

Products: Quick View Lightbox

  • Padding (Relleno)
  • Color de la superposición
  • Color de fondo
  • Vista del fragmento: Truncar, Ocultar
  • Controles: Mostrar flechas
  • Controles: Mostrar el botón de Cerrar
  • Controla el color
  • Controla el peso: Delgado, Ligero, Medio, Pesado
  • Controls Size

Opciones de álbum

These tweaks appear on Album Pages.

  • Color del Texto del álbum
  • Ocultar el Enlace para compartir el álbum

Estilos de la galería

These tweaks appear on standard Gallery Pages.

  • Define el diseño con el retoque Diseño de galería.

Gallery Design: Grid

  • Relación de aspecto
  • Espacio de Cuadrícula
  • Ancho mínimo de la columna
  • Estilo de lightbox: Oscuro, Claro

Diseño de la galería: Presentación

  • Navegación de la Galería: Imágenes en miniatura, Viñetas, Números, Círculos, Simple, Ninguna
  • Superposición con información sobre la Galería: Mostrar siempre, Mostrar cuando se posiciona el cursor, Ocultar
  • Gallery Aspect Ratio 
  • Estilo de las flechas de la Galería: Esquinas redondeadas, Rectangular, Circular, Sin fondo 
  • Transiciones de la galería: Difuminar, Deslizar
  • Mostrar Flechas de la Galería
  • Recorte automático de la Galería 
  • Reproducción automática de la Galería 
  • Repetición de la Galería 
  • Velocidad de reproducción automática de la galería (segundos)
  • Gallery Thumbnail Size 
  • Fondo de las flechas de la galería
  • Color de las flechas de la galería
  • Color del Círculo de la Galería
  • Gallery Info Background.

Blog

These tweaks appear on grid/stacked Blog Pages.

Blog: Metadata

Puedes mostrar hasta dos elementos de metadatos en las Páginas de Blog y en las publicaciones de blog.

  • Primary: None, Category, Author, Date, Location, Tags, Comments
  • Secondary: None, Category, Author, Date, Location, Tags, Comments

Blog: List

  • Style: Grid, Stacked
  • Posts Per Row (Max) 
  • Spacing 
  • Show Separator 
  • Separator Width
  • Separator Color
  • Alignment: Left, Center, Right 
  • Item Spacing 
  • Show Image 
  • Image Aspect Ratio 
  • Max Image Width 
  • Mostrar título
  • Mostrar fragmento
  • Read More Link: Hide, Inline, Below Text
  • Metadata: Above Title, Below Title, Below Content
  • Mostrar etiqueta de paginación
  • Mostrar flechas de paginación
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy

Blog: Item

  • Alineación: Izquierda, Centro, Derecha
  • Espaciado entre elementos
  • Metadata: Above Title, Below Title
  • Share Icons: Above Content, Below Content
  • Mostrar flechas de paginación
  • Mostrar etiqueta de paginación
  • Mostrar el título de paginación
  • Pagination Meta: Hide, Category, Author, Date, Location, Tags, Comments
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy

Blog: Typography & Colors

  • Fuente del título de lista
  • Fuente del título del elemento
  • Color del título
  • Fuente de los metadatos
  • Color de los metadatos
  • Fuente del fragmento
  • Color del fragmento
  • Fuente del enlace Leer más
  • Color del enlace Leer más
  • Fuente de la etiqueta de paginación
  • Color de la etiqueta de paginación
  • Color de la flecha de paginación

Botones Compartir

Estos ajustes aparecen en las publicaciones de blog o en las páginas de elementos del producto. Los ajustes que aparezcan dependen de la opción que hayas elegido para el ajuste de Estilo.

  • Style: Icon Only, Solid, Outline, Raised
  • Mostrar iconos
  • Mostrar etiquetas
  • Mostrar recuentos
  • Redondeo
  • Tamaño
  • Espacios
  • Borde: Ancho
  • Borde: Color
  • Íconos: Color estándar
  • Íconos: Color personalizado
  • Fondo: Color estándar
  • Fondo: Color personalizado
  • Etiqueta: Fuente
  • Etiqueta: Color

Páginas de Portada

Las Páginas de Portada están diseñadas de forma independiente de la plantilla de un sitio. Consulta Estilos de Página de Portada para informarte mejor.

Block tweaks

Tweaks for certain blocks also display in Site Styles. To learn about the style options, visit Adding content with blocks and click the name of the block you want to learn more about.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 2 de 16
York Site Styles tweaks