Dans l’Éditeur, vous pouvez ajouter divers types d’arrière-plans et d’effets à une colonne, ainsi que modifier ses paramètres généraux et ses fonctionnalités.  

  Qu'est-ce qu'une colonne ?

Les colonnes s’intègrent aux lignes et sont les emplacements des modules. Dans une ligne, vous pouvez avoir jusqu’à 12 colonnes pour organiser votre contenu. Les colonnes vous permettent de mieux structurer et aligner les éléments du contenu sur vos pages. Apprenez-en plus sur les lignes, les colonnes et les modules dans cet article

 

Comment modifier une colonne ?

Quand vous travaillez dans l’Éditeur, pointez sur la colonne que vous voulez modifier et l’étiquette verte "Colonne" apparaîtra dans l’angle supérieur gauche de la colonne. Pointez sur l’étiquette et la liste des paramètres apparaîtra dans le menu déroulant.  

Screen_Shot_2020-08-25_at_13.52.42.png

   

Graphisme

Couleur et image d’arrière-plan

Il est possible d’ajouter divers éléments à l’arrière-plan d’une colonne.

Couleur d’arrière-plan : Ajoutez une seule couleur pour l’arrière-plan de la colonne. Vous pouvez régler le degré de transparence si vous le souhaitez.

Image d’arrière-plan : Ajoutez une image pour l’arrière-plan de votre colonne. Vous pouvez choisir d’utiliser votre image de couverture à partir des Données Générales ou d’en télécharger une nouvelle directement sur la colonne. Vous pouvez paramétrer l’image pour qu’elle se répète au sein de la colonne, sa taille et sa position pour vous assurer de trouver la meilleure méthode de diffusion de l’image auprès de vos visiteurs. 

En plus des paramètres d’images standards, vous pouvez également déterminer la façon dont l’image d’arrière-plan doit se comporter au sein de la colonne quand un visiteur fait défiler la page. Si vous activez la Position fixe, l’image ne bougera pas quand un visiteur fait défiler la page.

Attacher l’arrière-plan au remplissage : En activant cette option, la couleur ou l’image de l’arrière-plan s’étendra uniquement aussi loin que le remplissage à l’intérieur de la colonne. Si elle n’est pas activée, la couleur ou l’image de l’arrière-plan recouvrira toujours la zone totale du contenu jusqu’à l’endroit où commence la bordure. Accrocher l’arrière-plan au remplissage vous permet de créer un écart transparent entre la bordure et l’arrière-plan comme vous pouvez le voir dans l’exemple ci-dessous.

Exemple : avec attacher l’arrière-plan au remplissage activé (veuillez noter que l’écart entre l’arrière-plan et la bordure dans le remplissage de la colonne est configuré sur 40 de tous les côtés de la colonne)

2_-Styling-p1.jpg

Exemple : avec attacher l’arrière-plan au remplissage désactivé (veuillez noter que l’arrière-plan de la colonne s’étend tout du long jusqu’à la bordure)

2_-Styling-p2.jpg

 

Filtre de l’arrière-plan

Ajoutez un filtre d’arrière-plan en haut de la couleur ou de l’image de votre arrière-plan afin d’atténuer les images aux couleurs très vives ou aux contrastes importants. C’est également un bon moyen de vous assurer que n’importe quel texte que vous avez dans la colonne est facile à lire pour les visiteurs. Sachez que vous pouvez également régler le degré de transparence du filtre de votre arrière-plan.

Exemple de filtre d’arrière-plan utilisé en haut d’une image :

col4.png

Si vous êtes à l’aise avec les logiciels d’édition d’image, vous pouvez également ajouter une image d’arrière-plan comme filtre. Télécharger des couvertures transparentes créées avec un logiciel d’édition d’images permet la création de motifs de couverture multicolores ou pixelisés qui ajoutent de l’intensité et de la complexité à votre image.

Voici quelques exemples de couvertures d’images créées avec un logiciel d’édition d’images et téléchargées dans l’Éditeur comme image filtre d’arrière-plan :

2_-Styling-p4.jpg

 

Ajouter une animation

Les animations se déclenchent quand les visiteurs font défiler la page et atteignent la colonne à laquelle l’animation a été ajoutée. Vous pouvez ajouter l’une des quatre animations à une colonne:

Genre 1: estomper à gauche

column-fade-left.gif

Genre 2: estomper à droite

column-fade-right.gif

Genre 3: zoomer

column-zoom.gif

Generate 4: rebondir

column-bounce.gif

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0