De nombreux sites Web doivent apparaître avant et après les images pour diverses raisons. Par exemple, les entreprises de conception Web peuvent montrer des photos avant et après des sites Web qu’elles ont créés, et les sites Web de fitness peuvent montrer des portraits avant et après de leurs clients réussis (et adaptés). Habituellement, les sites Web optent pour un design simple qui montre chaque photo côte à côte. Dans ce didacticiel, nous allons ajouter une animation interactive à cette conception traditionnelle.

Dans ce tutoriel, nous allons vous montrer comment créer des parchemins animés avant et après des images dans Divi. Avec cette conception, l’utilisateur voit la transition des images avant et après pendant qu’elles défilent vers le bas de la page. C’est un excellent moyen d’amener les utilisateurs à faire défiler votre site Web et à voir la transformation d’une manière unique. De plus, nous ne pouvons le faire qu’avec les options intégrées de Divi. Aucun code personnalisé ou plugin requis!

Commençons.

Avant goût

Voici un aperçu de la conception que nous allons créer dans ce didacticiel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle Portabilité, sélectionnez l’onglet Importer et téléchargez le fichier depuis votre ordinateur.

Cliquez ensuite sur le bouton Importer.

Panneau de notification Divi

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Extension des onglets d'angle

Pour commencer, vous devez effectuer les opérations suivantes:

  1. Si vous ne l’avez pas déjà Installez et activez le thème Divi.
  2. Créez une nouvelle page dans WordPress et éditez la page dans le frontend avec le Divi Builder (Visual Builder).
  3. Sélectionnez l’option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Créez des images animées avant et après dans Divi

Maintenant, nous pouvons commencer à créer nos images avant et après dans le défilement animé Divi. Pour ce faire, nous devons d’abord créer une ligne à deux colonnes qui ne sera pas enveloppée (ou cassée) sur le mobile. Le débordement doit également être masqué dans chaque colonne pour que les images avant et après glissent vers l’intérieur et vers l’extérieur pour être affichées dans chaque colonne lors du défilement. Une fois les colonnes en place, ajoutons nos images à chaque colonne, en ajoutant le style et l’animation de défilement horizontal à chacune. Une fois cela fait, nous ajouterons le texte avant et après l’en-tête au-dessus des images.

Partie 1: créer la ligne à deux colonnes

Tout d’abord, utilisez le Divi Builder sur le front-end pour ajouter une ligne à deux colonnes à la section standard standard.

Paramètres de ligne

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants:

  • Largeur de gouttière: 1
  • Largeur: 100%
  • Largeur maximale: 900 pixels (bureau), 700 pixels (tablette), 300 pixels (téléphone)
  • Rembourrage: 0px au-dessus, 0px en dessous

REMARQUE: la définition de la largeur maximale de la ligne à l’aide d’unités de longueur en pixels est essentielle pour que cette conception fonctionne. Tenez compte de ces valeurs car la largeur de chaque image et l’animation de défilement horizontal que nous ajouterons plus tard dépendent de la largeur maximale de la ligne.

Ouvrez l’onglet Avancé et ajoutez le CSS personnalisé suivant à l’élément principal pour vous assurer que les colonnes ne sont pas incluses ou divisées en une seule disposition de colonne sur mobile:

display:flex;
flex-wrap:nowrap;

Paramètres de colonne

Ensuite, ouvrez les paramètres de la colonne 1 et mettez à jour les paramètres de brouillon comme suit:

  • Rembourrage: 5vw ci-dessus, 5vw ci-dessous
  • Largeur de la marge droite: 2px
  • Couleur du bord droit: # 666666

Sous l’onglet Avancé, mettez à jour le débordement comme suit:

  • Débordement horizontal: masqué
  • Débordement vertical: masqué

N’oubliez pas que le débordement doit être masqué dans chaque colonne pour que les images avant et après glissent vers l’intérieur et vers l’extérieur pour être affichées dans chaque colonne lorsque vous faites défiler

Ensuite, ouvrez les paramètres de la colonne 2 et mettez à jour les paramètres de brouillon comme suit:

  • Rembourrage: 5vw ci-dessus, 5vw ci-dessous
  • Largeur de la marge gauche: 2px
  • Couleur de la bordure gauche: # 666666

REMARQUE: les bords droit et gauche de chaque colonne forment la ligne centrale, qui est le milieu de la transition d’image avant et après l’image.

Ensuite, mettez à jour le débordement sur « Caché » pour cette colonne également.

  • Débordement horizontal: masqué
  • Débordement vertical: masqué

Partie 2: Création des images avant et après

Avec notre mise en page à deux colonnes, nous pouvons maintenant ajouter les images que nous utiliserons pour l’animation avant et après. Nous aurons en fait trois photos au total. Dans la colonne 1, nous avons une version « ombre » du modèle qui persiste (non animée), et nous avons l’image avant (en noir et blanc) qui finit par se déplacer vers la droite lorsque vous faites défiler. Dans la colonne 2, nous avons l’image rémanente qui défile dans la vue lorsque vous faites défiler à partir de la gauche.

Ajout des trois images

Ajoutez un nouveau module d’image dans la colonne 1 pour créer la première image.

Ensuite, téléchargez une image dans le module.

Sous l’onglet Conception, mettez à jour les options de largeur suivantes:

  • Largeur: 100%
  • Largeur maximale: 448 pixels (bureau), 348 pixels (tablette), 148 pixels (téléphone)

REMARQUE: chacune des dimensions de largeur maximale est déterminée par exactement la moitié de la ligne moins la marge 2px. Pour le bureau, la ligne a une largeur maximale de 900 pixels. La moitié de la ligne mesure 450 pixels. Retirez ensuite le 2px ajouté par le bord et vous obtenez 448px.

