Ako pridať dynamický názov stránky a slogan do globálnej hlavičky Divi

Ako pridať dynamický názov stránky a slogan do globálnej hlavičky Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px0 !important;border-bottom-width: 0px !important;padding-bottom: XNUMXpx !important;}"][vc_column_text]

Divi: najjednoduchšia téma pre WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Vedieť, ako pridať dynamický nadpis stránky a slogan do globálnej hlavičky Divi, bude užitočné pri vytváraní webových stránok Divi. Existuje na to niekoľko dobrých dôvodov. Na jednej strane nie všetky stránky majú logo. Názov stránky je dobrou náhradou loga. Ďalším dôvodom je posilniť vašu značku vložením dôležitých informácií na vaše stránky, kde ich uvidí každý.

V tomto tutoriáli si ukážeme, ako pridať dynamický nadpis a slogan stránky do globálnej hlavičky Divi. Toto riešenie dynamicky extrahuje názov a slogan stránok z backendu WordPress. Navyše budete mať k dispozícii všetky výkonné možnosti Divi, ktoré vám umožňujú prispôsobiť názov a slogan, ako len chcete!

Možný výsledok

Tu je ukážka dizajnu, ktorý vytvoríme v tomto návode.

Šablóna globálnej hlavičky dynamického názvu stránky 6

Všimnite si nadpis a slogan stránky v strede hore, ktorý sa zobrazuje dynamicky.

Príklad úpravy názvu Divi

Stiahnutie zdarma

Pripojte sa k súboru Divi Newlsetter a pošleme vám e-mailom kópiu balíka Ultimate Divi Landing Page Layout Pack spolu s hromadou ďalších bezplatných a úžasných zdrojov, tipov a trikov pre Divi. Postupujte podľa neho a za chvíľu budete pánom Divi. Ak ste už prihlásený / -á na odber, jednoducho zadajte svoju e-mailovú adresu a kliknutím na tlačidlo Prevziať otvorte balík s rozložením.DOWNLOAD

Ak chcete šablónu importovať, prejdite do časti Divi> Generátor tém.

Kliknite na ikonu prenosnosti v pravom hornom rohu stránky.

V rozbaľovacom okne prenosnosti vyberte kartu import a vyberte súbor na stiahnutie z počítača.

Potom kliknite na tlačidlo importovať.

Vyberte šablónu divi

Po dokončení bude šablóna celkovej hlavičky k dispozícii v nástroji Divi Theme Builder.

Upraviť hlavičku globálneho divi

V nasledujúcom texte sa presunieme k dizajnu.

Názov stránky a slogan na WordPress

Každý web vo formáte WordPress má názov a slogan. Názov stránky je v podstate názov stránky a slogan je krátka fráza, ktorá zvyčajne vysvetľuje, o čo sa jedná.

Nie je nezvyčajné pridať názov stránky pri inštalácii WordPress a zabudnúť na ňu.

Prispôsobte si názov divi

Niektorí ľudia si ani neuvedomujú, že slogan existuje, natož aby si ho aktualizovali. Okrem toho, keď použijete tému Divi, názov a slogan webu nebudú predvolene viditeľné na vašom webe, takže je ľahké ich ignorovať. Názov a slogan webu sú však nevyhnutnou súčasťou webu a vyhľadávače ich rozpoznajú.

Nadpis a slogan stránok vo WordPress môžete kedykoľvek nájsť a aktualizovať tak, že prejdete na informačný panel WordPress a prejdete do časti Nastavenia> Všeobecné.

Alebo si môžete zvoliť inú trasu pomocou nástroja na prispôsobenie tém a aktualizovať názov stránky v rámci všeobecných nastavení.

Prispôsobte si identitu wordpressu

Teraz, keď vieme, kde je názov stránky a slogan na backende WordPress, preskúmajme, ako ich môžeme pridať do hlavičky Divi!

Ako pridať dynamický názov stránky a slogan do globálnej hlavičky v časti Divi

Importuje sa vopred navrhnutá globálna šablóna hlavičky

V tomto výučbe sa zameriame na to, ako pridať dynamický nadpis a slogan stránky do existujúcej hlavičky namiesto vytvárania úplnej hlavičky úplne od začiatku. Ušetrí vám to čas a zvýši prehľadnosť. Takže na spustenie tohto návrhu hlavičky budeme importovať preddefinovanú globálnu šablónu hlavičky z našej štvrtý generátor tém .

Akonáhle budete mať stiahol si balík vytvorenie téma , rozbaľte súbor a vyhľadajte predvolený súbor JSON šablóny webovej stránky.

Potom choďte na Divi> Theme Builder.

Kliknite na ikonu prenosnosti vpravo hore. V rozbaľovacom okne prenosnosti vyberte predvolený súbor JSON šablóny webovej stránky a kliknite na tlačidlo Importovať.

Import modelu Divi

Po pridaní šablóny do nástroja na tvorbu tém odstráňte šablónu päty a kliknutím upravte celkovú hlavičku.

Odstrániť šablónu z päty

Pridanie názvu a sloganu dynamického webu do hlavičky

V editore rozloženia šablón uvidíte vopred pripravenú hlavičku. Hneď môžeme začať robiť prispôsobenie.

Presunúť logo

Začnite potiahnutím obrazového modulu, ktorý zobrazuje logo (dynamicky), zo stredného stĺpca horného riadku do ľavého stĺpca horného riadku.

Pridajte modul výzvy na akciu, aby sa zobrazil nadpis a slogan webu

Potom pridajte do stredného stĺpca horného riadku (kde bolo logo) nový modul Výzva na akciu.

Prispôsobte si výzvu na akciu

Na zobrazenie názvu a sloganu stránky použijeme modul Výzva na akciu.

Ale skôr ako začnete pridávať obsah, najskôr vyberte NIE, aby ste mohli použiť farbu pozadia.

Konfigurujte akcie s výzvou na akciu

Pridajte dynamický názov stránky

V nastaveniach obsahu umiestnite kurzor myši na pole na zadávanie nadpisov a kliknite na ikonu „Použiť dynamický obsah“. Potom v zozname vyberte možnosť „Názov stránky“.

Pridajte dynamický slogan stránok

Potom umiestnite kurzor myši na oblasť tela a vyberte ikonu „Použiť dynamický obsah“. Potom v zozname vyberte možnosť „Slogan stránky“.

Pridajte slogan stránky divi

Pridajte dynamický odkaz na domovskú stránku

Je bežné, že názov stránky po kliknutí presmeruje na domovskú stránku, najmä ak vymieňate logo. Ak chcete presmerovať celý kurz na domovskú stránku, pridajte odkaz na domovskú stránku ako dynamický obsah do adresy URL odkazu na kurz.

Pridajte odkaz na domovskú stránku

Dizajn textu názvu a sloganu webu

Teraz sa v záhlaví dynamicky zobrazuje názov a nadpis stránky. Teraz musíme len pridať štýl. Nezabudnite, že pre prispôsobenie názvu nadpisu je potrebné prispôsobiť názov stránky a text tela, aby navrhol slogan.

Prejdite na kartu Návrh a aktualizujte nasledujúce informácie:

  • Písmo názvu: Heebo
  • Hmotnosť písma názvu: tučné
  • Štýl písma názvu: TT
  • Veľkosť textu nadpisu: 32 pixelov (stolné počítače), 24 pixelov (tablety a telefóny)
  • Rozstup nadpisu: 0.3m
  • Text tela: Roboto
  • Telo písma: kurzíva
  • Farba textu tela:
  • Veľkosť textu tela: 13 pixlov
  • Medzerník: 0.1em
  • Výška línie tela: 1m
Prispôsobte si titulné písmo divi

Ak chcete pomôcť s centrovaním, odstráňte predvolené odsadenie pod textom tela pridaním nasledujúceho vlastného CSS do popisu propagácie:

čalúnenie: 0px
Pridajte vlastný kód divi css

Dodatočné úpravy dizajnu

V tejto poslednej časti tutoriálu sa chystáme vykonať niekoľko ďalších úprav návrhu hlavičky, aby sa zabezpečilo, že položky zostanú vertikálne vycentrované v každom stĺpci a prepožičia tlačidlu jedinečný dizajn. K tagline tiež pridáme pred a za ostrú čiaru (len pre kopy).

Vertikálne centrovanie stĺpcov / obsahu

V súčasnosti je horný riadok aktívny „Vyrovnávať výšky stĺpcov“, ktorý využíva vlastnosť flex. Na to môžeme zarobiť pridaním malého css úryvku, aby sme sa ubezpečili, že všetky stĺpce zostávajú vertikálne vycentrované v rámci riadku. Ak to chcete urobiť, otvorte nastavenia pre horný riadok a do hlavného prvku pridajte nasledujúci CSS:

Zarovnať položky: stred;

Aktualizácia stĺpca pomocou tlačidla

Ďalej otvorte nastavenia pre stĺpec 3 v hornom riadku a vyberte farbu pozadia a výplň.

Prispôsobte si tlačidlo kontaktu divi

Aktualizácia pozadia tlačidla

Potom otvorte nastavenie modulu tlačidla a aktualizujte pozadie o nový gradient pozadia nasledovne:

  • Gradient background Ľavá farba: #ffffff
  • Farba gradientu na pravom pozadí: # 1dbf73
  • Smer sklonu: 135deg
  • Počiatočná pozícia: 10%
  • Koncová pozícia: 0%
