Dans cet article, vous apprendrez à utiliser l’élément de mise en page dans PageFly pour avoir une belle page.
A propos de l’élément de disposition
L’élément de mise en page est conçu pour vous aider à mieux structurer votre page afin d’augmenter votre taux de conversion. L’utilisation de cet élément vous donnera une compréhension globale de votre page même lorsqu’elle devient plus compliquée.
L’élément de mise en page comprend Section, Ligne et Colonne, qui sont au cœur même de la hiérarchie des éléments PageFly.
Vous pouvez les utiliser pour créer votre structure initiale via des conteneurs de section / ligne / colonne et la remplir avec d’autres éléments.
Il y a 10 mises en page de colonnes prédéfinies pour commencer, mais n’hésitez pas à les personnaliser comme vous le souhaitez. Nous continuerons d’ajouter d’autres variantes pour vous aider à gagner du temps.
La structure de la mise en page est simple. Dans cette partie de l’article, jetez un œil à la capture d’écran ci-dessous qui est un moyen facile de comprendre comment une page doit être structurée.
Configuration de l’élément de mise en page
Section, Ligne et Colonne ont des paramètres différents vous permettant d’affiner l’apparence du contenu pour atteindre le meilleur taux de conversion possible.
Configuration des sections
Les sections sont les principaux éléments de chaque page. Une section comprend une ou plusieurs lignes. Il est possible de contrôler le nombre de lignes dans une section via l’onglet Général.
Sélectionnez une section pour voir ses paramètres.
Les paramètres des onglets Général et Style sont spécifiques à cet élément.
| Paramètres de l’onglet Général | |
| 1. CONTENU |
|
| 2. ATTRIBUTES | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| 3. VISIBILITY | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| 4. ANIMATION | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| Paramètres de l’onglet de style | |
| 1. GLOBAL | Vous pouvez lire sur le paramètre GLOBAL ici. |
| 2. ESPACEMENT | Vous pouvez lire sur le paramètre ESPACEMENT ici. |
| 3. TYPOGRAPHIE | Vous pouvez lire sur le paramètre TYPOGRAPHIE ici. |
| 4. ARRIÈRE PLAN | Vous pouvez lire sur le paramètre ARRIÈRE PLAN ici. |
| 5. BORDURE | Vous pouvez lire sur le paramètre BORDURE ici. |
| 6. AFFICHER | Vous pouvez lire sur le paramètre AFFICHER ici. |
| 7. CSS PERSONNALISÉ | Vous pouvez lire sur le paramètre CSS PERSONNALISÉ ici. |
Configuration des lignes
Une ligne contient une ou plusieurs colonnes. Il est possible de contrôler le nombre de colonnes consécutives via l’onglet Général.
Sélectionnez une ligne pour voir ses paramètres.
Les paramètres des onglets Général et Style sont spécifiques à cet élément.
| Paramètres de l’onglet Général | |
| 1. CONTENU |
|
| 2. ACTION | Vous pouvez en savoir plus sur les paramètres Action ici. |
| 3. ATTRIBUTES | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| 4. VISIBILITY | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| 5. ANIMATION | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| Paramètres de l’onglet de style | |
| 1. GLOBAL | Vous pouvez lire sur le paramètre GLOBAL ici. |
| 2. ESPACEMENT | Vous pouvez lire sur le paramètre ESPACEMENT ici. |
| 3. TYPOGRAPHIE | Vous pouvez lire sur le paramètre TYPOGRAPHIE ici. |
| 4. ARRIÈRE PLAN | Vous pouvez lire sur le paramètre ARRIÈRE PLAN ici. |
| 5. BORDURE | Vous pouvez lire sur le paramètre BORDURE ici. |
| 6. AFFICHER | Vous pouvez lire sur le paramètre AFFICHER ici. |
| 7. CSS PERSONNALISÉ | Vous pouvez lire sur le paramètre CSS PERSONNALISÉ ici. |
Configuration colonne
Lors de l’ajout de colonnes à votre mise en page, elles seront automatiquement contenues dans une ligne. Tous les éléments (à l’exception des éléments de mise en page) seront imbriqués dans une colonne.
Sélectionnez une colonne pour voir ses paramètres.
Les paramètres des onglets Général et Style sont spécifiques à cet élément.
| Paramètres de l’onglet Général | |
| 2. ACTION | Vous pouvez en savoir plus sur les paramètres Action ici. |
| 3. ATTRIBUTES | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| 4. VISIBILITY | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| 5. ANIMATION | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici.. |
| Paramètres de l’onglet de style | |
| 1. GLOBAL | Vous pouvez lire sur le paramètre GLOBAL ici. |
| 2. ESPACEMENT | Vous pouvez lire sur le paramètre ESPACEMENT ici. |
| 3. TYPOGRAPHIE | Vous pouvez lire sur le paramètre TYPOGRAPHIE ici. |
| 4. ARRIÈRE PLAN | Vous pouvez lire sur le paramètre ARRIÈRE PLAN ici. |
| 5. BORDURE | Vous pouvez lire sur le paramètre BORDURE ici. |
| 6. AFFICHER | Vous pouvez lire sur le paramètre AFFICHER ici. |
| 7. CSS PERSONNALISÉ | Vous pouvez lire sur le paramètre CSS PERSONNALISÉ ici. |
En ce qui concerne la mise en page de votre page, vous pouvez en savoir plus ici sur la façon d‘ajuster le guide de mise en page. Cela peut vous aider beaucoup dans la progression du magasin de construction.
Un cas courant: restructurer la disposition sur l’appareil mobile
Dans l’option Tous les appareils, voici la disposition que vous modifiez:
Et lorsque vous passez à l’appareil mobile, la disposition s’affiche comme l’image ci-dessous:
La raison de cet affichage est que lorsque vous passez à la vue de l’appareil mobile, la disposition s’affichera dans l’ordre de la gauche vers la droite
Dans certains cas, vous voulez l’image au-dessus du titre et du paragraphe, voici la façon de faire:
- Dans l’onglet Style, faites défiler jusqu’au paramètre AFFICHER et choisissez l’option Flex.
- Direction: Réserve de Colonne
- Emballer: Non
- Aligner les éléments: Étendue
Ensuite, l’image sera au-dessus du titre et le paragraphe comme l’image ci-dessous
Cliquez sur le bouton Publier et accédez à la vue en direct pour voir le résultat sur l’appareil mobile
