Estilos y funciones de la familia de plantillas Bedford.

La versátil familia de plantillas Bedford (Anya, Bedford, Bryant, Hayden) sirve para cualquier tipo de sitio, desde organizaciones sin fines de lucro hasta avisos de bienes raíces. Banners y botones especiales y personalizables, navegación en barra lateral y una Página de índice con desplazamiento destacan tus productos, tu misión o la información de tus eventos.

Esta guía cubre las características y las opciones de diseño de la familia Bedford. Los ajustes de estilos del sitio y la sección en la que aparecen en el panel Estilos del sitio están en negrita.

Tipos de páginas que se admiten

Bedford admite estos tipos de páginas:

• Páginas de Álbum
• Páginas de blog: 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: Clásicas

Encabezado

Los que visitan el sitio usan el encabezado de la parte superior para navegar por el sitio. En Bedford, el encabezado tiene el título o el logotipo del sitio y la navegación principal. No aparecen los eslóganes. El encabezado está fijo en las páginas de índice.

Modifica el estilo del título o el logotipo del sitio con estos ajustes en el encabezado del sitio:

• Usa Transparente en las imágenes de banners para elegir si la personalización de la marca y la navegación se superponen sobre los banners de la página o sobre el Color de fondo del encabezado.
• Cambia el tamaño del logotipo con el Ancho del contenedor del logotipo. La altura máxima está fija en alrededor de 100 píxeles, y el logotipo no se escalará más de eso.

Usa los ajustes de Navegación del sitio para cambiar las configuraciones de visualización para la navegación principal.

• Cuando Habilitar el botón de navegación está marcado, la última página de la navegación principal se ve como un botón. Cambia su aspecto con los ajustes de Botón de navegación. Los menús desplegables no se convierten en botones.
• Si no hay suficiente espacio en la ventana del navegador para que los enlaces de navegación se muestren en el encabezado, en su lugar aparecerá un ☰ (también conocido como menú o icono de tres líneas).

Banners

Añade imágenes y videos sin bordes en el banner de la parte superior de tus páginas; luego, haz una superposición de estas con encabezados, texto y botones personalizables. Puedes añadir imágenes y videos de banners a las siguientes opciones:

• Páginas de Diseño
• Páginas de Álbum
• Páginas y publicaciones de blogs
• Páginas de eventos y eventos individuales
• Páginas de la tienda

Ten en cuenta lo siguiente:

• Puedes marcar Transparente en las imágenes de banner en la sección Encabezado del sitio de estilos del sitio para mostrar el contenido del encabezado sobre el banner.
• Puedes añadir banners en modo presentación a las Páginas de diseño y de blog.
• Puedes apilar varios banners en las Páginas de índice.
• Para todos los banners, usa los ajustes de la sección Banner para cambiar las fuentes, los colores y los estilos para los botones y las superposiciones de texto.

Banners de página

Crea una imagen de banner o un video en la parte superior de las páginas de diseño, álbum, blog, evento o tienda agregando imágenes destacadas o una URL de video en la configuración de la página.

Agrega una superposición de texto en el campo Descripción de página de la pestaña General. Ten en cuenta que solo los usuarios con permisos de propietario o administrador en un sitio pueden agregar una descripción de página. Puedes agregar formato al texto, como encabezados y botones. No se muestra el texto del título de la página.

Banners tipo presentación de diapositivas

Crea un banner con diapositivas en la parte superior de una Página de diseño añadiendo un Bloque de galería con diapositivas como el primer bloque de la página.

• El Bloque de galería no aparecerá en la página.
• Los banners con diapositivas reemplazan a los banners de la página.
• Los videos añadidos en el Bloque de galería aparecen en el banner, pero no se reproducen automáticamente. Incluyen sonido y muestran el texto del banner.
• Para obtener los mejores resultados, marca Recortar las imágenes automáticamente en la pestaña Diseño del editor de bloques.
• Si tu banner tiene una superposición de texto, marca Mostrar el título y la descripción en la pestaña Diseño. No aparecerá el título.
• Los banners de presentación de diapositivas tienen una altura fija:
• Escritorio: 600 píxeles. Si marcas Transparente en imágenes de banner en la sección encabezado del sitio de Estilos del sitio, la altura fija de la imagen se extiende a 700 píxeles.
• Dispositivos móviles: 300 píxeles. (Los dispositivos con pantallas de más de 640 píxeles tienen la altura del banner de las computadoras de escritorio).
• Las páginas de blog también crean banners con diapositivas de las publicaciones destacadas.

Para agregar texto superpuesto, coloca el cursor sobre una imagen y haz clic en y, a continuación, agrega texto al campo Descripción. Si vinculaste a una galería, actualiza las descripciones en la página de galería.