Prispôsobte pozadie tlačidla divi

Pridanie pred a za znaky do sloganu

Každý prvok dynamického obsahu je možné zmeniť kliknutím na ikonu ozubeného kolieska. Ak chcete do sloganu pridať znaky pred a za, otvorte nastavenia modulu výzvy na akciu obsahujúceho slogan a kliknite na ikonu úprav v dynamickom obsahu sloganu webu. Potom pridajte znaky k položkám pred a za.

Zobraziť slogan divi

Konečný výsledok

Ak chcete vidieť výsledok, otvorte ľubovoľnú stránku na vašom webe. Mali by ste vidieť nádherný názov a slogan dynamického webu!

Konečný výsledok divi

záverečné myšlienky

Je naozaj pekné, že môžete prispôsobiť celkovú hlavičku pomocou dynamického názvu a sloganu stránky. Zdá sa to ako niečo, čo bude užitočné pre mnoho webov. Páči sa mi tiež myšlienka zahrnúť okrem loga aj názov a slogan webu, aby bolo značka ešte silnejšie.

zdroj: Elegantná tému

Ako vytvoriť plynulý prechod s efektmi posunu na Divi

Ako vytvoriť plynulý prechod s efektmi posunu na Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px0 !important;border-bottom-width: 0px !important;padding-bottom: XNUMXpx !important;}"][vc_column_text]

Divi: najjednoduchšia téma pre WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Pri navrhovaní stránky svojich služieb sa chcete uistiť, že si vaši návštevníci všimnú všetky rôzne služby, ktoré poskytujete. V mnohých prípadoch to bude iba jedna konkrétna služba, ktorú hľadajú, ale ak poskytnete efektívny spôsob vo svojej štruktúre služieb, je pravdepodobnejšie, že vaši návštevníci ošetria všetky. 

V tomto tutoriáli vám ukážeme, ako byť kreatívni s efektmi rolovania Divi a ako vytvoriť plynulý prechod služby. Môžete si tiež zadarmo stiahnuť súbor JSON!

Poďme.

Možný výsledok

Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.

Prechod medzi oddielom divi

1, znovu vytvoriť štruktúru prvkov

Pridajte časť # 1

vzdialenosť

Začnite pridaním novej sekcie na stránku, na ktorej pracujete. Otvorte nastavenia sekcie a zmeňte hodnoty výplne na rôznych veľkostiach obrazovky.

  • Vrchná výplň: 80px (stolné a tablety), 0px (telefón)
  • Spodné čalúnenie: 80px
Sekcia parametrov Divi

Pridať nový riadok

Štruktúra stĺpcov

Pokračujte v pridávaní nového riadku pomocou nasledujúcej štruktúry stĺpcov:

dimenzovanie

Bez pridania ďalších modulov otvorte parametre linky a vykonajte nasledujúce zmeny parametrov dimenzovania:

  • Použite vlastnú šírku odkvapov: Áno
  • Šírka odkvapov: 1
  • Šírka: 90%
  • Maximálna šírka: 1580 pixlov
Konfigurácia rozstupov Divi

vzdialenosť

Potom pridajte vlastný horný a dolný okraj.

  • Horný okraj: 200px
  • Dolný okraj: 200px
Konfigurácia divi riadkovania

Pridajte textový stĺpec do stĺpca 1

Pridajte obsah H2

Je čas pridať moduly, počnúc textovým modulom v stĺpci 1. Zadajte požadovaný obsah H2.

Naše služby ponúkané odborníkmi v danom okamihu

Nastavenia textu H2

Prejdite na kartu Návrh modulu a zmeňte nastavenie textu H2 nasledovne:

  • Hlava 2 Polícia: štvrťročne
  • Hlavička 2 Veľkosť textu: 80 pixelov (stolné počítače), 50 pixelov (tablety), 40 pixlov (telefóny)
  • Výška čiary 2 hlavy: 1.2em
Vedúca divi polícia

vzdialenosť

Potom pridajte dolný okraj do tabletu a do telefónu.

  • Dolný okraj: 50 pixelov (iba tablet a telefón)
Konfigurácia rozstupov textu Divi

Pridajte textový stĺpec do stĺpca 2

Pridajte obsah

Prejdime k druhému stĺpcu. Prvý modul, ktorý potrebujeme, je textový modul s určitým obsahom popisu.

Textové pole divi obsahu

Nastavenia textu

Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:

  • Písmo textu: kabína
  • Štýl písma textu: veľké písmená
  • Farba textu: # 000000
  • Veľkosť textu: 18 px (na počítači), 15 pixelov (tablet), 13 pixlov (telefón)
  • Medzery v texte: 3px (na počítači), 1px (na tablete a telefóne)
  • Výška riadku textu: 3em
Parameter textu Divi

Pridajte separačný modul do stĺpca 2

viditeľnosť

Ďalším a posledným modulom, ktorý v tomto stĺpci potrebujeme, je separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

  • Zobraziť oddeľovač: Áno
Viditeľný rozdeľovač

Linka

Potom zmeniť farbu čiary modulu.

  • Farba čiary: # 000000
Rozdeľovač farebné pozadie

dimenzovanie

Potom vykonajte niektoré zmeny parametrov veľkosti.

  • Hmotnosť deliča: 3px
  • Šírka: 28%
Dimenzovanie oddeľovača Divi

vzdialenosť

Pridáme tiež horný okraj.

  • Horný okraj: 10px
Rozstup modulov oddeľovača Divi

Pridajte časť # 2

vzdialenosť

Prejdime k ďalšej pravidelnej časti. Odstráňte z časti predvolené horné polstrovanie.

  • Horná vypchávka: 0px
Oddiel 2 rozostupy divi

pretečeniu

Tiež skryte prepady.

  • Horizontálny prepad: skrytý
  • Vertikálny prepad: skrytý
Skryť pretečenie modulu divi

Pridať nový riadok

Štruktúra stĺpcov

Pokračujte v pridávaní prvého riadku pomocou nasledujúcej štruktúry stĺpcov:

Vyberte rozloženie súboru divi

dimenzovanie

Bez pridania ďalších modulov otvorte parametre linky, získajte prístup k parametrom dimenzovania a vykonajte nasledujúce úpravy:

  • Použite vlastnú šírku odkvapov: Áno
  • Šírka odkvapov: 1
  • Vyrovnajte výšky stĺpcov: Áno
  • Šírka: 90%
  • Maximálna šírka: 1580 pixlov
Sekcia divi konfigurácie žľabu

vzdialenosť

Potom odstráňte všetky predvolené vrchné a spodné čalúnenie.

  • Horná vypchávka: 0px
  • Spodné čalúnenie: 0px
Nastavenia rozstupov riadkových modulov Divi 1

Nastavenia stĺpca 1

Farba pozadia

Potom otvorte nastavenia pre stĺpec 1 a zmeňte farbu pozadia.

  • Farba pozadia: # f7f7f7
Konfigurácia pozadia modulu Divi Line

vzdialenosť

Dokončite nastavenia stĺpca pridaním vlastných hodnôt výplne pre rôzne veľkosti obrazovky.

  • Vrchná výplň: 200px (písací stôl), 100px (tablet a telefón)
  • Spodné čalúnenie: 200px (písací stôl), 100px (tablet a telefón)
  • Výplň doľava: 8%
  • Pravá výplň: 8%
Nastavenia stĺpca riadkového modulu

Nastavenia stĺpca 2

vzdialenosť

Pokračujte otvorením nastavení v stĺpci 2. Prejdite na kartu rozšírené a pridajte vlastné hodnoty výplne pre rôzne veľkosti obrazovky.

  • Vrchné čalúnenie: 100px (stolné počítače), 50px (tablety a telefóny)
  • Spodné čalúnenie: 200px
  • Čalúnenie vľavo: 150 px (stôl), 0 px (tablet a telefón)
Nastavenia rozstupov modulu Divi

Pridajte separačný modul do stĺpca 1

viditeľnosť

V prvom stĺpci je prvým modulom, ktorý potrebujeme, separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

  • Zobraziť oddeľovač: Áno
Zobraziť oddeľovač divi 1

Linka

Potom zmeniť farbu čiary modulu.

  • Farba čiary: # 000000
Nastavenia oddeľovača Divi

dimenzovanie

Vykonajte tiež zmeny parametrov veľkosti.

  • Hmotnosť deliča: 3px
  • Šírka: 50%
Dimenzovanie oddeľovača Divi

Pridajte textový stĺpec do stĺpca 1

Pridajte obsah H3

Ďalší modul, ktorý potrebujeme v stĺpci 1, je textový modul s obsahom H3.

Nastavenie sekcie obsahu Divi

Nastavenia textu H3

Prejdite na kartu návrhu modulu a zmeňte nastavenie textu H3:

  • Hlava 3 Polícia: štvrťročne
  • Farba textu položky 3: # 000000
  • Položka 3 Veľkosť textu: 50 pixelov (stolné počítače), 40 pixelov (tablety), 35 pixlov (telefóny)
  • Výška čiary 3 hlavy: 1.1em

Pridajte textový stĺpec do stĺpca 2

Pridajte obsah

V druhom stĺpci, prvý modul, ktorý potrebujeme, je textový modul s určitým obsahom popisu.

Nastavenie textového modulu Divi

Nastavenia textu

