Cum să adăugați un modul de hartă lipicioasă la pagina dvs. Divi

Setările încorporate ale Divi vă permit să păstrați un element „lipicios” sau fix pe ecran în timp ce derulați în jos pe pagină. Atunci când sunt combinate cu alte elemente nelipicioase, puteți obține un aspect atrăgător și captivant pentru a aduce designul site-ului dvs. la nivelul următor. În acest tutorial, vă vom arăta cum să adăugați un modul de hartă lipicioasă la pagina dvs. Divi. Vom păstra modulul hărții lipicios și vom adăuga informații relevante pentru a derula alături de hartă.

Fără alte prelungiri, să începem!

Privire pe furiș

Iată o previzualizare a ceea ce vom proiecta

De ce aveți nevoie pentru a începe

Înainte de a începe, instalați și activați Tema Divi și asigurați-vă că aveți cea mai recentă versiune a Divi pe site-ul dvs.

Acum, sunteți gata să începeți!

Cum să adăugați un modul de hartă lipicioasă la pagina dvs. Divi

Creați o pagină nouă cu un aspect prefabricat

Să începem prin a folosi un aspect prefabricat din biblioteca Divi. Pentru acest design, vom folosi Pagina de destinație a Școlii de meșteșuguri din Pachetul de amenajare a școlii de meșteșuguri.

Adăugați o pagină nouă pe site-ul dvs. și dați-i un titlu, apoi selectați opțiunea Utilizați Divi Builder.

Vom folosi un aspect prefabricat din biblioteca Divi pentru acest exemplu, deci selectați Răsfoire layout-uri.

Căutați și selectați Pagina de destinație a școlii de meserii.

Selectați Utilizați acest aspect pentru a adăuga aspectul paginii dvs.

Acum suntem gata să ne construim designul.

Modificarea aspectului pentru modulul Sticky Map

Înscrieți-vă CTA

Derulați la secțiunea „Studio Memberships” a paginii. Apoi, adăugați o nouă secțiune mai jos.

Deschideți setările secțiunii și adăugați o culoare de fundal.

• Fundal: #fcf8f3

Apoi, mutați rândul „Apelați sau alăturați-vă online” în această nouă secțiune.

Deschideți setările rândului și navigați la fila Avansat. Sub setările Poziție, schimbați poziția de la Absolut la Implicit.

• Poziție: implicit

Secțiunea „Vino în Studio”.

Adăugați un rând nou cu două coloane sub secțiunea Membrii Studio.

Apoi, mutați acel rând deasupra secțiunii Studio Memberships.

Setări titlu

Adăugați un modul de text în coloana din dreapta.

Adăugați textul.

• H2: Vino să vizitezi Studioul!

Apoi, navigați la fila Design și deschideți setările textului titlului. Personalizați fontul după cum urmează:

• Titlul 2 Font: Yusei Magic

Apoi, personalizați dimensiunea fontului și înălțimea liniei. Utilizați opțiunile de răspuns încorporate pentru a adăuga diferite dimensiuni de text pentru tabletă și dispozitive mobile.

• Titlul 2 Dimensiunea textului desktop: 50px
• Titlul 2 Dimensiunea textului Tablet: 30px
• Titlul 2 Dimensiunea textului mobil: 24px
• Titlul 2 Înălțimea liniei: 1,2 em

Setări text

Adăugați un alt modul de text sub textul „Vino să vizitezi studioul”.

Introduceți următorul text.

• H3: Adresa
• Paragraf: 1234 Divi St. #1000 San Francisco, CA 33945

Sub fila Design, modificați stilurile de text.

• Font text: Deschideți Sans
• Dimensiunea textului desktop: 16px
• Dimensiunea textului tabletei: 15px
• Dimensiunea textului mobil: 13px

Apoi, modificați stilurile de titlu.

• Titlul 3 Font: Open Sans
• Titlul 3 Greutatea fontului: aldine
• Stilul fontului titlul 3: cu majuscule (TT)

Apoi, modificați dimensiunea textului și spațierea dintre litere. Încă o dată, utilizați setările de răspuns pentru a seta diferite dimensiuni de text pentru diferite dimensiuni de ecran.

• Titlul 3 Dimensiunea textului desktop: 14px
• Titlul 3 Dimensiunea textului Tablet: 13px
• Titlul 3 Dimensiunea textului mobil: 12px
• Titlul 3 Spațiere dintre litere: 3px

Adăugați un alt modul de text sub modulul de adresă.

Apoi, adăugați următorul conținut în corp:

• Corp: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.

Treceți la fila design și personalizați fontul.

• Font text: Deschideți Sans

Apoi, personalizați dimensiunea textului și înălțimea liniei.

• Dimensiunea textului desktop: 15px
• Dimensiunea textului mobil: 13px
• Înălțimea liniei textului: 1,9 em

Setări butoane

Adăugați un modul de buton la secțiune, sub textul pe care l-am adăugat.

Setați textul butonului la „aflați mai multe”.

• Buton: Aflați mai multe

Apoi, treceți la fila design și deschideți setările butonului. Activați stilurile personalizate.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiunea textului butonului: 12px
• Culoarea textului butonului: #FFFFFF

