Comment créer d'élégantes sections d'informations sur les produits à images fractionnées avec Divi

Faire preuve de créativité avec les images peut certainement aider à attirer l'attention sur vos CTA. Dans cet article, nous allons vous montrer comment recréer une belle section d'informations sur les produits en images fractionnées avec Divi. Le design que nous recréons est beau, accrocheur et peut être personnalisé selon vos besoins. Vous pourrez également télécharger gratuitement le fichier JSON du design !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page gratuite de Split-Image

Pour mettre la main sur la mise en page gratuite d'images fractionnées, vous devrez d'abord la télécharger à l'aide du 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 !

Abonnez-vous à notre chaîne Youtube

Créez un effet d'image fractionnée avec Photoshop et Illustrator

Avant de vous lancer avec Divi, vous devez disposer d'un ensemble d'images prêtes à être téléchargées. Comme il s'agit d'un effet d'image divisée, vous avez besoin de deux images qui s'emboîtent bien. Vous aurez besoin de deux tailles d'image différentes : 960 px de large sur 1 200 px de haut pour les ordinateurs de bureau et 600 px de large sur 1 200 px de haut pour les tablettes et les mobiles.

Étape 1 : sélectionnez les images

Sélectionnez deux images HD de vos produits.

Étape 2 : effacez l'arrière-plan

Effacez les arrière-plans pour créer des découpes. Vous pouvez utiliser n'importe quel programme que vous voulez. Mais voici un guide étape par étape pour Photoshop.

Étape 3 : Ouvrir un nouveau projet sur Illustrator

Ouvrez un nouveau projet dans Illustrator, de 1920px de large sur 1200px de haut.

Étape 4 : Ajoutez un guide vertical.

Ajoutez un guide vertical au centre de la toile vide. Assurez-vous qu'il est bien au centre.

Étape 5 : Importez ou placez les images découpées

Placez les deux images découpées sur la toile.

Étape 6 : Commencez à visualiser la scission

Faites deux doublons de chaque image. Utilisez la fonction de recadrage pour les diviser en deux à différents endroits. D'abord par le centre, puis un peu moins et un peu plus pour les doublons. Vous aurez maintenant trois versions fractionnées de chaque image.

Étape 7 : Finaliser l'effet

À l'aide des différentes découpes fractionnées, trouvez la meilleure composition pour vos images. Assurez-vous que le bord droit de chaque image est juste sur le guide central sur la toile. Essayez de changer la taille des images pour qu'elles s'adaptent mieux. N'oubliez pas que le canevas a la taille d'un écran pleine largeur, ajustez donc la taille des images en conséquence.

Étape 8 : Recadrez de moitié et économisez

Lorsque la conception est terminée, débarrassez-vous des découpes supplémentaires. Vérifiez que le bord droit de chaque image touche le guide central. Créez deux nouveaux plans de travail et redimensionnez-les pour qu'ils s'adaptent à chaque côté, en vous assurant qu'ils sont séparés juste au niveau du guide central. Exportez pour le Web, un plan de travail à la fois et enregistrez au format .png. Maintenant, vous avez deux images différentes. À la fois 960px de large et 1200px de haut.

Étape 9 : redimensionner pour tablette et mobile

Redimensionnez les deux images à 960px de large sur 1200px de haut. Assurez-vous de ne recadrer que l'arrière-plan transparent, ne touchez pas l'image. Je l'ai fait sur Photoshop en changeant la taille de la toile avec l'ancre sur le côté de l'image.

Commençons à recréer !

Ajouter une nouvelle section

Fond

Maintenant que nous avons parcouru la première partie du tutoriel, il est temps de vous lancer avec Divi ! Créez une nouvelle page ou ajoutez une nouvelle section à une page existante. Ajoutez un arrière-plan dégradé à la section.

• Arrière-plan : Dégradé
• Couleur 1 : Blanc cassé #f7f7f7
• Couleur deux : vert frais #b7e778
• Direction du gradient : 90 degrés
• Position de début et de fin : 50 %

Espacement

Modifiez ensuite les paramètres d'espacement de la section.

• Rembourrage supérieur : 5vw
• Rembourrage inférieur : 12vw

Visibilité

Enfin, ajustez la visibilité.

• Débordement vertical et horizontal : masqué

Ajouter la 1ère ligne

Structure des colonnes

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

Dimensionnement

Ajustez les paramètres de dimensionnement de la ligne.

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

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

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

