Dans cet article, vous apprendrez comment les pages PageFly sont conçues pour être réactives par défaut. Cependant, vous devez parfois vous souvenir de ces conseils pour assurer une expérience fluide à vos visiteurs.
Astuce 1: Aucune taille d’image fixe, JAMAIS
Par défaut, toutes les mises en page sont réactives, ne définissez donc jamais une taille d’image fixe (y compris la largeur et la hauteur) pour aucun élément.
Vous pouvez vérifier plus de détails dans le didacticiel vidéo ci-dessous.
La valeur que vous voyez dans l’onglet Général> section CONTENU> Taille de l’image sont des valeurs par défaut. Ils sont sensibles aux différents modes de l’appareil, alors laissez-les de cette façon.
Ici, vous pouvez voir sur chaque appareil: ordinateur portable, tablette et mobile
Important: Si vous souhaitez définir des dimensions horizontales et verticales pour un élément, utilisez la marge et le remplissage en pourcentage.
Astuce 2: Marge et remplissage en pourcentage, s’il vous plaît
Définition des dimensions avec remplissage
Habituellement, lorsque vous définissez un arrière-plan d’image pour une section, il apparaîtra d’abord comme ceci.
Basculez vers l’onglet Style> section ESPACEMENT> Insérer des valeurs pour le remplissage supérieur et le remplissage inférieur dans l’unité «%». Dans ce cas, définissez 30% pour le rembourrage supérieur et le rembourrage inférieur.
Vous pouvez définir la position et la taille d’arrière-plan de l’image en cliquant sur le Bouton Plus de paramètres. Dans ce cas, définissez la position centrale et la couverture pour la taille de l’arrière-plan.
Ensuite, vous pouvez vérifier la conception réactive en sélectionnant Sélecteur de périphérique> Tablette ou Mobile.
Positionner les éléments horizontalement
Pour positionner un élément horizontalement, utilisez l’unité «%» afin qu’il puisse répondre à différentes tailles d’écran.
Dans cet exemple, nous voulons rapprocher le paragraphe du centre, nous ajoutons donc des valeurs au remplissage à droite et au remplissage à gauche de la section qui contient le paragraphe.
Choisissez la section> onglet Style> section Styles de boîte> ajoutez «10%» au remplissage droit et gauche.
Cette méthode est pratique lorsque vous souhaitez définir un espacement inégal sur 2 côtés de l’élément.
Pour vérifier la conception sur mobile, accédez à la barre supérieure> accédez à Sélecteur d’appareil> choisissez Mobile.
Sélectionnez la section> onglet Style> Styles de boîte. Vous pouvez voir qu’il a une valeur de «10%» pour le remplissage gauche et le remplissage droit. Ces valeurs sont ajoutées lorsque nous les définissons dans la vue Tous.
Si vous n’aimez pas ces remplissages sur mobile, redéfinissez les valeurs de remplissage sur “0px”.
Astuce 3: style personnalisé pour chaque appareil
Vous pouvez personnaliser la conception d’un élément pour un appareil spécifique (ordinateur portable, tablette ou mobile) en configurant l’onglet Style.
Dans cet exemple, dans la vue Tout, la section a un remplissage supérieur et inférieur de «30%».
Nous pouvons aller à Sélecteur d’appareil> basculer vers Tablette (ou Mobile)> onglet Style pour modifier le remplissage séparément pour tablette ou mobile.
Masquage d’éléments sur des appareils spécifiques.
Avec la conception personnalisée de l’appareil PageFly, vous pouvez aller jusqu’à masquer des éléments sur des appareils spécifiques pour créer une variété de conceptions sur une seule page.
Une fois l’élément sélectionné, allez dans l’onglet Général> section VISIBILITÉ.
Par exemple, nous voulons que la section lion apparaisse uniquement sur mobile comme bannière et soit masquée sur d’autres appareils.
Nous sélectionnons donc la section lion> l’onglet Général> activer Masquer pour le bureau, l’ordinateur portable et la tablette.
Inversement, nous sélectionnons la section aigle> allez dans l’onglet Général> activez Masquer pour Mobile.
La section aigle apparaîtra sur tous les appareils et est masquée sur mobile.
Si vous pensez que vous avez besoin d’une vidéo pour expliquer les détails et clairement, vous pouvez voir la vidéo ci-dessous sur la façon de créer des pages réactives pour mobile
Previous article
