Comment aligner les éléments dans GemPages

Pourquoi l'alignement des éléments est important dans GemPages

Un alignement correct est la base d'une conception de page claire et conviviale. Dans GemPages, aligner vos éléments, comme les boutons, les images, le texte ou les formulaires, garantit une mise en page soignée, lisible et réactive sur tous les appareils.

Comment aligner des éléments dans GemPages (guide étape par étape)

Pour les éléments simples

Étape 1 : Cliquez sur l'élément dans l'éditeur.

Étape 2 : Dans la barre latérale gauche, accédez à la Paramètres languette.

Étape 3 : Faites défiler jusqu'à la Aligner . Choisissez Gauche, Centre ou Droite.

Pour les lignes avec plusieurs éléments

Étape 1 : Sélectionnez le Rangée.

Étape 2 : Dans Paramètres, choisissez Aligner la colonne. Réglez-le sur Centre ou Distribuer pour espacer uniformément les éléments enfants.

Alignement avancé : paramètres d'espacement et de position

Pour plus de contrôle, utilisez l’onglet Avancé dans la barre latérale.

Utiliser les marges pour ajuster l'espacement

• Allez dans Avancé > Espacement.
• Augmenter ou diminuer les marges supérieure, inférieure, gauche ou droite.
• Utilisez des marges négatives pour déplacer un élément en dehors de sa limite normale.

Utiliser la position pour un contrôle précis

• Allez dans Avancé > Position.
  Choisissez parmi:
  • Statique (Par défaut)
  • Relatif (décalage par rapport à la position d'origine)
  • Absolute (placé exactement à l'intérieur de son parent)
  • Parfaitement fixé (colle à l'écran lors du défilement)
  • gluant (colle après avoir fait défiler au-delà d'un certain point)

Comment centrer un élément sous un autre ?

Si vous souhaitez qu'un bouton, une image ou tout autre élément apparaisse directement sous un autre et reste centré, suivez ces étapes :

Étape 1 : ajouter un élément de ligne à 1 colonne

Depuis la barre latérale gauche, faites glisser et déposez un élément de ligne à 1 colonne dans la zone de conception. 

Étape 2 : placez les deux éléments dans la même colonne

Faites glisser le deuxième élément (par exemple, un bouton) juste en dessous du premier (par exemple, une icône) dans la même colonne.

Étape 3 : Alignez chaque élément imbriqué dans la ligne au centre

Cliquez sur le Bouton pour ouvrir ses paramètres dans le panneau de gauche. Ensuite, faites défiler vers le bas jusqu'à l'élément Aligner section et sélectionnez aligné au centre.

Continuez avec le Icône .

Maintenant, l’élément Icône est centré sous l’élément Bouton. 

Étape 5 : Ajustez l’espacement si nécessaire

Cliquez sur l'élément parent Row pour accéder à son panneau de paramètres. Passez à l' Avancé onglet et faites défiler jusqu'à espacement .

Dans cette section, vous pouvez définir une marge supérieure ou inférieure pour créer la bonne distance entre les éléments comme vous le souhaitez.

De cette façon, vous pouvez facilement créer des mises en page comme un bouton centré sous le texte ou une image sous un titre, garantissant que tout semble équilibré sur tous les appareils.

Questions fréquentes

1. Puis-je centrer un élément directement sous un autre dans GemPages ?

Oui. Placez les deux éléments dans la même colonne, puis définissez l'alignement de chaque élément sur . Si nécessaire, utilisez la marge supérieure ou la marge inférieure dans le Avancé paramètres pour ajuster l'espacement.

2. Comment aligner plusieurs éléments uniformément sur une ligne ?

Sélectionnez la ligne qui contient vos éléments. Dans le Paramètres onglet, choisissez Aligner la colonne et définissez-le sur Centrer ou Répartir. Ainsi, tous les éléments enfants sont répartis uniformément sur la ligne.

3. Quelle est la différence entre l'alignement et la position dans GemPages ?

L'alignement définit la manière dont les éléments sont placés par rapport à leur conteneur (gauche, centre, droite), tandis que la position donne un contrôle plus précis (statique, relatif, absolu, fixe, collant).