skip to Main Content

Comment créer une section hero animée sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

La plupart des sites web disposent d’une section « Heros », qui n’a plus besoin de faire ses preuves. Son rôle est non seulement de se démarquer, mais également être divisé en plusieurs éléments qui renforcent l’appel à l’action qui existe. Les sections de héros à contenu divisé de structure facile à comprendre sont très populaires et fréquemment utilisées par différents types de sites Web.

Et bien que créer des sections de héros à contenu divisé pour le bureau parait simple, il ne faut pas toujours se fier aux apparences. C’est là que ce tutoriel sera utile. Nous allons recréer une section de héros dédoublée sur mobile hautement interactive qui sera non seulement belle sur mobile, mais quelle que soit la taille de l’écran. Nous combinons également d’excellentes animations pour faire correspondre le style de design 2019 à la perfection. Nous espérons que ce tutoriel vous incitera à créer vos propres sections de héros mobiles à contenu fractionné.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat que vous pourrez obtenir à l’issue de ce tutoriel.

Conception de l’interface

Ajouter une nouvelle section

Espacement

Commencez par créer une nouvelle page ou en ouvrant une existante. Ajoutez-y une nouvelle section régulière, accédez aux paramètres d’espacement et supprimez tous les marges de remplissage supérieure et inférieure par défaut.

  • Meilleur rembourrage: 0px
  • Rembourrage En Bas: 0px

Ajouter une nouvelle ligne

Structure de la colonne

Nous allons continuer en ajoutant une nouvelle ligne et en utilisant la structure de colonne suivante:

Couleur de fond

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et ajoutez une couleur de fond entièrement noire.

  • Couleur de fond: #000000

Colonne 1 Couleur de fond

Ajoutez également une couleur de fond noire à la première colonne.

  • Colonne 1 Couleur de fond: #000000

Colonne 2 Couleur de fond

Même chose pour la deuxième colonne.

  • Colonne 2 Couleur de fond: #000000

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et laissez la ligne et ses colonnes occuper toute la largeur de l’écran.

  • Rendre cette ligne pleine largeur: Oui
  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Égaliser les hauteurs de colonne: Oui

Espacement

Nous supprimons également tous les marges supérieures et inférieures par défaut de la ligne.

  • Rembourage en haut : 0px
  • Rembourrage En Bas: 0px
  • Rembourrage Droite: 1vw

Afficher

Enfin, nous veillerons à ce que les deux colonnes apparaissent côte à côte sur des écrans de taille inférieure. Pour ce faire, nous devrons ajouter une seule ligne de code CSS à l’onglet Avancé de la ligne.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

display: flex;

Ajouter un module d’image à la colonne 1

Laisser la zone d’image vide

Nous allons maintenant tous les modules dont nous avons besoin! Il faut commencer avec le module image dans la première colonne. Au lieu de télécharger une image dans la zone d’image, nous allons télécharger l’image dans les paramètres d’arrière-plan lors des prochaines étapes, il faut donc supprimer l’image ajoutée par défaut. Ainsi, nous pourrons jouer avec la façon dont l’image est positionnée et combien d’espace elle occupe dans notre rangée.

Ajouter une couleur de fond

Accédez aux paramètres d’arrière-plan du module Image et ajoutez une couleur d’arrière-plan. Dans l’étape suivante, nous allons combiner cette couleur d’arrière-plan et une image d’arrière-plan en utilisant un effet de fusion pour assombrir l’image.

  • Couleur de fond: #686868

Ajouter une image de fond

Ajoutez une image d’arrière-plan de votre choix et modifiez les paramètres d’arrière-plan en conséquence:

  • Taille de l’image de fond: Couverture
  • Position de l’image de fond: centre
  • Répéter l’image d’arrière-plan: Aucune répétition
  • Mélange d’image de fond: multiplier

Dimensionnement

Nous avons utilisé deux colonnes de taille égale pour la ligne sur laquelle nous travaillons, mais le résultat n’est pas le même. Nous allons modifier manuellement la taille de chaque module ajouté pour donner l’impression que nous utilisons une structure de colonnes différente. La raison pour laquelle nous faisons cela (au lieu de simplement choisir une autre structure de colonnes), c’est de rendre tout responsive

 sur les écrans de plus petite taille. Accédez aux paramètres de dimensionnement du module image et modifiez la largeur.

  • Largeur: 88%
  • Alignement du module: gauche

Espacement

Nous devons maintenant décider de la taille de notre image dans les paramètres d’espacement. Nous utilisons également une unité d’affichage pour ces valeurs afin de nous assurer que notre conception reste totalement responsive, quelle que soit la taille de l’écran.

  • Rembourrage supérieur: 26.3vw (bureau), 48vw (tablette), 72vw (téléphone)
  • Rembourrage en bas: 26.3vw (bureau), 48vw (tablette), 72vw (téléphone)

Animation