Zmeňte nastavenia textu modulu takto:

  • Písmo textu: kabína
  • Štýl písma textu: veľké písmená
  • Veľkosť textu: 18 px (na počítači), 15 pixelov (tablet), 13 pixlov (telefón)
  • Medzery v texte: 3px (na počítači), 1px (na tablete a telefóne)
  • Výška riadku textu: 3em
Úprava písma formy Divi text

Pridajte stĺpcový modul do stĺpca 2

Pridajte kópiu

Ďalším a posledným modulom, ktorý potrebujeme, je tlačidlový modul. Zadajte kópiu podľa vášho výberu.

Nastavenie obsahu textového modulu

Nastavenia tlačidiel

Potom štýl tlačidlo.

  • Pre tlačidlo použite vlastné štýly: Áno
  • Veľkosť textu tlačidla: 20 pixlov
  • Farba textu tlačidla: #ffffff
  • Farba pozadia tlačidla: # 000000
  • Šírka okraja tlačidla: 0px
Nastavenie štýlu tlačidla Divi
  • Písmo tlačidla: štvrťročne
  • Hmotnosť písma tlačidla: tučné
Nastavenia farieb tlačidla Divi

vzdialenosť

Pridajte tiež vlastné čalúnenie.

  • Horná vypchávka: 50px
  • Spodné čalúnenie: 50px
  • Ľavé čalúnenie: 100px
  • Pravá výplň: 100px
Nastavenia rozstupov tlačidiel modulu Divi

poloha

A podľa toho premiestnite tlačidlo:

  • Pozícia: Absolútna
  • Umiestnenie: vľavo dole
Nastavenie polohy modulu Divi

Klonujte riadok toľkokrát, koľkokrát je to potrebné

Po dokončení celého riadku a všetkých jeho modulov môžete celý riadok naklonovať trikrát.

Klonujte divi modul

Zmeňte všetok obsah

Nezabudnite upravovať všetok obsah v duplikovaných riadkoch.

Upraviť obsah divi sekcie

2. Použite posúvacie efekty

Efekty posúvania v prvom riadku

Horizontálny pohyb

Po dokončení všetkých riadkov v sekcii je čas pridať efekty rolovania. Otvorte prvý riadok sekcie a pridajte vodorovný pohyb.

  • Aktivujte horizontálny pohyb: Áno
  • Počiatočný posun: -5
  • Priemerný ofset: 0 (pri 26%)
  • Koncový posun: 0
  • Efekt spúšťacieho pohybu: stred prvku
Použite efekty rolovania divi

Stmievanie a zoslabovanie

Použite tiež efekt stmievania prichádzajúcich a odchádzajúcich.

  • Aktivácia stmievania a vypínania: Áno
  • Počiatočná opacita: 100%
  • Priemerná opacita: 100% (pri 50%)
  • Konečná opacita: 0% (až 53%)
  • Efekt spúšťacieho pohybu: stred prvku
Nakonfigurujte divi sekciu fade animation

Efekty posúvania v strednom riadku

Vertikálny pohyb

Ďalej pridáme efekty rolovania na všetky riadky medzi prvým a posledným riadkom sekcie. Najprv použite vertikálny pohyb:

  • Aktivujte vertikálny pohyb: Áno
  • Počiatočný posun: -4
  • Priemerný ofset: 0 (pri 26%)
  • Koncový posun: 0
  • Efekt spúšťania pohybu: stred prvku
Konfigurácia anulácie rolovania Divi

Stmievanie a zoslabovanie

Taktiež aktivujte efekt stmievania.

  • Aktivácia stmievania a vypínania: Áno
  • Počiatočná opacita: 0%
  • Priemerná opacita: 100% (od 27% do 50%)
  • Koncový posun: 0 (pri 53%)
  • Efekt spúšťacieho pohybu: stred prvku
Animácia slabnutia linky Divi

Efekty posúvania na poslednom riadku

Vertikálny pohyb

Potom otvorte posledný riadok sekcie a pridajte nasledujúci vertikálny pohyb:

  • Aktivujte vertikálny pohyb: Áno
  • Počiatočný posun: -4
  • Priemerný ofset: 0 (pri 26%)
  • Koncový posun: 0
  • Efekt spúšťacieho pohybu: stred prvku
Animácia rolovania modulu Divi line

Stmievanie a zoslabovanie

S efektom prichádzajúcich a odchádzajúcich fade a máte hotovo!

  • Aktivácia stmievania a vypínania: Áno
  • Počiatočná opacita: 0%
  • Priemerná opacita: 100% (od 27% do 50%)
  • Konečná opacita: 100% (až 53%)
  • Efekt spúšťacieho pohybu: stred prvku
Nastavenia animácie vzhľadu modulu Divi line

Konečný výsledok

Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.

Záverečné demo

záverečné myšlienky

V tomto článku sme vám ukázali, ako vytvoriť nádherný prechod na službu pomocou posúvacích efektov Divi. Ešte predtým, ako jedno podanie zmizne, sa začne objavovať druhé, ktoré poskytne pekný prechod lahodiaci oku. Tento prístup vám pomôže vyzdvihnúť každú službu na individuálnej úrovni. Môžete si tiež zadarmo stiahnuť súbor JSON! Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.

Ako vytvoriť posuvný kolotoč člena tímu s Divi

Ako vytvoriť posuvný kolotoč člena tímu s Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px0 !important;border-bottom-width: 0px !important;padding-bottom: XNUMXpx !important;}"][vc_column_text]

Divi: najjednoduchšia téma pre WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Pri vytváraní stránky O mne pravdepodobne budete tiež chcieť predstaviť členov svojho tímu. Umožníte tak návštevníkom interakciu s ľuďmi, ktorí stoja za vašim podnikaním. Ak hľadáte spôsob, ako oživiť sekciu členov tímu na zvitku, tento návod môže byť pre vás. Vytvoríme karusel členov tímu s automatickým posúvaním, ktorý sa bude pohybovať, keď vaši návštevníci budú stránku posúvať. 

demonštrácie

Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.

Posuňte člena tímu divi

Začiatok počatia

Pridajte novú sekciu

vzdialenosť

Začnite pridaním novej bežnej sekcie na stránku, na ktorej pracujete. Otvorte nastavenia sekcií a pridajte vlastné polstrovanie pre rôzne veľkosti obrazoviek.

  • Vrchná výplň: 200px (písací stôl), 100px (tablet a telefón)
  • Spodné čalúnenie: 200px (písací stôl), 100px (tablet a telefón)
Konfigurácia parametrov

pretečeniu

Aby sme sa uistili, že sa v našom dizajne neobjaví žiadny vodorovný posúvač, skryjeme na karte rozšírené pretečenia sekcií.

  • Horizontálny prepad: skrytý
  • Vertikálny prepad: skrytý
Konfigurácia pretečenia

Pridajte riadok č. 1

Štruktúra stĺpcov

Pokračujte v pridávaní nového riadku do sekcie pomocou nasledujúcej štruktúry stĺpcov:

Vyberte rozloženie divi

dimenzovanie

Bez pridania akýchkoľvek modulov ešte otvorte nastavenia riadkov, prepnite na kartu dizajn a zmeňte šírku a maximálnu šírku v nastaveniach veľkosti.

  • Šírka: 90%
  • Maximálna šírka: 1580 pixlov
Parameter divi line

vzdialenosť

Pridáme tiež vlastné vrchné a spodné čalúnenie.

  • Horná vypchávka: 100px
  • Spodné čalúnenie: 100px
Konfigurácia divi riadkovania

Pridajte do stĺpca textový modul

Pridajte obsah H2

Je čas pridať moduly, počnúc prvým textovým modulom. Zadajte obsah H2 podľa vášho výberu.

Zoznámte sa s tímom

Nastavenia textu H2

Prejdite na kartu Návrh modulu a zmeňte nastavenie textu H2 nasledovne:

  • Názov písma 2: Quicksand
  • Názov písma 2: polotučné
  • Farba textu položky 2: # 000000
  • Hlavička 2 Veľkosť textu: 70 px (na počítači), 50 pixelov (tablet), 40 pixlov (na telefóne)
Rozostupy textu Divi

Pridajte do kolóny separačný modul

viditeľnosť

Potom pridajte separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

  • Zobraziť oddeľovač: Áno
Zobraziť oddeľovač divi

Linka

Potom vykonajte niektoré zmeny nastavení linky.

  • Farba čiary: # edf000
  • Štýl čiary: plný
  • Pozícia riadku: hore
Štýl medzery Divi

dimenzovanie

A dokončite parametre modulu príslušnou úpravou parametrov dimenzovania:

  • Hmotnosť deliča: 20px
  • Šírka: 11%
  • Zarovnanie modulu: vľavo
  • Výška: 20px
Dimenzovanie modulu divi line

Pridajte riadok # 2

Štruktúra stĺpcov

Do ďalšieho radu! Použite nasledujúcu štruktúru stĺpcov:

Konfigurácia stĺpca Divi

dimenzovanie

Bez pridania ďalších modulov otvorte parametre linky a upravte parametre veľkosti takto:

  • Použite vlastnú šírku odkvapov: Áno
  • Šírka odkvapov: 2
  • Šírka: 100%
  • Maximálna šírka: 100%
Konfigurácia šírky odkvapu

vzdialenosť

Potom pridajte výplň vľavo a vpravo iba na menšie obrazovky.

  • Výplň doľava: 5% (iba tablet a telefón)
  • Pravá výplň: 5% (iba tablet a telefón)
