Comment recréer les aperçus du pack de mise en page d'ET avec des effets de survol Fan-Out dans Divi

L'une des fonctionnalités intéressantes de la nouvelle conception du site Web d'elegantthemes.com est la prévisualisation du pack de mise en page prédéfinie sur la page du produit Divi. Ce qui rend cette conception unique, c'est la façon dont chaque pack de mise en page est présenté avec trois images distinctes qui se déploient en survol.

Aujourd'hui, nous allons vous montrer comment recréer la conception de nos aperçus de pack de mise en page avec ce même effet de survol impressionnant en éventail dans Divi. Parce que la conception est un peu plus avancée, nous utiliserons du CSS personnalisé en combinaison avec les options de conception intégrées de Divi. Mais ne vous inquiétez pas, la construction ne prendra pas longtemps et le résultat en vaut vraiment la peine.

Commençons.

Aperçu

Voici un aperçu des aperçus du pack de mise en page avec un effet de survol en éventail. Notez que la rangée du bas a un effet de survol secondaire qui fait pivoter les images séparément au survol.

La disposition à trois colonnes sur le bureau s'ajustera à une colonne sur la tablette et le téléphone.

Téléchargez GRATUITEMENT la mise en page des effets de survol Fan-Out de l'aperçu du pack de mise en page

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Abonnez-vous à notre chaîne Youtube

Ce dont vous avez besoin pour commencer

Pour commencer, vous aurez besoin de la configuration suivante :

1. Le thème Divi installé et actif
2. Une nouvelle page créée pour construire à partir de zéro sur le constructeur (visuel) front-end de Divi.
3. Trois images à utiliser pour le contenu fictif. Les images doivent mesurer environ 250 pixels sur 375 pixels pour de meilleurs résultats. Puisqu'il s'agit d'aperçus de pages Web, vous pouvez créer vos propres captures d'écran de n'importe quelle conception de page, puis recadrer/redimensionner chaque image en conséquence.

Après cela, vous aurez une toile vierge pour commencer à créer des onglets de survol dans Divi.

Recréer les aperçus du pack de mise en page d'ET avec des effets de survol Fan-Out dans Divi

Construire la section et la rangée

Créez une nouvelle section régulière avec une ligne à trois colonnes.

Avant d'ajouter des modules, ouvrez les paramètres de ligne et mettez à jour la taille et l'espacement comme suit :

• Largeur de gouttière : 2
• Largeur: 90%
• Largeur maximale : 1120 pixels (ordinateur de bureau), 400 pixels (tablette)

Ajoutez ensuite un peu de rembourrage à la ligne sur tablette pour plus d'espacement sur mobile.

• Remplissage de la colonne 1 : 20 % en bas
• Remplissage de la colonne 2 : 20 % en bas
• Remplissage de la colonne 3 : 20 % en bas

Ajout de l'image 1

Nous sommes maintenant prêts à ajouter la première des trois images qui composeront notre conception d'aperçu du pack de mise en page. Allez-y et ajoutez un module d'image à la colonne 1.

Ensuite, téléchargez l'image dans le module d'image (elle doit mesurer environ 250 pixels sur 375 pixels).

Mettez ensuite à jour les paramètres de conception comme suit :

• Alignement de l'image : centre
• Largeur : 220px
• Débordement vertical : masqué
• Indice Z : 4

Puisque nous devons cibler le conteneur de l'image (pas l'image elle-même), nous devons ajouter une hauteur, une ombre de boîte et un rayon de bordure personnalisés à l'aide de CSS personnalisé. Ajoutez le CSS suivant à l'élément principal :

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Cela permettra à l'image de s'ajuster avec le avec du conteneur d'image lorsque nous ajouterons l'effet de survol plus tard. Comme vous pouvez le voir maintenant, l'image a été légèrement coupée en bas car nous avons une hauteur personnalisée de 240px et le débordement défini sur « masqué ».

Ajout de l'image 2

Pour créer la deuxième image, ajoutez un nouveau module d'image sous le premier module d'image dans la colonne 1. Ensuite, téléchargez une nouvelle image (250X350) dans le module.

Ensuite, nous devons positionner l'image derrière et légèrement à gauche de l'image 1. Pour ce faire, nous devrons ajouter une largeur et une hauteur personnalisées avec le débordement vertical masqué (un peu comme nous l'avons fait avec l'image 1). La principale différence ici est que nous devons donner à l'image une position absolue pour qu'elle s'affiche en haut à gauche de la colonne derrière l'image 1.

Pour ce faire, mettez à jour les éléments suivants :

• Largeur : 180px
• Débordement vertical : masqué

Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Ajout de l'image 3

Nous sommes maintenant prêts à ajouter la troisième image pour terminer l'aperçu du pack de mise en page. À ce stade, il est logique d'utiliser le mode d'affichage filaire car nous avons des chevauchements qui rendent l'utilisation du constructeur visuel plus difficile. Déployez le mode filaire et dupliquez l'image 2.

Nous avons dupliqué l'image car nous voulons conserver la plupart des paramètres que nous avons utilisés pour l'image 2. La seule différence (à part une nouvelle image) est que nous devons positionner l'image à droite au lieu de la gauche.

Ouvrez l'image dupliquée (image 3) et mettez à jour le module image avec une nouvelle image (250×375).

Mettez ensuite à jour le CSS personnalisé en remplaçant la propriété de position left par une propriété de position right . Aucune autre modification du CSS n'est nécessaire.

Si vous préférez, vous pouvez copier et coller le CSS suivant dans l'élément principal pour remplacer le CSS actuel.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Jusqu'ici, tout va bien

