Los estilos y funciones de la 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 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:
- Páginas de Álbum
- Páginas de blog: Cuadrícula estándar/lista
- Páginas de Portada
- Páginas de eventos
- Páginas de Galería: Estándar
- Páginas de índice: Apiladas
- Páginas de Diseño
- Páginas de tienda: avanzadas
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.
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
- Título o logotipo del sitio (es decir "personalización de la marca")
- Leyenda
- 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 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:
- Aparecen en el pie de página del sitio.
- Su estilo se modifica con los ajustes de Pie de página: navegación.
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:
- 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:
- 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:
- 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 con diapositivas gracias a un índice con una galería en diapositivas.
- Si necesitas asistencia general, consulta Añadir imágenes de banner.
Á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.
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 comercial.
- Los enlaces de Navegación del pie de página.
- Dos opciones de diseño (usa el ajuste Diseño en Pie de página).
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.
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.
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.
- Las secciones de contenido son ideales para mostrar texto, botones y otros bloques.
- Las secciones de índice de galería muestran imágenes en un formato de cuadrícula o presentación de diapositivas.
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.
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).
Secciones del Índice de galería
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.
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.
Más ayuda con los Índices
Ten en cuenta lo siguiente:
- 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 con diapositivas 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.
- 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.
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
Barra lateral
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.
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 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.
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: 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 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.
Barras de navegación
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.
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:
- Las páginas de tienda tienen opciones de estilos 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 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:
- Aria
- Basil
- Blend
- Brine
- Burke
- Cacao
- Clay
- Plantilla personalizada (descontinuada)
- 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
Opciones de idioma
Brine admite dos opciones de idioma: