Comment basculer entre les images dans une superbe conception de section Divi Split

Publié: 2019-10-31

Les conceptions interactives peuvent faire briller n'importe quel site Web. Dans ce didacticiel, nous allons vous montrer comment basculer entre les images dans une superbe conception de section divisée. Lorsque vous survolez une image, elle viendra au premier plan tout en couvrant l'autre. Suivez les étapes ci-dessous pour recréer le design ou téléchargez le fichier JSON via le lien d'inscription. Assurez-vous d'utiliser des images avec des arrière-plans transparents afin de pouvoir contrôler les couleurs d'arrière-plan de chaque colonne.

Allons-y !

Aperçu

Jetons un coup d'œil à la conception sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez The Toggle Image Design GRATUITEMENT

Pour mettre la main sur la conception d'image à bascule gratuite, vous devez d'abord la 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

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.

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 !

Commençons à recréer

Ajouter une nouvelle section

Espacement

Créez une nouvelle page ou ouvrez une page existante. Ajoutez une section normale, ouvrez les paramètres de la section et supprimez tous les rembourrages supérieur et inférieur par défaut.

  • Rembourrage supérieur + inférieur : 0vw

Visibilité

Ensuite, définissez les débordements de la section sur masqués.

  • Débordement horizontal + vertical : masqué

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Avant d'ajouter des modules, ajustez la taille de la ligne.

  • Largeur de gouttière : 1
  • Largeur : 100 %
  • Largeur maximale : 100 %

Espacement

Supprimez également le rembourrage supérieur et inférieur par défaut de la ligne.

  • Rembourrage supérieur et inférieur : 0vw

Paramètres de la colonne 1

Fond

Ouvrez ensuite les paramètres de la colonne 1 et ajoutez une couleur d'arrière-plan.

  • Couleur : Rose pâle #E7BAC6

Frontière

Ensuite, ajustez les paramètres de bordure de la colonne sur différentes tailles d'écran.

  • Coins arrondis : en haut à droite + en bas à droite
    • Ordinateur de bureau : 10vw
    • Tablette et téléphone : 0vw

Visibilité

Passez à l'onglet Avancé et ajustez les paramètres de visibilité comme suit :

  • Débordement horizontal + vertical
    • Bureau : par défaut
    • Survol : visible
  • Index Z :
    • Bureau : 10
    • Survol : 11

Paramètres de la colonne 2

Fond

Maintenant, ajoutez la couleur de fond à la colonne 2.

  • Couleur : Vert pâle #bfd5a5

Frontière

Modifiez les paramètres de bordure de la deuxième colonne comme suit :

  • Coins arrondis : en haut à gauche + en bas à gauche
    • Ordinateur de bureau : 10vw
    • Tablette et téléphone : 0vw

Visibilité

Enfin, modifiez les paramètres de visibilité en conséquence :

  • Débordement horizontal + vertical
    • Bureau : par défaut
    • Survol : visible
  • Index Z :
    • Bureau : 9
    • Survol : 11

Ajouter un module d'image à la colonne 1

Ajouter une image

Il est temps de commencer à ajouter des modules ! Ajoutez un module d'image à la colonne 1 et téléchargez une image semi-transparente de votre choix.

Fond

Utilisez la couleur d'arrière-plan de la colonne comme couleur d'arrière-plan de votre image.

  • Couleur : Rose pâle #E7BAC6

Dimensionnement

Ensuite, dans l'onglet conception, ajustez les paramètres de dimensionnement.

  • Forcer la pleine largeur : Oui

Espacement

Ajoutez également un rembourrage personnalisé.

  • Rembourrage droit :
    • Tablette : 18vw
    • Téléphone : 20vw

Transformer

Enfin, ajustez les paramètres de traduction de transformation du module.

  • Transformer traduire : axe x 19vw

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Passons au module suivant, qui est un module de texte. Ajoutez du contenu H2 et paragraphe de votre choix.

Texte

Passez à l'onglet Conception et modifiez les paramètres de texte comme suit.

  • Police : Verdana
  • Couleur : Blanc #ffffff
  • Taille:
    • Ordinateur de bureau : 2vw
    • Tablette : 3vw
    • Téléphone : 3.5vw
  • Espacement des lettres : 1px
  • Alignement : centré

