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

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

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 ?

Soumettre un commentaire 💬

guest
24 Commentaires
Commentaires en ligne
Afficher tous les commentaires