Élément de ligne

À propos de l'élément Row

L' Élément de ligne est l’un des composants les plus essentiels lors de la création d’une page.

En règle générale, vous commencerez par l'élément « Ligne » pour poser les bases de votre mise en page. Vous pouvez organiser librement plusieurs lignes pour structurer votre page comme vous le souhaitez.

Pour des dispositions de grille plus avancées, qui aident à garantir que votre contenu est organisé et réactif sur différentes tailles d'écran, vous pouvez imbriquer jusqu'à 12 colonnes dans une seule rangée. 

Une fois votre cadre défini, vous pouvez facilement faire glisser et déposer des éléments tels que du texte, des images, des vidéos et des boutons dans la ligne. 

Comment ajouter un élément de ligne à GemPages V7 ?

Étape 1 : Dans l' Tableau de bord GemPages, accéder au Pages section, ouvrez une page existante ou créez-en une nouvelle. Vous serez redirigé vers l'éditeur GemPages.

Étape 2 : Consultez la barre latérale gauche pour trouver l'élément Row. Choisissez une disposition de ligne, puis faites-la glisser et déposez-la sur la zone de conception.

Étape 3: Cliquez sur l'élément pour ouvrir son panneau de paramètres dans la barre latérale gauche, qui est séparé en Paramètres  Avancé onglets.

Configurer l'onglet Paramètres

Mise En Page

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Mise En Page section, définissez le nombre de colonnes qui apparaissent dans une seule ligne.

Vous pouvez choisir parmi six dispositions prédéfinies (1 à 6 colonnes), et chaque préréglage divise automatiquement la ligne en sections égales.

Ces colonnes agissent comme des conteneurs dans lesquels vous pouvez ajouter différents éléments, tels que des images, des blocs de texte ou des boutons, pour structurer votre contenu.

Largeur de colonne

Contrôlez l'espace occupé par chaque colonne dans la ligne. Vous pouvez le faire de deux manières :

• Taux de variation : Toutes les colonnes sont réparties uniformément. Faites glisser le curseur pour ajuster leur largeur.
• Adapté au contenu : La largeur de la colonne s'ajuste automatiquement à la taille de son contenu.

Cette flexibilité vous aide à concevoir des mises en page qui s'adaptent à différentes longueurs de contenu et maintiennent l'équilibre sur la page.

Gestion des colonnes

Dans cette section, vous pouvez gérer le nombre et l'ordre des colonnes de votre ligne. Survolez chaque colonne de la liste pour :

• Réarranger: Modifier la position de la colonne.
• Copie: Dupliquez la colonne et son contenu.
• Effacer: Supprimer la colonne sélectionnée.

Cette section permet de réorganiser ou de répliquer facilement des blocs de contenu sans repartir de zéro.

Espacement des colonnes

Ajuste le espace entre les colonnes Pour contrôler la compacité ou l'étalement de votre mise en page, vous pouvez :

• Entrez une valeur numérique exacte, ou
• Faites glisser le curseur bleu pour modifier visuellement l'espacement.

Un espacement approprié permet d’améliorer la lisibilité et de maintenir la hiérarchie visuelle entre les colonnes.

Taille

Définissez la taille globale et le remplissage interne de l'élément Row.

• Largeur: Définit la largeur de la ligne sur votre page.
• La taille: Définit l'espace vertical de la ligne.
• Rembourrage: Contrôle l'espacement intérieur entre le bord de la ligne et son contenu.

Utilisez ces paramètres pour maintenir une structure et un équilibre cohérents dans toute votre mise en page.

Présentation

Ajoutez un arrière-plan à votre ligne pour créer une profondeur visuelle ou mettre en valeur des sections spécifiques. GemPages propose trois types d'arrière-plan :

• Couleur : Choisissez une couleur d'arrière-plan unie/dégradée à l'aide d'un code HEX, du sélecteur de couleurs ou du sélecteur d'échantillons.

• Image: Téléchargez une nouvelle image ou sélectionnez-en une dans votre bibliothèque multimédia.

• Vidéo: Utilisez une vidéo hébergée sur YouTube ou Shopify pour créer des arrière-plans dynamiques.

Forme

Dans cette section, vous pouvez affiner l'apparence générale de votre ligne en personnalisant son frontière, rayon de coin et effet d'ombre:

• Frontière: Ajoutez ou modifiez la bordure autour de la ligne. Vous pouvez définir sa épaisseur, Catégorie (plein, pointillé ou en pointillé), et couleur pour correspondre au style de votre marque.
• CORNER: Ajuste le rayon de coin Pour arrondir ou accentuer les bords du carrousel. Par exemple, des valeurs plus élevées créent un aspect plus doux et plus moderne.
• Shadow: Appliquer un ombre portée pour donner à votre carrousel une impression de profondeur et une séparation visuelle avec l'arrière-plan de la page. Vous pouvez ajuster l'ombre compenser, tache et couleur pour des effets subtils ou dramatiques.

