Pour créer une transition de section irrégulière en utilisant Divi

L’une des meilleures façons d’améliorer la conception d’un site Web est d’utiliser différentes transformations de partitions. Dans l’article précédent, nous vous avons montré comment le faire en utilisant uniquement les options intégrées de Divi. Cependant, si vous voulez créer un contenu plus avancé ou personnalisé, vous pouvez également créer des transitions de sections irrégulières. En raison de sa complexité, la meilleure façon de traiter ce problème est d’utiliser une image avec une bordure transparente. Dans cet article, nous vous montrerons comment le faire. Nous vous montrerons non seulement comment travailler dans Divi Builder, mais aussi comment créer ces bordures transparentes sur l’image en quelques étapes avec Photoshop.
Exemple de résultat regardons un exemple de mise en page avec une transition de section spéciale de forme irrégulière: Comme vous pouvez le voir, vous pouvez utiliser ces bordures transparentes tout au long du site et dans différentes parties. Il est important de garder à l’esprit que, selon la taille de la bordure transparente, il devrait y avoir suffisamment d’espace dans la zone pour accommoder les différents contenus à partager. Il établira également un bon équilibre entre les différentes parties. Comment utiliser Divi pour s’abonner à nos canaux YouTube pour créer des transitions de section irrégulières
Utilisez Photoshop pour créer une bordure transparente utilisez Photoshop pour obtenir la forme originale souhaitée. Vous pouvez également choisir un produit de remplacement gratuit appelé gimpshop. Cependant, dans ce tutoriel, nous utiliserons Photoshop. L’ouverture de Photoshop commence par l’ouverture de Photoshop sur votre ordinateur. Ouvrir l’image après avoir fait cela, ouvrez l’image à traiter. Après avoir double – cliqué sur l’image et créé le calque pour télécharger l’image dans Photoshop, double – cliquez sur le calque d’image et créez un nouveau calque (niveau 0). Ajouter un autre calque pour ajouter une bordure transparente, vous avez besoin d’un autre calque, Donc continuez à l’ajouter
Ou cliquez sur l’icône que nous avons marquée sur l’écran d’impression ci – dessous. Après avoir créé le calque (niveau 1), assurez – vous qu’il est placé au – dessus du calque contenant l’image. Lorsque vous activez le niveau 1, sélectionnez le pinceau et la taille, continuez et cliquez sur l’icône du pinceau. Une fois terminé, vous pouvez ajuster la taille et le motif du pinceau en fonction de vos préférences. Il y a beaucoup de pinceaux Photoshop gratuits sur Internet, donc choisissez le bon en fonction du type de site que vous créez. De plus, assurez – vous que l’opacité est réglée à 100%. Après avoir commencé à placer le pinceau avec le pinceau sur les bords, commencez à utiliser le pinceau sur le côté que vous voulez qu’il soit transparent. Assurez – vous de couvrir tout le bord avec un pinceau afin que tout soit transparent plus tard. Ctrl (Windows) ou Command (MAC) + une fois que vous avez sélectionné un nouveau calque, vous pouvez appuyer sur Ctrl (Windows) ou Command (MAC) sur votre clavier et cliquer sur le niveau 1. Vous verrez que Photoshop sélectionne tout ce qui est ajouté à ce calque, dans ce cas, la limite de contour. Ensuite, retirez les yeux marqués sur l’écran d’impression ci – dessous afin que la couche 1 ne soit pas visible. Sélectionnez l’image et supprimez la nouvelle couche, puis cliquez sur la couche contenant l’image et appuyez sur le bouton Supprimer sur le clavier. Une fois terminé, vous verrez que les bords deviennent transparents. Sélectionnez l’outil de sélection rectangulaire et cliquez sur l’image cliquez sur l’outil de sélection rectangulaire et appuyez au hasard n’importe où sur l’image. Enregistrer l’image sous PNG Enfin, vous devez enregistrer l’image sous PNG pour l’utiliser sur le site. Ajoutez du papier peint à Divi une fois que vous avez créé les différentes images que vous souhaitez utiliser sur le site Divi (en utilisant la technologie Photoshop ci – dessus), r
C’est simple. L’image que vous créez sert de fond à une section particulière. Nous ne vous montrerons que comment construire la partie héroïque de l’exemple, car la même approche s’applique à différentes parties.
Ajouter une nouvelle section standard ajouter une nouvelle page, passer à Visual Builder, puis ajouter une nouvelle section standard à la page. Après avoir placé tous les modules à afficher dans la section héros, vous pouvez continuer à ajouter les images que vous avez créées dans la section précédente de cet article. Ajouter une couleur de fond une fois cela fait, vous pouvez décider quelle couleur apparaîtra dans la partie transparente de l’image. Dans cet exemple, nous utilisons \ Assurez – vous qu’il y a suffisamment de remplissage, en fonction du nombre de modules et de la taille de la bordure transparente que vous utilisez dans la section Heroes, vous devrez peut – être ajouter un remplissage personnalisé. Utilisez les différentes valeurs de remplissage de cette section pour voir quelle valeur de remplissage est la meilleure. Ajoutez la même couleur de fond à la section suivante pour vous assurer que les différentes sections sont bien mélangées, utilisez la même couleur de fond que vous utilisez dans la section héros de la section suivante. Cela ne signifie pas nécessairement que vous devez utiliser la couleur de fond pour la partie suivante, et vous pouvez utiliser l’arrière – plan gradué à condition que les deux parties soient parfaitement mélangées.
Comme indiqué ci – dessus, vous pouvez créer autant de bordures d’image que vous le souhaitez et les utiliser de façon créative dans l’ensemble du site. Pour vous donner un avant – goût, nous avons créé l’exemple suivant: Dans la dernière réflexion de cet article, nous vous montrons comment utiliser facilement les transitions de section de forme I
Réajuster. Avec cette méthode, vous pouvez en fait créer n’importe quel type de transition de section que vous voulez. En plus de vous montrer comment créer ces formes irrégulières en quelques étapes dans Photoshop, nous vous avons montré comment l’utiliser 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 et à YouTube Channel afin que vous ne manquiez pas de belles annonces, des conseils utiles ou des cadeaux Divi!