• Puedes cambiar el formato del texto como encabezados y botones.
• Si el texto en una cabecera tipo presentación es demasiado largo como para caber en la altura fija, no se mostrará el texto de la descripción sin negrita. El texto en negrita aparecerá recortado.

Texto y botones en el banner

Para los banners de página y con diapositivas:

• El texto en negrita muestra el texto como encabezado.
• El texto normal tiene el mismo formato que el cuerpo del texto.
• Los enlaces de la última línea asumen el formato de botones. El enlace no puede incluir texto en negritas ni ninguna otra línea después del enlace.
• Agrega altura adicional al encabezado de la página añadiendo espacios en blanco.

Consejo: Después de crear un enlace de botón, puedes editar el texto del botón directamente desde el editor de páginas. Ten en cuenta que, si eliminas todo el texto, el enlace también desaparecerá y tendrás que agregarlo de nuevo en la configuración de la página.

Banners en publicaciones de blog y de eventos

Las imágenes destacadas de los elementos de la colección se muestran en la parte superior de las entrada de blog. Estos banners tienen una altura fija.

• Eventos: No aparece texto en el banner.
• Publicaciones de blog: el título de la publicación y un tipo de metadatos (elige con el ajuste Prioridad de metadatos) se muestran sobre la imagen del banner.

Añadir un filtro de color

Agrega un filtro de color a todas las imágenes o videos de banner con Color de superposición de banner en la sección Banner en Estilos del sitio.

• El color aparece en el área del banner mientras se carga la imagen del banner, incluso si el retoque está en transparente.
• También aparece en dispositivos móviles si el banner de video no se puede cargar y no has establecido una imagen de reserva para los dispositivos móviles.

Más ayuda con los banners

• No uses la descripción de la página para el contenido basado en el SEO, debido a que este contenido aparecerá en la página. Consulta Aumentar la visibilidad de tu sitio para los motores de búsqueda a fin de informarte mejor sobre cómo optimizar tu sitio.
• Si necesitas ayuda para recortar las imágenes, consulta Solución de problemas con el recorte de imágenes.
• Si necesitas asistencia general, consulta Añadir imágenes de banner.

Pies de página

Bedford incluye áreas de contenido en el pie de página y en el pre-pie de página que puedes personalizar con bloques.

• El pie de página y el pre-pie de página podrían incluir contenido automáticamente, por ejemplo, un Bloque de enlaces a las redes sociales o un Bloque de texto. Borra o edita estos bloques para reemplazarlos con tu propio contenido.
• Los enlaces a texto en el pie de página y el pre-pie de página aparecen subrayados.
• Los cambios que introduzcas en el pie de página aparecen en todo tu sitio.

Modifica el estilo del contenido del pie de página con estos ajustes de pie de página:

• Modifica el estilo de la Navegación del pie de página con los ajustes de Navegación del pie de página.
• Usa el ajuste Centrar la navegación / información para alinear la Navegación del pie de página y la información de contacto.
• Usa estos ajustes de Información del sitio para cambiar el estilo del número de teléfono, el correo electrónico y la ubicación física de tu Información comercial.
• Marca Ocultar la información del sitio para quitar toda la información de contacto.

Consejo: si no ves los ajustes Información del sitio y Ocultar información del sitio, previsualiza otra plantilla en tu sitio y, a continuación, cancela la vista previa.

Navegación en la barra lateral

Bedford crea barras laterales de navegación en las páginas de tienda y páginas en menús desplegables, sitios para miembros e índices.

• Usa los ajustes de la Barra lateral para ajustar las fuentes y los colores, ocultar los títulos de la barra lateral o directamente ocultar la barra lateral de navegación.
• La barra lateral de navegación no admite bloques.
• Cada página agregada a un menú desplegable o a un sitio para miembros aparece como un enlace en la barra lateral de navegación. La barra lateral aparece en cualquier página de diseño en el menú desplegable o en el sitio para miembros.
• Las páginas de un Índice solo muestran la barra lateral de navegación cuando se visita la URL directa de cada página.
• En las Páginas de tienda, la barra lateral de navegación muestra enlaces a las distintas categorías de productos. Hacer clic en uno de los enlaces filtra todos los productos, excepto los que pertenecen a dicha categoría.

Fondo

Utiliza estos retoques para establecer los colores de fondo del sitio:

• Área de contenido principal: Fondo de página en Contenido principal
• Encabezado: Color de fondo de encabezado en Encabezado del sitio
• Pre-pie de página: Fondo de pre-pie de página en Pre-pie de página
• Pie de página: Fondo de pie de página en Pie de página

