Pred pridaním modulu Súhrn na svoju stránku musíte najskôr vstúpiť 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, ktorý vám umožní 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 upstream, ak ste prihlásení do svojho hlavného panela WordPress.

Po zadaní do programu Visual Builder môžete kliknutím na sivé tlačidlo plus pridať nový modul na svoju stránku. 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 Súhrn 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 „Summary“ a potom kliknúť na kláves Enter, aby ste automaticky našli a pridali textový modul! 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ípad použitia na uvedenie služieb spoločnosti na domovskej stránke

Pretože modul Summary (Súhrn) kombinuje obrázky a text, aby predstavil určité funkcie, môžete ho použiť na pridanie zoznamu svojich obchodných služieb na domovskú stránku. Modul Blurb tiež umožňuje premeniť váš obrázok / ikonu a názov na odkaz na vašu stránku služieb. V tomto príklade použijem modul Blurb na pridanie štyroch odporúčaných služieb na domovskú stránku.

Ak chcete na svoju stránku pridať štyri Blurbs, pomocou vizuálneho nástroja na pridanie štandardnej sekcie so štvorriadkovým riadkom. Potom do prvého stĺpca vášho riadku pridajte modul Blurb.

Aktualizujte nastavenia funkcie Blurb nasledujúcim spôsobom:

Možnosti obsahu

Názov: [zadajte názov služby]
Obsah: [zadajte krátky popis služby]
URL: [pridajte URL na stránku služby]
Použite ikonu: ÁNO
Ikona: [vyberte ikonu, ktorá zobrazuje vašu službu]

Možnosti návrhu

Farba ikony: # 42bb99 (vytvorte farbu, ktorá dopĺňa dizajn stránky)
Použite ikonu Veľkosť písma: ÁNO
Veľkosť písma ikony: 68px (upravuje veľkosť ikony)
Orientácia textu: na stred -
Veľkosť hlavového písma: 24px
Veľkosť písma: 18px
Výška korpusu: 1.5em

Teraz je váš prvý úvodný text hotový.

Teraz trikrát duplikujte modul Súhrn, ktorý ste práve vytvorili, a presuňte každý z duplikovaných súhrnov do ďalších troch stĺpcov. Keďže vaše nastavenia dizajnu boli integrované do vašich duplicitných modulov, všetko, čo musíte urobiť, je upraviť obsah (hlavička, obsah, ikona, URL atď.) a upravte farby, aby ste ich prispôsobili každej z vašich služieb.

Možnosti súhrnu obsahu

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 zobrazí táto karta.

Názov

Priraďte svojmu textu názov, ktorý sa nad textom zobrazí tučným štýlom textu. Možnosť URL umiestnená pod poľom Nadpis vám umožní vytvoriť z vášho hypertextového odkazu.

Obsah

Toto pole je miesto, kde môžete zadať obsah tela svojho textu. Blurb Text pokryje aj celú šírku stĺpca až do 550 pixlov.

URL

Do tohto poľa vložte platnú webovú adresu URL, aby sa z vášho názvu Blurb stal odkaz. Ak toto pole nevyplníte, názov sa ponechá ako statický prvok.

Otváracia adresa URL

Tu si môžete zvoliť, či sa váš odkaz otvorí v novom okne.

Použite ikonu

Pri použití programu Blurbs sa môžete rozhodnúť, že k svojmu textu použijete ikonu alebo obrázok. Ak vyberiete možnosť „Použiť ikonu“ „Áno“, ponúknu sa vám nasledujúce možnosti prispôsobenia ikony. Ak sa nerozhodnete použiť ikonu, zobrazí sa výzva na nahranie obrázka.

ikona

Ak ste pre nastavenie „Použiť ikonu“ vybrali možnosť „Áno“, zobrazí sa táto možnosť. Táto možnosť vám ponúkne zoznam dostupných ikon, ktoré môžete použiť v reklame. Stačí kliknúť na ikonu, ktorú chcete použiť, a objaví sa vo vašom texte.

Obraz