Paramètres de la colonne 1

Transformer

Accédez ensuite aux paramètres de la colonne 1 et modifiez les valeurs de conversion de la transformation.

• Transformer traduire : -2vw axe y

Paramètres de la colonne 2

Transformer

Faites de même pour la colonne 2.

• Transformer traduire : 2vw axe x

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un module de texte à la colonne 1 avec du contenu H2 de votre choix.

Texte du titre

Dans l'onglet Conception, modifiez les paramètres du texte de l'en-tête.

• Niveau du texte de l'en-tête : H2
• Police H2 : Corben
• Alignement H2 :
  • Bureau : Gauche
  • Tablette + Téléphone : Centre
• Couleur du texte H2 : gris très foncé #3a3a3a
• Taille du texte H2 :
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 16vw

Espacement

Ensuite, ajustez l'espacement.

• Marge droite :
  • Ordinateur de bureau : -1vw
  • Tablette + Téléphone : 0vw
• Rembourrage droit :
  • Tablette + Téléphone : 35vw

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Maintenant, ajoutez un module de texte à la deuxième colonne. Insérez du contenu H2 de votre choix.

Texte du titre

Ensuite, stylisez le texte du titre comme suit.

• Niveau du texte de l'en-tête : H2
• Police H2 : Corben
• Alignement H2 :
  • Bureau : Gauche
  • Tablette + Téléphone : Droit
• Couleur du texte H2 : gris très foncé #3a3a3a
• Taille du texte H2 :
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 14vw

Espacement

Enfin, ajustez l'espacement.

• Marge supérieure:
  • Tablette : -12vw
  • Téléphone : -14vw
• Marge de gauche:
  • Ordinateur de bureau + tablette : -0.5vw
• Rembourrage droit :
  • Tablette + Téléphone : 17vw

Ajouter une 2e rangée

Structure des colonnes

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

Dimensionnement

Ouvrez les paramètres de ligne et ajustez les paramètres de dimensionnement.

• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Modifiez ensuite les paramètres d'espacement.

• Marge supérieure:
  • Ordinateur de bureau : -15vw
  • Tablette : -36vw
  • Téléphone : -40vw
• Rembourrage supérieur et inférieur :
  • Ordinateur de bureau : 0vw
  • Tablette : 9vw
  • Téléphone : 12vw

CSS personnalisé

Complétez les paramètres de la ligne en ajoutant une seule ligne de code CSS à l'élément principal de la ligne. Cela aidera à garder les images ensemble.

• Élément principal : affichage : flex ;

display: flex;

Ajouter un module d'image à la colonne 1

Ajouter une image

Ajoutez la moitié gauche de l'image à la colonne 1.

• Image:
  • Bureau : l'image de 960 pixels de large
  • Tablette + Téléphone : L'image de 600px de large

Dimensionnement

Faites le module d'image en pleine largeur.

• Forcer la pleine largeur : oui

Ajouter un module d'image à la colonne 2

Ajouter une image

Ajoutez la moitié droite de l'image à la colonne 2.

• Image:
  • Bureau : l'image de 960 pixels de large
  • Tablette + Téléphone : L'image de 600px de large

Dimensionnement

Faites également ce module d'image en pleine largeur.

• Forcer la pleine largeur : oui

Ajouter une 3e rangée

Structure des colonnes

Au rang suivant ! Choisissez la structure de colonnes suivante :

Dimensionnement

Ajustez la taille de la ligne comme suit :

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

Espacement

Ensuite, ajustez l'espacement.

• Marge supérieure:
  • Ordinateur de bureau : -38vw
  • Tablette + Téléphone : -14vw

Paramètres de la colonne 1

Espacement

Avant d'ajouter des modules, ajustez l'espacement dans les colonnes. Commencez par la colonne 1.

• Rembourrage gauche :
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 12vw
• Rembourrage droit :
  • Ordinateur de bureau : 15vw
  • Tablette + Téléphone : 12vw

Paramètres de la colonne 2

Espacement

Ensuite, ajustez les paramètres d'espacement de la colonne 2

• Rembourrage gauche :
  • Ordinateur de bureau : 15vw
  • Tablette + Téléphone : 12vw
• Rembourrage droit :
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 12vw

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Ajoutez un module de texte à la colonne 1 et ajoutez du contenu H3 de votre choix.

Fond

Changez la couleur de fond.

