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 Usar secciones de páginas.

Consejo: Para ver qué plataforma 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

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. Haz clic en Avanzada para modificar elementos específicos del estilo dentro de cada paleta y motivo o para 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 esa sección.
  2. En la pestaña Colores, haz clic en el motivo elegido para desmarcarlo. 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 esa sección.
  2. En la pestaña Colores, observa qué paleta de colores has elegido.
  3. En el Menú de Inicio, pulsa Diseño y, luego, Colores.
  4. Observa qué paleta de color estás usando para el sitio principal.
  5. Haz clic en la paleta de colores de la sección que deseas editar. El resto de tu sitio cambiará transitoriamente a esa paleta, pero no será visible en tu sitio activo.
  6. Haz clic en Avanzados para editarlo.
  7. Regresa al menú principal de Colores y vuelve a seleccionar la paleta de tu sitio.
  8. Haz clic en Guardar.

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.

Consejos:

  • Si solo quieres un banner de imagen, empieza por una sección En blanco.
  • Los bloques de la sección se superponen 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.

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. Hover over the block and click the pencil icon to change the size and alignment.

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 tags 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, normal y pequeño

Los enlaces siempre están subrayados.

Encabezado

Quienes visitan el sitio 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, los enlaces de navegación, el carrito de compras y los iconos de redes sociales. También puedes agregar un botón de llamada a la acción.

Para modificar el estilo de tu encabezado:

  1. En la esquina superior izquierda, haz clic en Editar.
  2. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
  3. Elige el diseño de tu encabezado, la personalización de la marca, los iconos, el botón y las opciones de estilo.

El color de fondo depende de cómo se haya configurado el Color del encabezado:

  • Transparente: El encabezado coincide con el estilo de la primera sección de la página. Esto puede cambiar entre cada página según si la primera sección tiene estilos de sección. 
  • No transparente: Elige una paleta de colores en el editor del encabezado o desmarca todas las paletas para usar los estilos de color de todo el sitio.
  • Los menús desplegables de la carpeta coinciden con el color de fondo del encabezado.
  • Si necesitas más ayuda, consulta nuestros consejos para la solución de problemas con los colores.

Ten en cuenta lo siguiente:

  • Si añades un logotipo, agrega también el título del sitio. Los motores de búsqueda usan el título para los resultados de la búsqueda y las pestañas del navegador, a menos que uses un título especial para SEO.
  • Evita usar ángulos en los títulos, como estos: Mi <sitio web>. Los ángulos empleados de este modo se procesan como código y pueden hacer que algunas partes de tu título sean invisibles u ocasionar otros problemas.
  • Infórmate mejor sobre los títulos y los logotipos del sitio.

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.

Páginas de Cartera

Una Página de Cartera crea una página de aterrizaje con estilo que vincula a los visitantes con las subpáginas. Este es un gran modo de presentar varias galerías, proyectos, elementos destacados de la cartera y otros contenidos en un lugar.

Las Páginas de Cartera tienen un límite de 40 subpáginas.

Para añadir y configurar una Página de Cartera:

  1. En el Menú de Inicio, haz clic en Páginas y, luego, en +.
  2. Presiona Cartera y elige un diseño. Puedes cambiarlo después con estilos del sitio.
  3. Para crear imágenes de la página de aterrizaje en las que se pueda hacer clic, añade imágenes a todas las subpáginas en Configuración de los elementos de la cartera.
  4. Añade o edita las subpáginas con secciones.
Nota: Actualmente no es posible trasladar subpáginas entre las distintas Carteras.

Estilos de sección

Para modificar el estilo de una sección, edita la página, haz clic en 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 un diseño de albañilerí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.

Estilos de los elementos de la colección

Para modificar el estilo de las publicaciones de blog y de los elementos de producto:

  1. En el Menú de Inicio, haz clic en Diseño.
  2. Haz clic en Publicaciones de blog o 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.

Plantillas en la versión 7.1

Todos los sitios que empleen la versión 7.1 son parte de la misma familia de plantillas. 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 para todo el sitio.
  • Cambia los diseños de tus secciones.
  • Añade secciones nuevas para modificar el aspecto de una página. Por ejemplo, añade una sección con una imagen de fondo en la parte superior para crear un banner de página.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 18 de 77
Opciones de estilo y diseño en la versión 7.1