Divijev modul društvenih medija omogućuje vam stvaranje veza na temelju ikona koje upućuju na vaše mrežne društvene profile, kao što su Facebook, Twitter i Google+. Ove su ikone integrirane u temu, u Divi-jevom vlastitom stilu, koristeći njene moderne ikone, što ih čini povoljnijima od korištenja dodataka nezavisnih proizvođača. Možete dodati veze na više društvenih profila u svakom modulu, a modul možete dodati bilo gdje na stranici.

Kako dodati modul društvenih medija na svoju stranicu

Prije nego što svojoj stranici možete dodati modul društvenih medija, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate web stranicu u prvom planu ako ste povezani na svoju WordPress nadzornu ploču.

divi graditelj

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.

pratite nas na društvenim mrežama.png

Pronađite modul društvenih medija na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modova je pretraživ, što znači da možete upisati i riječ "Pratite nas na društvenim mrežama", a zatim kliknuti "enter" da biste pronašli i automatski dodali mod društvenih medija! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Primjer upotrebe: Dodavanje odgovarajućih ikona na društvenim mrežama na stranicu kontakta

Stranica za kontakt web-mjesta savršeno je mjesto za predstavljanje vaših društvenih profila na mreži. To pruža više mogućnosti korisnicima da ostanu povezani i unaprijediti blog ili vaš posao. Za ovaj primjer, pokazat ću vam kako dodati ikone društvenih medija koje odgovaraju trenutnom dizajnu kontakt stranice.

dodajte gumbe za praćenje na stranicu za kontakt divi wordpress.jpg

Pomoću vizualnog graditelja dodajte novi redoviti odjeljak s redom pune širine jednog stupca. U stupac umetnite modul društvenih mreža.

Na kartici Sadržaj postavki modula kliknite gumb "Dodaj novi element" da biste dodali novu društvenu mrežu u svoj modul. Pod određenim postavkama društvene mreže ažurirajte sljedeće:

Opcije sadržaja

Društvena mreža:
URL računa Facebook računa: [unesite URL svog računa Facebook]

Mogućnosti dizajna

Boja ikone: # d94b6a (različita boja)

dodajte odgovarajući color.jpg

Zatim duplicirajte ovu društvenu mrežu da biste dodali još četiri mreže (Twitter, Google+, LinkedIn i Instagram). Otkako ste duplicirali mrežu, prebačena je boja prilagođene ikone. Dakle, samo trebate ažurirati svaki mrežni URL i račun.

duplikat društvenih mreža divi.jpg

Sada imate ikone na društvenim mrežama koje odgovaraju dizajnu stranice za kontakt.

social network display.png

Opcije sadržaja na društvenim medijima

Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će se naći na ovoj kartici.

sadržaj za divi nas prati na društvenim mrežama module.png

Dodajte novi objekt

Tu dodajete nove mreže na svoj modul. Klikom na "dodaj novi element" otvorit ćete potpuno novi prozor opcija specifičnih za vašu novu mrežu (na karticama "Sadržaj", "Dizajn" i "Napredno"). Za pojedinačne postavke mreže društvenih medija pogledajte dolje.

Nakon dodavanja prve mreže vidjet ćete sivu traku s naslovom mreže prikazanim kao oznaka. Siva traka također ima tri gumba koja vam omogućuju uređivanje, umnožavanje ili brisanje mreže.

Obrazac za vezu

Ovdje možete odabrati oblik svojih ikona na društvenim mrežama bilo u zaobljenom pravokutniku ili u krugu.

Otvara se url

Odaberite otvoriti URL mreže u novoj kartici ili u istom prozoru.

Pratite gumb

Ovdje možete odabrati želite li uključiti sljedeći gumb pored ikone.

Administratorska oznaka

Ovo će promijeniti oznaku modula u konstruktoru radi lakše identifikacije. Kada koristite prikaz WireFrame u Visual Builderu, ove se oznake pojavljuju u modulnom bloku sučelja Divi Builder.

Opcije dizajna društvenih medija

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ovo je kartica koju ćete koristiti za promjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete promijeniti izgled.

promijenite izgled divi.png

Za ovaj modul opcije dizajna sastoje se od jednog elementa - Boje teksta.

Boja teksta

Ovdje možete odabrati hoće li vaš tekst biti svijetli ili tamni. Ako radite na tamnoj pozadini, vaš bi tekst trebao biti svijetli. Ako je vaša pozadina svijetla, tekst bi trebao biti taman.

Napredne opcije društvenih medija

Na naprednoj kartici pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Na modul također možete primijeniti prilagođene CSS klase i ID-ove koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

napredne postavke divi.png

CSS ID

Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.

CSS klasa

Unesite neobavezne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za izradu prilagođenog CSS stila. Možete dodati više klasa odvojenih razmakom. Te se razrede mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS listu stilova koji dodate na svoju stranicu ili na svoje web mjesto pomoću opcije teme Divi ili parametri stranice Divi Builder.

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.

vidljivost

Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata sa stranice.

Pojedinačne opcije sadržaja na društvenim mrežama

optin content divi.png

Društvena mreža

Ovdje možete odabrati društvenu mrežu koju želite prikazivati.

URL računa

Ovdje unosite URL ove veze na društvenu mrežu. Ako ste za svoju mrežu odabrali Facebook, ovdje biste stavili URL svoje Facebook stranice.

Pojedinačne mogućnosti dizajniranja društvenih medija

individualni stil option.png

Boja ikone

Divi nudi standardne boje za svaku društvenu mrežu definiranu prema zadanim postavkama. Ovdje možete jednostavno promijeniti ovu boju ikone u bilo koju želju.

Napredne opcije društvenih medija

unaprijed modul opcije slijedite nas divi.png

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.

[vc_row center_row = "yes"] [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"] PREUZMITE DIVI TEMU [/ vcex_button] [/colu [m»n_colum] » 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 =" ravno "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] ATE DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostali Divi tutoriali