Créer une section avec image et texte

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&gt; <strong>Élément&gt; 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&gt; Arrière-plan&gt; Image</strong>&gt; 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&gt; Élément&gt; 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>&gt; onglet <strong>Style</strong>&gt; <strong>ESPACEMENT</strong>&gt; 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&gt; <strong>Élément&gt; Disposition</strong>&gt; 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&gt; CONTENU&gt; Ajouter une colonne</strong>.

Revenons à la section à 2 colonnes que nous construisons. Choisissez <strong>Ajouter un élément&gt; Élément</strong>&gt; 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>&gt; choisissez l'<strong>onglet Style&gt; ESPACEMENT</strong>&gt; 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&gt; visitez l’onglet <strong>Style&gt; Boîte de Styles</strong>&gt; définissez le remplissage supérieur à 0.

Cliquez sur <strong>Enregistrer et publier</strong>, et vous êtes prêt!