écraser le module Divi avec opacité, remplissage et marges négatives

L’une des caractéristiques les plus sous – utilisées et sous – estimées de Divi est le curseur d’opacité. Vous pouvez le trouver à de nombreux endroits différents dans le constructeur afin que vous puissiez contrôler à tout moment l’apparence de tous les modules et de leurs éléments par rapport aux autres modules et à leurs éléments. Vous pouvez également combiner la fonction d’opacité de Divi avec la transparence d’image (PNG) pour créer l’illusion que les éléments de votre site sont empilés les uns sur les autres. Mieux encore, vous pouvez le faire sans perturber les écrous et les boulons du flotteur CSS et de l’axe Z.
Dans ce tutoriel, j’aimerais vous montrer comment utiliser Divi Builder pour combiner ces éléments en sections ou modules propres que vous pouvez adapter à votre propre site Web. Voici quelques exemples de ce que vous pouvez réaliser après ce tutoriel. Les exemples sont organisés en sections pour montrer comment ils interagissent avec d’autres éléments et arrière – plans, mais pas comme des sites fonctionnels. Créez la première section en créant d’abord une nouvelle page dans le tableau de bord WordPress, puis en sélectionnant un modèle de page vierge. Vous devez activer le réglage de la section en appuyant sur le rapport bleu. Cliquez ensuite sur l’onglet arrière – plan et sélectionnez un troisième onglet pour ajouter une image de fond. Téléchargez votre sélection et assurez – vous d’avoir la taille de l’image de fond à écraser. Ensuite, vous modifierez le remplissage personnalisé dans la section espacement de l’onglet conception en haut: 55px en bas: 255 px Vous pouvez maintenant commencer à ajouter des éléments aux modules à empiler. Tout d’abord, ajoutez une nouvelle ligne à deux colonnes et accédez aux paramètres. Ensuite, dans l’onglet conception, réglez l’alignement à droite et les marges personnalisées à 10%. Dans une seule ligne, ajoutez un module image (A dans l’image ci – dessus) en haut et un module d’appel à l’opération (b) en dessous. Un pas en avant.
De cette façon, le contenu de la section suivante s’affiche également au – dessus, tout en ajustant ses marges. Une fois terminé, vous avez terminé la première couverture multicouche transparente sans CSS! Félicitations. Il semble que vous devriez les aligner avec différentes valeurs de l’axe Z et d’autres codes de localisation. Créez la deuxième partie d’abord, créez la partie centrale exactement comme la première partie. Cependant, lorsque vous êtes en configuration, nous jouons quelques arrière – plans. Définissez la couleur de fond dans le premier onglet à # 8bd9d5. Ajoutez une image de fond au troisième onglet. Utilisez une image simple d’un seul objet avec un fond transparent et une couverture comme mesure. Sélectionnez la luminosité comme mélange d’image de fond pour correspondre à la couleur (le mélange de couleurs ne fonctionnera pas si vous choisissez d’utiliser parallaxe). Sous l’onglet conception, sous espacement, spécifiez une section de remplissage supérieure de 60px. Ligne 1 vous devez maintenant ajouter une ligne à deux colonnes avec le module image à gauche et le curseur à droite. Une fois ajouté, allez aux paramètres de ligne. Il n’y a que deux changements: réglez l’arrière – plan en noir, l’opacité à 38%, et ajoutez la même ombre que la boîte précédente. L’image d’angle fixe maintenant l’heure à laquelle l’image flotte dans le coin. Dans les paramètres du module image, Téléchargez l’image. De même, l’utilisation d’un PNG transparent est plus efficace. Nous couvrirons l’image au coin, de sorte que les formes au – delà d’un angle de 90 degrés semblent meilleures. Une fois terminé, l’onglet conception attendra.
Alignement de l’image: toujours centrer à gauche l’image sur l’appareil mobile: Oui (semble mieux et reste superposé) Marge supérieure: – 25%, marge inférieure: 15%, marge gauche: – 25% ces marges négatives vous permettent d’obtenir l’image n’importe où sur la page où vous voulez l’image parce que vous définissez l’étoile
La partie molle des deux parties supérieures. La dernière partie je veux couvrir la troisième et dernière partie avec un film transparent intégré. J’ai toujours aimé l’arrière – plan mélangé avec des éléments qui se chevauchent, donc j’ai pris une image d’une femme avec un arrière – plan transparent et je voulais l’écraser avec le formulaire Divi contact. Littéralement, le seul changement que nous avons apporté aux paramètres de partition était de lui donner un fond noir. Alors fais – le d’abord. Par conséquent, vous avez besoin d’une ligne à une seule colonne et vous n’avez même pas besoin de cliquer sur paramètres. Je vous en prie. Tout ce que vous devez faire maintenant est d’ajouter un formulaire image et un formulaire de contact. Une fois terminé, ouvrez les paramètres de l’image. Ici, vous ne changerez qu’une seule option: la marge inférieure. Bureau: – tablette de 350 pixels: – smartphone de 100 pixels: – 50 pixels c’est tout. Cela ne nécessite même pas beaucoup d’ajustements. Les femmes dans le formulaire de contact sont faciles à configurer. Comment configurer le formulaire de contact? Tu n’as rien à faire. Cet exemple n’utilise que le style par défaut. Parce qu’il est transparent lorsqu’il est ajouté à la mise en page, l’arrière – plan PNG est parfaitement fusionné. Cependant, si vous voulez une transition visuelle très mince vers le formulaire de contact, allez à l’onglet conception et changez le filtre en mode mixte en écran. De cette façon, les champs de l’entreprise seront légèrement translucides, de sorte que vous pouvez voir une faible ombre de l’image derrière eux. Ce sont les effets qui font sourire les visiteurs du site. Ce n’est pas vraiment une micro – interaction, mais elle a le même effet. C’est un peu propre, non? C’est tout, c’est tout! J’espère que tu trouves ça aussi intéressant que moi. La capacité de faire des choses intéressantes sans CSS, comme la couverture et la conception multicouche, est fantastique. Par conséquent, si vous cherchez un moyen d’animer votre projet, envisagez de rendre les choses transparentes. Contournement des images et