Cum să proiectați o fereastră de socializare Pop Out, urmați bara de butoane pentru șablonul de pagină din Divi
Publicat: 2019-12-22Butoanele de Urmărire a rețelelor sociale continuă să fie o completare populară pentru orice site web. Companiile și persoanele fizice folosesc aceste linkuri pentru a redirecționa utilizatorii către paginile lor de socializare în speranța că vizitatorii îi vor urma sau se vor abona la canalul lor. În mod normal, vedeți aceste butoane într-o pagină de contact, în bara laterală sau în subsolul unui site web.
În acest tutorial, vă vom arăta cum să proiectați o bara de butoane de urmărire a rețelelor de socializare pop-out într-un șablon de pagină din Divi. Acest lucru va oferi acelor butoane de urmărire a rețelelor sociale o vizibilitate mai mare pe site-ul dvs., fără a fi o distragere a atenției. În plus, cu Divi's Theme Builder, creați cu ușurință un șablon de pagină care include aceste butoane pentru orice (sau toate) pagini de pe site-ul dvs.
Să sărim și să începem!
Trage cu ochiul
Iată o privire rapidă asupra butoanelor de urmărire pe social media create în acest tutorial.
Descărcați GRATUIT modelul de pagină pentru bara de urmărire a butoanelor pentru rețelele sociale
Pentru a vă pune mâna pe șablonul de pagină al barei butoanelor pentru rețelele sociale din acest tutorial, 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 în listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.
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.
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!
Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și adăugați unul dintre fișierele json în Divi Theme Builder folosind opțiunea Theme Builder Portability.
Să trecem la tutorial, nu-i așa?
Ce trebuie să începeți
Pentru a începe, va trebui să instalați și să activați tema Divi. Asigurați-vă că aveți cea mai recentă versiune de Divi.
De asemenea, veți avea nevoie de cel puțin o pagină creată cu Divi Builder în scopul testării pentru a atribui noul șablon acelei pagini pentru a afișa rezultatul.
După aceea, sunteți gata să plecați.
Crearea unei bara de butoane Urmăriți rețelele sociale pentru un șablon de pagină în Divi
Crearea unui șablon nou
Din tabloul de bord WordPress, navigați la Divi> Theme Builder. Apoi faceți clic pe caseta „Adăugați un șablon nou” pentru a crea un șablon nou.
Atribuiți șablonul paginilor pentru care doriți să fie afișată bara promoțională.
În noul șablon, faceți clic pe zona „Adăugați corp personalizat”, apoi selectați „Construiți corp personalizat”.
Apoi selectați opțiunea „Build From Scratch”.
Crearea barei de butoane de urmărire pentru rețelele sociale
Creați un rând nou
Pentru început, să adăugăm un șir cu o coloană la șablon.
Adăugați modulul Butoane de urmărire pentru rețelele sociale
În rândul cu o coloană, adăugați un modul de urmărire pe rețelele sociale.
Adăugați rețele sociale
Sub rețelele sociale urmați setările, adăugați toate rețelele sociale pe care doriți să le afișați. Pentru a adăuga o rețea nouă, faceți clic pe pictograma Adăugare rețea socială nouă gri plus apoi selectați rețeaua din listă.
De asemenea, va trebui să adăugați adresa URL a linkului pentru pagina de socializare la care doriți să redirecționați vizitatorii. Pentru a face acest lucru, faceți clic pe pictograma setărilor din rețeaua de socializare și actualizați adresa URL a legăturii contului.
Adăugați un modul buton
După ce ați terminat rețelele modulelor de urmărire a rețelelor sociale, suntem gata să adăugăm un modul buton. Acest buton va fi ceea ce utilizatorul trece peste, pentru a dezvălui bara pop-out. Continuați și adăugați modulul buton, apoi trageți-l deasupra modulului de urmărire a rețelelor sociale.
Conținut buton
Actualizați conținutul butonului după cum urmează:
- Text buton: Urmăriți
- Adresă URL a butonului: #
Stiluri de butoane și poziționare
Apoi actualizați setările de proiectare a butoanelor după cum urmează:
- Dimensiune text buton: 16 px
- Culoarea textului butonului:
- Lățimea chenarului butonului: 0 px
- Distanța dintre litere și butoane: 1 px
- Buton Font: Montserrat
- Fontul butonului Greutate: Bold
- Pictogramă buton: săgeată dreapta (vezi captura de ecran)
- Marja: 100% rămasă
- Căptușeală: partea inferioară de 100 px
Apoi adăugați următorul CSS personalizat la elementul principal:
position: absolute;
Setări rând
Odată ce butonul este stilat și gata de utilizare, actualizați setările rândului după cum urmează:
- Culoare fundal: #ffffff
- Lățimea jgheabului: 1
- Lățime: 100%
- Lățime maximă: 64 px
- Garnitura: 24 px sus, 16 px jos, 16 px stânga
Row Box Shadow
- Box Shadow: vezi captura de ecran
- Puterea neclarității umbrei cutiei: 0 px
- Puterea neclarității umbrei cutiei: 30 px
- Culoare umbră (desktop): transparent
- Culoare umbră (hover): rgba (0,0,0,0,2)
Poziționarea pe rând
Apoi adăugați următorul CSS personalizat la rândul Element principal:
position: fixed; top: calc(33.33vh - 55px); left: 0;
Aceasta va poziționa rândul într-o poziție fixă la o treime din drum în jos din partea de sus a browserului.
Afișează efectul Hover cu margini personalizate
Acum adăugați următoarele valori de marjă pentru a adăuga funcționalitatea pop-out on hover.
- Marja (desktop): -64px stânga
- Marja (pluteste): stanga 0px
Aceasta are grijă de bara de butoane de urmărire a rețelelor sociale. Dar trebuie totuși să terminăm șablonul prin crearea modulului necesar pentru conținutul postării.
Adăugarea modulului Post Content la șablon
În acest moment, bara de butoane de urmărire a rețelelor sociale este gata de pornire. Dar, deoarece acesta este un șablon, trebuie să ne asigurăm și să adăugăm modulul pentru conținutul postării pentru a afișa conținutul paginilor folosind acest șablon.
Adăugați un rând nou cu modulul Post Content
Sub rândul care conține bara de butoane de urmărire a rețelelor dvs. sociale, adăugați un nou rând cu o singură coloană.
Apoi adăugați modulul Conținut de postare la rând.
În prezent, modulul pentru conținutul postării va fi limitat la lățimea implicită a rândului părinte. Trebuie să schimbăm lățimea rândului și căptușeala, astfel încât să se întindă pe întreaga lățime a browserului fără goluri. Acest lucru este important, deoarece modulul de conținut post determină zona pe care trebuie să o construiți o pagină folosind Divi Builder.
Actualizați următoarele:
- Lățime: 100%
- Lățime maximă: 100%
- Căptușeală: 0 px sus, 0 px jos
Acum actualizați setările secțiunii după cum urmează:
- Căptușeală: 0 px sus, 0 px jos
Cam asta o face. Acum asigurați-vă și salvați aspectul înainte de a ieși din editor. Apoi salvați modificările și pentru generatorul de teme.
Rezultat final
Pentru a vedea rezultatele finale, accesați pagina care are șablonul atribuit. Iată cum va arăta bara de butoane de urmărire a rețelelor de socializare.
Gânduri finale
Această bară de butoane de urmărire a rețelelor sociale va ajuta cu siguranță să aducă acele rețele sociale importante în prim plan. Funcționalitatea pop-out va asigura că pictogramele nu vor distrage atenția utilizatorilor. Și puteți adăuga bara la orice șablon de pagină folosind Theme Builder. Sper că aceasta va fi o completare extraordinară pentru următorul dvs. proiect!
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!