Konfigurácia štýlu riadkovania

Parametre stĺpca (5x)

Teraz v ďalších troch krokoch tohto tutoriálu urobíme nejaké zmeny v stĺpcoch. Použite tri kroky na každý zo stĺpcov v riadku.

Konfigurácia parametrickej linky Divi

Gradient pozadia

Najskôr do každého stĺpca pridajte gradientné pozadie.

  • Farba 1: rgba (255,255,255,0)
  • Farba 2: rgba (0,0,0,0,84)
  • Typ gradientu: lineárny
  • Počiatočná pozícia: 25%
  • Koncová pozícia: 86%
  • Umiestniť prechod nad obrázok na pozadí: Áno
Konfigurácia zadného stĺpika Divi

Obrázok pozadia

Potom nahrajte obrázok pozadia podľa vášho výberu. Tento obrázok na pozadí predstavuje každého člena tímu, takže pre každý stĺpec použite iný obrázok.

  • Veľkosť obrázka na pozadí: Obal
  • Pozícia obrázka na pozadí: Stred
Pridajte obrázok na pozadí stĺpca divi

Hlavný prvok

Dokončite nastavenia stĺpca pridaním vlastných CSS do hlavného prvku tabletu v každom stĺpci. Tieto riadky kódu CSS nám pomôžu umiestniť stĺpce jeden na druhý na tablete, namiesto dvoch vedľa seba.

šírka: 100%! dôležité; okraj: 50px 0px 50px 0px! dôležité;
Kód css divi stĺpec

Pridajte do stĺpca modul osoby

Pridajte obsah

Na zdieľanie informácií o členoch tímu použijeme modul Osoba. Pridajte prvý modul Osoba do stĺpca 1 a použite akýkoľvek požadovaný obsah.

Meno osoby divi

Odstrániť obrázok

Potom obrázok vymažte. Namiesto toho použijeme obrázok na pozadí stĺpca.

Odstrániť divi obrázok

Obrázok pozadia

Potom pridáme prekrytie obrázka ako obrázok na pozadí modulu. Ten, ktorý používame, nájdete stiahnutím priečinka na začiatku tohto tutoriálu.

  • Veľkosť obrázka na pozadí: Obal
  • Pozícia obrázka na pozadí: Stred
Konfigurácia pozadia modulu osoby

Nastavenia názvu nadpisu

Prejdite na kartu Návrh modulu a zmeňte nastavenie textu nadpisu takto:

  • Úroveň Názov: H3
  • Písmo názvu: Quicksand
  • Hmotnosť písma názvu: tučné
  • Farba textu názvu: #ffffff
  • Veľkosť textu názvu: 230%
Prispôsobenie názvu modulu Divi

Nastavenia textu tela

Zmeňte tiež nastavenia textu tela.

  • Telo písma: Open Sans
  • Farba textu tela: #ffffff
  • Výška línie tela: 2,2 em
Prispôsobenie tela Divi

Nastavenie polohy textu

Potom vykonajte niektoré zmeny nastavení textu polohy.

  • Pozícia písma: Open Sans
  • Farba textu pozície: # edf000
Divi pozícia

vzdialenosť

Dokončite nastavenia modulu pridaním vlastných hodnôt výplne do nastavení medzery.

  • Vrchná vypchávka: 70%
  • Spodná vypchávka: 10%
  • Výplň doľava: 10%
  • Pravá výplň: 10%
Rozstupy osôb medzi osobami

Duplikujte modul Osoba 4-krát

Po dokončení modulu Osoba môžete celý modul naklonovať štyrikrát.

Vložte duplikáty do zvyšných stĺpcov

Umiestnite duplicitné moduly do zvyšných štyroch stĺpcov riadku. Nezabudnite tiež upraviť obsah.

Premeňte riadok na kolotoč s automatickým posúvaním

Zmeňte veľkosť riadka # 2

Teraz, aby sa tento riadok zmenil na karusel člena tímu s automatickým posúvaním, musíme znova otvoriť nastavenia riadkov a zmeniť šírku a maximálnu šírku v nastaveniach veľkosti.

  • Šírka: 180%
  • Maximálna šírka: 220% (stôl), 100% (tablet a telefón)
Riadkovanie medzi riadkami

Pridajte vodorovný pohyb čiary 2

Dokončite nastavenia riadkov pridaním vodorovného pohybu k nastaveniam efektu posúvania na karte Rozšírené a máte hotovo!

  • Aktivujte horizontálny pohyb: Áno
  • Počiatočný posun:
    • Kancelária: 2,5
    • Tablet a telefón: 0
  • Priemerný ofset: 0 (pri 40%)
  • Koncový posun:
    • Kancelária: -25 (na 62%)
    • Tablet a telefón: 0
  • Efekt spúšťacieho pohybu: stred prvku
Konfigurácia animácie rolovania Divi

prehľad

Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.

kancelária

Posuňte člena tímu divi

záverečné myšlienky

V tomto tutoriáli sme vám ukázali, ako byť kreatívni pomocou vstavaných rolovacích efektov Divi. Konkrétne sme znovu vytvorili krásny karusel členov tímu s automatickým posúvaním. Keď sa návštevníci posunú nadol po stránke, zobrazí sa ďalšia časť kolotoča.

Ako pridať viac ikon sociálnych médií do Divi

Ako pridať viac ikon sociálnych médií do Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px0 !important;border-bottom-width: 0px !important;padding-bottom: XNUMXpx !important;}"][vc_column_text]

Divi: najjednoduchšia téma pre WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Divi vám umožňuje ovládať a navrhovať každý detail vášho webu, od hlavičky po pätu. Jedným z najklikanejších prvkov akejkoľvek webovej stránky sú ikony sociálnych médií. Angažované publikum vás chce nájsť inde a spoznať vás. Je zrejmé, že to budete chcieť čo najviac uľahčiť. 

Ukážeme vám teda, ako aktivovať ďalšie ikony sociálnych médií v možnostiach témy Divi, ako používať program Divi Builder na vkladanie ikon sociálnych médií kamkoľvek na stránku alebo príspevok a ako využiť túto silu. témy Divi Builder a pridáte ikony sociálnych médií do každého zákutia vášho webu.

Ako ľahko aktivovať ďalšie ikony sociálnych médií v päte Divi

Najjednoduchší spôsob, ako pridať na svoje stránky Divi ďalšie ikony sociálnych médií, je prejsť na panel Možnosti témy , aktivácia možností pre Facebook, Twitter, Instagram a RSS. Potom už len musíte zadať adresy URL vášho profilu do polí. Keď to urobíte, uvidíte ich ako odkazy na ikony v päte vášho webu:

Sociálne ikony divi

V ponuke informačného panela WordPress prejdite na Divi - Možnosti témy a kliknite na kartu Všeobecný . Posunutím nadol zobrazíte sieťový prepínač. Rovnako pod týmito prepínačmi nezabudnite zadať adresy URL každej ikony Divi social, ktorú aktivujete. V opačnom prípade sa ikona zobrazí, ale kliknutím na ňu používateľ nebude nikde. Pomocou a # namiesto adresy URL udrží používateľa na stránke a nebude ho potenciálne presmerovávať na adresu 404 stránky .

Možnosti divi témy

Posuňte sa na koniec možností svojich motívov a kliknite na ikonu Uložiť zmeny . Teraz môžete prejsť do päty svojej stránky a kliknutím na sociálne ikony ich otestovať!

Ak nevidíte ikony v päte, nezabudnite skontrolovať prispôsobovač tém pod Vzhľad - Prispôsobte a uistite sa, že Zobraziť sociálne ikony je začiarknuté v rámci možností päty.

Divi wordpress

Ak však chcete pre sociálne päty ešte viac možností, posúvajte sa ďalej do našej sekcie Tvorca tém Divi, kde diskutujeme o vlastných šablónach i celkových predvolených hodnotách.

Ako používať Divi Builder na pridávanie sledovačov sociálnych médií na stránku alebo publikovanie obsahu

Niekedy môže mať zmysel vložiť ďalšie ikony sociálnych médií medzi bloky textu, obrázkov alebo iného obsahu v tele stránok alebo príspevkov. Napríklad vaša vstupná stránka alebo stránka Informácie by boli dobrým miestom na pridanie ďalších sociálnych ikon, aby návštevníci vedeli, ako sa s vami spojiť. Určite vyniknú viac ako len odkazom na vaše sociálne profily pomocou bežného textu. Ľudia navyše hľadajú rozpoznateľné ikony.

Môžete použiť program Divi Builder a vložiť ikony sociálnych médií priamo na svoje stránky alebo príspevky pomocou sledovanie sociálnych médií .

Zakaždým, keď na paneli WordPress vytvoríte alebo otvoríte existujúcu stránku alebo článok, uvidíte veľké fialové tlačidlo s otázkou, či chcete alebo nechcete použiť Divi Builder.

Tvorba článku Divi

A samozrejme aj má. Stačí kliknúť Použite nástroj Divi Builder začať budovať svoju stránku alebo uverejňovať príspevky od nuly (alebo od jedného z našich preddefinované rozloženia ). Okrem toho môžete zahrnúť ikony sociálnych médií Divi, ak používate predvolený editor WordPress. Všetko, čo musíte urobiť, je vložiť blok Rozloženie divi a postupujte podľa nasledujúcich krokov.

Rozloženie divi gutenberg

