Cet article vous montrera comment utiliser du CSS personnalisé pour créer un disposition de droite à gauche (RTL) pour Liste d'articles élément dans GemPages.
Par défaut, le Liste d'articles La mise en page actuelle affiche l'icône à gauche et le texte à droite. Un simple ajustement CSS permet d'inverser la mise en page : l'icône apparaît alors à droite et le texte s'aligne à droite.
Ceci est particulièrement utile pour :
- Conception de langages RTL
- Agencements de listes alternatifs
- Style d'interface utilisateur moderne
- Création de listes de fonctionnalités visuellement uniques
Étape 1 : Ouvrez les paramètres de la liste d’éléments
Dans l'éditeur GemPages :
- Survolez le Liste d'articles élément que vous souhaitez personnaliser
- Cliquez avec le bouton droit sur l'élément
- Sélectionner Code personnalisé
Cela vous permet d'appliquer un CSS personnalisé spécifiquement à cet élément de la liste d'éléments.
Étape 2 : Ajouter le code de mise en page RTL
Collez le code suivant dans la section de code personnalisé :
.ElementClass .gp-icon-list-wrapper { direction flexible : inversion de la ligne ; } .ElementClass .gp-icon-list-wrapper [data-gp-text] { text-align: droite; }
Étape 3 : Remplacer la classe de l’élément
remplacer .ElementClass avec l'identifiant de classe réel de votre élément de liste d'éléments.
Conseils:
- Utilisez cette mise en page pour les designs arabes, hébraïques ou inspirés du RTL (de droite à gauche).
- Combinez-le avec un espacement personnalisé ou un style d'icônes pour un meilleur équilibre visuel.
- Prévisualisez la mise en page sur ordinateur et appareils mobiles après avoir appliqué le code.
Étape 4 : Enregistrer et publier
Une fois terminé :
- Enregistrez vos modifications
- Publiez ou mettez à jour votre page
Merci pour vos commentaires