Než budete moci přidat modul Souhrn na svou stránku, musíte nejprve otevřít Divi Builder. Jednou Divi téma nainstalovaný na vašem Webové stránky, všimnete si tlačítka Použijte nástroj Divi Builder nad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder, který vám umožní přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Použijte Visual Builder když si prohlížíte své Webové stránky upstream, pokud jste přihlášeni do svého řídicího panelu WordPress.

Po zadání do Visual Builderu můžete kliknutím na šedé tlačítko plus přidat na stránku nový modul. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek.

Najděte modul Souhrn v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také napsat slovo „Summary“ a poté kliknout na Enter, abyste automaticky našli a přidali popisný textový modul! Po přidání modulu vás přivítá seznam možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

use case to list company services on homepage

Protože modul Souhrn kombinuje obrázky a text, aby předvedl určité funkce, můžete jej použít k přidání seznamu vašich obchodních služeb na domovskou stránku. Modul Blurb také umožňuje proměnit váš obrázek / ikonu a název na odkaz na vaši servisní stránku. V tomto příkladu použiji modul Blurb k přidání čtyř vybraných služeb na domovskou stránku.

Chcete-li na stránku přidat všechny čtyři Blurbs, použijte vizuální nástroj pro přidání standardní sekce se čtyřmi sloupci. Poté do prvního sloupce řádku přidejte modul Blurb.

Aktualizujte nastavení Blurb následujícím způsobem:

Možnosti obsahu

Název: [zadejte název služby]
Obsah: [zadejte stručný popis služby]
URL: [přidat adresu URL na stránku služby]
Použijte ikonu: ANO
Ikona: [vyberte ikonu, která ilustruje vaši službu]

Možnosti návrhu

Barva ikony: # 42bb99 (vytvořte barvu, která doplní design webu)
Použijte ikonu Velikost písma: ANO
Velikost písma ikony: 68px (upravuje velikost ikony)
Orientace textu: Střed -
Velikost písma hlavy: 24px
Velikost písma: 18px
Výška řady těla: 1.5em

Nyní je váš první úvodní text dokončen.

Nyní třikrát duplikujte modul Souhrn, který jste právě vytvořili, a přetáhněte každé z duplicitních souhrnů do dalších tří sloupců. Protože vaše nastavení návrhu byla integrována do vašich duplicitních modulů, vše, co musíte udělat, je upravit obsah (záhlaví, obsah, ikona, URL atd.) a upravte barvy tak, aby se přizpůsobily každé z vašich služeb.

Souhrnné možnosti obsahu

Na kartě obsah najdete všechny prvky obsahu modulu, jako jsou text, obrázky a ikony. Vše, co ovládá co Ve vašem modulu se vždy zobrazí tato karta.

Titul

Přiřaďte svému textu název, který se nad textem zobrazí tučným stylem. Možnost URL umístěná pod polem Nadpis vám umožní vytvořit z vašeho hypertextového odkazu.

Obsah

Toto pole je místo, kde můžete zadat hlavní část textu. Blurb Text pokryje také celou šířku vašeho sloupce až do 550 pixelů.

URL

Umístěte platnou webovou adresu URL do tohoto pole, aby se váš titul Blurb stal odkazem. Ponecháte-li toto pole prázdné, zůstane váš titul jako statický prvek.

Otevření URL

Zde si můžete vybrat, zda se váš odkaz otevře v novém okně.

Použijte ikonu

Když používáte Blurbs, můžete se rozhodnout použít s textem ikonu nebo obrázek. Pokud vyberete možnost „Použít ikonu“ „Ano“, nabídnou se vám následující možnosti přizpůsobení vaší ikony. Pokud se nerozhodnete použít ikonu, budete vyzváni k nahrání obrázku.

ikona

Pokud jste pro nastavení „Použít ikonu“ vybrali „Ano“, zobrazí se tato možnost. Tato možnost vám nabídne seznam dostupných ikon, které můžete použít v reklamě. Stačí kliknout na ikonu, kterou chcete použít, a objeví se ve vašem textu.