Pomocou tohto nástroja môžete navrhnúť svoju stránku alebo zverejniť príspevok tak, ako chcete, pomocou dostupných modulov na tvorbu stránok. Ak používate program Divi Builder prvýkrát, mali by ste si najskôr prečítať tento prehľad, aby ste jasne pochopili jeho fungovanie.

Keď ste na svoju stránku pripravení pridať ikony sociálnych médií, kliknite na tlačidlo čierny kruh + v časti, do ktorej chcete umiestniť svoje ikony sociálnych médií, a posúvajte zobrazenie, kým sa nezobrazí rámček sledovanie sociálnych médií Objaví.

Vloženie modulu follow on social media

Skôr ako začnete s prispôsobovaním, budete vyzvaní, aby ste si vybrali požadované sociálne siete. Kliknite na Pridajte novú sociálnu sieť .

Pridajte sociálny sieťový modul divi

Potom vyberte jednu z rozbaľovacieho zoznamu.

Pridajte novú sociálnu sieť

V prípade, že ste vybrali, pridajte adresu URL svojho profilu. Voliteľne môžete zvoliť farbu, prechod, pozadie atď. špecifické pre jeho ikonu.

Tlačidlo Prispôsobiť sociálnu sieť

Po pridaní prvej sociálnej siete môžete pokračovať v pridávaní ďalších sietí podľa rovnakých krokov. Všetky budú uvedené na karte Obsah z nastavenia sledovania sociálnych médií . Môžete ich upravovať, kopírovať alebo meniť ich usporiadanie ich presúvaním na miesto.

Prispôsobte si sociálne ikony

Po pridaní sociálnych sietí prejdite na karty Obsah et Koncepcia hrať s ďalšími možnosťami prispôsobenia. Môžete zmeniť všetko od tieňa políčka, polomeru ohraničenia, medzery, filtrov a dokonca aj úvodnú animáciu modulu s ikonami. Máte tiež možnosť zahrnúť tlačidlo Sledovať pre všetky svoje ikony, aby ste na ne upozornili viac. Po dokončení kliknite na zelená značka .

Sledujte nás tlačidlo divi

Potom môžete ikony posúvať po svojej stránke a pracovať s ich rozložením a rozložením, ako uznáte za vhodné. (The Divi možnosti transformácie mimochodom, sú úžasné.) Keď ste spokojní so všetkými svojimi rozhodnutiami, stlačte kláves zelené tlačidlo Uložiť (alebo Publikovať) v pravom dolnom rohu zaregistrujte svoj nový modul ikony sociálnych médií. Ak nevidíte tlačidlo Zverejniť / Uložiť, klepnite na fialová elipsa (tri bodky) v spodnej dolnej časti obrazovky rozšírite ponuku.

Tlačidlo Divi nás sleduje

Potom sa na vašich stránkach zobrazia ikony vašich sociálnych médií.

Pomocou programu Divi Theme Builder pridajte ikony sociálnych médií

Ako sme už spomenuli vyššie, program Divi Theme Builder je mocný nástroj, ktorý vám dáva úplnú kontrolu nad takmer všetkými aspektmi vášho webu. Takže ak hľadáte pridať ikony sociálnych médií kamkoľvek, generátor tém vás obsiahne.

Ak chcete začať s generátorom tém, prejdite na stránku Divi - generátor tém V WordPress paneli.

Staviteľ Divi

Jedná sa predovšetkým o pridanie ikon sociálnych médií do existujúceho rozloženia generátora tém Divi. Alebo do nového! Nezáleží na tom, či pridáte do hlavičky, päty alebo do celého tela svojho webu - alebo dokonca do určitých kategórií alebo iných špecializovaných typov stránok. Budeš postupovať rovnako.

Najskôr nájdeme sekciu, ktorú chceme pridať. Môže to byť opäť globálne alebo personalizované. Ak ste nástroj na tvorbu tém nikdy predtým nepoužívali, je to jednoduché. K jednotlivým príspevkom budeme pridávať ikony sociálnych médií. Môžete teda začať kliknutím na Pridajte nový model a výber Všetky správy ou Správy v konkrétnych kategóriách . Potom začiarknite kategórie, ktoré chcete zahrnúť. Potom kliknite na Vytvorte šablónu .

Pridajte model divi

Ak ste už nastavili šablóny, kliknite na Upravte ceruzku alebo dvakrát kliknite na časť, ktorú chcete upraviť.

Rozloženie Divi

Proces pridávania ikon sociálnych médií je tu rovnaký, ako je popísané vyššie v generátore. Pretože však namiesto jednoduchej úpravy jednej stránky používate nástroj na tvorbu tém, ikony sa nezobrazia iba tam, kde ste ich vybrali. Šablóny je možné pridať do hlavičiek, päty a globálnych šablón. Môžete si zvoliť, ako a kedy sa zobrazia, bez toho, aby ste ich museli konfigurovať raz. Nie stránku po stránke, ako by ste to robili vyššie.

Napríklad, ak chceme zahrnúť ikony sociálnych médií pod názov príspevku, ale nad obsah príspevku v každom blogovom príspevku, ktorý zverejníme, pridáme iba modul do nasledovať sociálne siete. Kliknite na kruh Noir + a vyberte ju v dialógovom okne Vložte modul .

Vyberte sociálny modul

Potom modul jednoducho pretiahnite na miesto, kde sa majú zobrazovať ikony sociálnych médií. (Pre toto umiestnenie používame režim drôtového modelu). Potom stačí pridať sociálne siete, ktoré chcete zobrazovať. Potom prispôsobíte veľkosť a sfarbenie tak, ako ste to urobili vyššie.

Sociálna ikona mediálny modul divi

A práve tak ste do generátora tém Divi pridali niekoľko ikon na sociálnych sieťach. Zobrazia sa vo všetkých blogových príspevkoch, ktoré vytvoríte (v tomto príklade).

Vzhľad na divi s tlačidlom zdieľania

A ak sa vám nepáči, ako vyzerajú, generátor tém sa dá ľahko prispôsobiť. Stačí ich presunúť na iné miesto, napríklad do hornej časti bočného panela.

Presunutie modulu sociálneho zdieľania Divi

Nezabudnite kliknúť na zelené tlačidlo Registrovať v rohu. Teraz sa každý blogový príspevok s touto šablónou na webe bude nahrávať s vašimi ikonami sociálnych médií v hornej časti bočného panela.

ikony bočného panela

Pridávanie ikon sociálnych médií do hlavičky a päty pomocou nástroja Divi Theme Builder

Možno vám predvolené ikony sociálnych médií v nastaveniach Divi nefungovali alebo neponúkali dostatočné prispôsobenie. V takom prípade ho môžete kedykoľvek použiť na dokonalejšie prispôsobenie témy. 

V ľubovoľnej šablóne môžete pridať vlastnú pätu. Toto nahradí predvolené nastavenie Divi. Akákoľvek šablóna bez vlastnej šablóny zobrazí predvolený prvok témy. Ikony sociálnych médií sa môžu líšiť od archívu po stránke v závislosti od potrieb vašich používateľov.

Personalizácia divi rozloženia

Môžete tiež pridať globálne päty, ktoré nahradia všetko ďalšie päty, ktoré ste vytvorili. (To platí aj pre globálne orgány a hlavičky). 

Ak ste vytvorili 4 vlastné päty pre príspevky, stránky, projekty a kategórie, ale potom vytvoríte globálnu pätu, zobrazí sa iba globálna päta. 

Globálne šablóny sú vynikajúce pre ikony sociálnych médií na celom webe, napríklad pre noviny alebo značku. Zatiaľ čo vlastné šablóny so sociálnymi ikonami môžu byť najlepšie pre jednotlivých autorov, ktorí sú súčasťou siete.

Pridajte pätu globálneho divi

Pomocou nástroja Divi Builder na prispôsobené šablóny hlavičiek, päty a tela môžete pridať ikony sociálnych médií takmer do ktorejkoľvek časti súboru Divi, ktorú chcete. Nie ste obmedzený na predvolené vzory alebo musíte kopať do súborového systému WordPress. Pomocou generátora tém môžete navyše použiť ktorúkoľvek z možností návrhu Divi na zostavenie ikon sociálnych médií a ich vyniknutie tým správnym spôsobom pre každé konkrétne publikum.

záver

Ak máte predvolené možnosti päty Divi, nástroj Divi Builder pre príspevky a stránky, mocnosť nástroja Divi Theme Builder, nie je dôvod, prečo si musíte nainštalovať doplnok na pridanie ikon sociálnych médií na vaše webové stránky. Divi vám dáva úplnú kontrolu nad tým, ako vaše sociálne ikony vyzerajú a kde sú. 

Či už potrebujete propagovať značku, hosťujúceho autora, stajňu tvorcov obsahu, alebo len miesta, kde vás nájdete online, Divi má spôsob, ako to urobiť. Sme jednostranní, ale myslíme si, že je to najjednoduchší, najjednoduchší a najštýlovejší spôsob pridania ikon sociálnych médií na váš web.

Vytvorenie dynamickej siete výhod pre produkty WooCommerce

Vytvorenie dynamickej siete výhod pre produkty WooCommerce

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px0 !important;border-bottom-width: 0px !important;padding-bottom: XNUMXpx !important;}"][vc_column_text]

