Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Styles mobiles avancés

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

Pour certains templates, le panneau Styles du site comporte des ajustements spécifiques aux appareils mobiles qui vous permettent de personnaliser davantage votre site. Vous trouverez dans ce guide une présentation de ces options.

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 modèle

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 page boutique
  • Voir tous les réglages de style

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 page boutique
  • Voir tous les réglages de style
Flatiron
  • Masquer les titres de la grille des miniatures de la Page d'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 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 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 page boutique
  • Voir tous les réglages de style

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.

Taille du logo

Dans les modèles 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 modèle Brine prend en charge jusqu'à deux barres mobiles :

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 Produits.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 16 sur 146