Depuis lamp;rsquointroduction de lamp;rsquooption adhésive Divi, nous 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 damp;rsquoutiliser lamp;rsquooption adhésive pour améliorer lamp;rsquoexpérience utilisateur des gens sur votre site et faire briller votre site. Par exemple, dans le tutoriel damp;rsquoaujourdamp;rsquohui, nous montrerons comment utiliser lamp;rsquooption Divi permanent pour empiler les lignes au fur et à mesure quamp;rsquoelles défilent. Lorsquamp;rsquoune 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 pouvez également gratuitement les fichiers json dans cette section!
On y va. Aperçu avant damp;rsquoaller plus loin dans ce tutoriel, jetons un coup damp;rsquooeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Pour obtenir une disposition de couverture de ligne gratuite, devez damp;rsquoabord la en utilisant le bouton en bas. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire. Télécharger le fichier
Inscrivez à Divi Newsletter et nous enverrons par courriel une copie du dernier paquet de mise en page de la page damp;rsquoatterrissage Divi, ainsi quamp;rsquoun grand nombre damp;rsquoautres ressources, conseils et astuces Divi gratuits. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et cliquez sur pour accéder au paquet Layout.
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 travaillez. Ouvrez certains paramètres et appliquez des valeurs de remplissage personnalisées à différentes tailles damp;rsquoé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 damp;rsquoespacement personnalisée: Oui largeur damp;rsquoespacement: 1 hauteur de colonne équilibrée: Oui largeur: 90% largeur maximale: 2580 px Lamp;rsquoespacement 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 avez sélectionnée. Couleur de fond: 2b343b Lamp;rsquoimage de fond utilise également lamp;rsquoimage de fond. souhaitez utiliser le contenu affiché dans ce tutoriel, téléchargez le dossier compressé au début du tutoriel et Téléchargez lamp;rsquoimage de fond dans la médiathèque. Taille de lamp;rsquoimage de fond: appropriée Lamp;rsquoespacement passe à lamp;rsquoonglet 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 lamp;rsquoonglet 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 à lamp;rsquoonglet conception du formulaire et appliquer le style de texte suivant H3: en tête 3 caractères: en tête damp;rsquoaile 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 que lamp;rsquooption afficher le séparateur est activée. Afficher les séparateurs: Oui Les paramètres de ligne passent à lamp;rsquoonglet 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 Lamp;rsquoespacement e complète le réglage du module en ajoutant une marge inférieure au réglage de lamp;rsquoespacement. 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 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 damp;rsquoarticle empilable set Z index maintenant que nous avons placé la première ligne, il est temps damp;rsquoappliquer les paramètres de superposition de ligne collée. Nous appliquerons ces paramètres avant de cloner les lignes pour réutilisation afin que lamp;rsquoeffet damp;empilage se produise automatiquement. Ouvrez les paramètres de ligne, allez à lamp;rsquoonglet avancé et appliquez lamp;rsquoindex 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 damp;rsquoeffet 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 samp;rsquoassurer que les répliques de chaque réplique sont modifiées Changez la couleur de fond et lamp;rsquoimage de la colonne 1 ainsi que la couleur de fond et lamp;rsquoimage 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 lamp;rsquoarriè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 lamp;rsquoarrière plan de la lumière. Camp;rsquoest 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 nous montrons comment utiliser de façon créative lamp;rsquooption adhésive de Divi dans la conception de pages. Plus précisément, nous avons montré comment empiler les lignes pour créer une expérience de conception et damp;rsquoutilisateur convaincante. Nous avons recréé un bel exemple de design à partir de zéro, et pouvez également
Comment empiler les lignes pendant le défilement en utilisant l&rsquooption Divi Adhesive