Divi: najjednoduchšia téma pre WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Spôsob, akým navrhujete svoju produktovú stránku, má okamžitý vplyv na správanie vašich návštevníkov. Kvalitne prepracovaný a prispôsobený dizajn stránky produktu môže návštevníkom uľahčiť rozhodovanie, či si chcú kúpiť váš produkt. Ak hľadáte spôsob, ako zvýšiť atraktivitu svojej produktovej stránky, pravdepodobne sa vám bude páčiť tento návod. 

Ukážeme vám, ako do návrhu zahrnúť dynamickú mriežku výhody produktu pomocou Divi a doplnku Advanced Custom Fields. Začneme vytvorením skupiny polí pre výhody. Potom vyplníme vlastné polia na našej stránke produktu a zahrnieme dynamický obsah do našej šablóny stránky produktu. 

Možný výsledok

Predtým, ako sa ponoríme do tutoriálu, poďme sa rýchlo pozrieť na výsledok v rôznych veľkostiach obrazovky.

Možný výsledok divi

1. Nainštalujte doplnok FieldF Plugin A Product Benefit Field Group

Nainštalujte doplnok Advanced Custom Fields

Na zobrazenie rôznych výhod produktov v koncovom rozhraní našich produktov budeme používať bezplatný doplnok Advanced Custom Fields. Prístup k vašim Backend WordPress> Pluginy> Pridať nové> Nájsť doplnok ACF> Inštalovať> Aktivovať .

Nainštalujte si rozšírený doplnok vlastného poľa

Prejdite na vlastné polia a pridajte novú skupinu polí

Po nainštalovaní a aktivácii doplnku ACF budete mať prístup k svojim vlastným poliam a pridáte novú skupinu polí.

Vytvorte polia ACF

Nastavenia skupiny polí

Priraďte svojej novej skupine polí názov a umožnite jej zobrazovanie iba na stránkach produktov.

  • „Typ správy“ sa rovná „Produkt“
Pridajte pravidlá

Pridajte prvé pole

Pokračujte pridaním nového poľa pre názov prvej výhody produktu.

  • Štítok poľa: Názov výhody 1
  • Typ poľa: text
Pridajte pole ac
Prispôsobenie poľa Divi

Opakujte krok pre zvyšné polia

To isté urobte pre ďalšie výhody produktu a ich popisy. Všetky tieto polia vyžadujú priradený typ poľa „Text“.

  • Názov služby 1
  • Opis dávok 1
  • Názov služby 2
  • Opis dávok 2
  • Názov služby 3
  • Opis dávok 3
  • Názov služby 4
  • Opis dávok 4
Nakonfigurujte polia ACF

2. Pridávať výhody produktom

Otvorte alebo pridajte nový produkt

Po vytvorení skupiny polí a polí môžete pridať výhody svojich produktov na individuálnej úrovni. Otvorte produkt podľa vášho výberu alebo vytvorte nový.

Tvorba produktov Divi

Vyplňte polia Výhody produktu

A plniť výhody produktu.

Vyplňte polia výhod divi

3. Vytvorte šablónu stránky produktu v aplikácii Divi Theme Builder

Prejdite do Divi Theme Builder a pridajte novú šablónu

Je čas začať s Divi! Ak chcete vytvoriť novú šablónu, choďte do Divi Theme Builder a kliknite na „Pridať novú šablónu“.

Tvorca tém Divi

Použite šablónu na všetky produkty

Túto šablónu používame na všetkých produktoch, ale môžete zvoliť produkty s konkrétnou kategóriou alebo štítkom.

Pridajte všetky produkty woocommerce

Zadajte editor šablón tela modelu

Potom zadajte telo modelu kliknutím na „Pridať vlastné telo“ a výberom „Vytvoriť vlastné telo“.

Budovanie tela divi

Upraviť časť # 1

Farba pozadia

Keď sa nachádzate v editore šablón, všimnete si časť. Otvorte túto časť a zmeňte farbu pozadia na čiernu.

  • Farba pozadia: # 000000
Konfigurácia pozadia sekcie Divi

vzdialenosť

Prejdite na kartu dizajnu sekcie a pridajte nejaké vlastné čalúnenie vrchným a spodným polstrovaním.

  • Vrchná výplň: 10px
  • Spodné čalúnenie: 10px
Konfigurácia rozstupov častí Divi

Pridajte nový riadok

Štruktúra stĺpca

Pokračujme pridaním nového riadku do sekcie, ktorá má nasledujúcu štruktúru:

Konfigurácia usporiadania riadkového modulu

vzdialenosť

Bez pridania akýchkoľvek režimov otvorme nastavenia riadkov a urobme úpravy medzery.

  • Použite prispôsobený žľab: Áno
  • Šírka odkvapov: 1
  • Šírka: 90%
  • Maximálna šírka: 100%
Nastavenia medzery medzi riadkovými modulmi

vzdialenosť

Odstráňte všetky horné a spodné vnútorné medzery.

  • Vysoká vnútorná marža: 0px
  • Nízka vnútorná marža: 0px
Nastavenia medzery medzi riadkami modulu Divi

Pridajte do stĺpca modul Woo Cart Notice

Dynamický obsah

Jediným modulom, ktorý v tomto riadku a sekcii potrebujeme, je modul Woo Cart Notice. Uistite sa, že je v dynamickej sekcii vybratý „Tento produkt“.

  • Produkt: Tento produkt
Nastavenia modulu oznámenia woo košíka divi

Farebné pozadie

Potom otvorte nastavenia modulu a použite priehľadné pozadie.

  • Farba pozadia: rgba (0,0,0,0)
Nastavenia divi modulu Woo cart

Nastavenia textu

Prepnite na kartu „Dizajn“ a zmeňte písmo textu.

  • Písmo textu: Karla
Nastavenia písma modulu Divi

Nastavenie tlačidiel

Dokončite nastavenia doplnku definovaním nastavení štýlu:

  • Použiť vlastné štýly pre tlačidlo: Áno
  • Veľkosť textu tlačidla: 20 px
  • Farba textu tlačidla: # 000000
  • Pozadie tlačidla: # ffd623
  • Šírka okraja tlačidla: 0px
  • Tlačidlo Zaoblený okraj: 0 pixlov
Nastavenia farieb modulu oznámenia oznámenia Woo
  • Písmo tlačidla: Oswald
  • Štýl písma tlačidla: Shift
Úprava farebného návrhu modulu Woo cart module
  • Vysoká vnútorná marža: 20px
  • Nízka vnútorná marža: 20px
  • Ľavá vnútorná marža: 50px
  • Vnútorná pravá marža: 50px
Oznámenie o konfiguračnom dizajnovom module woo cart

Pridajte časť # 2

Gradient pozadia

Pridajte ďalšiu pravidelnú časť pod predchádzajúcu. Potom otvorte nastavenia a použite gradientné pozadie nasledovne:

  • Farba 1: # 000000
  • Farba 2: #ffffff
  • Počiatočná pozícia:
    • Pracovná plocha: 30%
    • Tableta: 57%
    • Telefón: 54%
  • Koncová pozícia:
    • Pracovná plocha: 30%
    • Tableta: 57%
    • Telefón: 54%
Zadné nastavenie modulu Divi line

vzdialenosť

Poďme na kartu Návrh a pridajme veľkú vnútornú rezervu.

  • Vrchná výplň: 150px
Konfigurácia rozstupov riadkových modulov Divi

Pridať nový riadok

Štruktúra stĺpca

Pokračujte pridaním nového riadku s rovnakou štruktúrou, ako je uvedené nižšie:

Konfigurácia štýlu Divi line

dimenzovanie

Bez pridania akýchkoľvek ďalších úprav otvoríme nastavenia a medzery zmeníme nasledovne:

  • Použite vlastné odkvapy: Áno
  • Odkvapový priestor: 1
  • Šírka: 95%
  • Maximálna šírka: 2560 px
  • Zarovnanie čiary: Stred
Divi modul konfigurácie odkvapu

riadkovanie

Odstránime tiež horný vnútorný okraj.

  • Vrchná výplň: 0px
Konfigurácia rozstupov modulov Divi

Hlavný prvok

A aby sme obsah stĺpca vycentrovali na plochu, použijeme dva riadky kódu CSS v hlavnom prvku riadkového modulu.

Desktop:

displej: flex; zarovnanie položiek: stred;

Tablet a telefón:

zobrazenie: blok;
Nastavenia štýlu modulu Divi line

Pridajte modul Woo Image do stĺpca 1

Dynamický obsah

Je čas pridať moduly, začneme s modulom Woo Images v stĺpci 1. Uistite sa, že je vybratý „Tento produkt“.

  • Produkt: Tento produkt
Nastavenia obrazového modulu produktu Woocommerce

Efekt vertikálnej rolovacej animácie

Jemný pohyb pridáme do obrázka pomocou efektu posúvania vodorovného pohybu na karte rozšírené.

  • Aktivujte vertikálny pohyb: Áno
  • Počiatočný posun:
    • Kancelária: -4
    • Tablet a telefón: 0
  • Priemerný ofset: 0
  • Koncový posun: 0
  • Efekt spúšťacieho pohybu: stred prvku
Úprava obrazového modulu Divi

Pridajte stĺpcový názov modulu Woo

Dynamický obsah

V stĺpci 2 je prvý mód, ktorý potrebujeme, modus s názvom Woo. Uistite sa, že je v oblasti dynamického obsahu vybratá možnosť „Tento produkt“.

  • Produkt: Tento produkt
mriežka výhod produktu

Nastavenia názvu nadpisu