Enfin, nous ajouterons une animation de diapositive au module Image. Une fois que vous appliquez l’animation, vous remarquerez que l’image ne commencera à apparaître qu’à partir du moment où elle entrera dans la première colonne. La couleur d’arrière-plan de la deuxième colonne reste en haut du module d’image pendant son glissement vers la gauche.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Animation Style: Slide
  • Animation Repeat: Once
  • Direction d’animation: gauche
  • Animation Duration: 1450ms
  • Animation Intensity: 60%
  • Animation Opacité de départ: 100%

Ajouter un module de boutons à la colonne 1

Ajouter une copie

Le prochain module dont nous avons besoin dans la colonne 1 est un module de boutons. Entrez une copie de votre choix.

Paramètres du bouton

Ensuite, accédez à l’onglet Conception et modifiez les paramètres du bouton.

  • Utiliser des styles personnalisés pour le bouton: Oui
  • Taille du texte du bouton: 1.5vw (bureau), 2.5vw (tablette), 4vw (téléphone)
  • Couleur du texte du bouton: #ffffff
  • Couleur de fond du bouton: #e02b20
  • Largeur de la bordure du bouton: 0px
  • Rayon de la bordure du bouton: 1px
  • Button Font: Poppins
  • Poids de police: Gras

Espacement

Modifiez également les valeurs d’espacement.

  • Marge supérieure: -3.3vw (bureau), -6vw (tablette), -9.1vw (téléphone)
  • Rembourrage Gauche: 8vw
  • Rembourrage Droite: 8vw

Boîte ombre

Et ajoutez une ombre subtile pour créer de la profondeur sur la page.

  • Box Shadow Blur Force: 20px
  • Couleur de l’ombre: rgba(0,0,0,0.3)

Ajouter le module de texte n ° 1 à la colonne 2

Ajouter du contenu H1

Sur la deuxième colonne! Le premier module dont nous aurons besoin est un module de texte. Ajoutez du contenu H1 de votre choix.

Paramètres texte H1

Ensuite, accédez à l’onglet Conception et modifiez les paramètres de texte H1.

  • Police: Poppins
  • Couleur du texte de titre: #ffffff
  • Titre du texte Taille: 4vw (bureau), 5vw (tablette), 6vw (téléphone)

Espacement

Changer les valeurs d’espacement également.

  • Marge supérieure: 12vw
  • Marge gauche: -20vw
  • Marge droite: 17vw (bureau), 15vw (tablette), 1vw (téléphone)

Animation

Et ajoutez une animation subtile.

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation Direction: Down
  • Animation Duration: 1450ms
  • Animation Intensity: 10%
  • Animation Opacité de départ: 100%

Ajouter un module de division à la colonne 2

Visibilité

Le module suivant dont nous avons besoin dans la deuxième colonne est un module de division. Assurez-vous que l’option « Afficher le séparateur » soit activée.

  • Afficher le diviseur: Oui

Couleur

Ensuite, accédez à l’onglet Conception et modifiez la couleur du séparateur.

  • Couleur: #e02b20

Animation

Ajoutez une animation au module de division ensuite.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation Direction: Right
  • Animation Duration: 1450ms
  • Animation Intensity: 83%
  • Animation Opacité de départ: 100%

Ajouter le module de texte n ° 2 à la colonne 2

Ajouter du contenu

Passons au prochain et dernier module dont nous avons besoin dans la deuxième colonne! Ajoutez une description de votre choix.

Paramètres du texte

Ensuite, accédez aux paramètres de texte dans l’onglet Conception et apportez certaines modifications en conséquence:

  • Text Font: Poppins
  • Poids de la police du texte: Léger
  • Couleur du texte: #919191
  • Taille du texte: 0.9vw (bureau), 1.8vw (tablette), 2.2vw (téléphone)
  • Espacement des lettres du texte: 0.1vw
  • Hauteur de la ligne de texte: 2.2em

Espacement

Modifiez également les valeurs d’espacement.

  • Marge supérieure: 9vw (bureau), 19vw (tablette), 23vw (téléphone)
  • Marge inférieure: 12vw (bureau), 19vw (tablette), 23vw (téléphone)
  • Marge gauche: -3vw
  • Marge droite: 20vw (bureau), 6vw (tablette), 3vw (téléphone)

Animation

Et en fin, ajoutez une animation de fondu au module et vous avez terminé!

  • Animation Style: Fade
  • Animation Repeat: Once
  • Animation Duration: 1400ms
  • Délai d’animation: 1000ms
  • Animation Opacité de départ: 0%

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment créer de superbes sections de héros à contenu divisé avec Divi. Les sections de héros à contenu fractionné sont très populaires et fréquemment utilisées sur le Web, mais il est également important de veiller à ce qu’elles soient très responsives. Si vous avez des questions ou des suggestions, veillez à laisser un commentaire et n’hésitez pas à le partager sur les réseaux sociaux !

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez4
Tweetez
Enregistrer