Elementor garde les éléments dans leurs colonnes, ce qui est exactement juste jusqu'à ce que le design appelle autre chose : un badge qui se trouve à moitié sur la photo et à moitié sur celle-ci, ou une étiquette poussée au-delà du bord de la section Extension de positionnement dans Modules complémentaires principaux pour Elementor ajoute des contrôles de décalage à chaque widget, colonne, section et conteneur Vous pouvez pousser ou repositionner entièrement tout ce qui se trouve dans le panneau en px, em ou %, avec des valeurs distinctes par périphérique.
Ce que fait l'extension Positionnement #
Une fois activé, chaque élément obtient un Positionnement section sous son Avancé onglet. Choisir un Type de position et déplacez l'élément avec des curseurs décalés :
- Type de position : Default et Static gardent le flux normal, Relative compense l'élément de son propre endroit et Absolute le place à l'intérieur du parent positionné le plus proche. Il n'y a pas d'option fixe ici ; pour cela, utilisez le propre paramètre de position d'Elementor.
- Haut/Droite/Bas/Gauche : décalages en px, em ou % pour chaque côté, y compris les valeurs négatives pour pousser les bords passés.
- Depuis le Centre: un décalage horizontal par rapport au milieu du parent Il fixe à gauche à 50 % plus votre valeur.
- Z-Index : décide quel élément gagne lorsque les choses se chevauchent.
Chaque contrôle porte l'icône réactive, donc bureau, tablette et mobile conservent chacun leurs propres valeurs Le panneau ajoute un avertissement sensé : évitez de combiner De Centre et Gauche en même temps.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Le positionnement est une extension gratuite, donc aucune licence Pro n'est requise.
Comment activer l'extension Positionnement #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Le positionnement se trouve dans le Widgets d'affichage groupe, à côté de Ligne Grille et Extras de conteneurs. Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis de” vert “Settings enregistré avec succès.
Ouvrez le panneau Positionnement #
Sélectionnez l'élément dans l'éditeur Elementor, le badge de qualité rond dans la démo et ouvrez le Avancé onglet. Élargir le Positionnement section avec le badge et l'ensemble violet MA Type de position à Relatif. Les commandes de décalage apparaissent : haut, droite, bas, gauche, du centre et indice Z en dessous.
Faites glisser n'importe quel curseur et l'élément se déplace en direct sur la toile Un Top négatif de -143 dans la démo soulève le badge du milieu de la photo vers son bord supérieur ; les valeurs positives poussent dans l'autre sens.
Déplacer l'élément en place #
La démo parcourt le badge autour de la photo avec quelques valeurs : Top 357 le laisse tomber vers la moitié inférieure, Droite -262 glisse-le vers l'extérieur, et a Bas valorisez affiner le chevauchement jusqu'à ce que le badge chevauche le bord inférieur de la photo Chaque curseur prend également des valeurs saisies, afin que vous puissiez faire correspondre l'espacement exact d'une maquette.
Avec Relative, l'élément garde son emplacement dans la mise en page et le contenu autour reste mis Absolute sort l'élément du flux, donc le contenu ci-dessous monte pour combler le vide Lorsque deux éléments finissent par être empilés, le champ Z-Index se fixe qui se trouve au-dessus.
Le résultat sur la page #
Publier et le badge rend exactement où il était garé : chevaucher le bord inférieur de la photo, casser le rectangle sans toucher la structure de la colonne en dessous.
Vérifiez la tablette et le mobile avant de terminer Les décalages qui semblent directement sur le bureau peuvent pousser un élément hors écran sur une fenêtre étroite, c'est exactement pourquoi chaque contrôle ici est réactif.
Où un positionnement précis est payant #
- Badges et timbres. Un sceau qui chevauche un coin photo se lit comme conçu et non placé.
- Cartes qui se chevauchent. Tirez une carte de témoignage ou de statistiques sur le bord de l'image à côté.
- Accents bris de section. Formes ou étiquettes qui traversent les limites des sections.
- Corrections d'alignement fines. Poussez un élément de quelques pixels sans l'envelopper dans des hacks de marge.
- Compositions de héros superposées. Empilez du texte sur les images avec Z-Index décidant de l'ordre.
Tutoriel Vidéo #
Regardez le badge se déplacer dans la mise en page en temps réel, depuis l'activation de l'extension jusqu'à la page publiée.
Foire aux questions #
Comment puis-je déplacer un élément librement dans Elementor ?
Activez l'extension Positionnement dans l'onglet Extensions des modules complémentaires principaux, sélectionnez l'élément et ouvrez Positionnement sous l'onglet Avancé Définissez le type de position sur Relatif et utilisez les curseurs supérieur, droit, inférieur et gauche ; l'élément se déplace en direct sur le canevas lorsque vous faites glisser.
Puis-je utiliser des valeurs de décalage négatives ?
Oui. Les valeurs négatives poussent l'élément au-delà de sa limite normale, c'est ainsi que vous superposez un badge sur un bord photo ou tirez un élément en dehors de sa section Tapez la valeur ou faites glisser le curseur dans les deux sens.
Que fait le paramètre Z-Index ?
Z-Index contrôle l'ordre d'empilement lorsque les éléments se chevauchent L'élément avec le nombre le plus élevé se rend au-dessus. Définissez-le dans le même panneau de positionnement chaque fois qu'un élément repositionné doit se trouver au-dessus ou en dessous de ses voisins.
Les compensations fonctionnent-elles aussi sur mobile ?
Chaque contrôle de décalage est réactif, donc le bureau, la tablette et le mobile conservent des valeurs distinctes. Prévisualisez toujours les fenêtres étroites après le positionnement : un décalage adapté à un écran large peut pousser l'élément hors écran sur un téléphone, et les valeurs par appareil correspondent à la façon dont vous le corrigez.
L'extension Positionnement est-elle gratuite ?
Oui. Positionnement des navires avec la version gratuite de Master Addons for Elementor, dans le groupe Display Widgets de l'onglet Extensions La page de tarification couvre ce que les plans Pro ajoutent.
Envelopper #
Le positionnement vous permet de placer les éléments Élémenteur en dehors de leur emplacement normal : choisissez Relatif ou Absolu, définissez les décalages et utilisez les valeurs Z-Index et par appareil pour le reste. Le Positionnement de la page d'extension le compare avec le paramètre Position intégré d'Elementor. Si un élément a également besoin d'une rotation ou d'une échelle, associez-le au Transforme l'extension (Pro). Vous pouvez parcourir le reste du Widgets et extensions Master Addons sur une page.
