Comment créer des transitions de section de forme irrégulière avec Divi

L'un des meilleurs moyens d'améliorer la conception de votre site Web consiste à utiliser différentes transitions de section. Dans un article précédent, nous vous avons montré comment vous pouvez le faire en utilisant uniquement les options intégrées de Divi. Cependant, si vous cherchez à créer quelque chose d'un peu plus avancé ou personnalisé, vous pouvez également créer des transitions de section de forme irrégulière. En raison de leur complexité, la meilleure façon d'aborder cela est d'utiliser des images avec une bordure transparente.

Dans cet article, nous allons vous montrer comment vous pouvez le faire. Nous allons non seulement vous montrer ce qu'il faut faire dans Divi Builder, mais nous allons également vous montrer comment créer ces bordures transparentes sur des images en quelques étapes à l'aide de Photoshop.

Exemple de résultat

Jetons un coup d'œil à un exemple de mise en page avec de superbes transitions de section de forme irrégulière :

Comme vous pouvez le constater, vous pouvez utiliser ces bordures transparentes sur l'ensemble de votre site et dans différentes sections. Il est important de se rappeler que, selon la taille de votre bordure transparente, vous devriez avoir suffisamment de place dans les sections pour s'adapter aux différents contenus que vous essayez de partager. Cela créera également un bel équilibre entre les différentes sections.

Comment créer des transitions de section de forme irrégulière avec Divi

Abonnez-vous à notre chaîne Youtube

Créez des bordures transparentes avec Photoshop

Vous pouvez obtenir des formes aussi originales que vous le souhaitez avec Photoshop. Vous pouvez également opter pour une alternative gratuite appelée GimpShop. Pour ce tutoriel, nous utiliserons cependant Photoshop.

Ouvrez Photoshop

Commencez par ouvrir Photoshop sur votre ordinateur.

Ouvrir l'image

Une fois que vous avez fait cela, ouvrez l'image sur laquelle vous souhaitez travailler.

Double-cliquez sur l'image et créez un calque

Une fois votre image téléchargée dans Photoshop, double-cliquez sur le calque de l'image et créez-en un nouveau (Calque 0).

Ajouter une autre couche

Pour ajouter la bordure transparente, vous aurez également besoin d'un autre calque, alors allez-y et ajoutez-le en cliquant sur l'icône que nous avons marquée dans l'écran d'impression ci-dessous. Une fois que vous avez créé le calque (Calque 1), assurez-vous qu'il est placé au-dessus du calque qui contient votre image.

Sélectionnez le pinceau et la taille

Tout en ayant le calque 1 activé, allez-y et cliquez sur l'icône du pinceau.

Une fois que vous l'avez fait, vous pouvez ajuster la taille et le motif utilisés pour le pinceau selon vos préférences. Il existe des tonnes de pinceaux Photoshop gratuits sur Internet. En fonction du type de site Web que vous créez, choisissez-en un qui vous convient. Assurez-vous également que l'opacité est définie sur 100 %.

Commencez à utiliser le pinceau sur les bordures

Une fois votre pinceau en place, commencez à l'utiliser du côté que vous souhaitez rendre transparent. Assurez-vous de couvrir toute la bordure avec votre pinceau pour que tout devienne transparent par la suite.

CTRL (Windows) ou Commande (Mac) + Sélectionner un nouveau calque

Une fois cela fait, vous pouvez appuyer sur CTRL (pour Windows) ou Commande (pour Mac) sur votre clavier et cliquer sur le calque 1 en même temps. Vous verrez que Photoshop sélectionnera tout ce que vous avez ajouté à ce calque, qui est, dans ce cas, la bordure en forme.

Rendre le nouveau calque invisible

Ensuite, rendez la couche 1 invisible en supprimant l'œil comme indiqué dans l'écran d'impression ci-dessous.

Sélectionnez l'image et supprimez le nouveau calque

Ensuite, cliquez sur le calque qui contient votre image et appuyez sur le bouton Supprimer de votre clavier. Une fois que vous faites cela, vous verrez que la frontière deviendra transparente.

Sélectionnez l'outil de sélection rectangulaire et cliquez sur l'image

Cliquez sur l'outil Rectangular Marquee Tool et appuyez quelque part au hasard sur l'image.

Enregistrer l'image au format PNG

Enfin, vous devrez enregistrer l'image au format PNG afin de pouvoir l'utiliser sur votre site Web.

Ajouter des arrière-plans à Divi

Une fois que vous avez créé les différentes images que vous souhaitez utiliser au sein de votre site Web Divi (en utilisant la technique Photoshop ci-dessus), le reste est simple. Les images que vous avez créées servent d'arrière-plan à une section particulière. Nous allons seulement vous montrer comment construire la section hero de notre exemple puisque la même méthode s'applique également aux différentes sections.

Ajouter une nouvelle section standard

Ajoutez une nouvelle page, basculez vers Visual Builder et ajoutez une nouvelle section standard à cette page.

Télécharger l'image d'arrière-plan

Une fois que vous avez placé tous les modules que vous souhaitez voir apparaître dans la section héros, vous pouvez continuer et ajouter l'image que vous avez créée dans la partie précédente de cet article.

Ajouter une couleur d'arrière-plan

Une fois que vous avez fait cela, vous pouvez décider quelle couleur apparaîtra dans la partie transparente de votre image. Dans cet exemple, nous avons utilisé '#dddddd' comme couleur d'arrière-plan. Vous pouvez immédiatement voir que la couleur apparaîtra directement dans la partie transparente de l'image.

Assurez-vous qu'il y a suffisamment de rembourrage

Selon le nombre de modules et la taille de votre bordure transparente que vous avez utilisée dans votre section héros, vous devrez peut-être ajouter un rembourrage personnalisé. Jouez avec les différentes valeurs de remplissage de section et voyez laquelle vous donne le meilleur résultat.

Ajouter la même couleur d'arrière-plan à la section suivante

Pour vous assurer que les différentes sections se marient bien les unes aux autres, utilisez également la même couleur d'arrière-plan que celle que vous avez utilisée dans votre section héros dans votre section suivante. Cela ne signifie pas nécessairement que vous devez utiliser une couleur d'arrière-plan d'une seule couleur pour votre prochaine section, vous pouvez utiliser un arrière-plan dégradé aussi longtemps que les couleurs des deux sections se mélangent parfaitement.

Exemple

Comme mentionné précédemment, vous pouvez créer autant de bordures d'images que vous le souhaitez et les utiliser de manière créative sur votre site Web. Pour vous en donner un avant-goût, nous avons créé l'exemple d'aperçu suivant :

Dernières pensées

Dans cet article, nous vous avons montré comment vous pouvez facilement utiliser des transitions de section de forme irrégulière. En utilisant cette méthode, vous pouvez essentiellement créer n'importe quel type de transition de section que vous désirez. En plus de vous montrer comment créer ces formes irrégulières en quelques étapes dans Photoshop, nous vous avons également montré comment vous pouvez ensuite les faire fonctionner dans Divi Builder. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !