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

Opciones de estilo y diseño en la versión 7.1

Usa las opciones de estilo global de la versión 7.1 de Squarespace para realizar cambios de estilo a gran escala en tu sitio. Esto genera un aspecto uniforme para ayudarte a mantener una marca unificada. También puedes añadir estilo a las distintas secciones por separado y emplear las páginas de cartera para crear páginas de aterrizaje que enlacen a tu contenido.

Esta guía se refiere a las opciones de diseño y de estilo para la versión 7.1. Para añadir contenido a tu sitio, consulta Secciones de páginas.

Consejo: Para ver qué versión usa tu sitio, inicia sesión y haz clic en Ayuda, en el panel izquierdo. Si necesitas más ayuda, consulta ¿Cuál es la plantilla y la versión de mi sitio?

Mira el video

Fonts

Para cambiar las fuentes de tu sitio:

  1. En el Menú de Inicio, pulsa Diseño y, luego, Fuentes.
  2. Elige un paquete de fuentes.
  3. Selecciona el tamaño base. Todo el texto restante se escala según este tamaño.
  4. Haz clic en the-gear-icon para modificar el estilo de un texto específico.

Usar una fuente específica

Para usar una fuente específica de Adobe o de Google Font, emplea la opción Buscar todas las fuentes para encontrarla.

  1. En el Menú de Inicio, pulsa Diseño y, luego, Fuentes
  2. Haz clic en un paquete de fuentes y, a continuación, presiona su the-gear-icon.
  3. Pulsa el tipo de texto que deseas cambiar: Encabezados, Párrafos, Botones o Metadatos.
  4. Presiona Familia.
  5. Haz clic en Buscar todas las fuentes.
  6. Desplázate para ver las fuentes disponibles o ingresa el nombre de la fuente en el campo Buscar fuentes, en la parte superior del panel.
  7. Haz clic en Guardar para aplicar tus cambios.

Dar formato al texto

Destaca cualquier texto y usa los iconos de la barra de herramientas para aplicar el formato.

Automáticamente creamos etiquetas HTML en el código de tu sitio para cada tamaño de texto:

  • <h1>: Encabezados extragrandes
  • <h2> : Encabezados grandes
  • <h3>: Encabezados medianos
  • <h4> : Encabezados pequeños
  • <p> : Texto del párrafo grande, mediano y pequeño

Enlaces

  • Los enlaces siempre están subrayados.
  • Cuando los que visitan el sitio hacen clic en un enlace, aparece una línea de puntos alrededor de él que hace que tu sitio sea más accesible para todos los visitantes.

Colors

Las opciones preseleccionadas te permiten hacer cambios en todos los colores del sitio a la vez. Para modificar los colores de tu sitio:

  1. En el Menú de Inicio, pulsa Diseño y, luego, Colores.
  2. Usa las opciones Paleta y Motivo para seleccionar un conjunto de colores y cómo aparecerán en pantalla.
  3. Posiciona el cursor sobre tu diseño y haz clic en el icono del lápiz para modificar el estilo de ciertos elementos dentro de ese patrón o seleccionar un color personalizado.

Resolución de problemas

Si los estilos globales no afectan a una parte específica de tu sitio, probablemente esa sección tenga estilos de sección que anulan los estilos para todo el sitio.

Para volver a configurar la sección con los estilos globales del sitio:

  1. Haz clic en Editar y, luego, en el icono del lápiz de la sección.
  2. En la pestaña Colores, coloca el control deslizable de Usar el diseño predeterminado en la posición activado. Esta sección volverá a los estilos de todo el sitio.

Para cambiar los colores específicos de una sección:

  1. Haz clic en Editar y, luego, en el icono del lápiz de la sección.
  2. Coloca el control deslizable de Usar el diseño predeterminado en posición desactivado y selecciona un motivo.
  3. Posiciona el cursor sobre Listo y haz clic en Guardar.
  4. En el Menú de Inicio, pulsa Diseño y, luego, Colores.
  5. Aparecerá un rótulo con el motivo en esa sección. Posiciona el cursor sobre el motivo en el panel de Colores y haz clic en el icono del lápiz para introducir los cambios.
  6. Regresa al menú principal de Colores y presiona Guardar.

Botones

Para modificar el estilo de los botones de tu sitio, en el Menú de Inicio, haz clic en Diseño y, luego, en Botones.

Los botones tienen los mismos colores y las mismas fuentes que tu sitio.

Los Bloques de botón tienen otras opciones de estilo:

  1. Haz clic en Editar para dicha página.
  2. Posiciona el cursor sobre el bloque y haz clic en el icono del lápiz para cambiar el tamaño y la alineación.

