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 lento 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.
Personaliza 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:
- 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 Normales
- Páginas de Productos: 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.
- 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 saltos 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
- 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 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 retoques 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.
- Su estilo se modifica en Encabezado: Navegación principal y en Encabezado: Navegación secundaria. Elige el ajuste Estilo: Botón para modificar el estilo de los enlaces de navegación principal o secundaria para que sean 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.
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.
- 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
- 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 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 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 anuncios 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 anuncios, 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 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 Blog
La familia de plantillas de Brine utiliza una página de blog de cuadrícula/lista estándar. Para obtener más información sobre las funciones únicas y las opciones de estilo de este tipo de blog, visita Páginas de blog de cuadrícula/lista estándar.
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 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.
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 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 Índice: Galería:
- 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.
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.
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 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.
- 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.
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
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 retoques 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: 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.
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 su estilo en cada una de sus secciones para dispositivos móviles. Por ejemplo, puedes modificar el estilo del título o del logotipo en Dispositivos móviles: 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 í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 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:
- 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 (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
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.
- Brine
- Clay
- Fuente
- Foster
- Greenwich
- Hatch
- Heights
- Hunter
- Hyde
- Juke
- Marta
- Mercer
- Motto
- Mojave
- Nueva
- Pedro
- Rally
- Rover
- Sonora
- Thorne
Opciones de idioma
Brine admite dos opciones de idioma: