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 Brine

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 con el fin de 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 opciones de características y diseño de la familia Brine. Ve una lista de las plantillas de Brine.

Cambia el estilo de tu sitio en el panel de Estilos del sitio. En esta guía, los ajustes de estilo están resaltados y enlazan a la lista de ajustes de Brine para ayudarte a navegar por el panel.

Consejo: La página de Vista previa activa de Brine muestra sitios reales de clientes que usan esta plantilla.

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.

  • Añade elementos, como el título del sitio web o el logotipo y los enlaces de navegación, a los encabezados superior e inferior en Encabezado: Diseño.
  • 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

Cambia el estilo del encabezado superior en Encabezado: Superior:

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

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

Para cambiar la altura del encabezado inferior:

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 si deseas mostrarlos u ocultarlos en Encabezado: Diseño. Por ejemplo, puedes elegir Posición de la personalización de la marca: Arriba al centro para añadir el título o el logotipo de tu sitio en la mitad del encabezado superior.

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

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:

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

Cabeceras

Los banners crean un elemento visual que puede marcar el estilo de tu página. Añade videos e imágenes en miniatura 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:

  • Añade un filtro de color con Color de la 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 desplazarán más lentamente que el resto de la página con Activar desplazamiento en paralelo en Sitio: Cargando.
  • 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

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 específica del encabezado 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 banners de 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.

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:

Cambia el estilo de las fuentes y de los colores en las secciones del 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 empresarial y la navegación aparecen horizontalmente con un área de bloques arriba y debajo de ella. Las carpetas y las Páginas de Índice crean columnas. La Página de Índice y los títulos de las carpetas 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 empresarial y la navegación se apilan verticalmente con áreas de bloques arriba, en el centro y abajo. Los títulos de las carpetas y la Página de Índice no aparecen, y los enlaces a sus subpáginas aparecen horizontalmente.

brine-footer-stacked.png

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.

Añade imágenes en miniatura de la página para agregar videos o imágenes de banner de fondo a las secciones.

Las secciones de Índice de Galería se crean a partir de las Páginas de Galería. Después de que hayas añadido secciones de galería, puedes agregar imágenes y videos.

En Índice: Galería:

  • Elige si todas las secciones de la galería aparecerán en modo presentación o en cuadrícula 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 hay una sección de galería en la parte superior, usa Encabezado en superposición en la Galería del primer índice para seleccionar si aparecerá 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.

Navegación del Índice

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

  • Usa Índice: Indicador de desplazamiento para añadir una flecha, una línea o un texto a la primera sección, de modo de alentarlos a que se desplacen hacia abajo (solo en las secciones de contenido).
  • Añade puntos o líneas de navegación conEstilo en Índice: Navegación. Hacer clic en un punto o en una línea los dirige a la sección que corresponde.

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 espacio que combine después de la primera sección.

  • Marca Márgenes en espejo debajo de la primera páginaen Índice: Página o Márgenes en espejo debajo de la primera galería en Índice: Galería, según el tipo de sección superior.
  • La segunda sección debe ser una sección de contenidos sin banners.
  • El color del espacio es igual al de la página (Color en Principal). Para obtener 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.

  • Activa o desactiva la carga con Ajax con Activar carga con Ajax en Sitio: Carga.
  • Cambia el estilo u oculta la barra de carga que aparece mientras las páginas están cargando con los demás 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. Las Páginas de Portada no muestran el borde.

brine-border.png

Fuentes

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

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 de Productos: 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 que siguen, el Ancho se fijó en 880 píxeles. El color de fondo del área de contenidos se configura en Principal.

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 angostos que otros contenidos de la página, como los Bloques de imágenes.

brine-content-inset.png

Colores de fondo

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

  • Área principal de contenido: 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: Puedes usar un Índice para crear el efecto de una imagen de fondo para la página.

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 angostos.

Elige el ancho del navegador en el cual tu sitio cambiará a la vista en dispositivos móviles con Punto de corte para dispositivos móviles en Dispositivos móviles. El valor preconfigurado es de 640 píxeles.

Los elementos del encabezado de dispositivos móviles aparecen en las barras de navegación superior o 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.

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

  • Puedes darle al título de tu sitio para dispositivos móviles un color y una fuente distintos.
  • Puedes mostrar tu barra de búsqueda en los dispositivos móviles, pero ocultarla en la versión para computadoras de escritorio.
  • No puedes mostrar el título del sitio en la versión para computadoras de escritorio y el logotipo en los dispositivos móviles.

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 comparten las mismas opciones de estilo y funciones. Puedes navegar por las plantillas Brine en la tienda de plantillas.

La familia Brine incluye lo siguiente:

  • Aria
  • Basil
  • Blend
  • Brine
  • Burke
  • Cacao
  • Clay
  • Plantilla personalizada (sitios hechos con el creador de sitios personalizados)
  • Ethan
  • Fairfield
  • Fuente
  • Foster
  • Greenwich
  • Hatch
  • Heights
  • Hunter
  • Hyde
  • Impact
  • Jaunt
  • Juke
  • Keene
  • Kin
  • Lincoln (descontinuada)
  • Maple
  • Margot
  • Marta
  • Mentor
  • Mercer
  • Miller
  • Mojave
  • Moksha
  • Motto
  • Nueva
  • Pedro
  • Polaris
  • Pursuit
  • Rally
  • Rover
  • Royce
  • Sofia
  • Sonny
  • Sonora
  • Stella
  • Thorne
  • Vow
  • Wav
  • West

Ejemplos de clientes

Para ver ejemplos de sitios reales de clientes, haz clic en los enlaces a continuación y desplázate hasta la sección Clientes que usan esta plantilla. Dado que todas las plantillas de esta familia tienen las mismas funciones, puedes usarlas como inspiración, incluso si tu plantilla no aparece en la lista que sigue.

Opciones de idioma

Brine admite dos opciones de idioma:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 93 de 177
Familia de plantillas Brine