Fuentes

Ajusta el estilo, el tamaño y el color del texto con los ajustes Texto de página y Encabezado en Contenido principal.

El encabezado del sitio, la barra lateral de navegación y los banners de página tienen sus propias opciones de fuente y color.

Páginas de Índice

Las páginas de índice de Bedford 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 contenidos se forman a partir de las páginas de diseño, que son una buena opción para añadir texto, botones y otros bloques.

• Agrega imágenes destacadas de la página para crear imágenes o videos de banner o una presentación de diapositivas de banner.
• Apila varios banners creando secciones con imágenes de banner, pero sin contenido de página. Para páginas nuevas, elimina el bloque de texto predeterminado. Seguirás viendo el espacio en blanco del marcador de posición mientras inicias sesión en tu sitio.
• Modifica el estilo de los colores y de las fuentes de la Página de índice con los mismos ajustes que para otras páginas. No hay ajustes específicos para la Página de índice.
• El título del sitio web y la Navegación principal permanecen en una posición fija cuando te desplazas más allá de la primera página. Usa el ajuste de Color del fondo del encabezado para modificar el color del fondo del encabezado fijo.
• Las Páginas de índice aceptan enlaces ancla al Índice. Cuando los que visitan el sitio hacen clic en estos enlaces, saltarán a una sección específica de tu Página de índice. Para verlo en acción, haz clic en el botón "Ver nuestro trabajo", en el contenido precargado de Hayden.
• Cuando visitas la URL directa de una página que es parte de un Índice, todas las páginas de ese Índice aparecen en la barra lateral de navegación.

Páginas de blog

Las Páginas de blog de Bedford presentan una lista de publicaciones apiladas verticalmente.

En la página de aterrizaje:

• Un enlace "Leer más" aparece debajo de las publicaciones con extractos. El texto y la flecha de este enlace siguen los ajustes de estilo de fuente de Texto de página y Color de enlace de página.
• El contenido completo de las publicaciones individuales se muestra debajo del título para las publicaciones sin fragmentos.

En publicaciones individuales:

• La imagen destacada se muestra como un banner cuando ves una entrada de blog individual como su URL directa.
• Las etiquetas, las URL de origen, los comentarios, los recursos compartidos y los Me gusta siempre se muestran debajo de la publicación.
• Las categorías siempre se muestran sobre la publicación.
• La navegación para las publicaciones anteriores y siguientes se muestra debajo de los comentarios.

Modifica el estilo de páginas de blog en la sección Blog de Estilos del sitio:

• Utiliza Prioridad de metadatos para seleccionar qué metadatos (fecha, categorías o nombre del autor) se muestran sobre el contenido de la publicación en la página de aterrizaje.
• Desmarca Ocultar pie de página de entrada de lista para mostrar las etiquetas, la URL de origen, los comentarios, los recursos compartidos y los Me gusta que aparecen a continuación en la página de aterrizaje.
• Para centrar los títulos y metadatos de las publicaciones en la página de aterrizaje, marca Título de entrada central y metadatos.
• Muestra u oculta autores de blogs tanto de la página de aterrizaje como de cada publicación con Ocultar autor de entrada. Este ajuste no aparecerá si se selecciona Prioridad de metadatos: Autor.

Barra lateral

Cada Página de blog tiene una barra lateral que se puede personalizar. Todas las publicaciones de blog de ese blog también muestran la barra lateral.

Habilita las barras laterales desmarcando Ocultar barra lateral del blog en la sección Barra lateral de Estilos del sitio y, a continuación, agrega contenido con bloques.

Banners tipo presentación de diapositivas

Las cinco publicaciones destacadas más recientes crean un banner en modo presentación en la página de aterrizaje.

• Cada diapositiva muestra el título de la publicación de blog, un tipo de metadatos (elige con el retoque Prioridad de metadatos) y un enlace Ver publicación.
• La imagen destacada se muestra detrás del texto. Si la entrada no tiene una imagen destacada, el texto se muestra sobre el color de superposición del banner.
• Usa el ajuste de Controles de las diapositivas del banner para regular los elementos de la navegación en tu banner del blog con diapositivas.
• Si no has marcado ninguna de tus publicaciones como Destacada, aparece el banner de la página en la Página de blog.

Móvil

Gracias al diseño adaptativo integrado en Squarespace, tu sitio se adapta para lucir fantástico en cualquier dispositivo.

