Divi Builder Plugin dokumentáció

A Divi blog modul hozzáadása, konfigurálása és testreszabása.

A Divi segítségével a blogok is egy modul, és a “blog” bárhol elhelyezhető a weboldalon, különböző formátumokban. A blog és az oldalsáv modulokat kombinálhatod a klasszikus blog dizájn létrehozásához. Az 1 oszlopos, 2 oszlopos vagy 3 oszlopos blogok mind felépíthetők blog és oldalsáv modulok segítségével.

Nézd meg a modul élő bemutatóját

Hogyan adhatsz blogmodult az oldaladhoz

Mielőtt blogmodult adhatnál az oldaladhoz, először a Divi Builderbe kell ugranod. Miután a Divi témát telepítetted a weboldaladra, minden alkalommal, amikor új oldalt építesz, észre fogsz venni egy Use Divi Builder gombot a posztszerkesztő felett. Erre a gombra kattintva engedélyezni fogja a Divi Buildert, így hozzáférhet a Divi Builder összes moduljához. Ezután kattintson a Use Visual Builder gombra, hogy elindítsa a buildert vizuális módban. A Use Visual Builder gombra kattinthatsz akkor is, amikor a honlapodat böngészed a frontendben, ha be vagy jelentkezve a WordPress Dashboardra.

Amint belépett a Visual Builderbe, a szürke plusz gombra kattintva új modult adhat hozzá az oldalához. Új modulokat csak a sorokon belül lehet hozzáadni. Ha új oldalt indítasz, ne felejts el először egy sort hozzáadni az oldaladhoz. Van néhány remek útmutatónk arról, hogyan használd a Divi sor- és szakaszelemeit.

Keresd meg a blogmodult a modulok listáján belül, és kattints rá, hogy hozzáadd az oldaladhoz. A modullista kereshető, ami azt jelenti, hogy a “blog” szót is beírhatja, majd az enterre kattintva automatikusan megtalálja és hozzáadja a blogmodult! A modul hozzáadása után a modul lehetőségeinek listája fogadja Önt. Ezek az opciók három fő csoportra vannak osztva: Tartalom, Tervezés és Speciális.

Használati példa: Blogmodul hozzáadása rácsos elrendezéssel egy jobb oldalsávval rendelkező speciális részhez

Ezért a példáért egy blogmodult fogok hozzáadni egy blogoldalhoz. Ez a blogoldal egy teljes szélességű fejléccel rendelkezik, alatta egy keresési modullal. A keresőmodul alatt egy speciális szakaszt fogok hozzáadni, amelynek bal oldalán a Blog modul, jobb oldalán pedig egy oldalsávos szakasz található. A jobb oldalsávban van egy legutóbbi bejegyzések widget, egy Email Optin modul és egy Személy modul.

Íme, így néz ki a példaoldal.

Figyeljük meg, hogy a blog modul rácsos elrendezésben van a szakterület szakasz bal oldalán.

Kezdjük el.

A vizuális építő segítségével adjon hozzá egy Specialty Section-t a következő elrendezéssel:

A program felkéri, hogy vagy 1 oszlopos vagy 2 oszlopos sort adjon a bal oldalra. Válassza az 1 oszlopos sort.

Ezután adja hozzá a Blog modult a sorhoz.

A Blog beállításait a következőképpen frissítse:

Tartalom beállítások

Hozzászólások száma: 6
Bővebben gomb: ON
Show Pagination: NO
Grid Tile Background Color: #ffffffff

Design Options

Layout: Dropshadow használata: Grid
Use Dropshadow: ON
Overlay Icon Color:
Hover Overlay Color: rgba(224,153,0,0,0.51)
Header Font:
Header Font Size: 21px
Header Text Color: Default
Header Font Size: 21px
Header Text Color: #333333
Header Letter Spacing: 1px
Header Line Height: 1.2em
Use Border: 1px
Header Line Height: 1.2em
Use Border: Keret használata: IGEN
Border Color: YES
Border Color:
Border Width: 1px
Border Style: #f0f0f0f0
Border Style: Solid

Advanced Options

Custom CSS (Read More Button):

A Read More gombhoz a fejlett Custom CSS olyan egyedi megjelenést hoz létre, amely jól illeszkedik a designhoz.