Potom prejdite na kartu Dizajn a text nadpisu upravte nasledujúcim spôsobom:

  • Písmo názvu: Oswald
  • Štýl písma názvu: veľké písmená
  • Farba textu názvu: # ffd623
  • Veľkosť textu názvu: 80 pixlov
Dizajnová úprava názvu modulu Divi

vzdialenosť

Vyplňte titulný modul Woo pridaním ľavého a pravého okraja.

  • Ľavý okraj: 5%
  • Pravý okraj: 5%
Nastavenie modulu názvu Divi

Pridajte modul popisu Woo do stĺpca 2

Dynamický obsah

Prejdime k ďalšiemu modulu, ktorým je modul popisu Woo. Používame na to nasledujúci dynamický obsah:

  • Produkt: Tento produkt
  • Typ opisu: Krátky popis
Nastavenia modulu popisu produktu

Nastavenia textu

Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:

  • Písmo textu: Karla
  • Farba textu: #dbdbdb
  • Veľkosť textu: 17 px (stolné počítače a tablety), 15 px (telefóny)
  • Výška riadku textu: 1,9 em
Popis modulu úpravy farieb divi

dimenzovanie

Potom zmeňte šírku na rôznych veľkostiach obrazovky.

  • Šírka: 59% (pre počítače), 82% (pre tablety a telefóny)
Nastavenie šírky modulu Divi Summary

vzdialenosť

Vyplňte modul popisu Woo pridaním vlastných hodnôt okrajov v nastaveniach medzery.

  • Horný okraj: 50px
  • Dolný okraj: 100px
  • Ľavý okraj: 5%
  • Pravý okraj: 5%
Modul popisu produktu Divi

Pridajte modul Blurb do stĺpca 2

Dynamický obsah

Na zobrazenie výhod produktu, ktoré sme pridali v prvej časti tohto návodu, použijeme moduly Blurb. Pridajte prvý modul Blurb a použite dynamický obsah prvej výhody vytvorenej pre názov a telo.

  • Názov: Benefit Hlava 1
  • Telo: Opis výhody 1
Nastavenie textu modulu Divi Summary

Nahrať obrázok

Nahrajte obrázok alebo použite ikonu podľa vášho výberu. Tie, ktoré sme použili v tomto tutoriále, nájdete v priečinku na stiahnutie, ktoré ste si mohli stiahnuť na začiatku tohto tutoriálu.

Súhrnná konfigurácia divi obrazového modulu

Nastavenia obrázkov / ikon

Prejdite na kartu dizajnu modulu a zmeňte nastavenia obrázka / ikony takto:

  • Umiestnenie obrázka / ikony: hore
  • Zarovnanie obrázka / ikon: doľava
Modul nastavenia Divi

Názov textu Nastavenia

Ďalej upravujeme nastavenia textu nadpisu.

  • Písmo názvu: Oswald
  • Štýl písma názvu: veľké písmená
  • Veľkosť textu názvu: 25 pixlov
Konfigurácia písma modulu súhrnu divi

Nastavenia textu tela

Spolu s nastavením textu tela.

  • Text tela: Karla
  • Veľkosť textu: 17 px (stolné počítače a tablety), 15 px (telefóny)
  • Výška línie tela: 1,9 em
Konfigurácia súhrnného oddielu textového modulu i

dimenzovanie

Potom prejdite na nastavenie veľkosti a zmeňte šírky. Je dôležité použiť hlavnú šírku menšiu ako 50%, čo nám umožní v nasledujúcich krokoch zobraziť dva moduly Blurb vedľa seba.

  • Šírka obrázka: 25%
  • Šírka: 49%
Konfigurácia veľkosti súhrnného modulu divi

vzdialenosť

Rovnako pridáme medzery okolo modulu Blurb pomocou vlastných hodnôt výplne na rôznych veľkostiach obrazovky.

  • Vrchná vypchávka: 8%
  • Spodná vypchávka: 8%
  • Čalúnenie vľavo: 8% (stolný počítač a tablet), 2% (telefón)
  • Pravá výplň: 8% (stolný počítač a tablet) 2% (telefón)
Nakonfigurujte rozstup modulov súhrnu divi

Hlavný prvok

Teraz sa uistíme, že modul Summary zobrazuje text vedľa seba, a to v dvoch krokoch. Najprv skontrolujeme, či je šírka modulu menšia ako 50% (ako sme to urobili v predchádzajúcom kroku). Ďalej použijeme vlastnosť v riadku. Túto vlastnosť CSS pridáme na hlavný prvok v rozšírenej sekcii.

display: inline-block;
Pridajte modul divi kódu CSS

Zhrnutie modulu zhrnutia trikrát

Po dokončení prvého módu Blurb ho môžete klonovať trikrát. Automaticky si všimnete, že moduly Blurb sa zobrazujú v mriežke.

Sekcia názvu produktu divi

Upravte obrázky modulu Blurb

Upravte obrázok v každom duplikáte podložky Blurb. Nájdete ich v priečinku na stiahnutie, ktorý ste si možno stiahli na začiatku tohto článku.

Obrázok modulu zhrnutia Divi

Upravte dynamický obsah modulu Blurb

Upravte aj dynamický obsah každého duplikovaného modulu Blurb.

  • Názov: Názov služby (2,3 alebo 4)
  • Telo: opis výhod (2,3 alebo 4)
Pravidlá modulu zhrnutia Divi

Pridajte hranice do modulov Blurb jednotlivo

Nastavenie okrajov modulu 1

Teraz, aby sme dokončili návrh našej mriežky, pridáme hranice k modulom Blurb na individuálnej úrovni. Otvorte prvý Blurb mód a použite rovný okraj.

  • Šírka pravého okraja: 1px
  • Farba pravého okraja: # ffd623
Modul súhrnu divi konfigurácie so zaobleným okrajom

Do prvého modulu Blurb tiež pridajte dolnú hranicu.

  • Šírka dolného okraja: 1px
  • Farba dolného okraja: # 000000
Nakonfigurujte dolný okraj divi
Nastavenie okrajov modulu 2

Potom otvorte druhý modul Blurb a použite spodný okraj.

  • Šírka dolného okraja: 1px
  • Farba dolného okraja: # 000000
Súhrnný modul konfiguračného ohraničenia divi
Nastavenie okrajov modulu 3

Dokončite návrh mriežky pridaním priameho okraja do tretieho modulu Blurb.

  • Šírka pravého okraja: 1px
  • Farba pravého okraja: # ffd623
mriežka výhod produktu

Pridať Woo Pridať do košíka Modul v stĺpci 2

Dynamický obsah

Posledným modulom, ktorý v našom dizajne potrebujeme, je modul Woo Add to Cart. Uistite sa, že je v oblasti dynamického obsahu vybratá možnosť „Tento produkt“.

  • Produkt: Tento produkt
Pridajte na kartu nastavenia modulu divi

Nastavenia poľa

Prejdite na nasledujúcu kartu návrhu a zmeňte nastavenia poľa.

  • Farba pozadia polí: #ffffff
  • Farba textu poľa: # 000000
Konfigurácia modulu farebných štýlov pridať do košíka divi
  • Zaoblené polia: 0px (všetky rohy)
  • Šírka dolného okraja polí: 1px
  • Farba dolného okraja polí: # 000000
Nakonfigurujte rozmiestnenie častí divi

Nastavenia tlačidiel

Potom podľa toho upravte tlačidlo:

  • Pre tlačidlo použite vlastné štýly: Áno
  • Veľkosť textu tlačidla: 20 pixlov
  • Farba textu tlačidla: # 000000
  • Farba pozadia tlačidla: # ffd623
  • Šírka okraja tlačidla: 0px
  • Polomer okraja tlačidla: 0 px
Nakonfigurujte dizajn tlačidiel divi
  • Písmo tlačidla: Oswald
  • Štýl písma tlačidla: veľké písmená
Konfigurujte tlačidlo divi
  • Horná vypchávka: 20px
  • Spodné čalúnenie: 20px
  • Ľavé čalúnenie: 50px
  • Pravá výplň: 50px
Nakonfigurujte veľkosť modulu divi

vzdialenosť

A dokončite parametre modulu pridaním vlastných hodnôt okrajov.

  • Horný okraj: 100px
  • Ľavý okraj: 5%
Nakonfigurujte medzery medzi divmi

3. Uložte zmeny generátora témy a pozrite si výsledok

Po dokončení navrhovania šablóny stránky produktu môžete uložiť všetky zmeny nástroja Tvorca tém a zobraziť výsledky svojich produktov!

Ušetrite divi dizajn
Uložiť divi úpravy

prehľad

Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.

Výsledok ukážky

záverečné myšlienky

V tomto článku sme si ukázali, ako byť kreatívni pomocou svojej nasledujúcej šablóny stránky produktu Divi. Konkrétne sme vám ukázali, ako zahrnúť dynamickú mriežku výhod produktu a pridať tak na stránku produktu ďalšie výhody. Tento návod sme vytvorili pomocou programu Divi v kombinácii s doplnkom Advanced Custom Fields. Môžete si tiež zadarmo stiahnuť súbor JSON! Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.

Ako implementovať temný režim na svoje stránky s Divi

Ako implementovať temný režim na svoje stránky s Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px0 !important;border-bottom-width: 0px !important;padding-bottom: XNUMXpx !important;}"][vc_column_text]

