Familia de plantillas Brine

Los estilos y funciones de la familia de plantillas Brine.

Última actualización: 24 de enero de 2024

Con las plantillas de la familia Brine, puedes crear una presencia profesional en la web para cualquier marca o compañía. Personaliza los encabezados, el pie de página, el recuadro de contenido y los estilos para dispositivos móviles para que tu sitio se destaque. Añade banners sin bordes a cualquier página o apílalos en el Índice. El desplazamiento en paralelo optativo hace que los banners se muevan más lentamente que el contenido de la página, lo que crea un efecto de profundidad e inmersión.

Esta guía abarca las funciones y las opciones de diseño de la familia Brine. Ve una lista de las plantillas de Brine.

Modifica el estilo de tu sitio en el panel Estilos del sitio. En esta guía, los ajustes de estilo y la sección en la que aparecen en el panel Estilos del sitio están en negrita.

Páginas compatibles

Brine admite los siguientes tipos de páginas:

Encabezados

Quienes visitan el sitio usan el encabezado superior para navegar por el sitio. En Brine, el encabezado está dividido en las secciones superior e inferior.

  • Agrega elementos, como el título o el logotipo del sitio y los enlaces de navegación, a los encabezados superior e inferior de la sección Encabezado: diseño de Estilos del sitio.
  • El encabezado inferior admite una imagen de fondo y una área de introducción en la que puedes añadir tu propio contenido.
brine-topbottom.png

Cambia el estilo de los encabezados

Modifica el estilo del encabezado superior con estos ajustes de Encabezado: superior:

  • Configura la altura con Relleno.
  • Configura el color con Fondo.

El encabezado inferior muestra banners de página como imágenes o videos de fondo. Si no hay banner, el color de fondo es el mismo que el de la página (configurado con el ajuste Color en Principal).

Para cambiar la altura del encabezado inferior:

  • Todas las páginas: cambia Relleno en Encabezado: inferior y el ajuste Relleno de introducción en Principal.
  • Páginas individuales: añade altura agregando más saltos de línea al área de introducción.
  • Páginas de Índice: Cambia el alto de la sección Índice superior.

Añade elementos al encabezado y modifica su estilo

Puedes añadir cualquiera de los siguientes elementos a cualquiera de las secciones del encabezado:

Elige dónde se muestran u ocultan en la sección Encabezado: diseño de Estilos del sitio. Por ejemplo, elige Posición de gestión de marca: superior al centro para agregar el título o el logotipo del sitio en el centro del encabezado superior.

Modifica el estilo usando los ajustes en cada una de sus secciones de encabezado. Por ejemplo, ve a Encabezado: navegación principal para elegir la fuente y el color de los enlaces.

  • Para los elementos del encabezado inferior, configura sus colores de (Superposición) para que sean visibles sobre los banners.
  • Elige si los elementos de la misma área (por ejemplo, Abajo al centro) se apilan con los ajustes de Diseño en Encabezado: superior y Encabezado: inferior.
  • Configura sus estilos especiales para dispositivos móviles para cerciorarte de que se vean bien en los dispositivos móviles.

Más ayuda con los encabezados

Ten presente estos consejos:

  • Para obtener los mejores resultados, coloca cada elemento en una parte diferente del encabezado. Los elementos podrían superponerse si no hay suficiente espacio.
  • Algunos ajustes no aparecerán hasta que los elementos que afecten hayan sido agregados a tu sitio.
  • Si el encabezado superior no tiene elementos, no aparecerá.
  • Para obtener más consejos, consulta Crear el encabezado de un sitio.

Enlaces de navegación

Brine tiene tres áreas de navegación.

Los enlaces de Navegación principal y Navegación secundaria:

  • Pueden incluirse en el encabezado superior o inferior.
  • Mediante los ajustes Encabezado: navegación principal y Encabezado: estilo de navegación secundaria, se modifica su estilo. Por ejemplo, elige Estilo: botón para modificar el estilo de los enlaces de navegación principal o secundaria como botones.

Los enlaces de la Navegación en el pie de página:

Banners

Los banners crean un elemento visual que puede marcar el tono de tu página. Agrega imágenes y videos destacados de la página para crear banners.

En Brine, los banners:

Puedes apilar varios banners en un Índice.

brine-banner.png

Modificar el estilo de los banners

Usa estas opciones para modificar el estilo de tus banners:

  • Agrega un filtro de color con el ajuste Color de superposición en Principal: superposición.
  • Agrega bloques de texto y otros, como bloques de botón, en el área introductoria.
  • Para cambiar la altura, edita el área de contenido y agrega saltos de línea.
  • Elige si los banners se desplazan más lento que el resto de la página con el ajuste Habilitar parallax en Sitio: carga.
  • En estilos del sitio, los ajustes de (Superposición) afectan a los elementos que aparecen sobre las imágenes de banner, como el texto y los enlaces de navegación.