A Specialty Section elrendezés jobb oldalsáv részéhez hozzá kell adni egy oldalsáv modult, amely behúzza a recent posts widgetet. Ez alatt hozzá kell adnia egy Email Optin modult. Az Email Optin alatt pedig hozzá kell adnia a Személy modulját a szerzőre vonatkozó információkkal.

Ez minden!

Blog tartalmi beállítások

A tartalom lapon belül megtalálja a modul összes tartalmi elemét, például a szöveget, a képeket és az ikonokat. Minden, ami azt szabályozza, hogy mi jelenjen meg a modulban, mindig ezen a lapon található.

Hozzászólások száma

Meghatározza a megjeleníteni kívánt hozzászólások számát. Ahhoz, hogy bármi is megjelenjen ebben a modulban, szükséged lesz a bejegyzésekre.

Válassza ki azokat a kategóriákat, amelyeket be szeretne vonni a bejegyzések feedjébe. Az Ön által létrehozott posztkategóriák itt fognak megjelenni, hogy kiválaszthassa/elválassza őket.

Beépített kategóriák

Válassza ki, hogy mely kategóriákat szeretné bevonni a feedbe.

Meta dátumformátum

Meghatározza itt a dátumformátumot, amelyet a blogbejegyzéseken szeretne megjeleníteni. Az alapértelmezett elrendezés egy M j, Y formátum (2014. január 6.) További lehetőségekért lásd a WordPress Codex a dátumformátumokról.

Tartalom

A teljes tartalom megjelenítése nem fogja csonkítani a bejegyzéseidet az indexoldalon. A kivonat megjelenítése csak a kivonat szövegét fogja megjeleníteni.

Offset Number

Válaszd ki, hány bejegyzéssel szeretnéd eltolni. Ha például 3 bejegyzéssel eltolja, akkor a blog feedjének első három bejegyzése nem jelenik meg.

Kiemelt kép megjelenítése

Ezzel a beállítással kiválaszthatja, hogy szeretne-e miniatűr képeket megjeleníteni a blogmodulban.

Read More Button

Itt határozhatja meg, hogy a kivonat után megjelenjen-e a “read more” link vagy sem.

Show Author

Választhatja ki, hogy szeretné-e megjeleníteni az egyes blogbejegyzések szerzőjét a bejegyzés meta területén belül a bejegyzés címe alatt.

Dátum megjelenítése

Válaszd ki, hogy szeretnéd-e megjeleníteni az egyes bejegyzések létrehozásának dátumát a bejegyzés címe alatti bejegyzés meta területen belül.

Kategóriák megjelenítése

Válaszd ki, hogy szeretnéd-e megjeleníteni a bejegyzés kategóriáit a bejegyzés címe alatti bejegyzés meta területen belül.

Kommentárszám megjelenítése

Válaszd ki, hogy a hozzászólások számát a hozzászólás címe alatti poszt meta területen belül szeretnéd-e megjeleníteni.

Szerkesztés megjelenítése

Válaszd ki, hogy szeretnéd-e megjeleníteni az oldalszámozást ehhez a feedhez. A számozott oldalszámozás engedélyezéséhez telepítenie kell a WP Page Navi plugint.

Admin Label

Ezzel megváltoztatja a modul címkéjét az építőben a könnyebb azonosítás érdekében. Ha a Visual Builderben a WireFrame nézetet használja, ezek a címkék a Divi Builder felületén a modulblokkban fognak megjelenni.

Blog Design Options

A design lapon belül a modul összes stílusbeállítását megtalálja, például a betűtípusokat, színeket, méretezést és távolságot. Ezt a lapot fogja használni a modul kinézetének megváltoztatására. Minden Divi modulnak hosszú listája van a dizájnbeállításoknak, amelyekkel szinte bármit megváltoztathatsz.

Layout

Választhatod, hogy a blogbejegyzések rácsos vagy teljes szélességű elrendezésben jelenjenek meg.

Featured Image Overlay

Ha engedélyezve van, egy overlay szín és ikon jelenik meg, amikor a látogatók egy bejegyzés kiemelt képe fölé viszik a mutatót.

Overlay Icon Color