Divi: najjednoduchšia téma pre WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Dark Mode si naďalej získava popularitu ako pohodlná voľba, ktorá používateľom umožňuje využívať web s menšou záťažou pre oči. Zmierte sa s tým, všetci máme tendenciu tráviť viac času pozeraním na obrazovky, ako by sme pravdepodobne mali, takže akékoľvek ďalšie pohodlie pre používateľov (napríklad tmavý režim) môže trvať dlho. 

Operačné systémy, programy a prehľadávače zvyčajne obsahujú zabudované funkcie tmavého režimu, ale niektorí vývojári ho posúvajú na inú úroveň tým, že pre svoje webové stránky zahrnujú prispôsobené tmavé režimy. Cieľom je prevziať väčšiu kontrolu nad tým, ako ich web vyzerá v tmavom režime, bez toho, aby ste museli robiť kompromisy v oblasti značky a / alebo dizajnu.

V tomto tutoriále vám ukážeme, ako vytvoriť vlastný tmavý režim, ktorý umožňuje prepínať v Divi úplne od začiatku bez doplnku. Vďaka tejto funkcii prepínania tmavého režimu budete mať kontrolu nad dizajnom tmavého režimu a budete mať lepší dojem používateľa prispôsobený vašej značke.

Začnime!

prehľad

Tu je ukážka dizajnu, ktorý vytvoríme v tomto návode.

Tu je prepínač vlastného temného režimu, ktorý chceme vytvoriť.

Prepnúť tmavý režim

A tu je režim pred a po tmavom aplikovaný na jedno z našich preddefinovaných rozložení.

A tu je prepínač tmavého režimu pridaný do globálnej hlavičky. Všimnite si, ako pri prehliadaní webu zostáva svetlý / tmavý režim.

Časť 1: Vytvorenie prepínača z tmavého režimu

V tejto prvej časti tutoriálu budeme pripravovať prepínač tmavého režimu so stránkou v Divi. Po vytvorení prepínača pomocou kódu ho budete môcť uložiť do knižnice Divi a pridať na ľubovoľné miesto na svojej webovej stránke.

Ak chcete začať, pridajte do predvolenej sekcie jeden riadok stĺpca, keď budete od začiatku vytvárať program Divi na prednej strane.

Oddiel Divi

Pridať modul súhrnu

Na zostavenie vlastného prepínača navrhneme modul Blurb s trochou prispôsobeného CSS.

Pridajte nový riadok textového modulu na riadok.

Obsah

Odstráňte predvolený fiktívny obsah pre nadpis a text. Potom pridajte štvorcovú ikonu na miesto obrázka.

Modul súhrnu Divi

Koncepcia

Prejdite na nastavenia dizajnu a aktualizujte nasledujúce informácie:

  • Farba ikony: # 666666
  • Zarovnanie obrázka / ikony: vľavo
  • Veľkosť písma ikony: 22 pixelov
Konfigurácia ikony Divi
  • Šírka: 50px
  • Zarovnanie modulu: stred
  • Výška: 25px
Konfigurácia veľkosti Divi
  • Marža: nízka 0px
  • Zaoblené rohy: 4px
  • Šírka okraja: 2px
  • Farba orámovania: # 666666
Konfigurácia hranice Divi

Vlastné CSS

Keď je dizajn na mieste, prepnite na kartu Rozšírené. V časti Vlastné CSS pridajte do hlavného prvku nasledujúce vlastné CSS, aby ste sa ubezpečili, že pretečenie nie je zakryté štýlom zaoblených rohov.

pretečenie: viditeľné! dôležité;

Potom pridajte do elementu After nasledujúce vlastné CSS:

obsah: "svetlo"; poloha: absolútna; vľavo: -35px; horná: 0px;

Tým sa k modulu Blurb pridá označenie, ktoré po kliknutí zmeníme zo „svetlého“ na „tmavý“.

Prepínacie tlačidlo Divi

Návrh textu tela

Pretože text po pseudoelementu dedí štýly základného textu, môžeme štýly základného textu pridať pomocou možností Divi nasledovne:

  • Text tela: Roboto
  • Farba textu tela: # 666666
  • Veľkosť textu tela: 13px
  • Medzera písmen tela: 1px
Prepínacie tlačidlo písma

Pridanie vlastného kódu s modulom kódu

Na pridanie potrebného kódu (CSS / JQuery) na ovládanie prepínača v tmavom režime použijeme kódový modul.

Vytvorte nový modul kódu pod modulom Blurb v rovnakom stĺpci.

Pridajte modul kódu

Potom vložte nasledujúci kód do oblasti kódu:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Pridávanie vlastných tried CSS

Vlastný kód vyžaduje, aby ste do modulu alebo prepínača Blurb pridali vlastnú triedu CSS. To umožní, aby reklama spustila funkciu prepínania tmavého režimu a funkčnosť po kliknutí.

Trieda modulu Blurb

Otvorte nastavenia modulu Blurb a pridajte vlastnú triedu CSS takto:

  • Trieda CSS: et-dark-toggle
Divi CSS kód

Trieda schopná tmavého režimu

Tiež musíme do každého prvku Divi pridať vlastnú triedu CSS, ktorú chceme mať v tmavom režime. Keď má prvok triedu CSS, tento prvok dedí vlastné CSS „tmavého režimu“ v kóde, ktorý sme pridali po povolení tmavého režimu. Táto metóda nám dáva väčšiu kontrolu nad dizajnom tmavého režimu, pretože niektoré prvky nemusia vyžadovať styling v tmavom režime.

Na začiatok môžeme pridať temný režim do časti obsahujúcej prepínač v tmavom režime.

Otvorte parametre sekcie a pridajte nasledujúcu triedu CSS:

  • Trieda CSS: schopná využívať režim et-dark
Sekcia divi selektora CSS

Časť 2: Pridanie funkcií temného režimu na stránku Divi

Teraz, keď máme zavedený kód a triedy CSS, sme pripravení použiť funkčnosť a dizajn tmavého režimu na celú stránku v Divi. Aby sme to dosiahli, použijeme naše premade rozloženie vstupnej stránky mobilnej aplikácie.

Ak chcete pridať rozloženie, otvorte ponuku nastavení v dolnej časti vizuálneho nástroja na tvorbu a kliknite na ikonu Pridať nové rozloženie.

Potom vyberte rozloženie vstupnej stránky mobilnej aplikácie na karte Preddefinované rozloženia.

Uistite sa, že NIE je vybratá možnosť „Nahradiť existujúci obsah“. Nechcete vyčistiť sekciu pomocou prepínača tmavého režimu.

Vyberte rozloženie divi 1

Pretože štýl tmavého režimu sa bude vzťahovať iba na prvky triedy CSS „schopný a tmavý režim“, môžeme sa rozhodnúť pridať na stránku rôznymi spôsobmi.

  1. Triedu CSS môžeme pridať do každého prvku stránky samostatne.
  2. Triedu CSS by sme mohli rozšíriť na prvky na celej stránke (to by bolo rýchlejšie, ako keby sme to robili ručne). Mohli by sme napríklad otvoriť nastavenia sekcie pre hornú sekciu a rozšíriť triedu CSS pre túto sekciu na všetky sekcie stránky.
  3. Triedu CSS môžeme pridať k globálnym predvoleným hodnotám prvku. Týmto sa trieda CSS použije na všetky prvky na celom webe a na celom webe sa pridá funkcia tmavého režimu. Mohli by sme napríklad otvoriť nastavenia sekcií a kliknúť na ikonu globálnej predvolenej hodnoty, aby sme zmenili predvolené hodnoty globálnej sekcie. Potom môžeme pridať triedu CSS a zaregistrovať ju ako triedu CSS pre všetky sekcie webu.

Pridanie triedy CSS do prvkov stránky

V tomto príklade aktualizujeme prvky stránky pridaním triedy CSS do globálnych predvolených hodnôt pre sekcie a textové moduly. Postupne tiež urobíme nejaké doplnky k ďalším prvkom stránky.

Všetky oddiely

Ak chcete pridať triedu CSS do všetkých sekcií, otvorte nastavenia hornej časti, ktorá obsahuje prepínač tmavého režimu. Potom zmeňte globálne predvolené nastavenia sekcie a do sekcie globálne predvolené hodnoty pridajte nasledujúcu triedu CSS:

  • Trieda CSS: schopná využívať režim et-dark

Všetky špecializované sekcie

Do globálnych predvolených nastavení v špecializovanej sekcii tiež pridajte triedu CSS.

Pridajte do všetkých špecializovaných sekcií

Textové moduly

Potom otvorte nastavenia jedného z textových modulov na stránke a do globálnych predvolených nastavení textu pridajte rovnakú triedu CSS.

Pridať do textových modulov

Ak chcete otestovať výsledok, prejdite na živú stránku a kliknite na prepínač v tmavom režime v hornej časti stránky.

Táto stránka by mala vyzerať v jasnom režime.

Vymazať režim

A tu by mala vyzerať stránka v tmavom režime.

Tmavý režim

Dodatočné zdroje

Tu je niekoľko ďalších zdrojov, ktoré by vás mohli zaujímať.

záverečné myšlienky

Vybavenie vášho webu Divi prispôsobeným prepínaním tmavého režimu môže byť skvelým spôsobom, ako zvýšiť užívateľskú skúsenosť a vytvoriť úplne nový dizajn, ktorý poteší aj uľaví oku. Dúfam, že to bude pre vás užitočné.