Styles mobiles avancés dans la version 7.0

Dernière mise à jour le 21 avril 2023

Découvrez les templates de la version 7.0 dotés d’options de styles mobiles spéciales.

Tous les sites Squarespace sont optimisés avec un design réactif afin que votre site s’adapte au format de n’importe quel appareil mobile ou navigateur.

Certains templates de la version 7.0 peuvent être personnalisés davantage grâce aux ajustements pour mobile disponibles dans le panneau Styles du site. Le présent guide vous propose de découvrir ces options.

Accéder à cette fonctionnalité

Ce guide concerne la version 7.0. La version 7.1 ne propose pas de styles mobiles distincts. Pour en savoir plus, consultez l’article Comment mon site s’affichera-t-il sur les appareils mobiles ?.

Options par template

Pour afficher un aperçu de votre design mobile au fur et à mesure que vous apportez des modifications, ouvrez Vue par appareil avant d’ouvrir le panneau Styles du site.

  • Pour trouver des réglages mobiles, appuyez sur Ctrl + F (Commande + F sur Mac) et recherchez le mot Mobile.
  • Pour la mise à l'échelle des polices, recherchez le mot Min.

Voici les options mobiles proposées par ces familles de templates :

Famille de templates Options
Avenue
  • Ajuster la taille du logo

Aviator

Brine

  • Ajouter une ou deux barres de navigation mobiles
  • Choisir si la barre supérieure doit être fixe
  • Définir des styles séparés pour les icônes d'en-tête
  • Ajuster l'emplacement des icônes
  • Définir la largeur à laquelle le site doit passer en vue mobile (point d'arrêt)
  • Options de style de la page Boutique

Farro

  • Ajouter une ou deux barres de navigation mobiles
  • Choisir si la barre supérieure doit être fixe
  • Définir des styles séparés pour les icônes d'en-tête
  • Ajuster l'emplacement des icônes
  • Options de style de la page Boutique
Flatiron
  • Masquer les titres de la grille des miniatures de la page Index
Galapagos
  • Définir la couleur et la police du titre du site
  • Si vous avez un logo en mode ordinateur, vous pouvez ajouter un logo mobile distinct et définir sa hauteur, ou afficher un titre de site à la place.

Skye

  • Mise à l'échelle des polices
  • Options de style de la page Boutique
Supply
  • Remplacer le logo par le titre du site

Tremont

  • Mise à l'échelle des polices
  • Différents paramètres de taille pour différentes largeurs de navigateur. Par exemple, définissez la hauteur de votre logo pour ordinateur, tablette et smartphone.
  • Options de style de la page Boutique
Wells
  • Définir la police et la taille du titre du site
Wexley
  • Régler la couleur d'arrière-plan de la navigation mobile

York

  • Mise à l'échelle des polices
  • Barre de navigation mobile supérieure
  • Définir des styles séparés pour les icônes d'en-tête
  • Options de style de la page Boutique

Types de styles mobiles

Mise à l'échelle des polices

La mise à l'échelle des polices vous permet de définir manuellement les tailles maximales et minimales des titres, des en-têtes et d'autres textes clés. Pour en savoir plus, consultez la page Mise à l'échelle des polices.

Dans les templates où vous pouvez ajuster la taille mobile du logo, nous vous recommandons de définir le logo de votre site pour qu'il s'affiche en plus petit sur mobile afin de réduire l'encombrement.

Remarque

seule la famille de templates Galapagos permet de charger un logo différent pour les appareils mobiles.

Barres de navigation mobiles

Les barres de navigation mobiles s'affichent en haut ou en bas de votre site mobile. Ils contiennent des éléments d'en-tête tels que le titre ou le logo du site, le panier et l'icône de recherche. Vous pouvez personnaliser les couleurs de la barre, choisir l'endroit où les éléments doivent s'afficher et leur donner des styles mobiles uniques.

Par exemple, le template Brine prend en charge jusqu'à deux barres mobiles :

KB Guide Image

Page Boutique

Pour les templates qui prennent en charge les pages Boutique avancées, vous pouvez personnaliser le style de lʼaffichage mobile des titres de produits, des prix et des prix promotionnels. Pour en savoir plus, consultez l’article Personnaliser les pages Boutique.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Styles mobiles avancés dans la version 7.0