Avant d’entrer dans des étapes spécifiques, vous pouvez vérifier cette vidéo pour avoir une démonstration générale sur la façon de définir la pleine largeur pour le diaporama, la vidéo, l’image et d’autres éléments
Dans cet article, vous apprendrez à créer une section qui étend toute la largeur de votre page.
3 étapes pour créer une section pleine largeur
Étape 1: ajouter la section pleine largeur
À l’intérieur de l’éditeur PageFly, choisissez Ajouter un élément> Disposition et faites glisser la section pleine largeur.
Étape 2: désactivez l’option Définir la largeur fixe
Sélectionnez la section nouvellement créée que vous venez de faire glisser dans le canevas (la piste en bas de l’écran vous montrera exactement quel élément vous avez actuellement sélectionné). Dans l’onglet Général de la section, désactivez l’option Définir la largeur fixe.
Étape 3: télécharger une bannière d’image
Dans l’onglet Style, recherchez la section ARRIÈRE PLAN.
- Téléchargez votre bannière d’image en accédant à l’onglet Style, faites défiler jusqu’au paramètre ARRIÈRE PLAN et téléchargez votre image d’arrière-plan ici comme l’image ci-dessous:
Vous pouvez télécharger l’image disponible dans le gestionnaire d’images ou la télécharger depuis Internet. Lire la suite ici pour avoir plus de détails.
- Une fois l’image téléchargée, cliquez sur le bouton Plus de paramètres.
- Modifiez la position d’arrière-plan pour qu’elle corresponde au point AF de votre image (ce paramètre sera utilisé pour définir quelle partie de votre image peut être affichée en mode réactif)
- Changez la taille de l’arrière-plan en «Couverture».
Dans l’onglet Style, recherchez la section ESPACEMENT.
- Modifiez les valeurs de remplissage supérieur et inférieur pour modifier la hauteur de la section en fonction de la hauteur de votre image.
- La petite boîte au milieu définira la même valeur pour les quatre côtés du remplissage et de la marge.
N’oubliez pas de sauvegarder et publier votre travail. C’est ça! Vous avez terminé toutes les étapes pour créer une fabuleuse section pleine largeur pour votre page de bureau / ordinateur portable. Facile, non?
Note importante:
Certains thèmes Shopify encapsulent le contenu de votre site dans une largeur fixe.
Et avec certains thèmes, même si vous avez suivi les étapes précédentes, il n’est pas encore pleine largeur comme celui-ci
Par conséquent, vous devez suivre ces étapes:
- Tout d’abord, ouvrez la fenêtre Ajouter un code personnalisé
- Copier ce code
- .main-content { max-width: 100%; padding: 0;}
OU ce code:
-
- .main-content .wrapper {
width: 100%;
max-width: 100%;
padding: 0!important;
}
- .main-content .wrapper {
et collez l’un de ces codes dans la section Éditeur de code personnalisé
- Appuyez sur Enregistrer la modification, puis publiez à nouveau votre page
- Enfin, vérifiez le résultat sur Live Page.
Dans cet exemple, nous utilisons le deuxième code pour l’échantillon de boutique qui utilise le thème de Brooklyn:
N’oubliez pas de l’enregistrer, puis de publier pour voir la vue en direct
Si vous ajoutez l’un de ces codes mais qu’il ne fonctionne toujours pas, ne vous inquiétez pas et contactez-nous via la fenêtre de chat en direct afin que nous puissions vous aider à le corriger. l’explication pour ce cas est que tous les thèmes Shopify ne peuvent pas fonctionner avec ces codes et nous devons vérifier le thème que vous utilisez, puis nous pouvons le réparer pour vous.
Optimisation mobile
Vous pouvez vérifier la conception sur mobile en choisissant l’option Mobile dans le menu supérieur.
Nous pouvons voir la valeur de remplissage inférieur précédemment attribuée de 350 pixels, l’arrière-plan de l’image s’est étiré et n’a pas l’air bien sur mobile.
PageFly permet la personnalisation de l’appareil pour l’onglet Style (c’est-à-dire que les changements dans l’onglet Style sont uniques sur chaque appareil), alors choisissez la Section> onglet Style> ESPACEMENT> définissez Remplissage-Inférieur à la valeur souhaitée (0 px dans notre cas).
Appuyez sur Enregistrer et publier et consultez la page sur votre mobile pour le résultat.
Vous pouvez consulter cette vidéo pour connaître les détails sur la façon de définir la pleine largeur pour une section sur votre page ainsi que d’autres problèmes liés au conflit de thème
