Ajouter une marge négative à un élément ou à une section

Que sont les marges négatives dans GemPages ?

Les marges négatives sont une propriété CSS qui applique une valeur négative à l'espace autour d'un élément, lui permettant de se rapprocher des éléments voisins ou même de les chevaucher.

Contrairement aux marges positives, qui ajoutent de l’espace autour des éléments, les marges négatives réduisent ou suppriment complètement cet espace, créant souvent une conception plus dynamique et stratifiée.

Pourquoi utiliser des marges négatives ?

1. Éléments superposés:Les marges négatives sont idéales pour créer un design en couches, où des éléments tels que du texte, des images ou des sections se chevauchent. Cet effet peut améliorer l'attrait visuel de votre page, en ajoutant de la profondeur et du dynamisme.
2. Ajuster l'alignement:Si vos éléments sont légèrement mal alignés, les marges négatives offrent un moyen rapide et efficace de procéder à des ajustements précis. Au lieu de repenser l'intégralité de la section, vous pouvez déplacer les éléments en place à l'aide de valeurs de marge négatives.
3. Résoudre les problèmes de mise en page:Lorsque les marges ou les paramètres d'espacement standard sont trop larges, les marges négatives permettent de réduire l'écart entre les éléments, de resserrer la mise en page et d'améliorer le flux de conception global. Cela est particulièrement utile lorsque vous travaillez avec des mises en page fixes ou des modèles qui laissent trop d'espace entre les sections.

Comment fonctionnent les marges négatives de GemPages ?

Les marges négatives affectent l'espace autour d'un élément dans quatre directions : haut, bas, gauche et droite. 

Voici comment cela fonctionne:

Marge supérieure : Supprime l'espace en tirant l'élément vers le haut.

L'application d'une valeur négative à la marge supérieure tire l'élément vers le haut, supprimant ainsi l'espace situé au-dessus. Cela peut aider à rapprocher un élément de celui situé au-dessus, créant ainsi le chevauchement ou l'ajustement d'alignement souhaité.

 Il est particulièrement utile pour ajuster le positionnement vertical des éléments qui doivent être visuellement connectés ou alignés plus étroitement sans modifier la structure de mise en page globale.

Marge inférieure : Tire l'élément vers le haut, le rapprochant de l'élément situé au-dessus.

Marge gauche:Tire l'élément vers la gauche, en chevauchant le contenu à côté de lui.

Marge droite : Tire l'élément vers la droite, fermant l'espace ou chevauchant les éléments adjacents.

Comment utiliser la marge négative dans GemPages ?

L'utilisation de marges négatives dans GemPages vous permet d'ajuster le positionnement des éléments, de créer des conceptions uniques ou de résoudre des problèmes de mise en page. 

Voici un guide étape par étape pour vous aider à appliquer des marges négatives à n'importe quel élément ou section dans GemPages.

Étape 1 : Ouvrez la page que vous souhaitez modifier.

Étape 2 : Dans l'éditeur GemPages, cliquez sur l'élément ou la section que vous souhaitez ajuster. 

Il peut s'agir d'une image, d'un bloc de texte, d'un bouton ou de toute section que vous souhaitez déplacer.

Étape 3 : Dans l' Onglet Avancé, faites défiler vers le bas pour localiser le espacement .

Vous verrez des options pour Rembourrage MargeNous travaillerons avec le Marge paramètres.

Étape 4 : Ajustez les valeurs de marge pour le Top, Bas, Gauche, ou Des selon les besoins, comme indiqué ci-dessus.

Entrez une valeur négative (par exemple, - 20, - 50) dans le champ de marge du côté que vous souhaitez ajuster. Exemple : saisissez - 50 dans le Marge supérieure pour tirer l'élément vers le haut

Au fur et à mesure que vous saisissez des valeurs négatives, l'élément se déplace en conséquence et vous pouvez voir les changements en temps réel.

Étape 5 : Utilisez le bouton Aperçu en haut de l'éditeur GemPages pour voir comment les modifications affectent votre page sur différents appareils (ordinateur de bureau, tablette, mobile).

Étape 6 : Une fois que vous êtes satisfait du positionnement et de la disposition, cliquez sur «Enregistrer ».

Si vous êtes prêt à publier les modifications sur votre site en direct, cliquez sur «Publier » pour appliquer les ajustements.