Modul Divi's Social Media vám umožňuje vytvárať odkazy na základe ikon, ktoré smerujú na vaše online sociálne profily, ako sú Facebook, Twitter a Google+. Tieto ikony sú integrované do témy vo vlastnom štýle Divi pomocou jej štýlových ikon, vďaka čomu sú vhodnejšie ako doplnky tretích strán. V každom module môžete pridať odkazy na viac sociálnych profilov a modul môžete pridať kdekoľvek na stránke.

Ako na svoju stránku pridať modul sociálnych médií

Pred pridaním modulu sociálnych médií na svoju stránku musíte najprv prejsť do Divi Builder. Raz Divi téma nainštalovaný na vašom webe, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Použite Visual Builder pri prehliadaní webových stránok v popredí, ak ste pripojení k dashboardu WordPress.

divi builder

Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok.

nasledujte nás na sociálnych sieťach.png

Vyhľadajte modul sociálnych médií v zozname modulov a kliknutím naň ho pridajte na svoju stránku. V zozname režimov je možné prehľadávať, čo znamená, že môžete tiež napísať slovo „Sledujte nás na sociálnych sieťach“ a potom kliknúť na „vstúpiť“, aby ste automaticky našli a pridali režim sociálnych médií! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .

Príklad prípadu použitia: Pridanie zodpovedajúcich ikon sociálnych médií na stránku kontaktu

Kontaktná stránka webovej stránky je ideálnym miestom na prezentáciu vašich online sociálnych profilov. To poskytuje používateľom viac príležitostí zostať v spojení a podporovať váš blog alebo vaša firma. V tomto príklade vám ukážem, ako pridať ikony sociálnych médií, aby zodpovedali aktuálnemu dizajnu kontaktnej stránky.

pridajte sledovacie tlačidlá na kontaktnej stránke divi wordpress.jpg

Pomocou vizuálneho nástroja na pridanie pridajte novú pravidelnú sekciu s riadkom v celej šírke jedného stĺpca. Vložte modul sociálnych médií do svojho stĺpca.

Na karte Obsah v nastaveniach modulu kliknite na tlačidlo „Pridať nový prvok“ a pridajte do svojho modulu novú sociálnu sieť. V rámci konkrétnych nastavení sociálnej siete aktualizujte nasledovné:

Možnosti obsahu

Sociálna sieť:
URL účtu Facebook: [zadajte adresu URL účtu Facebook]

Možnosti návrhu

Farba ikony: # d94b6a (najrôznejšia farba)

pridajte zodpovedajúcu farbu.jpg

Potom duplikujte túto sociálnu sieť a pridajte ďalšie štyri siete (Twitter, Google+, LinkedIn a Instagram). Odkedy ste duplikovali sieť, farba vlastnej ikony sa preniesla. Musíte teda aktualizovať všetky adresy URL a účty v sieti.

duplicitné sociálne siete divi.jpg

Teraz máte ikony sociálnych médií, ktoré zodpovedajú dizajnu kontaktnej stránky.

social network display.png

Možnosti obsahu sociálnych médií

Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.

obsah pre divi nás sledujte na module social networks.png

Pridať nový objekt

Toto je miesto, kde do modulu pridáte nové siete. Kliknutím na „pridať nový prvok“ otvoríte úplne nové okno možností špecifických pre vašu novú sieť (na kartách „Obsah“, „Dizajn“ a „Pokročilé“). Nižšie nájdete jednotlivé nastavenia sietí sociálnych médií.

Po pridaní prvej siete uvidíte šedú lištu s názvom vašej siete ako štítkom. Šedá lišta má tiež tri tlačidlá, ktoré umožňujú upravovať, duplikovať alebo mazať sieť.

Formulár odkazu

Tu si môžete vybrať tvar ikon sociálnych sietí v zaoblenom obdĺžniku alebo v kruhu.

URL sa otvorí

Vyberte, či chcete otvoriť svoju sieťovú adresu URL na novej karte alebo v rovnakom okne.

Stlačte tlačidlo

Tu môžete zvoliť, či sa má vedľa ikony zobraziť ďalšie tlačidlo.

Správcovská značka

Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.

Možnosti dizajnu sociálnych médií

Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam dizajnových nastavení, ktoré môžete použiť na zmenu vzhľadu.

zmeniť vzhľad divi.png

Pre tento modul pozostávajú možnosti návrhu z jedného prvku - farby textu.

Farba textu

Tu môžete zvoliť, či má byť text svetlý alebo tmavý. Ak pracujete na tmavom pozadí, text by mal byť svetlý. Ak je vaše pozadie svetlé, text by mal byť tmavý.

Pokročilé možnosti sociálnych médií

Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.

rozšírené nastavenia divi.png

CSS ID

Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.

Triedu CSS

Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS je možné použiť triedu CSS. Môžete pridať viac tried oddelených medzerou. Tieto triedy môžete použiť vo svojej podradenej téme Divi alebo vo vlastnej šablóne štýlov CSS, ktorú pridáte na svoju stránku alebo na svoj web pomocou možnosti témy Divi alebo parametre stránky Divi Builder.

Vlastné CSS

Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.

viditeľnosť

Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.

Jednotlivé možnosti obsahu sociálnych médií

optin content divi.png

Sociálna sieť

Tu si môžete vybrať sociálnu sieť, ktorú chcete zobraziť.

Adresa URL účtu

Tu zadáte adresu URL tohto odkazu na sociálnu sieť. Ak ste si vybrali Facebook ako svoju sieť, sem by ste vložili URL svojej stránky na Facebooku.

Jednotlivé možnosti dizajnu sociálnych médií

individuálny štýl.png

Farba ikony

Divi ponúka štandardné farby pre každú štandardne definovanú sociálnu sieť. Tu môžete ľahko zmeniť farbu tejto ikony na ktorúkoľvek chcete.

Pokročilé možnosti sociálnych médií

predbežná opcia modul nás nasleduje divi.png

Vlastné CSS

Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšírené "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"] STIAHNUŤ TÉMU DIVI [/ vcex_button] [/ width_column] [»v] » 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" TEM DOWNLOOWN DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ďalšie výukové programy spoločnosti Divi