A Divi lehetővé teszi, hogy korlátlan számú használatra kész területet hozzon létre menet közben. Ezután bármely oldalhoz hozzáadhat oldalsávokat, lehetővé téve egyedi oldalsávok létrehozását az oldal különböző részeihez weboldal.

Hogyan vehet fel egy Zonde widget-modult a Divi-ből

Mielőtt oldalsávmodult adna 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 Használja a Visual Builder alkalmazást amikor böngészi a weboldal az előtérben, ha be van jelentkezve a WordPress irányítópultjába.

A Visual Builder használata után a szürke (+) gombra kattintva új modult adhat 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.

Keresse meg az oldalsáv 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 az "oldalsáv" szót is, majd az "Enter" gombra kattintva automatikusan megtalálja és hozzáadja az oldalsáv modult! A modul hozzáadása után a modul opcióinak listája fogadja. Ezeket az opciókat három fő csoportra osztják: Tartalom , Fogamzás et fejlett .

Példa felhasználási esetre: Oldalsáv hozzáadása a blog oldalához

Az oldalsáv modul lehetővé teszi az oldalsáv (és az összes beépített kütyü) beszúrását az oldal bárhova. Valójában bármilyen widget területet hozzáadhat az oldalsáv modul segítségével. Ebben a példában megmutatom, hogyan illeszthetünk egyéni oldalsávot a blog oldalára a speciális szakasz segítségével a Keresés és a Legutóbbi bejegyzések widget megjelenítéséhez a WordPressen.

Ennek a blogoldalnak teljes szélességű fejléce van, amely az oldal tetején megjeleníti a blog címét. A teljes szélességű fejlécmodul alatt egy speciális elrendezés található, amelynek bal oldalán egy blogmodul, a jobb oldalon pedig egy függőleges oldalsó sáv található.

A speciális szakasz használata lehetővé teszi összetett oszlopvariációk hozzáadását a függőleges oldalsávok mellé, anélkül, hogy az oldalhoz kívánatos töréseket adna. Ez tökéletes egy oldalsávos bloghoz.

Először meg kell győződnie arról, hogy rendelkezik-e a widgetekkel a WordPress irányítópultjának Widgetek oldalán. Ehhez a példához hozzáadom a Keresés és a Legutóbbi cikkek modult az Oldalsáv widgethez.

Ezután telepítse a Visual Builder alkalmazást a blog oldal szerkesztésére. Adjon speciális szakaszt az oldalához (közvetlenül a fejléc alatt) a következő elrendezéssel:

Miután hozzáadott egy speciális szakaszt az oldalhoz, észreveszi, hogy egy területen (a bal oldalon) található a „Modul hozzáadása” gomb. Ebben a példában itt került hozzáadásra a Blog modul rácsos elrendezéssel a blogbejegyzések megjelenítéséhez.

A másik oldalon (a jobb oldalon) van egy "Sor beillesztése" gomb. A "Modul beszúrása" terület a függőleges oldalsávot jelöli. Itt léphet be az oldalsáv modulba. Itt annyi modult adhat hozzá, egyetlen sorban, és ezek lefedik a szakasz függőleges szélességét, a mellette épített oszlopstruktúra mellett. Valójában ebben a példában a blogoldalnak már van egy Email Optin modulja és egy Person modulja a Specialty elrendezés függőleges oldalsávjának azon a részén.

Most tegye hozzá az oldalsáv-modult a függőleges oldalsáv területén lévő többi modul tetejéhez.

Az Sidebar Module beállításban frissítse a következőket:

Tartalom lapon

Widget terület: válassza az Sidebar lehetőséget

Tervező lap

Tájolás: Jobb (mert az oldalsó a jobb oldalon van)
Törölje a Határ elválasztót: IGEN
Szöveg színe:
Sötét fejléc betűmérete: 26 képpont
Levelek távolsága
header: 3px Header sor magassága: 1.1em

Speciális lap

Az Egyéni CSS szakasz alatt adja hozzá a következő CSS-t a Widget szövegmezőhöz. Ezáltal az oldalsáv kütyüje meg fog egyezni a webhely kialakításával:

háttér: #fff; párnázás: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); doboz árnyék: 0 1px 5px rgba (0, 0, 0, 0.1);

A beállítások mentése

Most láthatja, hogy az oldalsáv-modul megjeleníti az oldalsáv-widget elemeit (Keresés és Legutóbbi cikkek), és megjeleníti azokat a szakterület függőleges oldalsávjában.

Az oldalsáv tartalmi beállításai

A Tartalom fülön megtalálja a modul összes tartalmi elemét, például szöveget, képeket és ikonokat. Minden, ami vezérli a modulban megjelenőket, mindig megtalálható ezen a lapon.

Widget terület

Az Oldalsáv modul olyan widget-létrehozó dobozokat használ, amelyeket a Megjelenések> Modulok fülön hozhat létre. Ebben a legördülő menüben kiválaszthatja az egyik egyéni widgetterületet.

Admin címke

Ez megváltoztatja a konstruktor modul címkéjét az egyszerű azonosítás érdekében. Amikor a WireFrame nézetet használja a Visual Builder alkalmazásban, ezek a címkék a Divi Builder felület modulblokkjában jelennek meg.

Oldalsáv kialakítási lehetőségei

A Tervezés lapon megtalálja a modul összes stíluslehetőségét, például a betűtípusokat, a színeket, a méretezést és a térközt. Ezen a lapon módosíthatja a modul megjelenését. Minden Divi modulnak hosszú a tervezési beállítások listája, amelyek segítségével bármit megváltoztathat.

Irányultság

Itt kiválaszthatja, hogy az oldal melyik oldalán jelenjen meg az oldalsávja. Ez a paraméter vezérli a szöveg tájolását és a szegély helyzetét.