Ak ste sa nerozhodli použiť ikonu, zobrazí sa toto nastavenie. Sem umiestnite platnú adresu URL obrázka alebo vyberte / nahrajte obrázok prostredníctvom mediálnej knižnice WordPress. Obrázky v module Summary (Súhrn) sa vždy zobrazujú v strede ich stĺpcov a pokrývajú celú šírku stĺpca až do 550 pixlov. Váš obrázok však nikdy nebude väčší ako pôvodná veľkosť nahrávaného súboru. Výška prezentačného obrázka je určená pomerom strán pôvodného obrázka. Preto je vhodné umiestniť všetky vaše prezentačné obrázky do rovnakej výšky, ak ich umiestnite vedľa seba.

Farba pozadia

Definujte pre svoj modul vlastnú farbu pozadia alebo nechajte predvolenú farbu prázdnu.

Obrázok pozadia

Ak je nastavený, tento obrázok sa použije ako pozadie pre tento modul. Ak chcete odstrániť obrázok na pozadí, stačí odstrániť adresu URL z poľa Nastavenia. Obrázky pozadia sa zobrazia navrchu farieb pozadia, čo znamená, že vaša farba pozadia nebude viditeľná, keď sa použije obrázok pozadia.

Správcovská značka

Toto zmení štítok modulu v generátore pre ľahšiu identifikáciu. Pri použití pohľadu WireFrame vo Visual Builderi sa tieto štítky zobrazia v modulovom bloku rozhrania Divi Builder.

Zhrnutie možností návrhu modulu

Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Táto karta umožňuje upraviť vzhľad vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete vyladiť takmer čokoľvek.

Farba ikony

Ak ste pre nastavenie „Použiť ikonu“ vybrali možnosť „Áno“, zobrazí sa táto možnosť. Táto možnosť vám umožňuje prispôsobiť farbu vašej ikony. V predvolenom nastavení sú ikony nastavené na farbu zvýraznenia motívu.

Ikona kruhu

Ak ste pre nastavenie „Použiť ikonu“ vybrali možnosť „Áno“, zobrazí sa táto možnosť. Táto možnosť vám umožňuje umiestniť ikonu do farebného kruhu. Ak pre toto nastavenie vyberiete možnosť „áno“, ponúknu sa vám ďalšie možnosti prispôsobenia farby a orámovania kruhu.

Farba kruhu

Ak ste pre nastavenie „Ikona kruhu“ zvolili „Áno“, zobrazí sa táto možnosť. Tu si môžete zvoliť farbu, ktorá sa má použiť pre váš kruh. Táto farba je nezávislá od farby predtým vybratej ikony. Vaša ikona sa vo svojej farbe zobrazí vo vnútri kruhu s farbou, ktorú tu vyberiete.

Zobraziť okraj kruhu

Ak ste pre nastavenie „Ikona kruhu“ zvolili „Áno“, zobrazí sa táto možnosť. Táto možnosť vám umožňuje aktivovať orámovanie vášho kruhu. Ak je vybratá táto možnosť, zobrazí sa ďalšia možnosť na výber farby ohraničenia.

Farba ohraničenia okruhu

Ak ste pre nastavenie „Zobraziť kruhový okraj“ vybrali „Áno“, zobrazí sa táto možnosť. Tu môžete nastaviť farbu okraja kruhu.

Umiestnenie obrázka / ikony

Tu si môžete vybrať umiestnenie svojho obrázka/ikony. Môže sa objaviť nad textom alebo naľavo od textu. Umiestnením obrázka/ikony naľavo od textu bude obrázok menší, ako keby bol umiestnený navrchu.

Použite veľkosť písma ikony

Ak je táto možnosť povolená, môžete zadať vlastnú veľkosť ikony zobrazenej nad alebo dvoma naľavo od vašej reklamy.

Farba textu

Ak je vaša reklama umiestnená na tmavom pozadí, farba textu by mala byť nastavená na „Tmavý“. Naopak, ak je vaša reklama umiestnená na svetlom pozadí, farba textu by mala byť nastavená na hodnotu „Light“.

Textová orientácia

Táto rozbaľovacia ponuka vám umožňuje určiť orientáciu textu tak, aby bola zarovnaná doľava, na stred alebo doprava.

Písmo hlavičky

Písmo hlavičky môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami úžasný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ého písma, kurzívy, veľkých písmen a podčiarknutia.

Veľkosť písma hlavičky

