Creați o Carte de Vizită Digitală Virtuală
Creați o Carte de Vizită Digitală Virtuală – În acest tutorial veți învăța cum să creați o carte de vizită digitală (virtuală) care poate fi partajată pentru a vă promova afacerea pe propriul site web. Cardul dvs. va arăta grozav pe desktop și dispozitive mobile și îl puteți partaja într-o varietate de moduri.
Cerințe preliminare: Acest tutorial de nivel intermediar presupune cunoștințe de bază despre widget-urile și stilul Elementor. Vom lăsa linkuri relevante în descriere, dacă doriți să revizuiți.
Tutorialul va acoperi:
✔︎ Crearea unei cărți de vizită digitale
✔︎ Utilizarea butoanelor de partajare și pictogramelor sociale
✔︎ Prezentați-vă portofoliul
✔︎ Adăugarea și conectarea unui pop-up
✔︎ Cum să-ți partajezi cardul
✔︎ Și multe altele!
Pentru confortul dvs. urmăriți acest Tutorial în format Video. Video creat de echipa de asistență Elementor.
Transcriere VideoClip
Vă amintiți cărțile de vizită din hârtie? Trebuia să le cărăm oriunde mergeam. Am tipări câteva mii odată, doar pentru a le arunca și a le retipări pentru fiecare modificare mică. Vremuri bune!
Bună, sunt Aviva de la Elementor. În zilele noastre, cărțile de vizită digitale sunt un must-have pentru profesioniștii în rețele.
Și, deși nu lipsesc site-urile web care oferă acest serviciu, astăzi vom afla cum ne putem crea și personaliza complet propria noastră pagină de destinație a cardului digital, în Elementor.
Crearea propriului card vine cu o mulțime de beneficii.
- În primul rând, este gratuit! Utilizați orice funcție din planul dvs. Elementor pentru a vă crea cartea de vizită, fără costuri suplimentare.
- Veți aduce mai mult trafic către propriul dvs. site web și vă puteți folosi analiticele existente pentru a monitoriza statistici specifice despre publicul dvs.
- Prezintă abilitățile tale de creare web potențialilor clienți, de la început.
- Crearea cardurilor ca serviciu poate fi o sursă suplimentară de venit.
- Este prietenos cu mediul. Gata cu hârtia irosită.
- Și, în sfârșit, poate fi partajat cu ușurință oricui, oriunde.
În acest videoclip, vom crea un card digital care poate fi partajat pentru Jenna Saunders, o creatoare web din New York. Vom începe prin a crea pagina de destinație a cărții de vizită, cu toate informațiile de contact și o pre-vizualizare a muncii ei.
În continuare, vom crea o fereastră pop-up, care va afișa un cod QR și butoane de partajare, astfel încât vizitatorii să poată partaja cardul ei cu alții. Și, în sfârșit, vom conecta popup-ul la cardul ei. Să vedem cum se face.
Într-o pagină nouă, vom începe prin a configura structura paginii. Faceți clic pe pictograma Plus pentru a adăuga un Container cu o coloană.
Îl vom lăsa pe Boxed și vom seta lățimea la 540 de pixeli. Pentru Înălțime minimă, schimbați unitatea la VH sau înălțimea ferestrei de vizualizare și setați-o la 100, astfel încât să ocupe toată înălțimea ecranului vizibil.
În Stil, vom alege o culoare închisă pentru culoarea de fundal.
Apoi, în Avansat, deconectați și adăugați niște umplutură (Padding) în partea de sus și de jos.
Din panoul Widget, vom trage un Container și vom merge direct la fila Stil. Pentru fundal, vom adăuga o imagine în stil portret. Apoi setați poziția și dimensiunea.
Grozav. Acum reveniți la fila Aspect și ajustați puțin Înălțimea minimă.
Apoi, vom lua un Widget de Titlu și îl vom trage în containerul nostru. Actualizați textul și comutați eticheta HTML la H1. Acum stilează-l.
Ok, să-l duplicăm și să schimbăm textul. Schimbați eticheta HTML înapoi la H2 pentru aceasta. De asemenea, stilați-l.
În continuare, vom alinia titlurile. Selectați Containerul și înapoi în Aspect, extindeți „Elemente”. Justificați conținutul pentru Flex End și creșteți decalajul elementelor.
Arată bine. Apoi, în Stil, vom folosi o suprapunere de fundal gradient pentru a adăuga și mai mult contrast între text și fotografie. Pentru prima culoare, vom selecta transparența completă.
Pentru a doua culoare, vom alege o culoare închisă solidă. Trageți glisorul de locație al primei culori la dreapta. În Avansat, adăugați o umplutură.
Grozav, să introducem un container nou, unde vom plasa informațiile de contact ale Jennei și vom prezenta câteva piese din munca ei. În Stil, dați-i un fundal Gradient și selectați două culori. În Avansat, setați aceeași umplutură ca înainte.
Trageți un Widget cu listă de pictograme. Actualizați articolele. Și stilați-le.
Apoi, vom trage un Widget Editor de text și vom adăuga textul nostru.
Selectați containerul și în Aspect, măriți decalajul Elementelor Elemente.
Să arătăm o parte din munca lui Jenna, folosind widget-ul carusel media Pro pentru a atrage potențiali clienți.
Vom continua și vom actualiza articolele cu imagini și link-uri către munca lui Jenna. Eliminați orice obiecte inutile.
În continuare, îl vom modela schimbând dimensiunea și culoarea chenarului. În Avansat, deconectați marja și acordați părților din dreapta și din stânga o marjă negativă.
Vai. Pare ciudat, dar nu vă faceți griji, o vom rezolva imediat.
Reveniți la Conținut și ajustați Înălțimea.
Ok, acum vom merge mai departe și vom ascunde acel fragment în afara Containerului. Selectați din nou containerul și setați Overflow la Hidden. Voila!
Este timpul să adăugați pictogramele sociale.
Pentru primul nostru articol, vom selecta pictograma Whatsapp și vom crea un link de acțiune, care este o funcție Pro. Le permite vizitatorilor să facă clic și să meargă direct la Whatsapp pentru a trimite un mesaj.
Faceți clic pe pictograma Etichete dinamice și selectați Adresa URL de contact. Alegeți Whatsapp pentru Tip și adăugați numărul de telefon de contact.
Vom duplica această pictogramă și o vom configura cu linkuri de acțiune pentru e-mail și telefon, folosind aceeași metodă ca și pentru Whatsapp. Grozav.
Editați următoarea pictogramă și nu ezitați să adăugați câte sunt necesare.
Schimbați forma în cerc.
Ok, este timpul să ne stilăm pictogramele și să le facem să arate grozav.
Acum ne-am putea opri aici și avem un card digital perfect fin și funcțional. Dar să o facem și mai bună și să adăugăm o opțiune pentru ca vizitatorii să ne partajeze cardul, pentru o acoperire maximă.
Dar înainte să o facem, apăsați butonul de Like dacă vă place videoclipul până acum!
Vom face clic pe Command sau Control E pentru a deschide Finder, vom începe să tastăm „Popups” și îl deschidem într-o filă nouă ținând apăsat Control sau Command, în timp ce facem clic. Faceți clic pentru a adăuga o nouă fereastră pop-up și dați-i un nume.
Vom închide Biblioteca, pentru a ne proiecta Popup-ul de la zero. Faceți clic pe Setări și aliniați Poziția verticală la partea de jos.
În continuare, vom adăuga animații elegante, setând Animația de intrare la alunecare în sus și Ieșire din animație pentru a glisa în jos.
Pentru a economisi timp la configurarea structurii aici, vom reveni în pagina noastră de cărți de vizită, vom copia containerul și îl vom lipi în pop-up-ul nostru. Apoi deschideți Navigatorul și selectați și ștergeți elementele care nu sunt necesare.
Trageți un Widget Titlu. Introduceți textul de partajare și aliniați-l.
În continuare, vom trage butoanele de partajare. Butoanele de partajare sunt o funcție Pro și diferă de pictogramele sociale. În loc să vă direcționați vizitatorii către paginile dvs. sociale, butoanele de partajare îi determină vizitatorilor să vă distribuie conținutul direct din profilurile lor.
Aceasta este o modalitate excelentă de a aduna dovezi sociale și de a vă încuraja clienții să vă recomande serviciile.
Editați setările pentru fiecare buton, precum și opțiunile de aspect. Acum, treci la Stil, și ei bine, știi care este exercițiul, stilează-l! Arată bine!
În continuare, vom adăuga un cod QR cu un link către cardul Jennei, astfel încât să poată fi scanat de oricine de pe telefonul său. Există mai multe resurse excelente pentru generarea de coduri QR. Vom folosi site-ul web QR Code Monkey pentru acest tutorial, dar nu ezitați să folosiți preferatul dvs. Veți găsi linkul în descriere.
Vom lipi adresa URL a paginii noastre. Simțiți-vă liber să verificați și celelalte opțiuni. Faceți clic pe Creare cod QR și apoi Descărcați PNG.
Trageți fișierul direct în Editor. Setați unitatea de dimensiune la pixeli și ajustați dimensiunea. Suntem gata să publicăm popup-ul nostru!
Este timpul să setați condițiile de afișare pop-up. Adăugați o condiție, alegeți singular, Pagini. Apoi începeți să introduceți numele paginii cărții de vizită și selectați-o.
Și Salvați și Închideți.
Ok, revenim la editarea cărții noastre de vizită. Ultima dată, promit!
Trageți un Widget Pictogramă și selectați o pictogramă. Îl vom seta să deschidă fereastra pop-up, făcând clic pe Link > Etichete dinamice > Popup. Faceți clic pe cheie, începeți să tastați numele pop-upului și selectați-l.
Setați vizualizarea la Încadrat.
În continuare, vom stila pictograma pentru a se potrivi cu brandingul Jennei.
Și, în sfârșit, îl vom poziționa accesând Avansat > Poziție: Absolut. Setați Orientarea orizontală la Dreapta și ajustați offset-ul. Ajustați și offset-ul de orientare verticală.
Ok, cardul este setat pentru vizualizarea Desktop. Dar după cum știm, majoritatea vizitatorilor noștri vor ajunge probabil la această pagină de pe dispozitive mai mici.
Deci, să trecem la modul receptiv și să ne asigurăm că totul este optimizat. Vom începe cu Tablet. Deja arată grozav, așa că nu este nevoie să faceți nicio modificare aici.
Trecând la mobil, vedem că ar putea fi nevoie de câteva modificări. Selectați containerul principal și, în Advanced, setați padding-ul la zero.
Vom selecta primul titlu și vom modifica tipografia. Vom face același lucru pentru celelalte elemente de text de pe pagină.
În continuare, vom repara caruselul media. Setați Slides Per View la 3 și ajustați Înălțimea.
În sfârșit, ne vom ocupa de pictogramele sociale. Ajustați coloanele, spațierea și decalajul dintre rânduri, până când avem un rezultat de care suntem mulțumiți.
Ok, ești gata să verifici? Faceți clic pe Actualizare și previzualizare. Uimitor! Toate informațiile Jennei sunt chiar acolo, dintr-o privire, și poate partaja cu ușurință codul QR al cardului.
Pentru o acoperire și mai mare, Jenna poate partaja și linkul pe profilurile ei de socializare.
O altă modalitate prin care Jenna își poate partaja cardul este salvarea unei comenzi rapide către pagina de destinație a cărții de vizită pe ecranul de pornire al mobilului.
Putem face acest lucru din Chrome pe Android și Safari pe iPhone.
Acum știți cum să proiectați o carte de vizită digitală cu Elementor și să includeți opțiuni de partajare la îndemână. Așa că aruncați… Adică reciclați! acele carduri de hârtie.
Data viitoare când ai nevoie în mod neașteptat de un card, vei fi pregătit.
Folosești o carte de vizită digitală? Anunțați-ne în comentariile de mai jos.
Mulțumesc pentru vizionare! Pentru mai multe tutoriale, consultați Academia Elementor și abonați-vă la canalul nostru de Youtube. Nu uitați să apăsați clopoțelul de notificare.
