Comment définir la position des éléments dans GemPages

Que signifie « position de l'élément » dans la conception Web ?

Dans la conception de sites Web, position de l'élément fait référence à l'endroit où un objet (comme un bouton, une image ou un bloc de texte) apparaît par rapport à son conteneur parent ou la disposition généraleComprendre le fonctionnement des différents types de positionnement vous permet de créer des conceptions flexibles et parfaites au pixel près.

Par exemple :
Un bouton placé à l'intérieur d'un colonne dans un rangée peut être déplacé dans cette colonne, mais uniquement dans son conteneur, sauf si un positionnement avancé est appliqué..

Comment définir la position des éléments dans GemPages

• Marge:Déplace l'élément et décale également les éléments proches pour maintenir l'espacement.
• Poste: Déplace l'élément sans affecter les positions des autres éléments.

Des exemples pour chaque cas seront fournis ci-dessous.

Méthode 1 : Ajuster la position des éléments à l'aide des marges

Les marges constituent le moyen le plus simple de repositionner des éléments dans GemPages. Elles créent de l'espace autour d'un élément et influencent la fluidité du contenu à proximité.

Étape 1 : Cliquez sur l'élément dont vous souhaitez modifier la position.

Étape 2 : Dans la barre latérale des paramètres, accédez à l' Avancé languette.

Étape 3 : Ajuster les marges in Espacement: 

• Utilisez le marges positives pour ajouter de l'espace autour de l'élément.
• Utilisez le marges négatives pour positionner des éléments en dehors des limites de leur conteneur pour des conceptions uniques.

Si vous définissez un marge supérieure négative, l'élément se déplacera vers le haut et les éléments situés en dessous se déplaceront également vers le haut pour combler l'espace.

Pour un guide détaillé sur les marges, consultez notre Paramètres de marge Article.

Méthode 2 : Définition de la position de l'élément à l'aide de la propriété Position

Pour un contrôle de mise en page plus avancé, utilisez le Réglage de la positionCette méthode vous permet de placer des éléments sans affecter les autres et vous donne un contrôle précis sur le comportement de la mise en page lors du défilement et du redimensionnement.

Voici comment modifier les paramètres de position d'un élément :

Étape 1 : Cliquez sur l'élément que vous souhaitez repositionner.

Étape 2 : Allez dans l'avancé et recherchez le Poste Section: 

Choisissez l'une des options suivantes:

• Statique:
  • Paramètre par défaut ; l'élément suit le flux normal de la page.
  • Aucun ajustement de position personnalisé n'est autorisé.
• Relatif:
  • Déplace l'élément par rapport à sa position d'origine.
  • Ajuster les valeurs personnalisées pour Top, Des, Bas, ou Gauche pour déplacer son emplacement.
• Absolute:
  • Positionne l'élément par rapport à son ancêtre positionné le plus proche (par exemple, une ligne ou une section).
  • Utilisez le Top, Des, Bas et Gauche pour placer l'élément exactement où vous le souhaitez dans son élément conteneur.
• Parfaitement fixé:
  • Maintient l'élément dans une position fixe par rapport à la fenêtre d'affichage.
  • Idéal pour les en-têtes collants ou les boutons flottants qui restent visibles pendant le défilement.
• gluant:
  • Agit comme un hybride de positionnement relatif et fixe.
  • L'élément se comporte comme relatif jusqu'à ce qu'il atteigne une position de défilement spécifique, il devient alors fixé.