Personalizați fundalul butonului și lățimea chenarului.

• Fundalul butonului: #d5b38e
• Lățimea chenarului butonului: 0px

Modificați raza marginii butonului, spațierea dintre litere și fontul.

• Raza chenarului butonului: 0px
• Spațiere între litere butoane: 3px
• Font pentru buton: Deschide Sans
• Greutatea fontului butonului: aldine
• Stil de font pentru buton: cu majuscule (TT)

În cele din urmă, adăugați umplutură la buton.

• Căptușeală-Sup: 15px
• Căptușeală-partea inferioară: 15px
• Umplutură-stânga: 30px
• Umplutură-Dreapta: 30px

Secțiunea Membrii Studio

Acum vom modifica secțiunea Membrii Studio. Mai întâi, modificați aspectul rândului la două coloane egale.

Apoi, mutați imaginea mare în coloana din dreapta, deasupra modulului de text „Studio Memberships”.

Setări de derulare a imaginii

Mutați imaginea mică derulată a ceramicii în coloana din dreapta, deasupra imaginii mari pe care am mutat-o.

Deschideți setările modulului pentru imaginea mică. Sub setările Dimensiune, utilizați setările de răspuns pentru a seta o lățime diferită pentru dispozitivele mobile.

• Latime-Mobil: 35%

Sub fila Avansat, deschideți setările de poziție și adăugați o decalare orizontală. Acest lucru permite ca imaginea mică să atârne pe partea laterală a imaginii mai mari, adăugând dimensiune și creând un aspect mai unic.

• Offset orizontal: -30px

În cele din urmă, deschideți efectele de defilare și ajustați offset-ul final pentru mișcarea verticală.

• Offset final: -1

Text pentru abonamentul Studio

Deschideți setările modulului de text Studio Memberships. Îndepărtați fundalul din modul.

Apoi, deschideți setările rândului și deschideți setările coloanei 2.

Sub setările Spațiere din fila Design, eliminați umplutura de jos existentă.

Secțiunea Fundal

Deschideți setările secțiunii. Sub setările de fundal, adăugați o imagine de fundal. Selectați craft-school-24.png din biblioteca dvs. media.

Adăugați modulul Sticky Map

Acum că aspectul nostru a fost modificat, putem adăuga modulul de hartă lipicioasă. Modulul hărții va fi în coloana din stânga și va rămâne pe loc în timp ce parcurgeți conținutul din dreapta. Să începem.

Mai întâi, adăugați un modul de hartă în coloana din stânga a rândului „Vino să vizitezi Studioul”.

Deschideți setările hărții și adăugați o adresă pentru centrul hărții. Pentru acest tutorial, vom centra harta pe San Fransisco, CA.

Apoi, adăugați un indicator pe hartă. De asemenea, vom seta acest lucru la San Fransisco, CA.

Design Harta

Sub fila design, deschideți setările hărții. Puteți utiliza aceste setări pentru a personaliza complet modul în care apare harta. Pentru acest tutorial, dorim ca harta să se potrivească cu culorile dezactivate ale acestei pagini, așa că vom modifica saturația hărții.

• Saturație hărții: 56%

Apoi, deschideți setările de chenar și personalizați chenarul după cum urmează:

• Lățimea chenarului: 20px
• Culoare chenar: #fcf8f3

Deschideți setările Box Shadow și adăugați o umbră la modulul hărții.

• Box Shadow: Mai jos

Setări Sticky

Acum să adăugăm setările lipicioase, astfel încât harta să rămână pe loc în timp ce derulați. Treceți la fila Avansat și deschideți Setările Efecte de derulare. Utilizați opțiunile de răspuns pentru a modifica setările de poziție lipicioasă, deoarece harta nu va fi lipicioasă pe dispozitivele mobile.

• Sticky Position Desktop: Stick to Top
• Sticky Position Tabletă și mobil: Nu lipiți
• Offset superior lipicios: 20px
• Limită inferioară lipicioasă: secțiune

Acum reveniți la fila Design și deschideți setările de dimensionare. Dorim ca înălțimea hărții să crească atunci când este în stare lipicioasă. Utilizați setările sticky pentru a seta o înălțime diferită.

• Înălțime când este lipicios: 600 px

În cele din urmă, utilizați setările de răspuns pentru a modifica dimensiunea hărții pe tabletă și mobil.

• Înălțime tabletă și mobil: 350px

Rezultat final

Acum să aruncăm o privire la modulul nostru de hărți lipicioase în acțiune.

Gânduri finale

Setările lipicioase ale Divi vă permit să creați layout-uri dinamice pentru site-uri web care vă atrag privirea odată cu mișcarea. Cu toate opțiunile de personalizare disponibile, puteți face orice element de pe site-ul dvs. web lipicios și puteți modifica designul exact după cum doriți. Făcând modulul hărții lipicios în acest design, evidențiem informațiile despre locație pentru site-ul web și adăugăm un element de design unic paginii. Pentru mai multe tutoriale despre setările sticky ale Divi, consultați acest articol despre adăugarea unui formular de contact sticky la pagina dvs. Folosești elemente lipicioase pe site-ul tău? Ne-ar plăcea să auzim de la tine în comentarii!