Comment empiler les lignes pendant le défilement en utilisant l’option Divi Adhesive

Depuis l’introduction de l’option adhésive Divi, nous vous avons montré comment utiliser différentes fonctionnalités lors de la construction du site, en particulier dans les titres. Cependant, il y a de nombreuses façons d’utiliser l’option adhésive pour améliorer l’expérience utilisateur des gens sur votre site et faire briller votre site. Par exemple, dans le tutoriel d’aujourd’hui, nous vous montrerons comment utiliser l’option Divi permanent pour empiler les lignes au fur et à mesure qu’elles défilent. Lorsqu’une ligne touche le Haut de la fenêtre, elle commence à tomber sous la ligne suivante, ce qui donne une bonne couverture. Nous allons recréer le design à partir de zéro et vous pouvez également télécharger gratuitement les fichiers json dans cette section!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Pour obtenir une disposition de couverture de ligne gratuite, vous devez d’abord la télécharger en utilisant le bouton en bas. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et obtenir un ACC
Il est disponible gratuitement avec le paquet de mise en page hebdomadaire Divi! Créer le concept de première ligne ajouter un nouvel espacement de section dans la première partie de ce tutoriel, nous commencerons à jeter les bases de la première ligne. Une fois que nous avons modélisé les éléments de la première ligne, nous pouvons les réutiliser complètement pour créer une superposition de la ligne de construction. Ajoutez une nouvelle section à la page que vous travaillez. Ouvrez certains paramètres et appliquez des valeurs de remplissage personnalisées à différentes tailles d’écran.
Remplissage vertical: Bureau: tablette de 100 pixels: 40px Téléphone: 25px remplissage inférieur: Bureau: tablette de 100 pixels: 40px Téléphone: 25px Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et appliquer les paramètres de redimensionnement suivants: utiliser une largeur d’espacement personnalisée: Oui largeur d’espacement: 1 hauteur de colonne équilibrée: Oui largeur: 90% largeur maximale: 2580 px L’espacement supprime ensuite tous les remblais supérieurs et inférieurs par défaut.
Remplissage supérieur: 0px remplissage inférieur: 0px La colonne définit la couleur de fond 1, puis ouvre les paramètres de la colonne 1 et applique la couleur de fond que vous avez sélectionnée. Couleur de fond: # 2b343b L’image de fond utilise également l’image de fond. Si vous souhaitez utiliser le contenu affiché dans ce tutoriel, téléchargez le dossier compressé au début du tutoriel et Téléchargez l’image de fond dans la médiathèque. Taille de l’image de fond: appropriée L’espacement passe à l’onglet conception de colonne et applique les valeurs de remplissage suivantes aux écrans de différentes tailles:
Remplissage en haut: Bureau: 25% tablette: 40% Téléphone: 50% remplissage en bas: Bureau: 25% tablette: 40% Téléphone: 50% remplissage à gauche: 5% remplissage à droite: 5
Entre: 50px Position e repositionner le module dans l’onglet avancé. Position: absolue: coin inférieur droit Ajouter le tableau de texte 1 à la colonne 2 et le contenu H3 à la deuxième colonne. Ajoutez le premier formulaire texte qui contient du contenu H3 de votre choix. Configuration du texte H3 passer à l’onglet conception du formulaire et appliquer le style de texte suivant H3: en – tête 3 caractères: en – tête d’aile 3 poids de police: en – tête gras couleur du texte 3: # FFFFFF en – tête 3 taille du texte: 40 px Ajouter un module séparateur à la colonne 2 visibilité sous le premier module texte, nous ajouterons un module séparateur. Assurez – vous que l’option afficher le séparateur est activée. Afficher les séparateurs: Oui Les paramètres de ligne passent à l’onglet conception du module et changent la couleur de ligne. Couleur de ligne: # f3f0ee Le redimensionnement modifie également les paramètres de taille. Poids du séparateur: 5px largeur: 19% hauteur: 5px L’espacement e complète le réglage du module en ajoutant une marge inférieure au réglage de l’espacement. Marge bénéficiaire inférieure: 20% Ajouter un formulaire Texte 2 à la colonne 2 ajouter un autre formulaire texte directement sous le formulaire séparateur. Saisissez une partie de la description que vous avez sélectionnée. Paramètres de texte styles appropriés formulaire texte: caractères de texte: Montserrat couleur du texte: # FFFFFF taille du texte: Bureau: 15px tablette et téléphone: 14px hauteur de la ligne de texte: 2em 2. Convertissez cette ligne en ligne d’article empilable set Z index maintenant que nous avons placé la première ligne, il est temps d’appliquer les paramètres de superposition de ligne collée. Nous appliquerons ces paramètres avant de cloner les lignes pour réutilisation afin que l’effet d’empilage se produise automatiquement. Ouvrez les paramètres de ligne, allez à l’onglet avancé et appliquez l’index z 1. Cet indice Z nous aidera
Tirez la ligne suivante au – dessus de la ligne précédente. Z Index: 1 Paramètres permanents ensuite, nous allons aux paramètres d’effet de défilement et appliquons les paramètres permanents suivants: position collante: Bureau: rester en haut de la tablette et du téléphone: ne pas coller limite collante inférieure: décalage par rapport aux éléments collants environnants: Non 3. Réutiliser la ligne de clone de ligne empilée X3 dans la même section maintenant que notre option permanente a été appliquée, nous pouvons réutiliser la ligne entière au besoin. Modifications générales modifier toutes les répliques s’assurer que les répliques de chaque réplique sont modifiées Changez la couleur de fond et l’image de la colonne 1 ainsi que la couleur de fond et l’image de la colonne 1. Répéter 1: \ # edc1b6répéter 2: \ # efe7e2 répéter 3: \ # f7f6f4 Changez la couleur de fond de la colonne 2 nous utilisons également une couleur différente pour la deuxième colonne de chaque ligne répétée. Répétez 1: # ffd1c1répétez 2: # fff8f2répétez 3: # fffaf7 Changez la couleur de fond du bouton ensuite, nous changerons la couleur de fond du bouton dans chaque ligne répétée. Copie 1: # c18a7a copie 2: # bab5b2 copie 3: # c98f7d Les lignes qui changent l’arrière – plan de la lumière changent la couleur du texte et, enfin et surtout, nous changeons la couleur du texte pour chaque forme de texte dans la ligne de l’arrière – plan de la lumière. C’est tout! Couleur du texte: # 2b343b Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment utiliser de façon créative l’option adhésive de Divi dans la conception de pages. Plus précisément, nous vous avons montré comment empiler les lignes pour créer une expérience de conception et d’utilisateur convaincante. Nous avons recréé un bel exemple de design à partir de zéro, et vous pouvez également