Modulul Social Media al Divi vă permite să creați link-uri bazate pe pictograme care indică profilurile dvs. sociale online, cum ar fi Facebook, Twitter și Google+. Aceste pictograme sunt integrate în temă, în stilul propriu al lui Divi, folosind pictogramele sale elegante, ceea ce le face preferabile utilizării pluginurilor de la terți. Puteți adăuga linkuri la mai multe profiluri sociale în fiecare modul și puteți adăuga modulul oriunde pe pagină.
Cum să adăugați un modul de social media pe pagina dvs.
Înainte de a putea adăuga un modul de social media la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Utilizați Visual Builder când îți răsfoiești site-ul în prim plan dacă ești conectat la tabloul de bord WordPress.
După ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs.
Găsiți modulul de social media în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista de moduri poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „Urmăriți-ne pe social media” și apoi să faceți clic pe „enter” pentru a găsi și a adăuga automat modul de social media! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupe principale: Conținut , Concepție et avansat .
Exemplu de caz de utilizare: adăugarea pictogramelor de social media corespunzătoare pe o pagină de contact
Pagina de contact a unui site web este locul perfect pentru a vă prezenta profilurile sociale online. Acest lucru oferă utilizatorilor mai multe oportunități de a rămâne conectați și promova blogul tău sau afacerea ta. Pentru acest exemplu, vă voi arăta cum să adăugați pictograme de rețele sociale pentru a se potrivi cu designul actual al unei pagini de contact.
Folosind builder-ul vizual, adăugați o nouă secțiune obișnuită cu un rând cu lățimea completă a unei coloane. Introduceți un modul de social media în coloana dvs.
În fila Conținut a setărilor modulului, faceți clic pe butonul „Adăugați un element nou” pentru a adăuga o nouă rețea socială la modulul dvs. În setările specifice rețelei sociale, actualizați următoarele:
Opțiuni de conținut
Rețeaua socială:
Adresa URL a contului Facebook: [introduceți adresa URL a contului dvs. Facebook]
Opțiuni de proiectare
Culoare pictogramă: # d94b6a (culoare asortată)
Apoi copiați această rețea socială pentru a adăuga alte patru rețele (Twitter, Google+, LinkedIn și Instagram). De când ați duplicat rețeaua, culoarea pictogramei personalizate a fost transferată. Deci, trebuie doar să actualizați fiecare adresă URL de rețea și cont.
Acum aveți pictograme de social media care se potrivesc cu designul paginii de contact.
Opțiuni de conținut de social media
În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna găsit în această filă.
Adăugați un obiect nou
Aici adăugați rețele noi la modulul dvs. Făcând clic pe „adăugați un element nou”, veți deschide o fereastră complet nouă de opțiuni specifice noii rețele (sub filele „Conținut”, „Proiectare” și „Avansat”). Vedeți mai jos setările individuale ale rețelei de socializare.
După adăugarea primei rețele, veți vedea o bară gri care apare cu titlul rețelei afișat ca etichetă. Bara gri are, de asemenea, trei butoane care vă permit să editați, să copiați sau să ștergeți rețeaua.
Formularul de legătură
Aici puteți alege forma pictogramelor rețelelor sociale fie în dreptunghi rotunjit, fie în cerc.
Se deschide adresa URL
Alegeți să deschideți adresa URL a rețelei într-o filă nouă sau în aceeași fereastră.
Urmați butonul
Aici puteți alege dacă să includeți sau nu următorul buton de lângă pictogramă.
Admin Label
Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.
Opțiuni de proiectare a rețelelor de socializare
În fila Proiectare, veți găsi toate opțiunile de stilare a modulelor, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba aspectul.
Pentru acest modul, opțiunile de proiectare constau dintr-un singur element - Culoarea textului.
Culoarea textului
Aici puteți alege dacă textul dvs. trebuie să fie deschis sau întunecat. Dacă lucrați pe un fundal întunecat, textul dvs. ar trebui să fie ușor. Dacă fundalul dvs. este deschis, textul dvs. ar trebui să fie întunecat.
Opțiuni avansate de social media
În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.
Cod CSS
Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.
CSS
Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina dvs. sau la site-ul dvs. web folosind opțiuni tematice Divi sau parametri ai paginii Divi Builder.
CSS personalizate
CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.
vizibilitate
Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente de pe pagină.
Opțiuni individuale de conținut de social media
Rețeaua socială
Aici puteți alege rețeaua socială pe care doriți să o afișați.
Adresa URL a contului
Aici introduceți adresa URL pentru acest link de rețea socială. Dacă alegeți Facebook ca rețea, aici veți pune adresa URL a paginii dvs. de Facebook.
Opțiuni individuale de proiectare a rețelelor de socializare
Culoarea pictogramei
Divi oferă culori standard pentru fiecare rețea socială definită în mod implicit. Aici puteți schimba cu ușurință această culoare a pictogramei în orice doriți.
Opțiuni avansate de social media
CSS personalizate
CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.
[vc_row center_row = "da"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Alte tutoriale Divi
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin