PageFly fournit des options de style puissantes pour tous les éléments. Pour illustrer leur fonctionnement, nous allons voir 2 exemples avec des éléments Image et Paragraphe.
Paramètres de style
Global
Couleur contenu
Ce paramètre vous permet de choisir la couleur du contenu, qui peut être du texte ou une icône.
Note:
- Certains éléments comme «Image» n’ont pas ce paramètre.
Espacement
Les paramètres de ce groupe vous permettent de contrôler l’espacement autour et à l’intérieur de l’élément. Dans les paramètres Espacement et Marge, chacun d’eux a 4 cases vides qui vous permettent de remplir la valeur pour 4 côtés: haut – droite – bas – gauche.
Vous pouvez lire les détails à ce sujet dans l’article Modifier l’espacement.
Typographie
Vous pouvez changer la famille de polices ici.
Vous pouvez ajouter d’autres polices en ouvrant le Gestionnaire de Polices.
Avec chaque police, vous pouvez configurer les paramètres suivants:
- Taille de police
- Alignement du texte
- Style de texte
Le bouton Plus de Paramètres vous offre 4 options supplémentaires:
- Poids de la police
- Hauteur de la ligne
- L’espacement des lettres
- Transformation de texte
Remarque pour l’utilisation de polices personnalisées
Si vous souhaitez utiliser des polices personnalisées qui ne sont pas répertoriées dans les polices PageFly, vous pouvez utiliser du code personnalisé pour le faire. En lire plus ici pour plus de détails.
Arrière plan
Prenons un exemple avec l’arrière-plan de la section.
Pour la section, il y a 3 styles d’arrière-plan à choisir tels que:
- Standard
- Video
- Parallaxe
Style Standard
Si vous choisissez le style Standard pour l’arrière-plan, vous pouvez choisir sa couleur et son image.
Couleur arrière plan
Image Arrière plan
Vous avez 3 options pour télécharger une image:
- Télécharger d’un ordinateur
- Importer depuis Internet
- Sélectionnez dans Image Manager
Vous pouvez en lire plus ici pour en savoir plus sur la façon de télécharger une image et d’utiliser Image Manager.
Dans cet exemple, nous choisissons une image dans le gestionnaire d’images
Si vous souhaitez définir une section pleine largeur avec une image d’arrière-plan, vous pouvez vous référer à cet article pour plus de détails.
Une fois que vous avez sélectionné une image d’arrière-plan, le bouton Plus de paramètres vous offrira 4 choix supplémentaires pour configurer l’image d’arrière-plan:
- Position Arrière plan. Lire plus.
- Répéter Arrière plan. Lire plus.
- Taille Arrière plan. Lire plus.
- Lien Arrière plan. Lire plus.
Style Video
Vous pouvez coller l’URL de la vidéo à partir de la vidéo Youtube, Vimeo ou MP4 ici. Jetons un œil à l’exemple:
Une fois que vous avez sélectionné une vidéo d’arrière-plan, le bouton Plus de paramètres vous permet de choisir la couleur de superposition pour la vidéo d’arrière-plan:
Effet Parallaxe
Tu peux regarder cet article pour savoir comment utiliser l’effet de parallaxe pour une section.
Bordure
Vous pouvez définir le style de bordure de l’élément via Style de bordure et Couleur de bordure.
Vous pouvez voir l’illustration avec le style de bordure solide et la couleur de bordure rouge ci-dessous
Le bouton Plus de paramètres vous donne 2 autres choix pour ajuster la largeur et le rayon de la bordure. Dans l’exemple ci-dessous, la largeur de bordure est définie sur 10 px pour tous les côtés et le rayon de bordure est configuré sur 40 px pour 4 côtés.
Afficher
Gérez la disposition des éléments via les options d’affichage CSS:
- En ligne
- Bloc
- Flexible
Lire plus:
CSS Personnalisé
Toute la configuration que vous avez faite pour l’élément sera affichée dans le paramètre CSS PERSONNALISÉ selon l’image ci-dessous.
Vous pouvez modifier le code CSS et toutes les modifications seront appliquées dans votre éditeur de page.
Préréglages de style
PageFly fournit des préréglages de style prédéfinis qui vous permettent de configurer rapidement le style.
Actuellement, cette fonctionnalité n’est disponible que pour certains éléments, mais dans un proche avenir, nous mettrons à jour les préréglages de style pour tous les éléments.
Paramètres spécifiques à l’appareil
Tous les paramètres de style d’élément peuvent être configurés une fois pour tous les appareils, ainsi que spécifiquement pour des appareils individuels comme un ordinateur portable, une tablette ou un mobile. Pour modifier le style du périphérique spécifique, utilisez simplement le Sélecteur de Périphérique pour basculer le mode d’édition sur le périphérique cible et ajuster les paramètres de style pour celui-ci.
Note:
Le paramètre configuré dans «Tous les appareils» aura des effets sur tous les appareils et fonctionnera automatiquement correctement. Ce n’est que dans de rares cas que vous devrez effectuer la configuration pour des appareils spécifiques.
