Cum să plasați sfaturile de instrumente Hover oriunde pe pagina dvs. cu Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați și să plasați sfaturi de instrumente de plasare oriunde pe pagina dvs. cu Divi. Aceasta este o modalitate excelentă de a partaja informații laterale cu vizitatorii dvs., fără a le include direct în pagină.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT layout-ul Hover Tooltips

Pentru a pune mâna pe aspectul gratuit al sfaturilor de ghidare, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Creați o pagină nouă utilizând aspectul paginii de pornire Dog Walker

Adăugați o pagină nouă

Primul lucru pe care va trebui să-l faceți este să creați o nouă pagină accesând Pagini> Adăugați o nouă pagină. Continuați dând paginii dvs. un titlu, publicând pagina și trecând la Visual Builder.

Încărcați pagina de destinație Dog Walker

Încărcați aspectul paginii de destinație în pagina următoare. Deși vom folosi acest pachet de aspect pentru a trece prin tehnica sfaturilor de ghidare a hover-ului, puteți face ca această abordare să se aplice pe orice tip de aspect la care lucrați.

Creați designul sfaturilor de instrumente Hover

Adăugați un rând nou în partea de jos a secțiunii

Structura coloanei (decideți câte indicii aveți nevoie)

După ce ați încărcat aspectul paginii de destinație, este timpul să începeți să creați sfaturile de instrumente cu mouse-ul. Le vom adăuga la un anumit loc de pe pagină, dar le puteți plasa oriunde folosind opțiunile de traducere a transformării. Găsiți următoarea secțiune pe pagina dvs. și adăugați un rând cu trei coloane în partea de jos a acesteia:

Lățimea maximă a rândului

Pentru a ne asigura că desenele de sfaturi de instrumente apar la locul potrivit, vom folosi aceeași lățime maximă a rândului ca cea utilizată pentru rândul care vine deasupra acestuia. Accesați setările de dimensionare ale rândului și reglați lățimea maximă în consecință:

• Lățime maximă: 1280 px

Spațiere

Pentru a reduce spațiul ocupat de containerul rândului, vom elimina umplutura implicită de sus și de jos din setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Revărsări

De asemenea, ne asigurăm că deversările rândului sunt vizibile în fila avansată.

• Overflow orizontal: vizibil
• Vertical Overflow: Vizibil

Adăugați modulul Text Tooltip în coloana 1

Adăugați conținut în caseta de conținut

Întrebare Mark Span

E timpul să începeți crearea primului design de tip tooltip! Vom folosi un modul de text. Vom adăuga un interval (pentru pictograma tooltip) și un div (pentru conținutul tooltip) în caseta de conținut. Acest lucru ne va oferi mai multă libertate de a stiliza pictograma de tip toolboard și conținutul tooltip în mod individual. Începeți prin adăugarea intervalului și atribuirea clasei „semnul întrebării”.

Tooltip Div

Continuați adăugând un div în caseta de conținut cu clasa „tooltip-content”. Adăugați conținutul de sfaturi de instrumente la alegere în această div.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Deschideți Sans
• Culoarea textului: #ffffff

Setări text H3

Modificați și setările de text H3.

• Rubrica 3 Font: Amatic SC
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 30 px

Dimensionare

De asemenea, ne jucăm cu lățimea și înălțimea modulului pentru a crea efectul de hover.

• Lățime: 300 px
• Înălțime: 42 px

Spațiere

Adăugați și niște umplutură de sus.

• Căptușeală superioară: 10 px

Vizibilitate implicită

Acum, în starea implicită, dorim ca tot ceea ce se află sub pictograma sfat să fie ascuns. De aceea, vom ascunde revărsările în fila avansată.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Plasați cursorul pe vizibilitate

Cu toate acestea, în timpul zborului, vrem să apară totul. Vom face acest lucru făcând revărsările să fie vizibile pe hover.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Adăugați un modul de cod sub modulul de text

Acum că am creat stilul modulului, trebuie totuși să stilizăm intervalul și divul din caseta de conținut folosind clasele CSS pe care i le-am atribuit. Adăugați un modul de cod chiar sub tooltip Text Module.

Adăugați cod CSS la Divizori de stil în modulul text

Adăugați următoarele linii de cod CSS pentru a stiliza diferitele părți ale modulului de text:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

Clonați Tooltip Text Module de două ori și plasați-le în coloanele rămase

Odată ce ați completat prima coloană, puteți clona de două ori modulul text de tip tooltip și puteți plasa duplicatele în cele două coloane rămase ale rândului.

Schimbați conținutul Tooltip

Asigurați-vă că modificați conținutul de sfaturi pentru fiecare duplicat.

Schimbați poziția indicativului (folosind Transform Translate)

Sfat de instrumente nr. 1

Nu în ultimul rând, va trebui să repoziționăm sfaturile de instrumente oriunde vrem pe pagină. Pentru a obține exact același rezultat care a fost afișat în previzualizarea acestui post, deschideți primul tooltip Text Module și aplicați următoarele valori de traducere:

• Dreapta: -450px (desktop), -2000px (tabletă), -1900px (telefon)

Sfat de instrumente nr. 2

Treceți la modulul Text de tip tooltip din a doua coloană și schimbați valorile de traducere transformate după cum urmează:

• Dreapta: -400px (desktop), -1300px (tabletă), -1250px (telefon)

Sfat de instrumente nr. 3

Faceți același lucru și pentru modulul Text Tooltip din coloana 3 și ați terminat!

• Dreapta: -500px (Desktop), -600px (Tabletă și telefon)

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați și să plasați sfaturi de ghidare oriunde pe pagina dvs., fără a fi nevoie de un plugin suplimentar. Acesta este un mod excelent de a adăuga informații suplimentare fără a le include direct pe pagina dvs. Acest tutorial pentru cazurile de utilizare face parte din inițiativa noastră de proiectare Divi, în curs de desfășurare, în care încercăm să introducem ceva suplimentar în setul de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări, asigurați-vă că lăsați o întrebare în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.