Comment créer un masque de fond collant en utilisant Divi

L’espacement passe à l’onglet conception de section et supprime tous les remblais supérieurs et inférieurs par défaut dans les paramètres d’espacement. Remplissage supérieur: 0px remplissage inférieur: 0px Débordement masquer le débordement de section dans l’onglet avancé suivant. Débordement horizontal: masquer le débordement vertical: masquer Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et modifier les paramètres de taille en conséquence: largeur: 100% largeur maximale: 100% L’espacement supprime également tous les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Filtre nous ajoutons également un mode de fusion à cette ligne. Ce mode de fusion nous aidera à créer des masques plus loin dans ce tutoriel.
Mode de fusion: écran Index Z pour nous assurer que la ligne se trouve sous la deuxième ligne que nous ajouterons à cette section, nous éditons l’index Z dans l’onglet avancé. Indice Z: 9 Paramètres de colonne ensuite, nous allons ouvrir les paramètres de colonne. Couleur de fond nous utilisons une couleur de fond entièrement blanche. Toute autre couleur que vous utilisez ici sera affichée par une image de fond partielle, donc assurez – vous d’utiliser le blanc complet. Couleur de fond: # FFFFFF Nous ajoutons également des valeurs de hauteur à l’élément principal de l’onglet avancé. Une fois que la ligne devient collante, cette hauteur fait que la colonne couvre toujours toute l’image de fond de la section.
Hauteur: 100 VH; Ajouter un formulaire de texte à une ligne ajouter un formulaire de texte à sa colonne après avoir laissé la zone de contenu vide pour compléter la configuration de la ligne. Laisser la case Co vide
Entretien. Au lieu de cela, nous utilisons ce formulaire pour créer une forme qui affiche une partie de l’image de fond de la section. Couleur de fond pour permettre au mode Fusion d’afficher une partie de l’image de fond de la zone, nous utilisons une couleur de fond plus foncée dans ce module. Couleur de fond: # 0b3835 Ensuite, nous passons à l’onglet conception et modifions les paramètres de taille comme suit: Largeur: Bureau: 20vw tablette et téléphone: 70vw hauteur: Bureau: 30vh tablette et téléphone: 10 VH Espacement nous avons également ajouté une marge supérieure. Marge supérieure: 3vh Limite, nous allons inclure quelques filets. Tous les angles: 15px Ajouter une structure de colonne continue de ligne # 2 en ajoutant une autre ligne à la section en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et apporter les modifications suivantes aux paramètres de taille: largeur: 100% largeur maximale: 100% L’index Z augmente également l’index Z de la ligne. Cela aidera à s’assurer que le contenu de la ligne reste en haut de la ligne précédente.
Indice Z: 12 Il est temps d’ajouter un formulaire texte à la ligne d’ajout de contenu H2, en commençant par le premier formulaire texte qui contient un certain contenu H2 que vous avez sélectionné. Paramètres du texte H2 modèle paramètres du texte H2 comme suit: titre 2 caractères: Playfair afficher le titre 2 alignement du texte: Centre de couleur du texte titre 2: # 0b3835 titre 2 taille du texte: Bureau: tablette de 150 pixels et téléphone mobile: 45px hauteur de la ligne de titre 2: 1.2em Ensuite, allez aux paramètres de taille et appliquez les paramètres suivants: largeur maximale: 980 Px alignement du module: Centre L’espacement comprend également une marge supérieure négative. Ajouter un module bouton à la ligne ajouter une copie du module suivant et du dernier que nous avons bis
Regardons enfin les résultats sur différents écrans de taille. Table mobile dernière idée dans cet article, nous vous montrons une fois de plus comment innover avec l’option adhésive de Divi. Plus précisément, nous vous avons montré comment créer un masque de fond adhésif en combinant les paramètres du filtre Divi et les options adhésives. Vous pouvez également télécharger gratuitement les fichiers json. Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.