Texte d'en-tête

Stylisez ensuite le texte de l'en-tête.

  • Niveau de titre : H2
  • Police : Verdana
  • Poids : gras
  • Alignement : Centre
  • Couleur : magenta #9d3056
  • Taille:
    • Ordinateur de bureau : 6vw
    • Tablette + Téléphone : 8vw

Dimensionnement

Ensuite, ajustez le dimensionnement du module.

  • Largeur:
    • Ordinateur de bureau : 56 %
    • Tablette + Téléphone : 43%

Espacement

Complétez les paramètres du module en modifiant les paramètres d'espacement sur différentes tailles d'écran.

  • Marge supérieure:
    • Ordinateur de bureau : -55vw
    • Tablette : -70vw
    • Téléphone : -90vw
  • Rembourrage inférieur :
    • Ordinateur de bureau + tablette : 0vw
  • Rembourrage gauche : 2vw

Ajouter un module de comptoirs de bar à la colonne 1

Paramètres du comptoir de bar 1-4

Titres

Le prochain et dernier module dont nous avons besoin dans la colonne 1 est le module des compteurs de barres. Ajoutez des titres aux compteurs de barres.

  1. Fraises
  2. Myrtilles
  3. Mûres
  4. Framboises

Pourcentages

Avec les pourcentages.

  1. 20
  2. 40
  3. dix
  4. 20

Dimensionnement

Cliquez sur la première barre et définissez la hauteur. Répétez cette étape pour les quatre barres.

  • Hauteur: 1.5vw

Paramètres généraux des compteurs de barres

Éléments

Dans les paramètres généraux du comptoir de bar, ouvrez les paramètres des éléments. Basculez le pourcentage sur « Non ».

  • Afficher le pourcentage : Non

Fond

Maintenant, ajoutez un arrière-plan semi-transparent.

  • Couleur: Rose pâle avec transparence rgba(157,48,86,0.18)

Bar

Dans l'onglet conception, donnez aux barres une couleur de barre magenta.

  • Couleur de fond : Magenta #9d3056

Texte du titre

Stylisez ensuite les paramètres du texte du titre.

  • Police : Verdana
  • Couleur : Blanc #ffffff
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 2vw
    • Téléphone : 3vw

Dimensionnement

Continuez en ajustant les paramètres de dimensionnement du module.

  • Largeur:
    • Ordinateur de bureau : 49 %
    • Tablette + Téléphone : 33%

Espacement

Modifiez également les paramètres d'espacement.

  • Marge supérieure:
    • Tablette + Téléphone : -3vw
  • Marge inférieure :
    • Ordinateur de bureau : 21vw
    • Tablette + Téléphone : 28vw
  • Marge de gauche:
    • Ordinateur de bureau : 3vw
    • Tablette + Téléphone : 6vw
  • Rembourrage inférieur + gauche : 0vw

Frontière

Modifiez ensuite les paramètres de bordure.

  • Coins arrondis : 1vw aux quatre coins

Visibilité

Enfin, ajustez l'index z et les débordements dans l'onglet visibilité.

  • Débordement horizontal : Visible
  • Débordement vertical : caché
  • Indice Z : 11

Ajouter un module d'image à la colonne 2

Ajouter une image

Passons à la deuxième colonne ! Ajoutez un nouveau module d'image et téléchargez une image semi-transparente de votre choix.

Fond

Utilisez ensuite la couleur d'arrière-plan de la colonne 2 comme couleur d'arrière-plan de votre image.

  • Couleur : Vert pâle #bfd5a5

Dimensionnement

Dans l'onglet conception, ajustez le dimensionnement du module.

  • Forcer la pleine largeur : Oui

Espacement

Ajoutez également un rembourrage gauche personnalisé sur les tailles d'écran plus petites.

  • Rembourrage gauche :
    • Tablette : 16vw
    • Téléphone : 18vw

Transformer

Enfin, modifiez les paramètres de traduction de la transformation.

  • Transformer la traduction : axe des x -19,6vw

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Continuez en ajoutant un module de texte à la colonne 2 avec du contenu H2 et des paragraphes.

