Divi vám umožňuje vytvárať neobmedzené množstvo oblastí pripravených na použitie za chodu. Bočné panely potom možno pridať na ľubovoľnú stránku, čo vám umožní vytvoriť jedinečné bočné panely pre rôzne časti vašej stránky webové stránky.
Ako pridať modul widgetu Zonde z Divi
Predtým, ako budete môcť na svoju stránku pridať modul bočného panela, musíte najskôr prejsť do Divi Builder. Raz Divi téma nainštalovaný na vašom webové stránky, 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 keď si prezeráte svoje webové stránky v popredí, ak ste prihlásení do svojho hlavného panela WordPress.
Keď už používate program Visual Builder, môžete kliknutím na sivé tlačidlo (+) pridať na 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.
Vyhľadajte modul bočného panela v zozname modulov a kliknutím naň ho pridajte na svoju stránku. V zozname modulov je možné vyhľadávať, čo znamená, že môžete tiež napísať slovo „bočný panel“ a potom kliknúť na tlačidlo „Zadať“, čím automaticky vyhľadáte a pridáte modul bočného panela! 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 bočného panela na stránku vášho blogu
Modul bočného panela umožňuje vložiť bočný panel (a všetky jeho vstavané miniaplikácie) kamkoľvek na stránku. V skutočnosti môžete pridať ktorúkoľvek oblasť widgetov pomocou modulu bočného panela. V tomto príklade vám ukážem, ako vložiť vlastný bočný panel na stránku svojho blogu pomocou špecializovanej sekcie na zobrazenie miniaplikácie Vyhľadávanie a Posledné príspevky na WordPress.
Táto stránka blogu má hlavičku celej šírky, ktorá zobrazuje názov blogu v hornej časti stránky. Pod modulom hlavičky s plnou šírkou je špeciálne rozloženie s modulom blogu vľavo a pravou oblasťou zvislého bočného panela vpravo.
Používanie špecializovanej sekcie vám umožňuje pridávať zložité variácie stĺpcov vedľa vertikálnych bočných panelov bez toho, aby ste na stránku pridávali nežiaduce zlomy. To je ideálne riešenie pre blog s bočným panelom.
Najskôr sa musíte ubezpečiť, že máte widgety nastavené na stránke Widgety na vašom hlavnom paneli WordPress. V tomto príklade pridávam miniaplikáciu Hľadať a miniaplikáciu Posledné články do miniaplikácie Bočný panel.
Potom implementujte program Visual Builder na úpravu stránky blogu. Pridajte na svoju stránku špecializovanú sekciu (hneď pod hlavičkou) s týmto rozložením:
Po pridaní špecializovanej sekcie na stránku si všimnete, že v oblasti (vľavo) je tlačidlo „Pridať modul“. V tomto príklade je to miesto, kde bol pridaný modul Blog s rozložením mriežky na zobrazovanie blogových príspevkov.
Druhá (vpravo) má tlačidlo „Vložiť riadok“. Oblasť „Vložiť modul“ predstavuje váš vertikálny bočný panel. Tu vstúpite do modulu bočného panela. Môžete tu pridať toľko modulov, do jedného riadku, ktoré budú pokrývať vertikálnu šírku sekcie susediacej so stĺpcovou štruktúrou, ktorú ste vytvorili vedľa nej. V skutočnosti v tomto príklade stránka blogu už obsahuje modul Email Optin a modul Person v tejto oblasti vertikálneho bočného panela rozloženia Špeciálne.
Teraz pridajte modul bočného panela na vrchol ostatných modulov vo vašej vertikálnej oblasti bočného panela.
V nastavení modulu bočného panela aktualizujte nasledujúce informácie:
Karta Obsah
Oblasť miniaplikácie: vyberte bočný panel
Karta Návrh
Orientácia: Vpravo (pretože bočný panel je vpravo)
Odstrániť hraničný oddeľovač: ÁNO
Farba textu:
Veľkosť písma tmavej hlavičky: 26px
Rozostup písmen
hlavička: 3px Výška riadku hlavičky: 1.1em
Karta Spresnenie
V sekcii Vlastné CSS pridajte do textového poľa Widget nasledujúce CSS. Vďaka tomu sa dizajn widgetov bočného panela zhoduje s dizajnom stránky:
pozadie: #fff; polstrovanie: 20px; -webkit-box-tieň: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-tieň: 0 1px 5px rgba (0, 0, 0, 0.1); box-tieň: 0 1px 5px rgba (0, 0, 0, 0.1);
Uložte nastavenia
Teraz môžete vidieť, že modul bočného panela zobrazuje prvky miniaplikácie Bočný panel (Vyhľadať a posledné články) a zobrazuje ich vo vertikálnej oblasti bočného panela v sekcii špecializácie.
Možnosti obsahu pre bočný panel
Na karte obsah nájdete všetok obsah modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda, čo sa zobrazuje vo vašom module, nájdete vždy na tejto karte.
Oblasť miniaplikácií
Modul Bočný panel používa boxy na vytváranie widgetov, ktoré môžete vytvoriť na karte Vzhľady> Widgety. V tejto rozbaľovacej ponuke si môžete vybrať jednu zo svojich vlastných oblastí widgetov.
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 bočného panela
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 nastavení dizajnu, pomocou ktorých môžete čokoľvek meniť.
orientácia
Tu môžete zvoliť, na ktorej strane stránky sa bude váš bočný panel zobrazovať. Tento parameter riadi orientáciu textu a polohu orámovania.
Odstráňte oddeľovač okrajov
Tu môžete odstrániť tenké sivé orámovanie, ktoré oddeľuje váš bočný panel od obsahu vašej stránky.
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ý.
Písmo hlavičky
Písmo textu záhlavia môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.
Veľkosť písma hlavičky
Tu môžete upraviť veľkosť textu hlavičky. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Farba textu hlavičky
V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu hlavičky, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.
Medzery medzi hlavičkami
Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte hlavičky, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Výška riadku hlavičky
Výška riadku ovplyvňuje medzeru medzi každým riadkom textu hlavičky. Ak chcete zväčšiť medzeru medzi každým riadkom, upravte medzeru pomocou posúvača alebo do poľa zadajte požadovanú veľkosť medzery. položka umiestnená napravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Font písma
Písmo tela môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.
Veľkosť písma v tele
Tu môžete upraviť veľkosť textu. Posunutím posúvača môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadajte hodnotu požadovanej veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Farba textu tela
V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu, vyberte túto farbu vo výbere farieb pomocou tejto možnosti.
Rozmiestnenie písmen
Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Výška línie tela
Výška riadku ovplyvňuje medzery medzi jednotlivými riadkami textu v tele. Ak chcete zväčšiť medzery medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Rozšírené možnosti bočného panela
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.
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žností témy Divi alebo nastavení na stránke 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.
[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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Ďalšie výukové programy spoločnosti Divi
- 5 webové stránky pre použitie v hoteli Divi tému
- Ako pridať text na produktoch Divi WooCommerce
- Ako zmeniť farbu ponuky medzi stránkami Divi
- Ako si prispôsobiť mriežky blogu s Divi
- Ako používať role Divi editor na WordPress
- Ako vytvoriť posuvník Divi na celej obrazovke
- Ako zmeniť farbu ponúk medzi stránkami Divi
- Funkcie, ktoré pravdepodobne neviete o Divi
- Ako používať Divi Builder na WordPress
- Ako používať modul posúvania videa Divi
- Ako používať modul Divi Builder Flip
- Ako pridať modul posudkov na Divi Builder
- Ako používať textový modul Divi
- Ako vytvoriť posúvač na Divi
- Ako upraviť rolu používateľa Divi
- Ako používať modul Divi Social Media
- Ako používať modul obchodu na tému WordPress Divi
- Ako používať modul bočného panela Divi
- Ako používať modul tabuľky cien Divi
- Ako používať titulný modul publikácií Divi
- Ako pridať video modul Divi
- Ako používať navigačný modul článku
- Ako používať vyhľadávací modul Divi
- Ako používať modul peňaľenky Divi
- Ako používať osobný modul na nástroji Divi Builder
- Ako používať modul peňaženky s filtrom Divi
- Ako používať posuvný modul s plnou šírkou
- Ako používať modul obrazu Divi Builder
- Ako používať navigačný modul v celej šírke nástroja Divi Builder
- Ako používať modul galérie obrázkov
- Ako používať modul kariet Divi Builder s plnou šírkou
- Ako používať portálový modul Divi s plnou šírkou
- Ako používať modul záhlavia Divi s plnou šírkou
- Ako používať počítací modul Divi
- Ako používať posúvač článkov v aplikácii Divi Builder
- Ako používať modul Divi Email Optin
haló
Na rozdiel od teba sa snažím odstrániť bočný panel na stránkach mojich blogových článkov a neviem, ako to urobiť v novej verzii Divi 4
Máte tip?
ďakujem
Aurélie
Ahoj a ďakujem za tieto návody.
V tomto príklade ste začali so stránkou s plnou šírkou alebo so šablónou s originálnym bočným panelom?
Ahoj Cess, veľmi si to nepamätám.