Obraz

Pokud jste se nerozhodli použít ikonu, zobrazí se toto nastavení. Sem vložte platnou adresu URL obrázku nebo vyberte / nahrajte obrázek prostřednictvím mediální knihovny WordPress. Obrázky v modulu Souhrn se vždy zobrazují na střed ve sloupcích a pokrývají celou šířku sloupce až do 550 pixelů. Váš obrázek však nikdy nebude větší než jeho původní velikost pro nahrávání. Výška prezentačního obrazu je určena poměrem stran původního obrázku. Proto je vhodné umístit všechny vaše prezentační obrázky do stejné výšky, pokud je umístíte vedle sebe.

Barva pozadí

Definujte vlastní barvu pozadí pro svůj modul nebo ponechte prázdné, chcete-li použít výchozí barvu.

Obrázek na pozadí

Pokud je nastaven, bude tento obrázek použit jako pozadí pro tento modul. Chcete-li odebrat obrázek na pozadí, jednoduše odeberte adresu URL z pole Nastavení. Obrázky pozadí se zobrazí nad barvami pozadí, což znamená, že při použití obrázku pozadí nebude barva pozadí viditelná.

Správce štítku

Tím se změní štítek modulu v generátoru pro snadnou identifikaci. Při použití pohledu WireFrame ve Visual Builderu se tyto štítky objeví v bloku modulu rozhraní Divi Builder.

Možnosti návrhu souhrnu modulu

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Tato karta umožňuje upravit vzhled vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete vyladit téměř cokoli.

Barva ikony

Pokud jste pro nastavení „Použít ikonu“ vybrali „Ano“, zobrazí se tato možnost. Tato možnost umožňuje přizpůsobit barvu vaší ikony. Ve výchozím nastavení jsou ikony nastaveny na barvu zvýraznění motivu.

Ikona kruhu

Pokud jste pro nastavení „Použít ikonu“ vybrali „Ano“, zobrazí se tato možnost. Tato možnost umožňuje umístit ikonu do barevného kruhu. Pokud pro toto nastavení vyberete „ano“, nabídnou se vám další možnosti přizpůsobení barvy a ohraničení kruhu.

Barva kruhu

Pokud jste pro nastavení „Ikona kruhu“ zvolili „Ano“, zobrazí se tato možnost. Zde si můžete vybrat barvu, kterou chcete použít pro svůj kruh. Tato barva je nezávislá na barvě dříve vybrané ikony. Vaše ikona se v její barvě objeví uvnitř kruhu s barvou, kterou zde vyberete.

Zobrazit ohraničení kruhu

Pokud jste pro nastavení „Ikona kruhu“ zvolili „Ano“, zobrazí se tato možnost. Tato možnost umožňuje aktivovat ohraničení kruhu. Pokud je vybrána tato možnost, zobrazí se další možnost pro výběr barvy ohraničení.

Kruhová barva okraje

Pokud jste pro nastavení „Zobrazit kruhový okraj“ vybrali „Ano“, zobrazí se tato možnost. Zde můžete upravit barvu okraje kruhu.

Umístění obrázku / ikony

Zde si můžete vybrat umístění vašeho obrázku/ikony. Může se objevit buď nad textem, nebo nalevo od textu. Umístěním obrázku/ikony nalevo od textu bude obrázek menší, než kdyby byl umístěn nahoře.

Použijte velikost písma ikony

Pokud je tato možnost povolena, můžete zadat vlastní velikost ikony zobrazené nad nebo dvěma nalevo od vaší reklamy.

Barva textu

Pokud je vaše reklama umístěna na tmavém pozadí, měla by být barva textu nastavena na „Tmavý“. Naopak, pokud je vaše reklama umístěna na světlém pozadí, měla by být barva textu nastavena na „Světlá“.

Textová orientace

Tato rozevírací nabídka umožňuje určit orientaci textu tak, aby byla zarovnána doleva, na střed nebo doprava.