• El contenido de la barra lateral del blog se muestra debajo del contenido principal en las páginas y las publicaciones de blog.
• Las barras laterales de navegación están ocultas de forma predeterminada. Pulsa + en la esquina superior derecha para mostrar las barras laterales de navegación de las páginas de tienda, las páginas de un menú desplegable y las secciones de la página de índice a las que los que visitan el sitio llegan a través de un enlace directo.
• Los banners con diapositivas tienen una altura fija de 300 píxeles. Si el texto del banner con diapositivas es demasiado largo, el texto de la descripción se oculta.
• Puedes deshabilitar los estilos para dispositivos móviles, pero no recomendamos que lo hagas.

Aparece un enlace Volver arriba en la parte inferior de la página.

• El enlace sigue la fuente de navegación del pie de página y los ajustes de color del enlace de navegación del pie de página en la sección Pie de página de Estilos del sitio. Si esos ajustes no aparecen, agrega temporalmente páginas a la navegación del pie de página.
• El enlace no aparece en la vista en dispositivo.

En los teléfonos inteligentes:

• La navegación se contrae como ☰ arriba a la derecha. El ☰ se muestra siempre en los dispositivos móviles, incluso si la navegación principal está vacía.
• El color del fondo de la superposición del menú es el mismo que el del encabezado.
• Los pies de página que muestran la información comercial incluyen un enlace al Correo electrónico, en lugar de la dirección de correo electrónico completa.

Opciones de idioma

Bedford admite dos opciones de idioma:

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

Solución de problemas de Bedford

Estos son algunos de los problemas con esta plantilla. Algunos son errores o problemas conocidos. Aunque seguimos brindando asistencia para la versión 7.0 de Squarespace, corregir errores o problemas es una prioridad menor para nosotros mientras nos concentramos en nuestra plataforma actual, la versión 7.1. Puedes cambiar tu sitio en la versión 7.0 a la versión 7.1 con nuestra herramienta para actualizar.

Una Página de Diseño de mi Índice se superpone con otros contenidos

Si una Página de Diseño del Índice tiene el slug de URL /encabezado, tu sitio tratará toda la página como el encabezado del Índice. Esto puede hacer que varias páginas se superpongan y causar problemas para editar el contenido de la página.

Para repararlo, cambia el slug de la URL de la página para cualquier cosa excepto /encabezado, según nuestros consejos de formato y slugs de URL reservados.

Uno de los enlaces del banner no se convierte en botón

Solo los enlaces de la última línea de la descripción adoptan el formato de un botón. Si tu enlace no aparece como botón, marca el texto de la superposición en la descripción de la página o en la descripción de la imagen. Verifica que el enlace no esté en negritas y que no haya saltos de línea después del enlace.

Si el enlace no está en negritas y no hay una línea debajo de él, intenta este método para la solución de problemas:

1. Abre la descripción de la página o de la imagen de ese banner.
2. Copia todo el texto en el campo de descripción y presiona Ctrl + X (Comando + X en Mac).
3. Pulsa Ctrl + Shift + V (Comando + Shift + V en Mac) para pegar sin conservar el formato.
4. Vuelve a agregar el enlace en la última línea. Verifica que no haya saltos de texto o de línea debajo.
5. Guarda y actualiza la página.

El texto de descripción del banner no aparece en los teléfonos inteligentes

En la vista en dispositivos móviles, los banners en modo presentación tienen una altura fija de 300 píxeles. Si el texto del banner en modo presentación es demasiado largo, el texto de la descripción se oculta.

No aparece la imagen del banner

Para banners de página:

1. Abre el panel Páginas.
2. Posiciona el cursor sobre tu página y haz clic en .
3. Verifica que haya una URL de imagen destacada o video cargada en la pestaña Medios.
4. Si añadiste una URL de video, desplázate hacia abajo en la pestaña Medios para verificar que haya una imagen de reserva para dispositivos móviles. Esta aparece cuando no puede cargarse el video del banner.
5. Haz clic en Guardar y actualiza la página.

Para banners de diapositivas:

1. Posiciona el cursor sobre la vista previa de la página y haz clic en Editar para abrir el editor de páginas.
2. Asegúrate de que el bloque de galería de diapositivas sea el primero de la página.
3. Posiciona el cursor sobre el bloque de galería en diapositivas y haz clic en Editar para abrir el editor.
4. Verifica que las imágenes o los videos estén cargados.
5. Haz clic en Guardar y actualiza la página.

Para los banners de diapositivas de blog, asegúrate de que cada entrada destacada tenga una imagen destacada en su configuración.

Las páginas de galería no admiten imágenes de banner.

Los banners se ven más cortos en otra computadora

El diseño adaptativo de Squarespace toma en cuenta tanto el tamaño de la ventana del navegador como la resolución dela pantalla. En los dispositivos con más baja resolución (1366 x 768 o menos), los banners se ven más cortos para adaptarse a la resolución de pantalla.

