Elementor 3.4 réglage du responsive via 7 points de rupture
8 mn de lecture

Elementor 3.4 réglage du responsive via 7 points de rupture

Peut-être avez-vous souvent pesté, comme moi, contre Elementor qui ne proposait que 3 points de rupture pour régler le responsive de votre site : ordinateur de bureau, mobile et tablette.

Alors, réjouissez-vous, Elementor vous a entendu.

Avec la version 3.4, il est dorénavant possible d’ajuster votre site afin qu’il s’affiche au mieux sur 7 appareils différents. ❤️‍🔥

Je ne sais pas ce que vous allez en penser, mais, franchement, je trouve qu’il s’agit d’une révolution.

Pas plus tard qu’hier, je me suis servie de cette nouvelle fonctionnalité et je me suis dit que ce serait bien d’en faire un article au cas où vous seriez passé à côté. 🙂

Donc, pour faire rapide : en sus des modes desktop ( la norme), tablette (point de rupture 1024 px) et mobile (point de rupture 767 px), vous avez maintenant accès aux modes :

  • Grand mobile (point de rupture 880 px)
  • Grande tablette (point de rupture 1200 px)
  • Portable (point de rupture 1366 px)
  • Écran large (point de rupture 2400 px)

Vous avez déjà installé la mise à jour et vous ne les avez pas remarqués ?

Eh bien, c’est normal, car ils sont bien cachés les bougres. 😀

Mais, ne vous inquiétez pas, voilà :

👉 la manip à faire pour les dévoiler au grand jour

👉 et aussi un peu de blabla pour vous expliquer comment ils fonctionnent.

Activation des points de rupture responsive supplémentaires d’Elementor

Il est à noter que les points de rupture supplémentaires ne sont disponibles qu’en tant qu’expériences.

Par conséquent, avant toute manipulation, pensez à faire une sauvegarde de votre site, par exemple avec UpdraftPlus. Ça ne coûte rien et ça peut vous éviter pas mal de tracas en cas de bug. 😉

La sauvegarde étant faite, le moment est venu de faire apparaître ces options supplémentaires dans Elementor.

Allez dans votre tableau de bord WordPress.

Puis, choisissez Elementor/Réglages/Expériences.

Là, sélectionnez “Additional Custom Breakpoints” et le marquer comme actif dans le menu déroulant.

N’oubliez pas d’enregistrer le changement.

Elementor 3.4 activer points d'arrêt supplémentaires

Ensuite, ouvrez une page/modifier avec Elementor /Réglages du site via la barre du haut de l’administration de votre tableau de bord WordPress ou directement en mode édition de page via l’icône du menu hamburger dans le coin supérieur gauche du panneau de widgets Elementor.

accès aux réglages du site Elementor

Une fois dans le panneau Réglages du site, choisissez “mise en page“.

Ici, vous pouvez voir que, par défaut, il n’existe que des points de rupture pour les modes tablette et mobile.

Alors, pour enrichir votre choix, cliquez sur le “+” et ajoutez les nouvelles options que vous souhaitez. Puis, cliquez sur “mise à jour”.

points d'arrêt responsive Elementor avant après

Une nouvelle fenêtre s’ouvre afin de recharger l’éditeur Elementor, cliquez alors sur “recharger maintenant“.

mise à jour de la mise en page d'Elementor pour le responsive

Ça y est, vous êtes désormais prêt à ajuster le responsive de votre site avec les nouveaux points de rupture.

Elle n’est pas belle la vie ! 😉

Voyons à présent comment s’affichent ces nouveaux réglages.

Aperçu du mode responsive Elementor enrichi des 7 points de rupture

Comme d’habitude, cliquez sur l’icône faisant apparaître le mode responsive en bas à gauche de la fenêtre d’édition d’Elementor.

Abracadabra, c’est magique ! 🎇

Aux 3 points de rupture initiaux, se sont ajoutés ceux que vous avez sélectionnés en complément.

nouveaux réglages responsive dans Elementor

Bien entendu, vous les retrouvez également dans chaque widget.

responsive Elementor choix

💡 Infos diverses :

⚙️ Vous pouvez revenir en arrière et supprimer les points de rupture qui ne vous servent pas en cliquant sur l’icône x à côté de chaque point de rupture supplémentaire (Remarque : les modes Mobile et Tablette par défaut ne peuvent pas être supprimés).

📏 Il est de plus possible de modifier le nombre de pixels correspondant aux différents points de rupture pour chaque appareil en agissant sur les flèches haut et bas ou en saisissant directement une autre valeur.

🖥️ Dans la fenêtre en mode responsive, Elementor offre aussi le choix de zoomer ou dézoomer l’aperçu via les + ou les -, ainsi que de modifier directement la hauteur et/ou largeur de la visualisation.

aperçu mode responsive Elementor

Passons enfin à la façon de régler le responsive après ajout des nouveaux points de rupture. 😉

Réglages du responsive en cascade via Elementor

Tout d’abord, il convient de noter qu’Elementor utilise un concept de paramétrage du responsive en cascade sauf pour “l’écran large”.

Alors qu’implique cette méthodologie en cascade ?

En fait, c’est assez simple, cela signifie que les changements se répercutent en cascade. 

C’est un peu comme un système d’héritage : les modifications que vous apportez sur un point de rupture plus grand sont répercutées jusqu’au point de rupture le plus petit.

⚠️ Attention, l’inverse ne fonctionne pas.

En clair, si vous définissez un paramètre pour le mode bureau, lorsque vous allez sur les réglages des appareils plus petits, style portable ou autre, vous retrouvez le paramètre hérité sous la forme d’un espace réservé grisé.

Il ne tient qu’à vous de le modifier. Après changement, ce paramètre sera à nouveau répercuté sur les appareils plus petits, excepté si vous modifiez de nouveau l’un deux.

Exemple en image pour les paramètres d’un bouton

Ici, j’ai choisi pour le mode bureau une marge de 51 px de haut.

Si je vais dans le mode portable, mobile ou tout autre mode qui est inférieur au mode bureau, je vois que le 51 px est grisé.

valeurs en cascade par défaut dans Elementor

Je veux modifier cette marge à 20 px à partir du point de rupture portable.

Pour ce faire, il suffit de “délier les valeurs”, la valeur passe à 0 et je peux alors indiquer la valeur de marge souhaitée à 20.

modification marge mode portable dans Elementor

On peut remarquer maintenant que toutes les valeurs de marge pour les modes inférieurs au portable sont passées à 20.

Donc, si je veux de nouveau changer la valeur pour le mode tablette (qui est inférieur au portable), je recommence de la même façon et ainsi de suite.

marges en cascade modifiées responsive Elementor

En fait, voilà ce qu’il faut retenir :

  • Le bureau reste la valeur par défaut de la mise en page.
  • Les paramètres des points de rupture les plus grands sont répercutés sur les points de rupture plus petits.

En conclusion, cette fonctionnalité réclamée depuis bien longtemps par beaucoup d’utilisateurs est réellement une révolution.

Toutefois, je pense que certains ajustements seront toujours inévitables via un peu de CSS après avoir testé le responsive de votre site WordPress.

Utilisez-vous ces nouveaux réglages pour le responsive dans Elementor ?

Si oui, qu’en pensez-vous ?

S’abonner
Notifier de
guest
22 Commentaires
Commentaires en ligne
Afficher tous les commentaires