Itt meghatározhat egy egyéni színt az overlay ikonhoz.

Hover Overlay Color

Itt meghatározhat egy egyéni színt az overlayhez.

Hover Icon Picker

Itt meghatározhat egy egyéni ikont az overlayhez.

Text Color

Ha a blog világos háttérre kerül, akkor a szöveg színét ‘Dark’ értékre kell állítani. Visa fordítva, ha a blogot sötét háttérre helyezi, a Szövegszínt ‘Világos’ értékre kell állítani.

Főcím betűtípus

A fejléc szövegének betűtípusát a legördülő menüből a kívánt betűtípus kiválasztásával változtathatja meg. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts működtet. Alapértelmezés szerint a Divi az Open Sans betűtípust használja az oldalad összes szövegéhez. A szöveg stílusát a félkövér, dőlt betűs, csupa nagybetűs és aláhúzás opciók segítségével is testre szabhatja.

Főcím betűméret

Itt állíthatja be a főcímszöveg méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül a csúszkától jobbra található beviteli mezőbe is beírhatja a kívánt szövegméret értékét. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretérték után “px”-et vagy “em”-et is beírhatsz a méretegység típusának megváltoztatásához.

Főcímszöveg színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke színben jelenik meg. Ha meg szeretné változtatni a fejléc szövegének színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Felirat betűtávolság

A betűtávolság az egyes betűk közötti távolságot befolyásolja. Ha növelni szeretné az egyes betűk közötti távolságot a fejléc szövegében, használja a tartomány csúszkát a távolság beállításához, vagy adja be a kívánt távolságméretet a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretérték után beírhatja a “px” vagy az “em” szót, hogy megváltoztassa az egység típusát.

Főcímsor magassága

A sormagasság a fejléc szövegének egyes sorai közötti távolságot befolyásolja Ha növelni szeretné az egyes sorok közötti távolságot, használja a tartomány csúszkát a távolság beállításához, vagy írja be a kívánt távolságméretet a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méret értéke után “px” vagy “em” betűtípust írhat be a méretegység típusának megváltoztatásához.

Body Font

A legördülő menüből a kívánt betűtípus kiválasztásával megváltoztathatja a testszöveg betűtípusát. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts működtet. Alapértelmezés szerint a Divi az Open Sans betűtípust használja az oldalad összes szövegéhez. A szöveg stílusát a félkövér, dőlt betűs, csupa nagybetűs és aláhúzás opciók segítségével is testre szabhatja.

Body Font Size

Itt állíthatja be a body szöveg méretét. A tartomány csúszkát húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül a csúszkától jobbra található beviteli mezőbe is beírhatja a kívánt szövegméret értékét. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretérték után “px”-t vagy “em”-et is beírhatsz a méretegység típusának megváltoztatásához.

Body Text Color

A Diviben alapértelmezés szerint minden szövegszín fehér vagy sötétszürke színben jelenik meg. Ha meg szeretné változtatni a testszöveg színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Body Letter Spacing

A betűtávolság az egyes betűk közötti távolságot befolyásolja. Ha növelni szeretné az egyes betűk közötti távolságot a törzsszövegben, használja a tartomány csúszkát a távolság beállításához, vagy írja be a kívánt távolságméretet a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretérték után beírhatja a “px” vagy az “em” szót, hogy megváltoztassa az egység típusát.

Body Line Height

A sormagasság a testszöveg egyes sorai közötti távolságot befolyásolja Ha növelni szeretné az egyes sorok közötti távolságot, használja a tartomány csúszkát a távolság beállításához, vagy írja be a kívánt távolságméretet a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méret értéke után “px” vagy “em” betűtípust írhat be a méretegység típusának megváltoztatásához.

Meta betűtípus

A meta szöveg betűtípusát a legördülő menüből a kívánt betűtípus kiválasztásával változtathatja meg. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts működtet. Alapértelmezés szerint a Divi az Open Sans betűtípust használja az oldaladon lévő összes szöveghez. A szöveg stílusát a félkövér, dőlt betűs, csupa nagybetűs és aláhúzás opciók segítségével is testre szabhatja.

Meta betűméret