Dupliquez le module d’image trois fois pour créer les deux images suivantes.

Déplacez ensuite l’une des images dans la colonne 2.

Partie 3: Ajouter des styles personnalisés et faire défiler des animations aux images

Style « Ombre » devant l’image

Pour styliser l’ombre de l’image précédente, ouvrez les paramètres de la première image (ou du haut) de la colonne 1 et mettez à jour l’option de filtre comme suit:

  • Saturation: 0%
  • Opacité: 10%

Mettez à jour la position de l’image comme suit pour vous assurer que l’image d’ombre est positionnée directement derrière l’image précédente:

  • Position: Absolument
  • Décalage vertical: 5vw

REMARQUE: le décalage vertical doit être le même que la distance supérieure de la colonne pour maintenir les images alignées verticalement.

Avant les paramètres de style et de défilement de l’image

Ensuite, ouvrez les paramètres de la deuxième image dans la colonne 1 (maintenant au-dessus de l’image d’ombre) et mettez à jour le filtre de saturation pour en faire une version noir et blanc de l’image:

Sous l’onglet Avancé, sous Effets de transformation de défilement, sélectionnez l’onglet Mouvement horizontal et activez le mouvement horizontal. Ensuite, mettez à jour les éléments suivants:

Définir le mouvement horizontal pour le bureau …

  • Décalage de départ: 0 (à 30%)
  • Décalage moyen: 2,26 (à 45%)
  • Décalage de fin: 4,52 (à 60%)

Définir le mouvement horizontal de la tablette …

  • Décalage de départ: 0 (à 30%)
  • Offset moyen: 1,76 (à 45%)
  • Décalage de fin: 3,52 (à 60%)

Définir le mouvement horizontal du téléphone …

  • Décalage de départ: 0 (à 30%)
  • Offset moyen: 0,76 (à 45%)
  • Désalignement final: 1,52 (à 60%)

REMARQUE: notez que les valeurs de décalage sont spécifiées en pixels. Une valeur de 1 correspond à 100 pixels. Donc, une valeur de 4,52 est en fait 452px. À la fin de l’animation horizontale sur le bureau, l’image s’est décalée de 452 pixels vers la droite. Le 452px est déterminé par la moitié de la ligne (450px) plus la marge de 2px.

Selon les paramètres de défilement

Enfin, mettez à jour l’image finale de la colonne 2 avec les effets de défilement suivants pour les mouvements horizontaux:

Définir le mouvement horizontal pour le bureau …

  • Décalage de départ: -4,52 (à 30%)
  • Offset moyen: -2,26 (à 45%)
  • Décalage de fin: 0 (à 60%)

Définir le mouvement horizontal de la tablette …

  • Décalage de départ: -3,52 (à 30%)
  • Offset moyen: -1,76 (à 45%)
  • Décalage de fin: 0 (à 60%)

Définir le mouvement horizontal du téléphone …

  • Décalage de départ: -1,52 (à 30%)
  • Offset moyen: -0,76 (à 45%)
  • Décalage de fin: 0 (à 60%)

Ajout d’une marge de section pour les tests de défilement

Avant de regarder notre animation de défilement, nous devons ajouter des marges supérieures et inférieures temporaires à la section afin de disposer d’un espace de défilement sur la page en direct.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants:

  • Bord: 80vh ci-dessus, 80vh ci-dessous

Vérifiez maintenant le résultat sur une page en direct.

Partie 4: Création du texte avant et après l’en-tête

Pour compléter la conception, nous devons créer le texte avant et après l’en-tête au-dessus de chaque image.

Nouvelle ligne

Pour ce faire, créez une nouvelle ligne à deux colonnes.

Copiez les styles de ligne de la ligne précédente avec nos images.

Collez ensuite les styles de ligne dans la nouvelle ligne.

Ajout des modules de texte

Lorsque la ligne est prête, faites-la glisser sur la ligne avec les images. Ajoutez ensuite un nouveau module de texte à la colonne 1 de la nouvelle ligne.

Remplacez ensuite le texte par ce qui suit:

<h2>Before</h2>

Dans l’onglet Conception, mettez à jour les styles d’en-tête H2 suivants:

  • Police de titre 2: Roboto
  • Police de titre 2: DD
  • Alignement du texte du titre 2: milieu
  • Espacement des lettres de l’en-tête 2: 2px

Pour créer l’en-tête de l’image rémanente, copiez et collez le module de texte dans la colonne 2 de la même ligne.

Ensuite, mettez à jour le texte H2 sur « après » au lieu de « avant ».

C’est ça!

En bout de ligne

Voici la ligne du bas.

Et voici à quoi cela ressemble sur l’écran des tablettes et des téléphones portables:

Et voici d’autres exemples de ce que vous pouvez faire en remplaçant simplement les images que vous utilisez.

Dernières pensées

Dans ce tutoriel, nous vous avons montré à quel point il est facile d’utiliser Divi pour créer votre propre parchemin personnalisé qui est animé avant et après les images. La particularité de cette conception est qu’il est facile de reproduire davantage d’échantillons d’images avant et après. Tout ce que vous avez à faire est de dupliquer la section et de mettre à jour les images! Notez que pour de meilleurs résultats, vous souhaitez conserver les images de la même taille afin qu’elles restent auto-alignées pendant l’animation.

J’espère que cela vous donnera un coup de pouce supplémentaire pour la conception de votre prochain projet qui devra peut-être être présenté avant et après les images.

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

De bas en haut!





Source link

Recent Posts