Avant d’entrer dans des étapes spécifiques, vous pouvez consulter cette vidéo pour avoir une meilleure démonstration sur la façon d’ajouter une section avec image et texte.
<iframe src=”https://www.youtube.com/embed/DDLKwCau7IA” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
Dans cet article, vous apprendrez à créer une section avec des images et du texte à partir de zéro et à contrôler sa mise en page.
<h2>Créer une section à 1 colonne</h2>
<h3>Étape 1: créer la disposition</h3>
Tout d’abord, sélectionnez <strong>Ajouter un élément</strong> dans le menu de la barre latérale gauche> <strong>Élément> Disposition</strong>. Choisissez une disposition de section complète et faites-la glisser sur la page.
<img class=”alignnone size-full wp-image-5516″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-create-0-1.png” alt=”create a section with image and text” width=”2880″ height=”1636″ />
Lorsque vous sélectionnez l’élément de section, accédez à l’inspecteur d’éléments à droite. Choisissez l’onglet <strong>Style> Arrière-plan> Image</strong>> Insérez l’arrière-plan de l’image pour la section ici.
Pour faire de la section une bannière, vous pouvez ajuster le <strong>remplissage</strong> et la <strong>marge</strong> dans le paramètre <strong>ESPACEMENT</strong> et régler la <strong>position d’arrière-plan</strong> ou la <strong>taille d’arrière-plan</strong> ou tout ce qui concerne l'<strong>image d’arrière-plan</strong> dans <strong>Plus de paramètres</strong>.
Avec cet exemple, la section est définie pour le <strong>remplissage</strong> en haut: 40 px; à droite: 500 px; en bas: 500 px et à gauche: 0 px. La <strong>position d’arrière-plan</strong> est Centre; La <strong>taille de l’arrière-plan</strong> est la couverture selon l’image ci-dessous.
<img class=”alignnone size-full wp-image-3445″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-1-2-create-a-section.png” alt=”” width=”1279″ height=”595″ />
<strong>Important</strong>: Lorsqu’une valeur fixe est définie dans la vue «Tous», elle sera appliquée à toutes les autres vues (tablette et mobile) et rendra le design plus réactif par défaut. Faites défiler vers le bas pour savoir comment résoudre ce problème.
Accédez à <strong>Ajouter un élément> Élément> En-tête</strong> et faites glisser certaines des variations dans la section. Stylisez-le comme vous le souhaitez et répétez avec l’élément <strong>Button</strong>.
Et voilà! C’est la conception sur la vue en direct d’une section à 1 colonne avec un en-tête et un bouton.
<img class=”alignnone size-full wp-image-3448″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-create-a-section-1-2.jpg” alt=”” width=”1264″ height=”631″ />
<h3>Étape 2: Optimiser la conception mobile</h3>
Vous pouvez vérifier la conception sur mobile en choisissant <strong>Mobile</strong> dans le <strong>sélecteur d’appareil</strong> sur la <strong>barre supérieure.</strong>
Parce que la section a à l’origine un remplissage supérieur: 40px; remplissage droit: 50px; remplissage inférieur: 500px et remplissage gauche: 0px, sur Mobile, le <strong>titre</strong> et le <strong>bouton</strong> se sont allongés et ne semblent pas bons.
<img class=”alignnone size-full wp-image-3450″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-1-3-create-a-section.png” alt=”” width=”1279″ height=”598″ />
PageFly vous permet de personnaliser le style de chaque appareil, choisissez donc la <strong>section</strong>> onglet <strong>Style</strong>> <strong>ESPACEMENT</strong>> Définir 0px sur le remplissage droit.
<img class=”alignnone size-full wp-image-3451″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-1-4-create-a-section.png” alt=”” width=”1279″ height=”602″ />Appuyez sur <strong>Enregistrer et publier</strong>.
<img class=”alignnone size-full wp-image-3454″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-creat-a-section-1-5.jpg” alt=”” width=”877″ height=”635″ />
<h2>Créer une section à 2 colonnes</h2>
<h3>Étape 1: créer la disposition</h3>
Dans l'<strong>éditeur</strong>, choisissez <strong>Ajouter un élément</strong> dans le menu de la barre latérale gauche> <strong>Élément> Disposition</strong>> choisissez la <strong>disposition 1/2 – 1/2</strong>.
<img class=”size-full wp-image-5519 alignnone” src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-create-0-2.png” alt=”” width=”2880″ height=”1636″ />Vous pouvez jouer avec l’élément disposition un peu pour comprendre ce qu’il peut faire. Passez de 2 colonnes à 3 colonnes, 4 colonnes ou même 10 colonnes dans l’onglet <strong>Général> CONTENU> Ajouter une colonne</strong>.
Revenons à la section à 2 colonnes que nous construisons. Choisissez <strong>Ajouter un élément> Élément</strong>> faites glisser un <strong>élément Image</strong> vers la colonne de droite.
<img class=”alignnone size-full wp-image-5518″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-create-1-0.png” alt=”” width=”2880″ height=”1536″ />
Ensuite, faites glisser un <strong>élément En-tête</strong> et <strong>Bouton</strong> dans la colonne de gauche et ajoutez-leur des styles dans l’onglet <strong>Style</strong>.
Pour les faire flotter au milieu de la colonne, nous devons ajouter de l’espace à la colonne. Sélectionnez la <strong>colonne</strong>> choisissez l'<strong>onglet Style> ESPACEMENT</strong>> définissez 30% sur le <strong>remplissage supérieur</strong>.
<img class=”alignnone size-full wp-image-3463″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-1-7-create-a-section.png” alt=”” width=”1279″ height=”597″ />
<h3>Étape 2: Optimiser la conception mobile</h3>
Vérifiez la conception sur mobile en choisissant <strong>Mobile</strong> dans le <strong>sélecteur d’appareil</strong> sur la <strong>barre supérieure</strong>.
<img class=”alignnone size-full wp-image-3464″ src=”https://help.pagefly.io/wp-content/uploads/2018/03/PF-create-a-section-1-10.jpg” alt=”” width=”1278″ height=”593″ />
Si vous souhaitez supprimer l’espace au-dessus du contenu, choisissez la première colonne dans la section> visitez l’onglet <strong>Style> Boîte de Styles</strong>> définissez le remplissage supérieur à 0.
Cliquez sur <strong>Enregistrer et publier</strong>, et vous êtes prêt!