Szöveg elhelyezése kép fölött

Az Elementorban többféleképpen is tehetsz szöveget kép fölé. Ez a fejezet a két legjobb, reszponzív módszert mutatja be:

• 1. módszer: háttérkép a Flexbox elemen. Hős szekciókhoz és bannerekhez ajánlott.
• 2. módszer: negatív margó és Z-index. Egyedi, egymásra lógó kártyákhoz ajánlott.

1. módszer: háttérkép a Flexbox elemen

A kép tároló hátterének beállítása a legtisztább és leginkább reszponzív megoldás. Minden widget, amelyet a tárolóba teszel, automatikusan a háttérkép fölött jelenik meg.

1. Add hozzá a tárolót. Húzz egy Flexbox elemet a bal oldali panelről a vászonra.
2. Állítsd be a méretét. Kattints a Stílus fülre, nyisd ki a Méret szekciót, és állítsd a Minimális magasság és a Maximális szélesség értékét 350 képpontra (vagy a kívánt magasságra). A méretekről lásd: Elemek mérete (V4).
3. Adj hozzá háttérképet. A Stílus fülön nyisd ki a Háttér szekciót. Kattints az Átfedés melletti + jelre, és válaszd ki vagy töltsd fel a képet a médiatárból. A háttér beállításairól a Háttér a Stílus fülön (V4) fejezet szól.
4. Állítsd be a megjelenítést:
   • Pozíció: Középen.
   • Ismétlés: Nincs ismétlés.
   • Méret: Kitöltés (vagy Teljes kép megjelenítése).
5. Add hozzá a Címsor widgetet. Húzz egy Címsor widgetet közvetlenül a tárolóba. Írd be a szöveget a panelen, a tipográfiát és a színt pedig a Stílus → Tipográfia szekcióban módosíthatod.

Ha a V3 szerkesztőt használod: nyisd meg az Elrendezés fület, és állítsd a tároló szélességét és minimális magasságát a képhez illő méretre (például mindkettőt 300 képpontra). A Stílus fülön a Háttér szekcióban válaszd a Klasszikus (ecset) háttértípust, kattints a kép miniatűrjére a feltöltéshez, és állítsd be a kép pozícióját.

2. módszer: negatív margó és Z-index

Ezt a módszert akkor használd, ha két önálló widgetet szeretnél egymásra csúsztatni, például egy Kép widgetet egy meglévő Címsor widget alá húzni.

1. Add hozzá a widgeteket. Húzz egy Kép widgetet a vászonra, és válaszd ki a képet. Húzz egy Címsor widgetet a képet közvetlenül megelőző helyre. V3-nál mindkét widgetnek ugyanabban a tárolóban kell lennie.
2. Állítsd be a címsor rétegsorrendjét (Z-index). Jelöld ki a Címsor widgetet, és a Stílus fülön a Pozíció szekcióban írj 1-et a Z-index mezőbe. Ez megemeli a címsort, hogy az elemek átfedésekor is felül maradjon. A szám beírása után nem látsz változást, de később fontos lesz. A Z-indexről lásd: Elemek pozíciója (V4). V3-ban a Z-index a Haladó fül Elrendezés részén van.
3. Adj negatív margót a képnek. Jelöld ki a Kép widgetet, és a Stílus fülön a Térközök szekcióban írj negatív értéket a felső margóba (például -60 vagy -120 képpont). V3-ban kattints a hivatkozás ikonra a Margó mellett, hogy a felső, jobb, alsó és bal értékeket külön állíthasd. A margó vezérlői a Haladó panel tetején vannak.
4. Finomíts és nézd meg. A kép felfelé tolódik a címsor szövege alá. Addig módosítsd a negatív margó értékét, amíg a szöveg pontosan oda nem kerül, ahová szeretnéd.