Aligner la colonne

Ajustez l'alignement vertical de toutes les colonnes de la ligne. Choisissez parmi :

• Aligner en haut : Alignez tout le contenu en haut de la ligne.
• Centre vertical : Centrer tout le contenu verticalement.
• Aligner en bas : Alignez tout le contenu vers le bas.
• Répartir l'espacement vertical : Répartissez uniformément l’espace entre les colonnes.

Utilisez ce paramètre pour garantir que votre contenu reste équilibré et visuellement cohérent sur tous les appareils.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions cet article.

Bonnes pratiques pour l'élément Row

Utiliser efficacement les colonnes

L'élément Row est idéal pour créer des mises en page à plusieurs colonnes. Vous pouvez également imbriquer des lignes supplémentaires dans des colonnes pour créer des grilles plus complexes.

Concevoir des boîtes de contenu

Les lignes sont particulièrement efficaces pour créer des sections de témoignages ou des zones de contenu similaires. Vous pouvez utiliser l'élément Row pour créer des zones de contenu en ajoutant des arrière-plans et des marges. Pour un contenu pleine largeur, pensez à utiliser des images d'arrière-plan comme celles des bannières Hero. 

Assurer un espacement cohérent

Dans une ligne, organisez votre contenu avec une largeur maximale de 1200 px pour garantir une apparence uniforme sur toutes les tailles d'écran, des petits appareils aux grands moniteurs.

Améliorer la réactivité

Profitez de la flexibilité d'ajustement de la position, de l'ordre et de la largeur des colonnes pour différentes tailles d'écran. Votre design s'adapte ainsi parfaitement et reste attrayant sur tous les appareils.

Pour obtenir des instructions étape par étape sur la façon de rendre votre conception réactive sur différents appareils à l'aide de GemPages, reportez-vous aux instructions détaillées dans cet article.

Questions fréquentes

1. Comment puis-je définir une couleur d’arrière-plan pour une colonne ?

Actuellement, cette fonctionnalité n'est pas disponible. Pour contourner ce problème, vous pouvez ajouter du code CSS personnalisé. Cliquez sur l'élément, accédez à l'onglet Avancé et saisissez votre code CSS dans la zone Classe CSS. Vous pouvez également contacter notre équipe d'assistance GemPages pour obtenir de l'aide.

2. Comment créer une ligne de 5 colonnes ?

Vous pouvez créer une ligne à 5 colonnes en sélectionnant la disposition à 5 colonnes dans les paramètres de ligne. Vous pouvez également utiliser l'option Élément de carrousel pour un effet similaire.

3. Comment supprimer une colonne d'une ligne ?

Pour supprimer une colonne dans un élément de ligne, procédez comme suit :

• Choisissez la ligne qui contient la colonne que vous souhaitez supprimer.
• Dans la barre latérale gauche, recherchez la section colonne.
• Cliquez sur l’icône de la corbeille à côté de la colonne que vous souhaitez supprimer.

4. Comment dupliquer une ligne ?

Vous pouvez dupliquer une ligne en cliquant avec le bouton droit de la souris sur la ligne et en sélectionnant Dupliquer, ou en utilisant des raccourcis clavier :

• Sous Windows : appuyez sur Ctrl + C copier et Ctrl + V coller.
• Sur macOS : appuyez sur Cmd + C copier et Commande + V coller.

5. Comment ajouter 8 colonnes dans une ligne ?

Actuellement, la le nombre maximum de colonnes est de 6 par ligne dans GemPages V7 (comme indiqué dans le Paramètres panneau > Mise En Page). Si vous avez besoin de plus de 6, vous pouvez y parvenir en imbriquant un autre élément Row dans l'une des colonnes existantes.

6. Puis-je ajouter une bordure ou un remplissage à chaque colonne à l'intérieur d'une ligne ?

Actuellement, les commandes individuelles de bordure ou de marge intérieure au niveau des colonnes ne sont pas disponibles. Le style de bordure est uniquement disponible au niveau de la colonne. Niveau de ligne (sous le Forme section), et un rembourrage peut être appliqué à la Niveau de ligne également.

Si vous avez besoin d'une mise en forme spécifique à une colonne, veuillez contacter notre équipe d'assistance GemPages pour obtenir de l'aide.

7. Comment ajouter des lignes supplémentaires à une page ?

Pour ajouter d'autres lignes, ouvrez l'éditeur GemPages et faites glisser l'élément Ligne depuis la barre latérale gauche vers la zone de conception.

Veuillez noter que le nombre de lignes que vous pouvez ajouter peut être limité par les sections. Pour plus de détails, consultez cet article : Limite de section Shopify.