Ebben a szövegben látni fogod, hogy az Elementoron belül hogyan hozhatsz létre kicsúsztatható dobozokat egyszerű CSS-kód segítségével, amelyek bármilyen típusú tartalomra alkalmazhatók.
Az első teendő az, hogy hozzon létre egy beágyazott szakaszt úgy, hogy az oszlopokat az aktuális szakaszba húzza és a háttér stílusát alakítja. Az opció alatt Fejlett az opció alatti a szakasz tetején és alján helyet adunk Stílus beszúrunk néhány képet a háttérnek, ahová szintén Pozíció attribútum beállítása Center Center, at Ismétlés beállítjuk Nincs ismétlés és at Méret beállítjuk Borító.
A szakaszon belül azt látjuk, hogy létrejött egy oszlop, és azon belül van egy beágyazott szakasz. A beágyazott résznél törölünk egy oszlopot, amelyre nincs szükségünk, a többit pedig stílusozzuk. Az opció alatt Fejlett hozzáadunk egy szóközt, majd egy aljelet Stílus az opció alatt szín hozzáadásával és a végeinek lekerekítésével stilizáljuk Határ és így megkaptuk az első részt. Ezután adunk hozzá egy címet, és szúrunk be egy szöveget.
A következő dolog, amit meg fogunk tenni, az az, hogy kimásoljuk a szakaszt, és egy kicsit módosítjuk, hogy megkülönböztessük őket a szöveg egy részének törlésével, egy gomb hozzáadásával, amit csak gondol. Így kaptunk 2 különböző szakaszt, és most végre kell hajtanunk néhány CSS osztályt, amelyekkel megváltoztathatjuk a szakaszok stílusát egy adott CSS kód segítségével. Az első lépés az, hogy a szakaszra és az opció alatti CSS-osztályt kell hozzáadni az összes szakaszhoz Fejlett mezőt találni CSS osztályok és adja meg a kívánt osztály nevét.
Miután elvégeztük a fentieket, el kell mentenünk, és el kell kezdenünk hozzáadni a CSS-kódot. Több helyen, több rovatban is beírható, de a legjobb a témában beírni, hogy globálisan tudjuk használni és az opció alatt megtesszük Testreszabás, amelyen belül megtalálja Egyedi CSS/JS mint az alábbi képen.
Szükséges, hogy Egyedi CSS/JS írja be a konkrét kódot az általunk használt szakaszok CSS-osztályai alapján. Legyen óvatos, amikor osztályneveket ad meg ezeknek a szakaszoknak, hogy a CSS-kód begépelésekor ne kerüljön olyasmire, ami nem működik megfelelően. A CSS kód a következő képen látható, amelyen belül vannak db-hover-scale, db-hover-box és db-hover-slideout osztályneveket, ha másként nevezte el őket, használja a saját neveit.
Ha beírtad a CSS kódot, nézd meg, hogyan nézzen ki a következő rész, kezdetben a felső részt az alsó fedi, ennek megoldásához, hogy a felső az alsót takarja, módosítani kell az oldalt Elementorral. Ezt a fenti szakasz módosításával oldja meg Z-index opció alatt Fejlett és adjunk neki 1 értéket. Így a felső rész lefedi az alsót, mint a fenti képen, és a következő képen látni fogja, hogy mi jelenik meg, ha az egérmutatót a szakaszokra viszi.
Egy meglehetősen egyszerű CSS-kóddal szép és kreatív szakaszelrendezést kap. Remélem hasznos volt számodra ez a szöveg, és tanultál valami újat, ha érdekel még több tipp az önálló munkavégzéshez, nézd meg a mi oldalunkon. blog, és ha szakemberekkel szeretne konzultálni, kattintson erre link.
Forrás: youtube
