Télécharger la liste de défilement horizontale gratuite avec l’effet de défilement Divi

Poids du séparateur: 20px largeur: 11% alignement du module: hauteur centrale: 20px La bordure complète la configuration du module en ajoutant un rayon de bord. Bords: 20 pixels (tous les coins) Ajouter la structure de colonne de la ligne # 2 à la ligne suivante. Utilisez la structure de colonne suivante: Sans ajouter de module, ouvrez les paramètres de ligne et changez les valeurs de remplissage gauche et droite sur différentes tailles d’écran.
Remplissage à gauche: 0% (bureau), 5% (tablette et téléphone) remplissage à droite: 0% (bureau), 5% (tablette et téléphone) La colonne définit la couleur de fond, puis va aux paramètres de colonne et utilise la couleur de fond. Couleur de fond: \ # d0d5db L’espacement peut également changer les valeurs de remplissage des colonnes sur différents écrans de taille. Remplissage supérieur: 3% (bureau), 20% (tablette), 30% (téléphone) Remplissage inférieur: 2% (bureau), 15% (tablette), 20% (téléphone) Remplissage gauche: 2% (bureau), 10% (tablette et téléphone) Remplissage droit: 2% (bureau), 10% (tablette et téléphone) La bordure va ensuite à la configuration de la bordure et ajoute le rayon de la bordure au conteneur de colonne. Tous les angles: 30px Complétez la configuration de la colonne en ajoutant le code CSS de réponse. Nous utilisons css pour les ombres de boîte pour réaliser le style de conception Neum morphism qui combine deux ombres de boîte différentes. Cependant, si vous voulez changer le style général de votre conception, vous pouvez remplacer cette boîte d’ombre par une boîte d’ombre construite dans Divi. Nous nous assurons également que ces colonnes sont affichées colonne par colonne sur des écrans plus petits.
Bureau: Box Shadow: # a2b1c6 9px 9px 30px, # FFFFFF – 5px – 0px 40px; Tablettes et téléphones cellulaires: boxshadow: # a2b1c6 9px 9px 30px, # FFFFFF – 5px – 0px 40px;
Largeur: 100%! Important
Dépôt de garantie: 100px 0px 100px 0px! Important Débordement pour compléter la configuration de la colonne d’importation
Réglez le débordement à visible. Cela nous permettra de créer des superpositions que vous pouvez voir dans l’aperçu de cet article. Débordement horizontal: débordement vertical visible: visible Il est temps d’ajouter un module image à la colonne charger l’image, en commençant par le module image. Téléchargez l’image que vous avez sélectionnée. Alignement passez à l’onglet conception du formulaire et changez l’alignement de l’image. Alignement de l’image: Centre L’espacement ajoute également une marge supérieure négative. Marge supérieure: – 10% Le filtre passe ensuite aux paramètres du filtre et supprime toute saturation. Nous avons également ajouté d’autres comparaisons. Saturation: 0% contraste: 200% Complétez la configuration du module en repositionnant l’ensemble du module. Position: absolue: Centre supérieur Ajouter un formulaire Texte 1 à la colonne ajouter du contenu H3 le formulaire suivant dont nous avons besoin est un formulaire texte qui contient du contenu H3 de votre choix. Paramètres de texte H3 passer à l’onglet conception du module et modifier les paramètres de texte en conséquence H3: titre 3 caractères: raleway titre 3 poids de police: demi – gras titre couleur du texte 3: # 7e8a98 titre 3 taille du texte: 28 px Ajouter un module séparateur à la colonne séparateur d’affichage ajouter un module séparateur directement sous le module texte et s’assurer que l’option séparateur d’affichage est activée. Afficher les séparateurs: Oui Puis changez la couleur de la ligne du module. Couleur de ligne: # d7dce2 Le redimensionnement modifie également les paramètres de taille. Poids du séparateur: 20px largeur: 21% hauteur: 20px La limite va ensuite au réglage de la limite et utilise le rayon de la limite. Tous les angles: 20px Complétez la configuration du module en ajoutant le même type d’ombre que la boîte neumorphism à l’élément principal du module. Encore six livres.
O utilisez plutôt la boîte intégrée Shadow Divi. Ombres de boîte: # a2b1c6 9px 9px 30px, # FFFFFF – 5px – 0px 40px; Ajoutez le formulaire de texte 2 à la colonne ajouter du contenu. Ensuite, nous avons un autre formulaire de texte qui contient du contenu descriptif. Paramètres de texte modifier les paramètres de texte du formulaire comme suit: caractères de texte: couleur du texte raleway: # 7e8a98 hauteur de la ligne de texte: 2.7 emtext Alignment: left Enfin et surtout, nous avons besoin d’un module bouton – poussoir. Saisissez une copie de la sélection. Ensuite, passez à l’onglet conception et modélisez les boutons en conséquence: chaque bouton utilise un style personnalisé: Oui bouton taille du texte: 17 Px bouton couleur du texte: # 7e8a98 bouton couleur de fond: # d0d5db bouton largeur de la bordure: 0px Rayon du bord du bouton: 100 Px caractères du bouton: raleway Espacement nous apporterons également quelques modifications aux paramètres d’espacement. Marge inférieure: – 5% marge supérieure: 30px marge inférieure: 30px marge gauche: 100 Px (bureau et tablette), 50 Px (téléphone mobile) Marge droite: 100 Px (bureau et tablette), 50 Px (téléphone mobile) CSS Master element nous utiliserons la même ombre que la boîte neumorphism. Ombres de boîte: # a2b1c6 9px 9px 30px, # FFFFFF – 5px – 0px 40px; La position e complète la configuration du module bouton en repositionnant le module. Position: absolue: Centre inférieur Maintenant, dans la dernière partie de ce tutoriel, nous convertissons la deuxième ligne en une liste de défilement automatique. La première étape pour obtenir le résultat désiré est d’activer les paramètres de ligne et de changer les paramètres de taille comme suit: utiliser la largeur de gouttière personnalisée: Oui largeur de gouttière: 2 largeur: 220% (bureau), 100% (tablette et téléphone)