Písmo záhlaví

Písmo záhlaví můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami úžasných písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Můžete také přizpůsobit styl textu pomocí možností tučně, kurzíva, velká a podtržená.

Velikost písma záhlaví

Zde můžete upravit velikost textu záhlaví. Posunutím posuvníku intervalu můžete zvětšit nebo zmenšit velikost textu nebo můžete přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.

Barva textu záhlaví

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu záhlaví, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Mezery v záhlaví

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem textu záhlaví, upravte mezeru pomocí posuvníku intervalu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.

Výška řádku záhlaví

Výška řádku ovlivňuje mezeru mezi každým řádkem textu záhlaví. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupní pole napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.

Body font

Písmo těla můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami úžasných písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Můžete také přizpůsobit styl textu pomocí možností tučně, kurzíva, velká a podtržená.

Velikost písma těla

Zde můžete upravit velikost textu. Posunutím posuvníku intervalu můžete zvětšit nebo zmenšit velikost textu nebo můžete přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.

Barva textu těla

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup tělových písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem textu, upravte mezeru pomocí posuvníku intervalu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.

Výška linie těla

Výška řádku ovlivňuje mezeru mezi každým řádkem hlavního textu. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku intervalu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.

Použijte okraj

Povolením této možnosti umístíte ohraničení kolem vašeho modulu. Toto ohraničení lze přizpůsobit pomocí následujících podmíněných parametrů.

Barva hranice

Tato možnost ovlivňuje barvu ohraničení. Vyberte vlastní barvu z výběru barev a použijte ji na svůj okraj.

Šířka hranice

Ve výchozím nastavení jsou ohraničení široká 1 pixel. Tuto hodnotu můžete zvýšit přetažením posuvníku rozsahu nebo zadáním vlastní hodnoty do vstupního pole vpravo od posuvníku. Podporujte vlastní měrné jednotky, což znamená, že můžete změnit výchozí jednotku z „px“ na něco jiného, ​​jako em, vh, vw atd.

Styl okraje

Okraje podporují osm různých stylů, včetně: plný, tečkovaný, tečkovaný, dvojitý, drážka, hřeben, vložka a začátek. Z rozevírací nabídky vyberte požadovaný styl a použijte jej na svůj okraj.

Maximální šířka obrázku

Použitím maximální hodnoty šířky zde omezíte šířku prezentačního obrazu. To ovlivní pouze rozostření, která nejsou v režimu ikon.

Vlastní marže

Okraj je prostor přidaný na vnější stranu modulu, mezi modul a další prvek nahoře, dole nebo nalevo a napravo od něj. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty okrajů. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Vlastní polstrování

Výplň je prostor přidaný uvnitř vašeho modulu mezi okraj modulu a jeho vnitřní prvky. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty výplně. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Rozšířené možnosti Souhrnný modul

Na kartě Upřesnit najdete možnosti, které mohou zkušenější weboví designéři považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS, které chcete pro tento modul použít. Třídu CSS lze použít k vytvoření vlastních stylů CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem Divi téma Child nebo ve vlastním CSS, které přidáte na svou stránku nebo na vaši stránku Webové stránky pomocí možností motivu Divi nebo nastavení stránky Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a kterýkoli z interních prvků modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již vloženy do značek stylů. Musíte tedy zadat pravidla CSS oddělená středníky.

Animace obrázku / ikony

Toto řídí směr líné načítající animace.

ALT text z obrázku

Pokud jste se nerozhodli použít ikonu, zobrazí se toto nastavení. Jiný text poskytuje veškeré potřebné informace, pokud se obrázek nenačítá, nezobrazuje správně nebo v jakékoli jiné situaci, kdy uživatel obrázek nevidí. Umožňuje také číst a rozpoznávat obrázek pomocí vyhledávačů.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé moduly na různých zařízeních nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

To je pro tento tutoriál vše. Doufáme, že jsme vám ukázali, jak používat souhrnný modul v Divi.