Passer au contenu principal
Toutes les collectionsDesigner
Le breakpoint ou point de rupture
Le breakpoint ou point de rupture

À quoi sert le breakpoint, comment le trouver et l'utiliser ?

Simon Ducoulombier avatar
Écrit par Simon Ducoulombier
Mis à jour il y a plus de 9 mois

Un "breakpoint" est le point spécifique à partir duquel le contenu d'un site web se réorganise en fonction de la taille de l'écran ou de l'appareil qu'on utilise. Ce point de rupture définit la limite à partir de laquelle votre modÚle (carte, bouton ou tableau de prix) s'adapte pour offrir une expérience adaptée à votre lecteur.

💡 Dans le cas d'un widget Affilizz, le breakpoint est dĂ©terminĂ© selon le bloc/container qui va le recevoir.

Comment trouver le breakpoint idéal pour vos widgets ?

👉 Prenons exemple sur le site Affilizz sur cette page

  • Lors de ce tutoriel, nous utilisons le navigateur Google Chrome

  • Rendez vous dans le menu "..." en haut Ă  droite de votre navigateur :
    "Plus d'outils > Outils de développement"

  • Un volet d'information s'ouvre

  • Cliquez ensuite sur l'icĂŽne de device en haut Ă  gauche (cf. cadre rouge sur la capture d'Ă©cran puis sĂ©lectionnez le mode responsive en haut de la page
    ​

  • Vous pouvez dĂ©sormais manipuler la taille de la fenĂȘtre du site en utilisant la poignĂ©e situĂ©e entre les 2 parties de votre navigateur
    ​

  • En manipulant la taille de la fenĂȘtre, examinez le comportement de la zone dans laquelle vous prĂ©voyez d'intĂ©grer les widgets Affilizz et stoppez lorsque vous remarquez le site s'adapte en mode mobile.

  • Une fois la taille dĂ©terminĂ©e, cliquez sur l'icĂŽne de sĂ©lection Ă  gauche de l'icĂŽne device puis survolez la zone dans laquelle vous allez intĂ©grer vos widgets
    ​
    Dans le cas du blog Affilizz, nous avons déterminé le passage en mode mobile des widgets à 560 pixels.
    ConcrÚtement, dÚs que la taille de la zone/bloc sera plus petite ou égale à 560 pixels, les widgets Affilizz seront affichés en mode mobile.
    ​

😇 Soyez rassurĂ©, vous pouvez modifier Ă  tout moment le breakpoint de chacun de vos widgets dans le designer Affilizz pour effectuer des test.



Comment modifier le breakpoint d'un widget dans le designer Affilizz

Suivez notre tutoriel vidéo pour apprendre à déterminer ou modifier votre breakpoint dans le designer Affilizz

Avez-vous trouvé la réponse à votre question ?