Recorte y centrado

  • Si el efecto parallax está habilitado, usa el ajuste Recorte inteligente de parallax en Sitio: carga para que los banners recorten la cantidad mínima.
  • Si las imágenes se recortan de manera imprevista, consulta nuestros consejos para la solución de los problemas de recorte.
  • Elige cómo se centran las imágenes de banner cambiando sus puntos focales. Para garantizar que la imagen permanezca a la vista mientras se desplaza, establece el punto focal cerca del centro de la imagen.

Más ayuda con los banners

Ten en cuenta lo siguiente:

Áreas de introducción

El área de introducción del encabezado inferior es un área del encabezado específico de la página que puedes editar con texto, imágenes y otros contenidos. Esta es una gran manera de personalizar la parte superior de cada página.

Las áreas de introducción aparecen encima de los bannersde la página y siguen al recuadro de contenido. Están disponibles en todas las páginas, excepto en las Páginas de diseño sin banners y en las Páginas de índice.

Para editar la introducción:

  • Posiciona el cursor sobre el área que se encuentra arriba del contenido de la página y presiona Editar.
  • Añade texto y otros contenidos con bloques.

El área de introducción puede mostrar relleno adicional mientras se vuelve a editar tu sitio. Para ver cómo aparece el espaciado de introducción en tu sitio activo, guarda los cambios y ve la página en modo de vista previa.

brine-intro-area.png

Pie de página

Personaliza el pie de página de todo el sitio para permitir que los que visitan el sitio obtengan las respuestas que buscan. El pie de página de página de la familia Brine tiene lo siguiente:

Modifica el estilo de las fuentes y colores con los retoques de pie de página. Para ocultar el pie de página, desmarca Mostrar pie de página.

Diseño: Columnas

Un área de bloques, la información comercial y la navegación aparecen en sentido horizontal, con un área de bloques arriba y otra debajo de ella. En el pie de página, los menús desplegables y las páginas de índice no crean menús desplegables, sino columnas. La página de índice y los títulos de los menús desplegables aparecen como encabezados que no son enlaces, con los enlaces a las subpáginas debajo de ellos.

brine-footer-columns.png

Diseño: Apilado

La información comercial y la navegación se apilan verticalmente con áreas de bloques arriba, en el centro y abajo. Los títulos de los menús desplegables y la página de índice no aparecen, y los enlaces a sus subpáginas aparecen horizontalmente.

brine-footer-stacked.png

Páginas de blog

La familia de plantillas Brine utiliza una página de blog estándar de cuadrícula o lista. Para obtener más información sobre las funciones únicas y las opciones de estilo de este tipo de blog, consulta Páginas de blog estándar de cuadrícula o lista en la versión 7.0.

Páginas de Índice

Las Páginas de Indice de Brine convierten el contenido de varias páginas en secciones apiladas para que puedas destacar diferentes imágenes e información en una sola ubicación.

brine-index-sections-scroll.gif

Secciones de contenidos

Las secciones de contenidos se forman a partir de las páginas de diseño. Una vez que hayas añadido secciones de contenido, puedes personalizarlas con bloques.

Para configurar la altura mínima de algunas o todas las secciones, usa Aplicar altura mínima en Índice: página:

  • Configúralo solo para la primera sección, para las páginas con banners, para todas las páginas o para ninguna página.
  • Usa Relleno y Relleno (Páginas Superpuestas) para cambiar la altura de todas las secciones.
  • Si el contenido de la página es más largo que la altura mínima, la sección se amplía para ajustarse al contenido, incluido el relleno.
  • Para cambiar la altura de una sola sección, agrega saltos de línea al contenido de la página, de modo de hacerlo más largo.

Agrega imágenes destacadas de la página para agregar imágenes o videos de banner de fondo a las secciones.

  • Los banners pueden tener desplazamiento en paralelo.
  • Si no hay banner, el color de fondo es el mismo que el de la página (configurado con el ajuste Color en Principal).

Las secciones de índice de galería se realizan a partir de páginas de galería. Después de agregar secciones de índice de galería, puedes añadir imágenes y videos.

En la sección Índice: galería de Estilos del sitio:

  • Elige si todas las secciones de índice de galería se muestran como presentaciones de diapositivas o cuadrículas con diseño.
  • Para cambiar los espacios o crear efectos sin bordes, quita la marca de Aplicar espacios a los costados y usa los ajustes de Espacios.
  • Configura la forma de las imágenes con Relación de aspecto.
  • Si la sección de la parte superior es una galería, utiliza Encabezado de superposición en la primera galería del índice para elegir si se muestra detrás del encabezado inferior.
  • Añade un filtro de color a las imágenes con Superposición de imagen.
  • El estilo de posicionamiento del cursor determina lo que sucede cuando posicionas el cursor sobre una imagen.

