Elementor

Elementor: Comment changer l’image de fond, vidéo de fond, dégradé de fond, animation de fond

5 views 29 novembre 2019 amorisseau 0

Comment changer l’image de fond

  1. Cliquez sur la poignée de paramètres de section pour entrer dans les paramètres de section.
  2. Choisissez  Style > Arrière-plan > Type d’arrière-plan > Classique
  3. Sous Image, cliquez sur le signe + et choisissez votre image.

 


Comment réaliser un fond dégradé

Suivez ces étapes pour créer visuellement un arrière-plan dégradé, sans recourir à CSS.

Ajouter une section

  1. Cliquez sur Ajouter une section
  2. Glisser dans un widget
  3. Cliquez sur la poignée de paramètres de section pour entrer les paramètres de section.
  4. Aller à Style > Fond
  5. Sous Type d’arrière-plan, cliquez sur l’ icône pour entrer les paramètres de dégradé.

Paramètres de fond dégradé

  1. Couleur : définit le premier dégradé de couleur
  2. Emplacement : définissez l’emplacement de la première couleur. Cela affectera la propagation
  3. Deuxième couleur : définit la deuxième couleur du dégradé
  4. Emplacement : définissez l’emplacement de la deuxième couleur. Cela affectera la propagation
  5. Type : Choisissez entre un dégradé linéaire ou radial
  6. Angle : Définit l’angle du dégradé

Options vidéo de fond de section

Vous pouvez définir une vidéo comme arrière-plan d’une section , ce qui vous permet de créer des « en-têtes de héros » intéressants et d’autres zones captivantes sur votre page. Les options de vidéo d’arrière-plan sont disponibles dans l’onglet Style de la section.

Style

Contexte

  1. Type d’arrière-plan : Cliquez sur l’icône de la vidéo
  2. Lien vidéo : entrez un lien YouTube, Vimeo ou .mp4 vers la vidéo.
  3. Heure de début : spécifiez l’heure de début en secondes
  4. Heure de fin : spécifiez l’heure de fin en secondes
  5. Lire une fois : réglez sur Oui pour ne lire qu’une seule fois la vidéo d’arrière-plan, sans répétition.
  6. Lire sur mobile : réglez sur NON, afin d’optimiser la rapidité d’affichage sur mobile.
  7. Rappel d’arrière-plan: Télécharger une image de couverture, pour remplacer la vidéo de fond sur les appareils mobiles et tablettes, sous forme de vidéos de fond sont désactivées sur les appareils mobiles pour éviter les restrictions de navigateur et la vidange de la bande passante.

Conseil : Utilisez l’ option Superposition d’arrière-plan pour assombrir votre vidéo ou ajouter votre incrustation de couleurs personnelle.

Remarque : Youtube a changé leur API en septembre 2018 et n’autorise plus la possibilité de désactiver les vidéos associées. Le paramètre « rel = 0 » n’est plus un paramètre de travail. De plus, les vidéos d’arrière-plan montrent maintenant brièvement le titre de la vidéo. Elementor ne peut pas désactiver cela car il est contrôlé uniquement par Youtube.

Remarque : seuls les comptes premium Vimeo peuvent supprimer les contrôles et les titres de la vidéo d’arrière-plan Vimeo.

 


Diaporama de fond

Vous pouvez définir un diaporama d’images comme arrière-plan d’une section , d’une colonne ou d’une colonne intérieure , ce qui vous permet de créer des structures et des dispositions plus complexes tout en préservant un effet de transition.Les options de diaporama en arrière-plan sont disponibles dans l’ onglet Style de la section ou de la colonne.

Style

Contexte

  1. Type d’arrière-plan : Sélectionnez l’icône du diaporama en arrière-plan.
  2. Ajouter des images : Cliquez sur le bouton Ajouter des images pour sélectionner les images à afficher. Une fois sélectionné, cliquez sur Créer un nouveau Galerie bouton, puis cliquez sur la galerie Insérer bouton
  3. Boucle infinie : réglez sur OUI pour que les images continuent à tourner, infiniment
  4. Durée de la diapositive : définissez la durée d’ affichage de la diapositive, en millisecondes.
  5. Transition de diapositive : choisissez parmi Fondu , Glisser vers la droite , Glisser vers la gauche , Glisser vers le bas ou Glisser vers le haut.
  6. Durée de la transition : Définissez la vitesse à laquelle les diapositives passent d’une diapositive à l’autre, en millisecondes.
  7. Effet Ken Burns : faites-le glisser jusqu’à OUI pour activer cet effet de zoom très répandu sur l’image d’arrière-plan.
  8. Direction du zoom : Si l’effet Ken Burns est défini sur Oui, cette option supplémentaire apparaîtra. Définissez la direction du zoom sur In ou Out .

Informations utiles?


Aller au contenu principal
Aller à la barre d’outils