Élément de mise en page

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.

layout element

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.

pagefly layout element

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
  • Lignes: déplacer, copier, supprimer une ligne
  • Ajouter une ligne: ajoutez une ligne à cette section, le nombre de lignes dans une section est illimité
  • Définir une largeur fixe: ce paramètre est activé par défaut, il enveloppe le contenu de la section dans une largeur fixe. Vous pouvez définir la largeur fixe dans le paramètre Largeur maximale. Lorsqu’elle est désactivée, le contenu de cette section s’étendra sur toute la largeur de la section
  • Largeur maximale: par défaut, elle est de 1170 pixels, la valeur minimale est de 700 pixels et la valeur maximale est de 2000 pixels.
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
  • Colonnes: déplacer, copier, supprimer une colonne
  • Ajouter une colonne: ajoutez une colonne à cette ligne, le nombre de colonnes dans une ligne est illimité
  • Position du contenu: spécifiez la position du contenu à l’intérieur de cette ligne
  • Activer la largeur égale: toutes les colonnes de cette ligne ont une largeur égale
  • Activer la hauteur égale: toutes les colonnes de cette ligne ont une hauteur égale
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

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French and Portuguese.Please check the flags on the page header.

I got it!
Languages