Las secciones de Galería no tienen desplazamiento en paralelo. Si el desplazamiento en paralelo está activado, parece que se desplazan sobre las secciones de contenido.

Los videos en una sección de índice de galería muestran una imagen destacada. Si tu video no tiene una imagen destacada cargada, el índice muestra un cuadro negro con una línea a través de él. Para solucionarlo, esto agrega una imagen destacada a tu video.

Navegación del Índice

Para permitir que los que visitan el sitio exploren el Índice:

  • Usa el ajuste Índice: indicador de desplazamiento para agregar una flecha, línea o texto a la primera sección para invitarlos a desplazarse hacia abajo (solo secciones de contenido).
  • Agrega puntos o líneas de navegación con el ajuste Estilo en Índice: navegación. Al hacer clic en un punto o línea, los lleva a la sección correspondiente.
brine-index-nav.png

Añade un espacio debajo de la primera sección

Si tu sitio tiene un borde, puedes añadir una línea de espacios del mismo espesor después de la primera sección.

  • Revisa el ajuste Borde en espejo debajo de la primera página en Índice: página o el ajuste Borde en espejo debajo de la primera galería en Índice: galería, según el tipo de la sección superior.
  • La segunda sección debe ser una sección de contenidos sin banners.
  • El color del espaciado es el mismo que el de la página. Para obtener los mejores resultados, combínalo con el color del borde.
brine-mirror-site-border.png

Más ayuda con los Índices

Ten en cuenta lo siguiente:

Estructura y estilo

Usa estas opciones para modificar el aspecto de tu sitio.

Carga con Ajax

Ajax es un método especial para la carga del sitio que hace que las páginas con muchos contenidos, como las Páginas de Blog, sean más rápidas y ágiles. Para crear una experiencia de navegación que sea sencilla, te recomendamos que actives la carga con Ajax.

  • Habilita o deshabilita la carga de Ajax con el ajuste Habilitar carga de Ajax en Sitio: carga.
  • Modifica el estilo u oculta la barra de carga que se muestra mientras las páginas se cargan con los otros ajustes de Sitio: carga.
  • En algunas ocasiones, Ajax puede entrar en conflicto con el código personalizado, los enlaces ancla y Analytics.
  • Si necesitas más ayuda, consulta Carga con Ajax.

Borde

Añade un marco y modifica su estilo para todo el sitio alrededor del encabezado, del área principal de contenidos y del pie de página con los ajustes de Sitio: bordes. El borde no aparece en las páginas de portada.

brine-border.png

Fuentes

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

  • Fuentes del sitio: Contenido: fuentes y Contenido: colores
  • Texto en banners: Todos los retoques (Superposición)
  • Secciones del índice de galería: Índice: galería
  • Elementos de encabezado: en sus secciones de Encabezado (por ejemplo, Encabezado: gestión de marca)
  • Páginas del producto: productos
  • Páginas de blog: Blog: tipografía y colores

Los enlaces de texto están subrayados.

Desplazamiento en paralelo

El desplazamiento en paralelo es un efecto especial que hace que las imágenes o los videos del fondo se muevan más lentamente que el contenido de la página. Brine tiene desplazamiento en paralelo para sus banners.

Botones Compartir

Puedes agregar botones Compartir en la mayoría de las páginas. Quienes visitan el sitio usan estos botones para compartir contenidos en sus perfiles de redes sociales.

  • Páginas de blog y tienda: botones Compartir avanzados
  • Páginas de Álbum y Eventos: enlaces Compartir clásicos

Brine no admite barras laterales. En su lugar, puedes agregar contenidos adicionales al pie de página, el área de introducción y las Páginas de Diseño.

Ancho del sitio

Configura el ancho con los ajustes de Sitio:

  • Elige el ancho del área de contenidos con Ancho.
  • El diseño que elijas con Diseño determina cómo aparecerá el área de contenido.
  • El borde del sitio también afecta al contenido.

En los ejemplos siguientes, el ancho se establece en 880 píxeles. El color de fondo del área de contenido se establece en la sección Principal de estilos del sitio.

Diseño: Ancho completo

El contenido se muestra con el ancho del navegador, menos el Relleno del sitio. Los banners se muestran sin bordes.

brine-full-width.png

Diseño: Fondo completo

El contenido se muestra con el parámetro del Ancho , menos el Relleno del sitio. Los banners se muestran sin bordes.