Itt állíthatja be a meta szöveg méretét. A tartomány csúszkát húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül a csúszkától jobbra található beviteli mezőbe is beírhatja a kívánt szövegméret értékét. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretérték után “px”-t vagy “em”-et is beírhatsz a méretegység típusának megváltoztatásához.

Meta szöveg színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke színben jelenik meg. Ha meg szeretné változtatni a meta szöveg színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Meta betűtávolság

A betűtávolság az egyes betűk közötti távolságot befolyásolja. Ha növelni szeretné az egyes betűk közötti távolságot a meta szövegben, használja a tartomány csúszkát a távolság beállításához, vagy adja be a kívánt távolságméretet a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretérték után beírhatja a “px” vagy az “em” szót, hogy megváltoztassa az egység típusát.

Meta sormagasság

A sormagasság a meta szöveg egyes sorai közötti helyet befolyásolja Ha növelni szeretné az egyes sorok közötti helyet, használja a tartomány csúszkát a távolság beállításához, vagy írja be a kívánt távolságméretet a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méret értéke után “px” vagy “em” beírásával megváltoztathatja annak egységtípusát.

Berendezés használata

Az opció engedélyezésével egy keret kerül a modul köré. Ez a keret a következő feltételes beállításokkal testre szabható.

Border Color

Ez a beállítás a keret színét befolyásolja. Válasszon ki egy egyéni színt a színválasztóból, hogy azt alkalmazza a szegélyre.

Szélesség

Alapértelmezés szerint a szegélyek szélessége 1 pixel. Ezt az értéket növelheti a tartomány csúszkájának húzásával vagy egy egyéni érték bevitelével a csúszkától jobbra található beviteli mezőbe. Az egyéni mértékegységek támogatottak, ami azt jelenti, hogy az alapértelmezett mértékegységet a “px”-ről megváltoztathatja valami másra, például em, vh, vw stb.

Border Style

A szegélyek nyolc különböző stílust támogatnak, köztük a következőket: solid, dotted, dashed, double, groove, ridge, inset és outset. Válassza ki a kívánt stílust a legördülő menüből, hogy azt alkalmazza a keretre.

Blog bővített beállítások

A bővített lapon olyan lehetőségeket talál, amelyeket tapasztaltabb webdesignerek hasznosnak találhatnak, mint például az egyéni CSS és HTML attribútumok. Itt egyéni CSS-t alkalmazhat a modul számos elemének bármelyikére. Egyéni CSS-osztályokat és -azonosítókat is alkalmazhat a modulra, amelyeket a modul testreszabásához használhat a gyermektémája style.css fájljában.

CSS ID

Adjon meg egy opcionális CSS-azonosítót, amelyet a modulhoz használni kell. Az azonosítót egyéni CSS-formázáshoz vagy az oldal egyes részeire mutató hivatkozások létrehozásához lehet használni.

CSS-osztály

Adja meg a modulhoz használandó opcionális CSS-osztályokat. Egy CSS-osztály egyéni CSS-stilizálás létrehozására használható. Több osztályt is megadhat, szóközzel elválasztva. Ezeket az osztályokat a Divi Child Theme-ben vagy az egyéni CSS-ben használhatja, amelyet a Divi Theme Options vagy a Divi Builder Page Settings segítségével ad hozzá az oldalához vagy a weboldalához.

Custom CSS

Az egyéni CSS a modulra és a modul bármely belső elemére is alkalmazható. Az Egyéni CSS szakaszon belül talál egy szövegmezőt, ahol közvetlenül az egyes elemekhez adhat hozzá egyéni CSS-t. Az ezekbe a beállításokba bevitt CSS már stíluscímkékbe van csomagolva, így csak pontosvesszővel elválasztott CSS-szabályokat kell megadnia.

Láthatóság

Ezzel a beállítással szabályozhatja, hogy a modulja mely eszközökön jelenjen meg. Kiválaszthatja, hogy a modulját külön-külön letiltja-e tableteken, okostelefonokon vagy asztali számítógépeken. Ez akkor hasznos, ha különböző modulokat szeretne használni különböző eszközökön, vagy ha egyszerűsíteni szeretné a mobil dizájnt azáltal, hogy bizonyos elemeket kiiktat az oldalról.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.