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 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 se refiere a las funciones y a las opciones de diseño de la familia Bedford. Los ajustes de Estilos del sitio están en negritas y se vinculan a la lista de todos los ajustes de Bedford para ayudarte a navegar por el panel.

Tipos de páginas que se admiten

Bedford admite estos tipos de páginas:

Encabezado

Los visitantes 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 web y la navegación principal. No aparecen los eslóganes. El encabezado está fijo en las páginas de índice.

Modifica el título o el logotipo del sitio web en la sección 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. Las carpetas no se convierten en botones. 
  • Si no hay suficiente espacio en la ventana del navegador para que los enlaces de navegación se extiendan en el encabezado, aparecerá un ☰. 

encabezado de bedford

Cabeceras

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 Productos

Ten en cuenta lo siguiente:

  • Puedes marcar Transparente en las imágenes de banner en Encabezado del sitio para que aparezca 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.

Cabeceras de página

Crea una imagen o video de banner en la parte superior de las páginas de Diseño, Álbum, Blog, Eventos o Productos añadiendo imágenes en miniatura o URL de videos en la configuración de página.

Agrega una superposición de texto en el campo de Descripción de página de la pestaña General. Puedes formatear el texto como encabezados y botones. El texto del Título de la página no aparece.

Cabeceras tipo presentación de diapositivas

Crea un banner en modo presentación en la parte superior de una Página de diseño añadiendo un Bloque de galería en modo presentación 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.
  • Slideshow banners have a fixed height:
    • Computadoras de escritorio: 600 píxeles. Si el encabezado es transparente en las imágenes del banner, la altura de la imagen fija llega 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 el icono del engranaje 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 formatear el 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.

banner con diapositivas

Para los banners de página y con diapositivas:

  • Bold text formats as a header.
  • 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 extra en el encabezado de la página añadiendo espacios en blanco

superposición de texto en la configuración de página

banner text and buttons.jpg

Banners en publicaciones de blog y de eventos

Las Miniaturas de los elementos de una colección aparecen en la parte superior de las publicaciones de blog y en cada evento. 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 elemento de metadatos (elígelo con el ajuste Prioridad de los metadatos) aparecen sobre la imagen del banner. 

Añadir un filtro de color

Añade un filtro de color en todas las imágenes o videos del banner con Color de la superposición del banner en la sección Banner

Más ayuda con los banners

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. 

Usa los ajustes del Pie de página para modificar el estilo del contenido de tu 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.
  • Use the Site Info tweaks to style the phone number, email, and physical location from your Business Information settings
  • Marca Ocultar la información del sitio para quitar toda la información de contacto.
Consejo: si no ves los retoques Información del sitio y Ocultar información del sitio, previsualiza una plantilla diferente 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 carpetas y en los Índices y barras laterales de navegación por categorías en las Páginas de productos.

  • 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 que se añade a una carpeta aparece como enlace en una barra lateral de navegación. La barra lateral aparece en todas las Páginas de diseño de la carpeta.
  • 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 productos, 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.

Products Page sidebar navigation.jpg

Fondo

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

  • Main content area - Page Background in Main Content 
  • Header - Header Background Color in Site Header
  • Prefooter - Pre Footer Background in Prefooter
  • Footer - Footer Background in Footer

Fuentes

Adjust the text style, size, and color with Page Text and Heading tweaks in Main Content.

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. Estas son una buena opción para añadir texto, botones y otros bloques

  • Añade miniaturas de página para crear imágenes o videos de banner o para crear una presentación de banners.
  • 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

secciones de página de índice con navegación fija

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 fragmentos. El texto y la flecha de este enlace siguen los retoques 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 en miniatura se muestra como un banner cuando ves una publicación de blog individual en su URL directa.
  • Tags, source URLs, comments, shares, and likes always display below the post.
  • Categories always display above the post.
  • La navegación para las publicaciones anteriores y siguientes se muestra debajo de los comentarios.

Modifica el estilo de las Páginas de blog en la sección Blog:

  • Use Meta Priority to select which metadata (date, categories, or author name) displays above the post content on the landing page.
  • Uncheck Hide List Entry Footer to display tags, the source URL, comments, shares, and likes below post on the landing page.
  • To center post titles and metadata on the landing page, check Center Entry Title & Meta.
  • Display or hide blog authors from both the landing page and individual posts with Hide Entry Author. This tweak won’t appear if Meta Priority: Author is selected. 

publicación de blog

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 quitando la marca en Ocultar la barra lateral del blog en la sección Barra lateral y, luego, añade contenidos con bloques

barra lateral de la página de blog

Cabeceras 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 elemento de los metadatos (elígelo con el ajuste Prioridad de metadatos) y un enlace para Ver publicación.
  • La imagen en miniatura aparece detrás del texto. Si la publicación no tiene una imagen en miniatura, el texto aparece arriba del Color de la 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 productos y de una carpeta, y las secciones de página de índice a las que los visitantes acceden 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 desactivar 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. 

En los teléfonos inteligentes:

  • La navegación se contrae como ☰ en la parte superior 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 empresarial incluyen un enlace al Correo electrónico, en lugar de la dirección de correo electrónico completa. 

vista en teléfono inteligente y en tableta

Opciones de idioma

Bedford admite dos opciones de idioma: 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 54 de 100
Familia de plantillas Bedford