Paramètres de style de l'élément

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.

PageFly Element style settings

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.

PageFly Element style settings 1

Vous pouvez ajouter d’autres polices en ouvrant le Gestionnaire de Polices.

Element style settings 2

Avec chaque police, vous pouvez configurer les paramètres suivants:

  • Taille de police
  • Alignement du texte
  • Style de texte

Element style settings 4

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

Element style settings 5

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:

  1. Télécharger d’un ordinateur
  2. Importer depuis Internet
  3. 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:

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:

pagefly style settings

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

pagefly styling tab 7

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.

pagefly styling tab 8

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.

pagefly styling tab 9

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.

pagefly styling tab 10

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.

pagefly styling tab 11

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.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French and Portuguese.Please check the flags on the page header.

I got it!
Languages