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

Estilos móviles avanzados

Todos los sitios de Squarespace están optimizados con un diseño adaptativo, por lo que tu sitio puede ajustarse al formato de cualquier dispositivo móvil o navegador.

Algunas plantillas tienen retoques específicos para dispositivos móviles en Estilos del sitio que ofrecen un nivel adicional de personalización. Esta guía repasa dichas opciones.

Esta guía se refiere a la versión 7.0. La versión 7.1 no tiene otros estilos para dispositivos móviles. Para informarte mejor, visita Cómo hacer cambios de estilo.

Options by template

Para acceder a una vista previa de tu diseño para dispositivos móviles a medida que haces los cambios, abre Vista de dispositivos antes de abrir Estilos del sitio.

  • To find mobile tweaks, press Ctrl + F (Command + F on Mac) and search for the word Mobile.
  • For scaling fonts, search for the word Min.

Estas son las opciones para dispositivos móviles en estas familias de plantillas:

Familia de plantillas Opciones
Avenue
  • Adjust the logo's size

Aviator

Brine

  • Add one or two mobile navigation bars
  • Choose whether the top bar is fixed
  • Set separate styles for header icons
  • Adjust where the icons appear
  • Set the width at which the site switches to mobile view (breakpoint)
  • Products Page style options
  • See all style tweaks

Farro


  • Add one or two mobile navigation bars
  • Choose whether the top bar is fixed
  • Set separate styles for header icons
  • Adjust where the icons appear
  • Products Page style options
  • See all style tweaks
Flatiron
  • Hide the Index Page thumbnail grid titles
Galapagos
  • Set the color and font of the site title
  • If you have a logo on desktop, you can add a separate mobile logo and set its height, or display a site title instead.

Skye

  • Escala de fuentes
  • Products Page style options
Supply
  • Replace the logo with the site title

Tremont

  • Escala de fuentes
  • Different size settings for different browser widths. For example, set the height of your logo for desktop, tablet, and smartphone.
  • Products Page style options
Wells
  • Set the site title's font and size
Wexley
  • Adjust the mobile navigation background color

York

  • Escala de fuentes
  • Top mobile navigation bar
  • Set separate styles for header icons
  • Products Page style options
  • See all style tweaks

Types of mobile styles

Escala de fuentes

Scaling fonts let you manually set the maximum and minimum sizes for titles, headings, and other key text. To learn more, visit Scaling fonts.

Logo Size (Tamaño del Logo)

In templates where you can adjust the logo's mobile size, we recommend setting your site logo to display smaller on mobile to reduce crowding.

Nota: Solo Galapagos permite cargar un logotipo especial para dispositivos móviles. 

Mobile navigation bars

Mobile navigation bars display at the top or bottom of your mobile site. They contain header elements like the site title or logo, shopping cart, and search icon. You can customize the bar colors, choose where the elements display, and give them unique mobile styles.

For example, the Brine template supports up to two mobile bars:

Products Page

En el caso de las plantillas compatibles con la página Productos avanzados, puedes dar a los títulos, y precios normales y con descuento un estilo único para la visualización móvil. Para obtener más información, visita Cómo modificar el estilo de páginas de productos.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 10 de 109