Afficher une image parallaxe conforme à Divi en utilisant l’arrière – plan du module

Quelques copies. Ajouter un lien ajoute également un lien au bouton. Boutons basculer vers l’onglet conception et définir les boutons du modèle en conséquence: taille du texte du bouton: Bureau: tablette 1vw: 2vw Téléphone: 4vw couleur du texte du bouton: gris foncé # 3d3d3d largeur de la bordure du bouton: 1px caractères du bouton: EB garamond L’espacement ajuste ensuite le réglage de l’espacement des boutons. Marge supérieure: Bureau + tablette: 1vw marge inférieure: téléphone mobile: 5vw Ajoutez le premier formulaire texte à la colonne 2 Ajoutez le contenu à la colonne suivante! Ajoutez un formulaire texte contenant le contenu H4 de votre choix. L’arrière – plan continue en ajoutant une image d’arrière – plan. Téléchargez une image de fond avec parallaxe css pour votre bureau et utilisez une image normale (pas de parallaxe CSS) sur un petit écran. Fond du Bureau: Image parallèle: fond de la tablette CSS + téléphone: Image Ensuite, vous n’ajoutez l’arrière – plan de la rampe que lorsque vous déplacez la souris. Fond lorsque la souris passe: gradient de couleur gradient de couleur 1: or clair # edba63 gradient de couleur 2: or # ed9d12 direction du gradient: 23 degrés placez le gradient au – dessus de l’image de fond: Oui Le texte du titre passe à l’onglet conception et modifie les paramètres du texte H4. Niveau du titre du texte: H4 caractères H4: EB garamond text Color H4: White # FFFFFF text Size H4: desktop: 2.3vw tablette: 4.5vw mobile: 8.5vw L’espacement est ensuite ajusté. Marge supérieure: téléphone mobile: – 6vw marge supérieure: Bureau: 15vw tablette: 22vw téléphone mobile: 43vw marge inférieure: Bureau + tablette: 1vw marge gauche et droite: Bureau et tablette: 1,5vw téléphone mobile: 5vw Les limites continuent de façonner les bords. Filet: 1vw tous les styles de bord d’angle: tous les bords largeur: 0.3vw couleur du bord: blanc T
Colonne 1 à colonne 4 copiez et faites glisser le bouton copier le module de bouton dans la colonne 1. Faites – le glisser dans la colonne 3 sous le formulaire texte. L’espacement est terminé en ajustant certaines valeurs d’espacement dans le module copier le bouton! Marge inférieure: 0vw marge gauche: Bureau + tablette: 0,7vw téléphone mobile: 0,9vw Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Conclusion dans cet article, nous vous montrons comment créer un parallaxe en ligne avec quatre zones de texte montrant différentes parties d’une même image. Nous espérons que vous aimez ce design et si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!