Guía de la plantilla 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.

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:

Todas las páginas: Cambia el Relleno en Encabezado: Inferior y en Relleno de la introducción, en Principal.
Páginas individuales: Añade altura agregando más cortes de línea al área de introducción.
Páginas de Índice: Cambia la altura 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:

Título o logotipo del sitio (es decir "personalización de la marca")
Eslogan
Enlaces de navegación
Iconos integrados de redes sociales
Barra de búsqueda
Carrito de compras
Enlace a Mi cuenta / Inicio de sesión

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.

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 con el fin de cerciorarte de que se vean bien en los dispositivos móviles.

Más ayuda con los encabezados

Ten presentes 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.
Su estilo se modifica en Encabezado: Navegación principal y en Encabezado: Navegación secundaria.

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

Aparecen en el pie de página del sitio.
Su estilo se modifica con los ajustes de Pie de página: Navegación.

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:

Aparecen en las Páginas de Diseño y en las páginas de colección.
Pasan a ser fondos del encabezado inferior.
Se muestran sin bordes, excepto con el diseño Diseño: Restringido.
Pueden desplazarse más lentamente que el resto de la página con el desplazamiento en paralelo.
No aparecen para los elementos de la colección (como las publicaciones de blog, los productos y los eventos individuales).

Puedes apilar varios banners en un Índice.

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.
Añade texto y otros contenidos en el área de introducción.
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

Si se ha activado el desplazamiento en paralelo, usa Recorte inteligente del desplazamiento en paralelo en Sitio: Cargando para asegurarte de que los banners se recorten al mínimo.
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 modificando sus puntos focales.

Más ayuda con los banners

Ten presentes estos consejos:

La primera imagen en una Página de Galería pasa a ser, automáticamente, la imagen de banner si no hay otra. Reemplázala o bórrala en Configuración de página.
Crea el efecto de un banner de página en modo presentación con un Índice que posee una galería en modo presentación.
Si necesitas ayuda general, consulta Añadir una imagen de banner.

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

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:

Tres áreas de bloques que puedes personalizar con tus propios contenidos.
Un área que muestra tu información empresarial.
Los enlaces de Navegación del pie de página.
Dos opciones de diseño (Diseño en Pie de página).

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.

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.

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.

Las secciones de Contenido son fantásticas para mostrar texto, botones y otros bloques.
Las seccionesde Galería muestran imágenes con un formato de cuadrícula o presentación.

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.

El recuadro de contenido (optativo) crea un espacio en blanco adicional alrededor de algunos bloques.
Si la sección superior es una sección de contenidos, aparece en el encabezado inferior.

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.

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

Secciones de Galería

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.

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.

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.

Más ayuda con los Índices

Ten presentes estos consejos:

Las Páginas de Índice no tienen áreas de introducción, y las áreas de introducción de las subpáginas no aparecen.
En las navegaciones del encabezado, las Páginas de Índice crean un solo enlace.
En los pies de página, las Páginas de Índice muestran todos los enlaces a sus subpáginas.
Puedes usar un Índice para crear un banner en modo presentación o una imagen de fondo de página completa.
Lee nuestros consejos sobre cómo añadir otros tipos de contenido.
Consulta Uso de las Páginas de Índice para obtener más ayuda.

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.

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 ajustes de (Superposición)
Secciones de Índice de galería: Índice: Galería
Elementos del encabezado: En sus secciones de Encabezado (por ejemplo, Encabezado: Personalización de la marca)
Páginas de Productos: 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.

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.

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.

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.

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.

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

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:

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.

Barras de navegación

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

Para añadir una barra de navegación superior o inferior, mueve cualquier elemento del encabezado a esta. Por ejemplo, ve a Dispositivos móviles: Personalización de la marca y elige Posición: Arriba a la izquierda para añadir la barra superior.
Elige si la barra superior estará fija en la parte de arriba o si se desplazará hacia arriba junto con la página conBarra fija en la parte superior de dispositivos móviles en Dispositivos móviles: Superior.
La barra inferior siempre es fija.
Elige los colores del fondo en Dispositivos móviles: Superior y en Dispositivos móviles: Inferior.

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

Modifica su estilo en cada una de sus secciones paraDispositivos móviles. Por ejemplo, puedes modificar el estilo del título o del logotipo en Dispositivos móviles: Personalización de la marca.
La navegación se minimiza como ☰.
Configura el color de fondo de la navegación con Color del menú en Menú en dispositivos móviles: General.
Los ajustes del Botón Cerrar en el Menú en dispositivos móviles: General cambian el estilo de la X que cierra el menú de navegación.
Los iconos 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 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 presentes estos consejos:

Las Páginas de Producto tienen opciones de estilo para dispositivos móviles.
La navegación del Índice desaparece en los dispositivos móviles.
El desplazamiento en paralelo funciona en los dispositivos móviles.
A veces, los banners de video no cargan porque la velocidad de la conexión es lenta y la versión del navegador, antigua. Elige una imagen de reserva para dispositivos móviles para que aparezca cuando el banner de video no se pueda cargar.
Los encabezados largos se separan con guiones y se cortan en la siguiente línea.
A diferencia de algunas plantillas, no se pueden desactivar los estilos para dispositivos móviles.
Consulta nuestros consejos para la solución de problemas si tienes inconvenientes con los banners para dispositivos móviles y el recorte de la imagen de fondo en dispositivos móviles.
Ve nuestros consejos generales sobre cómo se comportan los sitios en los dispositivos móviles.

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:

Elige el idioma del texto incorporado en tu sitio, como los formularios que se envían y el mensaje de Confirmación de Pedido.
Comienza un sitio nuevo con una plantilla enfrancés, alemán, italiano, portugués o español.

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

Páginas compatibles