A Divi Builder Flip modul használatának módja

még Blair Jersyer | Divi

Mielőtt Toggle modult adhatna az oldalához, először be kell ugrania a Divi Builderbe. Egyszer a Divi téma telepítve az Önre weboldal, akkor észrevesz egy gombot Használja a Divi Buildert a bejegyzésszerkesztő felett, amikor új oldalt hoz létre. Kattintson erre a gombra a Divi Builder aktiválásához és az összes Divi Builder modul eléréséhez. Ezután kattintson a gombra Használja a Visual Builder alkalmazást hogy a generátort vizuális módban indítsa el. Kattintson a gombra is A Visual Builder engedélyezése amikor böngészi a weboldal az előtérben, ha be van jelentkezve a WordPress irányítópultjába.

hozzáférés a vizuális készítőhöz

A Visual Builder használatakor kattintson a szürke plusz gombra, hogy új modult adjon az oldalához. Új modulok csak sorok belsejében adhatók hozzá. Ha új oldalt indít, ne felejtse el először hozzáadni egy sort az oldalához.

flip flop divi module.png

Keresse meg a váltó modult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modulok listája kereshető, ami azt jelenti, hogy beírhatja a "toggle" szót is, majd nyomja meg az Enter billentyűt a váltó modul megkereséséhez és automatikus hozzáadásához! A modul hozzáadása után a modul opcióinak listája fogadja. Ezek az opciók három fő csoportra vannak felosztva: Tartalom , Fogamzás et fejlett .

Példa felhasználási esetre: GYIK oldal

A GYIK oldal az egyik legjobb hely az információk konszolidálására a Toggle modul használatával. Ez lehetővé teszi a felhasználó számára, hogy gyorsan azonosítsa a keresett kérdést anélkül, hogy rengeteg szöveget kellene elolvasnia. Ebben a példában megmutatom, hogyan használhatja a Toggle modult, hogy percek alatt megtervezzen egy modern GYIK részt a GYIK oldalához.
mintaoldal FAQ.jpg

A Visual Builder használatával adjon hozzá egy új, teljes szélességű sort tartalmazó szakaszt (1 oszlop). Ezután adjon hozzá Divider modult a sorhoz. Az elválasztó modul beállításainak Tartalom lapján válassza a „Választó megjelenítése” lehetőséget.

Példa a divi.png flip-flop gombjára

A Tervezés lapon adja meg a következő beállításokat:

Szín: # 000000 (fekete)
Divider Stílus: Szilárd
Elválasztó pozíció:
Függőlegesen középre osztott súly Súly: 4 képpont
Magasság: 1

konfigurációs beállítások a divi.png kapcsolót váltogathatják

Ezután adjon hozzá egy váltó modult az osztó alá, amelyet most létrehoztam ugyanabban a sorban. A Toggle modul beállításai között frissítse a következőket:

Tartalom lapon

Cím: [adja meg a címét]
Tartalom: [adja meg a tartalmat]
Állapot: Bezárva
Nyitott háttérszín: #ffffff
Bezárva A háttérszín megváltoztatása: #ffffff
Háttérszín: #ffffff

Tervező lap

Ikon színe: # 000000
Nyissa meg a szöveg átváltását: # 000000
Zárt Toggle szöveg színe: # 000000
Cím betűtípus: Open Sans, Bold
Betűméret: 24px
Cím Szöveg színe: # 000000
Body betűtípus: Open Sans
Karosszéria Betűméret: 18px
Testszöveg színe: # 666666
A testvonal magassága: 1.6em
Használja a szegélyt: YES
A határ szélessége: 0px
Egyéni párnázat: felső 2px, alsó 2px

új tartalom a divi.png rockerrel

Miután elmentette a kapcsoló modul beállításait, másolja a létrehozott elválasztó modult, és helyezze a váltó modul alá. Ez keretezi a hintát egy felső és alsó elválasztó vonallal. Ezt követően másolja át a váltó modult, és tegye az alsó elválasztó sor után. Mivel ez egy duplikált Toggle modul, minden tervbeállítás átkerült az új Toggle modulba, és csak annyit kell tennie, hogy frissítse az új Toggle modul tartalmát. Ezután folytassa a Division és Scale Modules modulok másolásának folyamatát, és frissítse a skála tartalmát, amíg el nem tölti a teljes GYIK részt.

Ez minden. Most van egy modern GYIK szakasz, amely a Toggle modult használja a kérdések és válaszok összevonására.

modul divi.gif

Most, hogy látta, hogy a váltó modul működik, merüljön el az összes beállításában az alábbi szakaszokban. Részletes áttekintést adtunk arról, hogy mit talál a modul beállításainak minden fülén, és elmagyarázzuk, hogy mit csinálnak ezek.

A Toggle modul tartalmi paraméterei

paraméterek flip-flops divi.png

A váltó modul tartalma lap a következő paramétercsoportokba van rendezve (amelyek szintén váltakoznak!).

szövegek

Itt adhatja hozzá a címet és a tartalom váltását.

Etat

Ezzel a beállítással kiválaszthatja, hogy a gomb alapértelmezés szerint nyitva vagy zárva legyen-e.

kontextus

Itt megváltoztathatja a háttér színét, amikor a kapcsoló nyitva van, és a háttér színét, amikor bezárják. A háttérszín opció beállításával könnyedén meg is változtathatja őket. Lehetőség van háttérkép beállítására vagy feltöltésére is.

Admin címke

Alapértelmezés szerint a váltó modul egy olyan címkével jelenik meg, amely a „Toggle” feliratot olvassa a generátorban. Az Admin tag lehetővé teszi a címke megváltoztatását az egyszerű azonosítás érdekében.

A rocker modul tervezési paraméterei

opció design toggle wordpress.png

A váltó modul tervezési paramétereit a Tervezés fül alatti alábbi legördülő váltókba csoportosítottuk.

ikon

Itt változtathatja meg a váltó ikon színét.

szövegek

Itt beállíthatja a nyitott és zárt váltószöveg színét.

Címszöveg

Itt állíthatja be a cím szövegének betűtípusát, súlyát, méretét, színét, térközét, vonalmagasságát és egyebeket.

A szöveg teste

Itt állíthatja be a betűtípust, a súlyt, a méretet, a színt, a távolságot, a sor magasságát és egyebeket.

határok

Itt választhatja a szegély használatát. Ha pedig egy szegélyt választ, akkor kiválaszthatja a színét, megváltoztathatja a szélességét és a stílusát is.

térköz

A térközben egyedi párnázatot adhat a kapcsoló tetejére, jobbra, aljára vagy balra. Ezeket az értékeket asztali számítógépeken, táblagépeken vagy mobileszközökön is módosíthatja.

A modul speciális beállításai válthatók

flip-flop paraméter divi.png

A váltómodul Speciális fülén hozzáadhat egyedi azonosítót és css osztályt. Hozzáadhat egyéni cs-eket különféle előre definiált (és előre kiválasztott) css-választókhoz az egyéni css legördülő videó csúszka modulban. Végül a láthatóság legördülő listában módosíthatja modulja láthatóságát telefonokon, táblagépeken és asztali számítógépeken.

Ennyi ehhez a bemutatóhoz, remélem, hogy lehetővé teszi a Divi Toggle modul jobb használatát.

[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”]DIVI TÉMA LETÖLTÉSE [/vcex_button][/vc_column][vc_colum /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”]LETÖLTÉS TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Egyéb Divi oktatóanyagok

Üzenet elküldése

Az e-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *

Ez az oldal Akismet-et használ a nemkívánatos csökkentés érdekében. További információ a megjegyzések adatainak használatáról.