No se puede ir a una página del Índice

En el panel de Páginas, hacer clic en una página del Índice te dirige al lugar de esa página en la Página del Índice y te muestra cómo luce la página en contexto. Esto te permite organizar tu Índice con eficiencia.

Para ver cómo luce la página fuera del Índice, ve a la URL directa de la página sin iniciar sesión o en el modo incógnito.

No se ve el bloque de newsletter

Cuando agregas un Bloque de newsletter a una Página de Diseño, el fondo predeterminado del bloque se configura como transparente con texto en blanco. Si la página también es blanca, el texto no se leerá.

En la sección Bloque de newsletter de Estilos del sitio, puedes resolver el problema si configuras Estilo del newsletter en Claro o ajustas la transparencia con el retoque  Color del fondo.

Aparece un color cuando se desplaza hasta la parte inferior en un dispositivo móvil

Cuando te desplazas hasta la parte inferior de un sitio web en un iPhone o un iPad, el efecto de "banda de goma" de Apple muestra un área en blanco debajo de donde termina tu sitio.

Para la familia Bedford, el color de esa área está configurado según el color del pie de página. Para cambiarlo, haz lo siguiente:

1. Abre el panel Estilos del sitio.
2. Desplázate hasta la sección Pie de página y cambia el retoque de Fondo del pie de página.

Para asegurarte de que tus colores coincidan, te recomendamos elegir un color que no tenga transparencia, debido a que esta área siempre será completamente opaca. Por ejemplo, si tu pie de página está configurado como rojo mayormente transparente, este aparecerá como rosado claro, pero el área de la "banda de goma" debajo del pie de página será roja brillante.

¿Cómo puedo volver a crear el botón “Ver nuestro trabajo“?

El botón "Ver nuestro trabajo" en el contenido precargado de Hayden es un enlace ancla a la Página de Índice.

No aparece el enlace de navegación como un botón

Antes de intentar la solución de problemas, ten presente lo siguiente:

• Solo la última página de la Navegación principal puede aparecer como un botón.
• Las opciones desplegables no tendrán un formato de botón.

Si el botón de navegación no se muestra:

1. Abre el panel Estilos del sitio.
2. Desplázate hacia abajo hasta la sección Navegación del sitio.
3. Verifica que el ajuste del botón Habilitar navegación esté marcado.
4. Guarda y actualiza la página.

Aparece el icono del menú de navegación en una computadora

Se muestra ☰ aunque no hay suficiente espacio en la ventana de navegación para que se muestren todos los enlaces de navegación. Haz clic en el icono del menú para que aparezca una superposición de navegación.

La superposición del icono del menú y de navegación hacen que tu sitio sea apto para dispositivos móviles, adaptativo y fácil de navegar. No es posible eliminar esta característica. No obstante, hay algunas medidas que puedes tomar para reducir el ancho y que aparezcan todos los enlaces:

• Reduce el número de elementos de navegación. Un método es usar menús desplegables para crear menús desplegables.
• Reduce el tamaño de la fuente y el espaciado de navegación con el retoque Fuente del enlace de navegación en la sección Navegación del sitio, en Estilos del sitio.
• Reduce el ancho del contenedor del título del sitio o del logo en la sección Encabezado del sitio de Estilos del sitio.

Mi menú móvil no se abre

El menú móvil no se abrirá si agregaste un banner de video a la página de inicio utilizando una URL no válida o un código de inserción. Para editar la URL del video:

1. Abre el panel Páginas.
2. Desplaza el cursor sobre el título de la página de inicio en el panel izquierdo y, a continuación, haz clic en .
3. Haz clic en la pestaña Medios y, a continuación, en Video.
4. Confirma que el campo URL de video contiene una URL válida.

El anuncio de página es demasiado corto o recorta la imagen

Para aumentar la altura del banner de una página, presiona la tecla Return o Enter arriba o abajo de la descripción de tu página y añade espacios en blanco. Esto puede solucionar problemas de recorte y expande el tamaño total del banner en la página para lograr un efecto llamativo.

Para añadir espacios en blanco debajo de un botón, presiona Mayúscula + Enter o Mayúscula + Return para cada línea que desees añadir.

Apilar banners en un Índice

Para apilar las imágenes del banner sin espacio en blanco entre ellas, crea páginas de diseño que tengan imágenes destacadas sin ningún contenido. Solo aparecerán las imágenes del banner y el texto superpuesto en cada página. En cada página de diseño, verifica que hayas borrado el bloque de texto predeterminado o verás un espacio en blanco entre cada banner.