brine-full-background.png

Diseño: Ancho restringido

El color del fondo de la sección Sitio aparece fuera del área de contenidos. Los banners aparecen en el área de contenidos.

brine-constrained-width.png

Contenido insertado

Usa el recuadro de contenido para crear diseños atractivos. Cuando están arreglados en una sola columna, algunos bloques, como los Bloques de texto y de cita, se muestran más estrechos que otros contenidos de la página, como los Bloques de imágenes.

  • Esto afecta todas las áreas a las que puedes añadir bloques, incluidas las áreas de introducción y el pie de página.
  • Establece el ancho con Recuadro de contenido en Principal.
  • Para eliminar el recuadro, configura Recuadro de contenidoen 0.
  • Si necesitas más ayuda, consulta Recuadro de contenido.
brine-content-inset.png

Colores de fondo

Usa los siguientes ajustes para configurar los colores del fondo de tu sitio:

  • Área de contenido principal: Color en Principal
  • Márgenes laterales: Fondo en Sitio
  • Borde: Color en Sitio: borde
  • Encabezado superior: Fondo en Encabezado: superior
  • Encabezado inferior: Coincide con el área principal de contenidos o aparece como un banner
  • Pie de página: Color de fondo en Pie de página
  • Secciones de Índice: Coinciden con el área principal de contenidos o muestran un banner
  • Detrás de las imágenes transparentes de los banners: Color de la superposición en Principal: superposición, incluso si este color se configura como transparente

Consejo

Este ejemplo muestra muchas de las áreas de fondo:

brine-background-colors.png

Móvil

Gracias al diseño adaptativo integrado en Squarespace, tu sitio se adapta para lucir fantástico en cualquier dispositivo. En Brine, puedes personalizar cómo lucirá tu sitio en los dispositivos móviles y en los navegadores estrechos.

Elige el ancho del navegador donde tu sitio cambia a la vista en dispositivo móvil con el ajuste Punto de interrupción en dispositivo móvil en Dispositivo móvil. El valor predeterminado es de 640 píxeles.

Los elementos del encabezado de dispositivos móviles aparecen en las barras de navegación superior o inferior.

  • Para agregar una barra superior o inferior, mueve cualquier elemento del encabezado en ella. Por ejemplo, ve a la sección Dispositivo móvil: gestión de marca de Estilos del sitio y elige Posición: izquierda superior para agregar la barra superior.
  • Elige si la barra superior está fija en la parte superior o se desplaza hacia arriba con la página con el ajuste Superior fija en dispositivo móvil en Dispositivo móvil: superior.
  • La barra inferior siempre es fija.
  • Establece los colores de fondo con los ajustes Dispositivo móvil: superior y Dispositivo móvil: inferior.
brine-mobilebars.png

Elementos del encabezado

Los elementos del encabezado de tu sitio aparecen en las barras de navegación y tienen diferentes estilos para dispositivos móviles.

  • Modifica el estilo en cada una de sus secciones Dispositivo móvil de Estilos del sitio. Por ejemplo, modifica el estilo del título o el logotipo del sitio con los ajustes Dispositivo móvil: gestión de marca.
  • La navegación se minimiza en un ícono ☰. Tanto la navegación primaria como la secundaria se muestran cuando se toca ☰.
  • Establece el color de fondo de navegación con el ajuste Color del menú en Menú de dispositivo móvil: General.
  • Los ajustes del botón Cerrar en Menú para dispositivos móviles: general dan estilo a la X que cierra el menú de navegación.
  • Los íconos de redes sociales y los eslóganes no aparecen en los dispositivos móviles.
  • Cuando lo tocas, el icono de búsqueda abre una superposición con una barra de búsqueda. El fondo de la superposición sigue el color de fondo del sitio.

A pesar de que tienen estilos separados, el mismo elemento aparece en las versiones para computadora y para dispositivos móviles. Por ejemplo:

  • Puedes usar un color y una fuente distintos para el título de tu sitio para dispositivos móviles.
  • Puedes mostrar tu barra de búsqueda en los dispositivos móviles, pero ocultarla en la versión para computadoras de escritorio.
  • No se puede mostrar el título de un sitio en un equipo y un logotipo en un dispositivo móvil.

Más ayuda con los dispositivos móviles

Ten en cuenta lo siguiente:

Plantillas en la familia Brine

Todas las plantillas de la familia Brine tienen las mismas opciones de estilo y funciones. Puedes examinar las plantillas de Brine en la tienda de plantillas de la versión 7.0.

La familia Brine incluye lo siguiente:

Opciones de idioma

Brine admite dos opciones de idioma:

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.