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

Publicat: 2023-06-14

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!

Cuprins
  • 1 Previziune
  • 2 De ce aveți nevoie pentru a începe
  • 3 Cum să adăugați un modul de hartă lipicioasă la pagina dvs. Divi
    • 3.1 Creați o pagină nouă cu un aspect prefabricat
    • 3.2 Modificarea aspectului pentru modulul Sticky Map
    • 3.3 Adăugați modulul Sticky Map
  • 4 Rezultatul final
  • 5 Gânduri finale

Privire pe furiș

Iată o previzualizare a ceea ce vom proiecta

Divi Adaugă modul de hartă lipicioasă Rezultat final mobil

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.

Modul Divi Add Sticky Map Utilizați Builder

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

Modul Divi Add Sticky Map Răsfoiește aspecte

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

Divi Adaugă modul de hartă lipicioasă Găsiți aspect

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

Modul Divi Add Sticky Map Utilizați aspectul

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.

Divi Adaugă secțiunea de inserare a modulului de hărți lipicioase

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

  • Fundal: #fcf8f3

Divi Adăugați fundal pentru modulul de hartă lipicioasă

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

Divi Adaugă modul de hartă lipicioasă Mută ​​rând

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

Divi Adaugă poziția modulului de hartă lipicioasă

Secțiunea „Vino în Studio”.

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

Divi Adaugă modul de hartă lipicioasă Inserează rând

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

Divi Adaugă modul de hartă lipicioasă Mută ​​rând

Setări titlu

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

Divi Adaugă modul de hartă lipicioasă Inserează text

Adăugați textul.

  • H2: Vino să vizitezi Studioul!

Divi Adăugați modul de hartă lipicioasă Adăugați text

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

  • Titlul 2 Font: Yusei Magic

Divi Adăugați font pentru modulul de hartă lipicioasă

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

Divi Adaugă dimensiunea titlului modulului hărți lipicioase

Setări text

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

Divi Adăugați modul de hartă lipicioasă Adăugați text

Introduceți următorul text.

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

Divi Adaugă textul adresei modulului de hartă lipicioasă

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

Divi Adaugă un font de text pentru modulul de hartă lipicios

Apoi, modificați stilurile de titlu.

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

Divi Adaugă fontul H3 pentru modulul H3 Sticky

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

Divi Adaugă modul H3 pentru hărți lipicioase

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.

Modul Divi Adaugă Hartă Lipicioasă Adaugă text

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

  • Font text: Deschideți Sans

Divi Adaugă setări de font pentru modulul de hărți lipicioase

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

Divi Adaugă dimensiunea textului modulului hărți lipicioase

Setări butoane

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

Buton de adăugare a modulului Divi Adaugă hărți lipicioase

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

  • Buton: Aflați mai multe

Divi Adaugă butoane pentru modulul Hartă lipicioasă Text

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

Divi Adaugă stiluri personalizate pentru modulul de hărți lipicioase

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

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

Butonul de fundal al modulului Divi Add Sticky Map

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)

Divi Adăugați font pentru buton pentru modulul de hartă lipicioasă

Î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

Suplimentarea butoanelor Divi Add Sticky Map Module

Secțiunea Membrii Studio

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

Divi Adăugați modul de hartă lipicioasă aspect rând

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

Divi Adaugă modul de hartă lipicioasă Mută ​​imaginea

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.

Divi Adaugă modul de hartă lipicioasă Mută ​​imaginea

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

Divi Adaugă modul de hartă lipicioasă Offset orizontal

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

  • Offset final: -1

Divi Adaugă modul de hartă lipicioasă Ending Offset

Text pentru abonamentul Studio

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

Divi Adaugă modul de hartă lipicioasă Eliminați fundalul

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

Divi Add Sticky Map Module Coloana 2 Setări

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

Divi Adăugați modul de hartă lipicioasă Eliminați padding

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.

Divi Adaugă modul de hartă lipicioasă Adaugă imagine de fundal

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”.

Divi Adăugați modul de hartă aderentă Adăugați modul de hartă

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.

Divi Adaugă modulul de hartă lipicioasă Adresa centrului hărții

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

Divi Adaugă un cod de hartă pentru modulul de hartă lipicioasă

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%

Divi Adaugă modulul Hartă lipicioasă Saturație hărții

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

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

Divi Adaugă setări de chenar pentru modulul de hartă lipicioasă

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

  • Box Shadow: Mai jos

Divi Add Sticky Map Module Box Shadow

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

Divi Adaugă Efecte de defilare pentru modulul de hartă lipicioasă

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

Divi Adaugă înălțimea modulului de hartă lipicioasă

Î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

Divi Adaugă modul de hartă lipicioasă înălțime mobilă

Rezultat final

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

Divi Adaugă modul de hartă lipicioasă Rezultat final mobil

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!