• Couleur de l'arrière plan
• Couleur : Gris très foncé #333333

Texte du titre

Ensuite, stylisez le texte du titre.

• Niveau du texte de l'en-tête : H3
• Police H3 : Corben
• Alignement H3 : Centre
• Couleur de la police H3 : blanc cassé #f7f7f7
• Taille de la police H3 :
  • Ordinateur de bureau : 2.2vw
  • Tablette : 6.4vw
  • Téléphone : 7vw
• Espacement des lettres H3 : 3 px

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Rembourrage supérieur :
  • Ordinateur de bureau + tablette : 0.2vw
  • Téléphone : 1vw
• Rembourrage inférieur :
  • Ordinateur de bureau : 0,5 vw
  • Tablette : 1,2 vw
  • Téléphone : 1vw

Frontière

Complétez les paramètres du module en ajoutant des coins arrondis.

• Coins arrondis : 1vw aux quatre coins

Dupliquer le module de texte et faire glisser vers la colonne 2

Maintenant, dupliquez le module de texte et faites-le glisser vers la colonne 2.

Modifier le contenu

Bien sûr, vous devrez modifier le contenu du module de texte en double.

Ajouter un module d'appel à l'action à la colonne 1

Ajouter du contenu

Sous le module de texte dans la colonne 1, ajoutez un module d'appel à l'action avec le contenu de votre choix.

• Titre
• Bouton
• Corps

Ajouter un lien

Continuez en ajoutant un lien vers le bouton du CTA.

Fond

Et ajoutez une couleur d'arrière-plan à la tablette et au mobile.

• Couleur de l'arrière plan:
  • Tablette + Téléphone : Blanc Cassé #f7f7f7

Texte du titre

Dans l'onglet Conception, stylisez les paramètres de texte H4.

• Niveau du texte de l'en-tête : H4
• Police H4 : Open Sans
• Couleur H4 : Gris très foncé #333333
• Taille du texte H4 :
  • Ordinateur de bureau : 1.4vw
  • Tablette : 4.5vw
  • Téléphone : 7vw
• Espacement des lettres H3 : 2px
• Hauteur de la ligne H3 : 1,5 em

Le corps du texte

Modifiez ensuite les paramètres du corps du texte.

• Police du corps : Open Sans
• Alignement du corps du texte : Centre
• Couleur du corps du texte : gris très foncé #333333
• Taille de la police du corps :
  • Ordinateur de bureau : 0.9vw
  • Tablette : 3vw
  • Téléphone : 4vw
• Hauteur de la ligne du corps : 1,8 em

Bouton

Stylisez le bouton aussi.

• Taille du texte du bouton :
  • Ordinateur de bureau : 1vw
  • Tablette : 2.2vw
  • Téléphone : 3.8vw
• Couleur de la police du bouton : gris très foncé #333333
• Couleur d'arrière-plan du bouton :
  • Tablette + Mobile : Fresh Green #b7e778
• Largeur de la bordure du bouton :
  • Bureau : 1px
• Couleur de la bordure du bouton :
  • Bureau : Gris très foncé #333333
• Rayon de bordure de bouton : 1vw

Espacement

Et ajoutez des valeurs d'espacement personnalisées.

• Marge supérieure:
  • Ordinateur de bureau + tablette : -2vw
  • Téléphone : 3vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau : 0vw
  • Tablette + Téléphone : 4vw

Frontière

Enfin, stylisez la bordure sur différentes tailles d'écran.

• Coins arrondis : 1vw tous les coins
• Styles de bordure :
  • Tablette + Téléphone : les quatre côtés
• Largeur de la bordure:
  • Tablette + Téléphone : 1px
• Couleur de la bordure:
  • Tablette + Téléphone : Gris Très Foncé #333333

Dupliquer le module d'appel à l'action et faire glisser vers la colonne 2

Dupliquez le module d'appel à l'action et faites-le glisser vers la colonne 2.

Modifier le contenu

Pour terminer la conception, modifiez le contenu du module d'appel à l'action dupliqué et vous avez terminé !

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

Conclusion

Dans cet article, nous vous avons montré comment créer une section d'informations sur les produits en images fractionnées avec Divi. Nous avons expliqué comment créer les images fractionnées à l'aide d'un logiciel de retouche d'images et avons continué à utiliser les fichiers dans notre conception Divi. Nous espérons que cette conception vous incitera à faire preuve de créativité avec vos propres images de produits. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!