Espacios

Para modificar el estilo del espaciado de tu sitio, en el Menú de inicio, haz clic en Diseño y, luego, en Espaciado.

Puedes editar estos ajustes:

  • Ancho de página (máximo): Cambiar el ancho máximo posible de las páginas de tu sitio. El ancho real depende de tu navegador y dispositivo. Este ajuste no afecta el espaciado del encabezado de tu sitio.
  • Margen del sitio: Cambiar el ancho del margen a cada lado del sitio. Según la configuración de Ancho de página, es posible que este ajuste no tenga un efecto visible en el contenido de tu página. Este ajuste afecta a todo tu sitio, incluido el encabezado:

Puedes cambiar el espaciado de cada sección con estilos de sección.

Estilos de elementos del producto

Para modificar el estilo de los elementos del producto:

  1. En el Menú de Inicio, haz clic en Diseño.
  2. Haz clic en Elementos del producto.

Estilos del Bloque de imagen

Para modificar el estilo de los Bloques de imagen:

  1. En el Menú de Inicio, pulsa Diseño y, luego, Bloques de imagen.
  2. Haz clic en el bloque cuyo estilo deseas modificar para encontrar los ajustes que se aplican a dicho bloque.

Background

Para cambiar el fondo:

  • Usa el panel de Colores para cambiar el fondo del sitio.
  • Usa los estilos del sitio para cambiar el color de fondo de cada sección por separado o para añadir imágenes de fondo o de videos. Esto incluye las secciones del pie de página.
  • El encabezado tiene el mismo color de fondo que la sección superior cuando es transparente. Desactiva la transparencia en el editor de encabezado a fin de seleccionar otro motivo de colores para el encabezado.

Cabeceras

Para crear un banner:

  1. En la esquina superior izquierda, haz clic en Editar.
  2. Añade una sección de bloques y presiona su icono del lápiz.
  3. Haz clic en Fondo para añadir una imagen o un video.
  4. Haz clic en Colores para modificar el estilo del texto superpuesto y para añadir un color de superposición.
  5. Añade otras secciones de bloques debajo para el contenido de la página.

Consejos:

  • Si solo quieres un banner de imagen, empieza por una sección En blanco.
  • Los bloques añadidos en la sección se superpondrán al banner.
  • Para cambiar la altura, haz clic en el icono del lápiz y selecciona la altura de la sección.
  • Cuando elijas una imagen de fondo, sigue nuestros consejos de formato de las imágenes.

Encabezado

Los visitantes usan el encabezado superior para navegar por el sitio. En la versión 7.1, el encabezado tiene el título del sitio web o su logotipo y los enlaces de navegación. También puedes agregar el icono del carrito de compras, los iconos de las redes sociales y un botón de llamada a la acción.

Para informarte mejor, visita Crear un encabezado para el sitio en la versión 7.1.

Pie de página

Para editar tu pie de página:

  1. En la esquina superior izquierda, haz clic en Editar.
  2. Posiciona el cursor sobre el pie de página y haz clic en Editar pie de página.
  3. Añade contenido al pie de página con secciones.

Estilos de sección

Para modificar el estilo de una sección, edita la página, posiciona el cursor sobre la sección y, luego, haz clic en el icono del lápiz. 

pencil-icon.png

Aquí puedes elegir también diferentes diseños para las secciones de colección y de galería.

Si introduces cambios de estilo en una sección de colección, estos afectarán a todos los diseños del mismo tipo. Por ejemplo, si tienes dos secciones de blog y ambas usan una distribución de mampostería, cualquier cambio que hagas, como alinear el texto, afectará a ambas secciones.

Los estilos de la sección anulan los estilos globales para todo el sitio.

Plantillas en la versión 7.1

Todos los sitios que empleen la versión 7.1 usan la misma plantilla. Esto significa lo siguiente:

  • Todos ellos tienen las mismas opciones y características de estilo.
  • Todos ellos usan secciones para añadir contenidos a las páginas.

No es necesario cambiar de plantilla, por lo que esa opción no está disponible en la versión 7.1. Para probar diferentes aspectos en tu sitio:

  • Actualiza tus estilos globales.
  • Agrega páginas nuevas con diferentes diseños para principiantes.
  • Crea nuevas secciones para cambiar el aspecto de una página. Por ejemplo, agrega una sección con una imagen de fondo a la parte superior para crear un banner de página.

Para obtener más detalles, consulta Squarespace versión 7.1 o Squarespace versión 7.0.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 64 de 309
Opciones de estilo y diseño en la versión 7.1