Pour une compréhension approfondie de l'élément Row et de ses capacités, consultez notre Article sur les éléments de ligne.
Voici quelques exemples de mise en page clés utilisant des lignes et des guides étape par étape.
Bannière Design Hero
Une bannière de héros est une bannière bien visible placée en haut de votre page, généralement avec une image d'arrière-plan, un titre et un bouton d'appel à l'action.
Bien que vous puissiez utiliser un modèle prédéfini Élément de bannière de héros pour cela, l'élément Row vous offre un meilleur contrôle et une plus grande flexibilité.
Étapes pour le créer :
Étape 1 : Faites glisser et déposez un Rangée à 2 colonnes. Ceci crée la mise en page de base de votre bannière de héros.
Étape 2 : Personnalisez votre bannière de héros dans le Paramètres languette.
Faites défiler jusqu'à Présentation et cliquez sur la case à côté de Image(s) pour définir un arrière-plan d'image pour la section.
Vous pouvez parcourir la galerie pour choisir une image disponible ou en télécharger une nouvelle.
Étape 3 : Faites glisser et déposez un bloc de texte, un titre ou tout autre élément, tel qu'un élément de bouton, dans votre mise en page.
Personnalisez chaque élément via le Paramètres Onglets avancés pour les ajustements.
Étape 4 : À ajuster la taille de l'arrière-plan, cliquez sur la section pour ouvrir sa configuration.
Accédez à la Avancé onglet pour affiner les marges et le remplissage sous le espacement section pour un ajustement idéal.
Étape 5 : Passez à la vue mobile et ajustez la mise en page pour plus de réactivité.
Section de répartition des produits de conception
La disposition en couches de la décomposition des produits est parfaite pour mettre en évidence les caractéristiques ou les spécifications du produit d'une manière structurée et visuellement attrayante.
Étapes pour le créer :
Étape 1 : Faites glisser et déposez un Rangée à 2 colonnes. Ceci constitue la base de la présentation de votre produit.
Étape 2 : Faites glisser un élément d'image dans la colonne de gauche et téléchargez l'image souhaitée.
Étape 3: Pour créer le contenu de répartition avec des icônes et des blocs de texte similaires à l'exemple, faites glisser et déposez un autre élément de ligne dans la colonne de droite.
Étape 4 : Ajoutez vos éléments préférés dans la colonne, tels qu'une icône, des blocs de texte, un titre, une liste d'éléments et un élément de bouton.
Ensuite, vous pouvez les personnaliser à votre façon dans le Paramètres languette.
Étape 5 : Passez à la vue mobile et ajustez la mise en page pour plus de réactivité.
Détails du produit de conception
Pour une section produit détaillée, vous pouvez créer une mise en page personnalisée qui organise les images, les descriptions et les options d'achat des produits.
Étapes pour le créer :
Étape 1 : Faites glisser un Rangée à 2 colonnes à votre éditeur.
Étape 2 : Placer un image dans la colonne de gauche. Ajouter rubriques, blocs de texte, boutons, etc., dans la colonne de droite.
Étape 3 : Remplacez le texte d'espace réservé, importez une image et personnalisez les éléments ajoutés à votre guise. Ajoutez également un lien à vos boutons d'appel à l'action :
Concevoir une boîte de témoignages dans un carrousel
Pour concevoir un Boîte de témoignages dans un carrousel, Suivez ces étapes:
Étape 1 : Faites glisser le Élément de carrousel à votre page.
Étape 2 : Dans le carrousel, ajoutez un Rangée à 2 colonnes. Ajustez la taille des colonnes selon vos préférences. Insérez ensuite les images dans la colonne de gauche et le texte dans la colonne de droite.
Étape 3 : Ajustez l'apparence de chaque élément en fonction de votre style.
Étape 4 : Utilisez le bouton Copier / Coller fonctionnalité permettant de reproduire des diapositives, puis de mettre à jour chacune d'elles avec un nouveau contenu.
Pour plus de conseils de conception et des tutoriels approfondis sur la création de mises en page optimisées, explorez notre Académie GemPages.
Merci pour vos commentaires