Törölje a szegély elválasztót

Itt eltávolíthatja az oldalsávot az oldal tartalmától elválasztó vékony szürke szegélyt.

Szöveg színe

Itt kiválaszthatja, hogy szövege világos vagy sötét legyen. Ha sötét háttér előtt dolgozik, akkor a szövege világos legyen. Ha a háttere világos, akkor a szövegének sötétnek kell lennie.

Fejléc betűtípusa

A fejléc szövegének betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts fejleszt. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

Fejléc betűmérete

Itt állíthatja be a fejléc szövegének 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 beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán 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étől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Fejléc szövegének színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. 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.

Fejléc betűköz

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a fejlécszöveg egyes betűi közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán 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étől függően "px" vagy "em" értéket adhat meg az egység típusának módosításához.

Fejléc magassága

A vonalmagasság befolyásolja a fejlécszöveg egyes sorai közötti teret. Ha növelni szeretné az egyes sorok közötti teret, a csúszka segítségével állítsa be a teret, vagy írja be a kívánt térköz méretet a mezőbe. a csúszka jobb oldalán található bejegyzés. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A test betűtípusa

A legördülő menüből kiválaszthatja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts szolgáltat. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. Testreszabhatja szövegének stílusát félkövér, dőlt, nagybetűk és aláhúzási lehetőségek használatával.

A test betűmérete

Itt állíthatja be a törzs szövegének méretét. A csúszka húzásával növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán 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étől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A test szövegszíne

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

A testek betűinek távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg akarja növelni a szöveg egyes betűi közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán 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étől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A testvonal magassága

A vonalvastagság befolyásolja a szöveg egyes sorai közötti távolságot a testben a kurzortól jobbra található. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Speciális oldalsáv-beállítások

A Haladó lapon olyan lehetőségeket talál, amelyeket a tapasztaltabb webtervezők hasznosnak találhatnak, például egyéni CSS és HTML attribútumokat. Itt alkalmazhat egyedi CSS-t a modul számos elemére. Alkalmazhat egyedi CSS osztályokat és azonosítókat is a modulra, amelyek felhasználásával testreszabhatja a modult a gyermek téma style.css fájljában.

CSS azonosító

Adjon meg egy opcionális CSS azonosítót, amelyet ehhez a modulhoz használ. Az azonosító felhasználható egyedi CSS-stílus létrehozására vagy az oldal egyes szakaszaira történő hivatkozásokra.

CSS osztály

Adja meg az ehhez a modulhoz használandó opcionális CSS osztályokat. Egy CSS osztály felhasználható egyedi CSS stílus készítéséhez. Több osztályt is felvehet, szóközzel elválasztva. Ezeket az osztályokat fel lehet használni a Divi gyermek témában, vagy az egyéni CSS stíluslapban, amelyet hozzáad az oldalához vagy a webhelyéhez a Divi téma beállításai vagy a Divi Builder oldal beállításai segítségével.

Egyéni CSS

Az egyedi CSS alkalmazható a modulra és a modul bármely belső elemére is. Az Egyéni CSS részben talál egy szövegmezőt, ahol egyedi CSS stíluslapokat adhat hozzá minden elemhez. Az ezekben a beállításokban található CSS ​​bejegyzések már stíluscímkékbe vannak csomagolva. Tehát csak pontosvesszővel elválasztva adja meg a CSS-szabályokat.

láthatóság

Ez az opció lehetővé teszi azoknak az eszközöknek a vezérlését, amelyeken a modul megjelenik. Választhatja a modul deaktiválását táblagépeken, okostelefonokon vagy asztali számítógépeken egyenként. Ez akkor hasznos, ha különböző modokat szeretne használni különböző eszközökön, vagy ha le akarja egyszerűsíteni a mobil tervezését bizonyos elemek eltávolításával az oldalról.

[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

• 5 weboldalak éttermi felhasználásra Divi téma
• Hogyan lehet szöveget hozzáadni a Divi WooCommerce termékhez?
• Hogyan változtathatja meg a menü színét a Divi oldalak között
• Hogyan lehet személyre szabni egy blog rácsát a Divi-vel
• Hogyan kell használni a szerepe Divi szerkesztő WordPress
• Hogyan készítsünk teljes képernyős Divi csúszkát?
• Hogyan változtathatja meg a menük színét a Divi oldalak között
• Funkciók, amelyeket valószínűleg nem ismer a Divi-ről
• A Divi Builder használata a WordPress-en
• Hogyan használjuk a Divi video scrolling modult
• A Divi Builder Flip modul használatának módja
• Hogyan adhatunk hozzá egy beszámolót a Divi Builderhez
• A Divi szövegmodul használata
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• A Divi felhasználói szerepkör szerkesztése
• A Divi Social Media használata
• Hogyan lehet használni az üzlet modult a WordPress Divi témában?
• A Divi oldalsáv moduljának használata
• A Divi áratábla modul használatának módja
• A Divi kiadványok címmoduljának használata
• Hogyan adhatunk hozzá egy Divi video modult
• A cikk navigációs moduljának használata
• A Divi keresőmodul használata
• A Divi pénztárca moduljának használata
• A személyi modul használata a Divi Builder-en
• A pénztárca moduljának használata a Divi szűrővel
• A teljes szélességű csúszka modul használata
• A Divi Builder képmodul használata
• A Divi Builder teljes szélességű navigációs moduljának használata
• A képgaléria modul használata
• A Divi Builder teljes szélességű kártya moduljának használata
• A Divi teljes szélességű portfólió moduljának használata
• A Divi teljes szélességű fejléc moduljának használata
• A Divi számláló modul használata
• Hogyan lehet használni a Divi Builder cikkcsúszkáját?
• A Divi Email Optin modul használata