Texte

Ensuite, dans l'onglet conception, stylisez le texte.

  • Police : Verdana
  • Couleur : Blanc #ffffff
  • Taille:
    • Ordinateur de bureau : 2vw
    • Tablette : 3vw
    • Téléphone : 3.5vw
  • Espacement des lettres : 1px
  • Alignement : Centre

Texte d'en-tête

Modifiez également les paramètres du texte du titre.

  • Niveau de titre : H2
  • Police : Verdana
  • Poids : gras
  • Alignement : Centre
  • Couleur : Vert #2c5b00
  • Taille:
    • Ordinateur de bureau : 6vw
    • Tablette + Téléphone : 8vw

Dimensionnement

Et ajustez les paramètres de dimensionnement du module.

  • Largeur: 60%
  • Alignement : à droite

Espacement

Enfin, utilisez des valeurs d'espacement personnalisées sur différentes tailles d'écran.

  • Marge supérieure:
    • Ordinateur de bureau : -55vw
    • Tablette : -63vw
    • Téléphone : -90vw
  • Rembourrage inférieur :
    • Ordinateur de bureau + tablette : 37vw
  • Rembourrage gauche :
    • Ordinateur de bureau : 0vw
    • Tablette + Téléphone : 16vw
  • Rembourrage droit :
    • Tablette + Téléphone : 2vw

Ajouter un module de comptoirs de bar à la colonne 2

Paramètres du comptoir de bar 1-4

Titres

Le dernier module dont nous avons besoin dans la colonne 2 est le module des compteurs de barres. Ajoutez quatre comptoirs de bar.

  1. Brocoli
  2. Céleri
  3. Concombre
  4. chou frisé

Pourcentages

Attribuez un pourcentage à chaque compteur de barres.

  1. 20
  2. 40
  3. 20
  4. 30

Dimensionnement

Ouvrez les paramètres individuels de la première barre et modifiez la hauteur dans les paramètres de dimensionnement. Répétez cette étape pour les quatre barres.

  • Hauteur: 1.5vw

Paramètres généraux des compteurs de barres

Éléments

Dans les paramètres généraux du compteur de barres, modifiez le pourcentage de basculement sur « Non ».

  • Afficher le pourcentage : Non

Fond

Ensuite, ajoutez une couleur d'arrière-plan semi-transparente.

  • Couleur: vert pâle avec transparence rgba (17,119,3,0,18)

Bar

Ensuite, dans l'onglet conception, ajoutez de la couleur à la barre de comptoir.

  • Couleur de la barre : vert # 9d3056

Texte du titre

Continuez en stylisant le texte.

  • Police : Verdana
  • Couleur : Blanc #ffffff
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 2vw
    • Téléphone : 3vw

Dimensionnement

Modifiez également la largeur sur différentes tailles d'écran.

  • Largeur:
    • Ordinateur de bureau : 49 %
    • Tablette + Téléphone : 33%

Espacement

Passez aux paramètres d'espacement et ajoutez des valeurs d'espacement personnalisées sur différentes tailles d'écran.

  • Marge supérieure:
    • Ordinateur de bureau : -37vw
    • Tablette + Téléphone : -40vw
  • Marge inférieure :
    • Ordinateur de bureau : 21vw
    • Tablette + Téléphone : 28vw
  • Marge de gauche:
    • Ordinateur de bureau : 23 vw
    • Tablette + Téléphone : 60vw
  • Rembourrage inférieur + gauche : 0vw

Frontière

Nous ajoutons également des coins arrondis.

  • Coins arrondis : 1vw aux quatre coins

Visibilité

Complétez les paramètres du module en ajustant les débordements et l'index z dans l'onglet visibilité.

  • Débordement horizontal : Visible
  • Débordement vertical : caché
  • Indice Z : 11

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

C'est un Wrap !

Dans cet article, nous vous avons montré comment basculer entre les images dans un beau design. C'est un excellent moyen de créer un design interactif et d'utiliser l'index z intégré de Divi pour déterminer quelle image apparaît. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!