Tu môžete upraviť veľkosť textu hlavičky. Posunutím posúvača intervalu môžete zväčšiť alebo zmenšiť veľkosť textu alebo môžete priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa 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 svojej veľkosti.

Farba textu hlavičky

V predvolenom nastavení sú všetky farby textu v Divi zobrazené v bielej alebo tmavošedej farbe. Ak chcete zmeniť farbu svojej 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 textu záhlavia, pomocou posuvníka intervalu 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 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 rozsahu alebo zadajte požadovanú veľkosť medzery do vstupné pole 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 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 úžasný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é, 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 intervalu môžete zväčšiť alebo zmenšiť veľkosť textu alebo môžete priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa 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 svojej veľkosti.

Farba textu tela

V predvolenom nastavení sú všetky farby textu v Divi zobrazené v bielej alebo tmavošedej farbe. Ak chcete zmeniť farbu svojho základného textu, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

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 textu, upravte medzeru pomocou posúvača intervalu 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 svojej veľkosti.

Výška línie tela

Výška riadku ovplyvňuje medzeru medzi každým riadkom základného textu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, pomocou posuvníka intervalu 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 svojej veľkosti.

Použite okraj

Povolenie tejto možnosti umiestni orámovanie okolo vášho modulu. Túto hranicu je možné prispôsobiť pomocou nasledujúcich podmienených parametrov.

Farba hranice

Táto možnosť ovplyvňuje farbu vášho orámovania. Vyberte vlastnú farbu z výberu farieb a použite ju na svoje orámovanie.

Šírka hranice

V predvolenom nastavení sú hranice široké 1 pixel. Túto hodnotu môžete zvýšiť presunutím jazdca rozsahu alebo zadaním vlastnej hodnoty do vstupného poľa vpravo od jazdca. Podporujte vlastné merné jednotky, čo znamená, že môžete zmeniť predvolenú jednotku z „px“ na inú, napríklad em, vh, vw atď.

Štýl hraníc

Okraje podporujú osem rôznych štýlov vrátane: plný, bodkovaný, bodkovaný, dvojitý, drážka, hrebeň, vložka a štart. Z rozbaľovacej ponuky vyberte požadovaný štýl a aplikujte ho na svoje orámovanie.

Maximálna šírka obrázka

Aplikácia maximálnej hodnoty šírky tu obmedzí šírku prezentačného obrázka. Ovplyvní to iba rozmazania, ktoré nie sú v režime ikon.

Vlastná marža

Okraj je priestor pridaný k vonkajšej strane modulu, medzi modul a nasledujúci prvok nad, pod alebo naľavo a napravo od neho. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty okrajov. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.

Vlastné vypchávky

Výplň je priestor pridaný do vášho modulu medzi okrajom modulu a jeho vnútornými prvkami. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty výplne. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.

Rozšírené možnosti Zhrnutie modul

Na karte Pokročilé nájdete možnosti, ktoré sa môžu 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 ID 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 možno použiť triedu CSS. Môžete pridať viacero tried oddelených medzerou. Tieto triedy môžu byť použité vo vašom Divi téma Child alebo vo vlastnom CSS, ktoré pridáte na svoju stránku alebo na svoju stránku webové stránky pomocou možností témy Divi alebo nastavení stránky Divi Builder.

Vlastné CSS

Vlastné CSS možno použiť aj na modul a na ktorékoľvek z vnútorných prvkov modulu. V sekcii Vlastné CSS nájdete textové pole, kde môžete pridať CSS priamo ku každému prvku. Položky CSS v týchto nastaveniach sú už vložené so značkami štýlov. Musíte teda iba zadať pravidlá CSS oddelené bodkočiarkami.

Animácia obrázka / ikony

Toto riadi smer animácie lenivého načítania.

ALT text z obrázka

Ak ste sa nerozhodli použiť ikonu, zobrazí sa toto nastavenie. Ďalší text poskytuje všetky potrebné informácie, ak sa obrázok nenačíta, nezobrazí správne alebo v inej situácii, keď ho používateľ nevidí. Umožňuje tiež načítanie a rozpoznávanie obrázkov vyhľadávacími nástrojmi.

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.

To je pre tento návod všetko. Dúfame, že sme vám ukázali, ako používať súhrnný modul v Divi.