Voici le résultat final à ce jour.

Le design est en fait très beau tel quel, mais rehaussons-le d'un cran avec un effet de survol en éventail.

Ajout du CSS de l'effet de survol Fan-Out

Normalement, si nous avions affaire à une seule image, nous pourrions facilement ajouter des effets de survol à l'aide des options Divi intégrées. Mais cet effet de survol en éventail nécessite que nous activions l'état de survol de plusieurs éléments enfants (images) à la fois lors du survol de la colonne parent. Lorsque vous survolez la colonne, nous souhaitons que les éléments suivants effectuent les ajustements suivants sur les images.

1. Ajoutez une durée de transition à chaque image pour une transition en douceur au survol.
2. Ajustez l'image 1 pour avoir une largeur de 180px et une hauteur de 240px. Le conteneur de l'image deviendra plus haut et plus étroit pour afficher une plus grande partie de l'image.
3. Ajustez les images 2 et 3 pour avoir une largeur de 160px et une hauteur de 220px. Cela entraînera également des images plus hautes et plus étroites pour montrer plus de l'image.
4. Ajustez l'image 2 pour qu'elle pivote de 5 degrés dans le sens inverse des aiguilles d'une montre et déplacez-la légèrement vers la gauche. Nous pouvons le faire en ajoutant une valeur de -5 degrés à la propriété transform:rotate et en ajustant la valeur de la propriété de position left à 0.
5. Ajustez l'image 3 pour qu'elle pivote de 5 degrés dans le sens des aiguilles d'une montre et déplacez-la légèrement vers la droite. Nous pouvons le faire en ajoutant une valeur de 5 degrés à la propriété transform:rotate et en ajustant la valeur de la propriété right position à 0.

Pour ajouter le CSS personnalisé nécessaire à ces effets de survol, nous devons ajouter une classe CSS personnalisée à la ligne contenant les images. Cela nous permettra d'appliquer le CSS personnalisé uniquement aux images d'une ligne particulière.

Ouvrez les paramètres de ligne et ajoutez la classe CSS suivante.

• Classe CSS : images en éventail

Pour ajouter le CSS personnalisé à la page, ouvrez les paramètres de la page et ajoutez le CSS personnalisé suivant sous l'onglet Avancé.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

J'ai ajouté un commentaire au-dessus de chaque extrait de css pour vous rappeler ce que chacun fait.

Une fois que vous avez terminé. Découvrez le résultat final.

Résultat final

Effet de survol en option : faire pivoter les images 1 et 2 séparément au survol

Pour ajouter un autre niveau d'engagement aux images d'aperçu du pack de mise en page, nous pouvons faire en sorte que la rotation de l'image 1 et de l'image 2 se produise séparément de l'effet de survol initial. Cela permettra à l'utilisateur d'interagir avec les images d'une manière unique. Vous pouvez même ajouter des liens séparés ou des aperçus lightbox à ces images si vous le souhaitez.

Voici comment procéder.

Retirer les propriétés de transformation des paramètres de page CSS personnalisé

Tout d'abord, vous devez retirer les deux lignes de CSS personnalisées qui font pivoter l'image lorsque vous survolez la colonne. Ouvrez le CSS personnalisé des paramètres de la page et retirez les éléments suivants :

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Ajout de propriétés de transformation au survol pour l'image 2

Ensuite, ouvrez les paramètres du module d'image pour l'image 2 et utilisez les options de transformation intégrées de Divi pour ajouter la même valeur de rotation de transformation que nous avons supprimée précédemment pour l'état de survol.

• Transformation Rotation Axe Z (survol): -5deg
• Transformer l'axe X de translation (survol): -20px

Ajout de propriétés de transformation au survol pour l'image 3

Mettez ensuite à jour les paramètres du module d'image pour l'image 3 pour ajouter la propriété de rotation de transformation.

• Transformation Rotation Axe Z (survol): 5deg
• Transformer l'axe X de translation (survol): 20px

Découvrez maintenant le résultat final.

Résultat final

Ajouter des liens aux images

Si vous souhaitez créer des liens de redirection pour présenter un pack de mise en page ou une conception de page particulier sur une page distincte, il serait préférable d'ajouter la même URL de lien aux trois images du pack. Pour ce faire, ouvrez chacun des modules d'image et ajoutez l'URL du lien.

Ajout de nouveaux aperçus de pack de mise en page aux autres colonnes

Pour terminer la conception, nous pouvons copier les trois images de la colonne 1 et les coller dans les colonnes 2 et 3.

Après cela, tout ce que vous avez à faire est de mettre à jour chacune des images des colonnes 2 et 3 avec de nouvelles.

C'est ça!

Conception finale

Voici la conception finale. La ligne du haut montre l'effet de survol en éventail lors du survol de la colonne. La deuxième ligne montre l'effet de survol secondaire en éventail ajouté aux images 2 et 3 séparément.

La disposition à trois colonnes sur le bureau s'ajustera à une colonne sur la tablette et le téléphone.

Dernières pensées

L'effet de survol en éventail est un élément de conception magnifique et attrayant que vous pouvez utiliser pour présenter des mises en page sur votre propre site Web. La combinaison de CSS personnalisés et de paramètres Divi intégrés que nous avons abordés dans ce didacticiel fonctionnera comme par magie. Et cette configuration servira de point de départ idéal pour explorer davantage de conception à l'aide du constructeur Divi. Espérons que cela vous donne de l'inspiration pour faire passer votre portefeuille au niveau supérieur.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!