Hogyan tervezd meg WordPress oldaladat az Elementor téma stílus használatával?
Simi Zelikovitch
onElementor
14.04.20
18
Az Elementor Theme Style segítségével könnyen testre szabhatod weboldaladat. Ebben a bemutatóban megmutatjuk, hogyan használhatod a téma stílusát, hogy gyorsan egyedi és lenyűgöző dizájnt hozz létre.
Általában, ha meg akarod változtatni a webhelyed globális stílusbeállításait, akkor a Cascading Style Sheets (CSS) szerkesztését kell elvégezned, vagy bonyolult téma testreszabó eszközökkel kell foglalkoznod. Ráadásul, ha témát vált, a váltás után valószínűleg mindent elölről kell kezdenie.
Szerencsére az Elementor segítségével könnyedén kialakíthatja webhelyét, és hosszú távon megőrizheti stílusválasztásait. Az Elementor használata esetén a leggyakoribb globális beállítások közül néhányat közvetlenül a bővítmény felhasználói paneljéből kezelhet. Ezek a beállítások a következők:
Háttérképek
Címsor- és linkstílusok
űrlapmezők
Gombok
Képek
Kombinálja ezeket az elemeket, és máris megvan az alapja egy egyedi weboldal kialakításának. Az Elementor segítségével percek alatt testreszabhatja mindezeket a lehetőségeket. Ebben a bejegyzésben megmutatjuk, hogyan használhatod a téma panelét a módosítások elvégzéséhez (és ne felejtsd el megnézni a nagy teljesítményű Theme Buildert).
Ha szeretnéd megnézni a fent látható videót, az ugyanazokat a lépéseket tartalmazza, amelyeket itt fogunk megvitatni. Tehát nyugodtan követheted bármelyik oktatóanyagot, amikor elkezdesz dolgozni webhelyed stílusán.
Tanulja meg, hogyan testre szabhatja WordPress témáját az Elementor segítségével
Hogyan érheted el és módosíthatod az Elementor téma stílusbeállításait (5 lépésben)
Minden varázslat az Elementor panelen belül történik. Kezdjük tehát azzal, hogy megnézzük, hogyan férhetünk hozzá.
1. lépés: Lépjen be az Elementor panelbe
Az Elementor téma stílusbeállításait úgy találod meg, ha megnyitod a weboldalad bármelyik oldalának szerkesztőjét. Ha belépett, lépjen be a képernyő bal felső sarkában található menübe, és válassza ki a Globális stílus alatt a Témastílus opciót:
Mielőtt bármilyen módosítást elvégezhetne, az Elementor figyelmeztetni fogja, hogy ki kell kapcsolnia az alapértelmezett szín- és betűtípus-beállításait. Ellenkező esetben a téma stílusának módosításai nem maradnak meg. Ha azonnal le szeretné tiltani ezeket a beállításokat, kattintson az Elementor beállítások linkre:
Az Elementor beállításai között szerepelnek azok a lehetőségek, hogy mely oldalakra legyenek hatással, valamint a webhely alapértelmezett szín- és betűtípus-választásai. Ha mindkét beállítást letiltja, az Elementor a stílusokat attól a témától fogja örökölni, amelyet helyette használ:
Mivel azonban ezeket a stílusokat az Elementor témabeállításai segítségével fogja felülbírálni, emiatt nem kell aggódnia. Menj előre, és tiltsd le mindkét beállítást, majd mentsd el a változtatásokat, és térj vissza az Elementor panelen belül a Téma stílusa szakaszba.
2. lépés: A téma háttérstílusának módosítása
Ezen a ponton készen állsz arra, hogy elkezdj változtatni webhelyed stílusán. Kezdjük valami egyszerűvel, például az alapértelmezett háttér megváltoztatásával az Elementor téma stílusbeállításainak segítségével.
Ha megnyitod a Háttér lapot, beállíthatod, hogy webhelyed háttere egyszínű vagy egyszínű legyen:
Példánk esetében úgy döntöttünk, hogy egy barátságos lazacrózsaszín színt választunk. Ha inkább háttérképet szeretne használni, a plusz (+) jelre kattintva kiválaszthat vagy feltölthet egy fájlt.
Ne feledje, hogy bár most egyetlen oldalt lát, a Téma stílusa lapon keresztül végzett módosítások globálisan alkalmazásra kerülnek. Ha a saját szemével szeretné látni ezt a hatást a gyakorlatban, akkor az Elementor panel bezárása nélkül is átugorhat egy másik oldalra.
Ehhez kattintson a megnyitott oldalon belül bárhová, és nyomja le a Command vagy a Control billentyűt plusz E-t. Ez elindítja az Elementor keresősávot, amely lehetővé teszi az oldalak gyors keresését:
Ennek a menüpontnak a használatával a Kapcsolat oldal vadonatúj hátterét láthatja. Ugyanez vonatkozik bármely más oldalra is, amelyet meglátogat:
A téma stílusbeállításain keresztül végzett módosítások alapértelmezetté válnak az oldaladon. Az egyes oldalak egyedi dizájnbeállításai azonban továbbra is felülírják azokat. Az időmegtakarítás érdekében javasoljuk, hogy először egy alapértelmezett hátteret állítson be. Ezután szükség esetén dönthet az egyes oldalakra vonatkozó egyedi választásokról.
3. lépés: A webhely tipográfiájának finomhangolása
A Téma stílusa lapon belül a Tipográfia szakasz elég sok területet fed le. Itt módosíthatja webhelye alapértelmezett betűtípusait és szövegszíneit. A betűtípusok váltásán felül a bekezdések közötti távolság beállításait is módosíthatja:
Ha lejjebb görget, a linkek és a címsorok stílusának módosítására is talál lehetőségeket. A különböző szintű címsorokhoz egyedi betűtípusokat állíthat be, hogy azok kiemelkedjenek az oldalai többi szövegétől.
Az alábbi példában a linkek színét pirosra váltottuk:
Ökölszabályként azt szeretné, ha a linkek könnyen észrevehetők lennének. A tipográfia megváltoztatásával ezt elérheti, de zavaró is lehet, ha hajlamos a linkeket szöveges tartalmak közé helyezni. A linkek színének megváltoztatása azonban a legtöbb esetben biztonságos választás.
Az ezen a lapon felsorolt összes elem esetében testre szabhatja a betűtípusokat, méreteket, súlyokat, sőt, még a betűk közötti távolságot is:
Abban az esetben, ha módosítani szeretné a webhelye címsorainak beállításait, ne feledje, hogy a méret tekintetében hierarchiának kell lennie. Az is jó ötlet, ha a különböző címsorok hasonló stílusúak. Ez azt jelenti, hogy ugyanazt a betűtípuscsaládot és színeket kell használni, és csökkenteni kell a méretet, ahogy a H1-ektől az alacsonyabb szintű címsorok felé halad.
4. lépés: Módosítsa a gombok stílusát
Egyetlen modern weboldal sem teljes gombok nélkül. Az Elementor témastílusaival gyorsan testre szabhatja a gombok tipográfiáját és színeit, ugyanazokkal a beállításokkal, amelyeket az előző szakaszokban már láttunk.
A gombok esetében beállíthatja a háttérszínt, finomíthatja a tipográfiát, és többféle szegélytípus közül választhat. Egyszerű effektekkel is játszhatsz, például a doboz- és szövegárnyékokkal:
Mivel gombokról beszélünk, gondoskodni kell arról, hogy a bennük lévő szöveg jól olvasható legyen. Ez azt jelenti, hogy olyan szövegszínt kell választania, amely jól elüt a gomb hátterétől. Az is jó ötlet, ha egy kis kitöltést adsz hozzá, ami a szöveg és a gomb határa közötti extra helyet jelenti.
5. lépés: Az űrlapmező beállításainak módosítása
Ha űrlapokat használ a webhelyén, akkor mind a szöveg, mind maguknak a mezőknek a beállításaival játszhat. Kezdetnek változtassuk meg az űrlapunk tipográfiáját és színeit:
Továbblépve megváltoztathatjuk a mező keretének stílusát és színét is. Példánkban ezt az oldalunk többi eleméhez illeszkedő piros színűre állítjuk be:
Az űrlapbeállítások egyik szórakoztató aspektusa, hogy különböző stílusokat állíthatunk be arra az esetre, ha a látogatók „fókuszálnak” egy mezőre, ha egérrel felmutatják azt. Amint rákattintanak a mezőre, beállíthat egy átmenetet is. Az alábbi példánkban, amikor a felhasználók a mezőre kattintanak, megváltozik a keret stílusa:
A fókusz animációk nagyszerűek a használhatóság szempontjából, mert megnyugtatják a felhasználókat, hogy a mező megfelelően működik. Még egy finom animáció is egyedivé teheti a megjelenítést. Ráadásul, mivel a téma globális stílusbeállításaival dolgozik, ezeket a beállításokat csak egyszer kell konfigurálnia.
6. lépés: Alakítsa át a képstílusokat
Feltételezheted, hogy nem sok módja van a webhelyed képeinek stilizálására. Végül is maguk a képek minden webhely egyedi stílusának sarokkövei. Az Elementor témastílusokkal azonban könnyen hozzáadhat olyan testreszabásokat, mint a globális keretek, árnyékok és egyéni CSS-szűrők:
Ezek a lehetőségek lehetővé teszik, hogy képei valóban kiemelkedjenek. Ráadásul segíthetnek abban, hogy képei szépen illeszkedjenek a webhely többi stíluselemébe.
És ennyi!
A stilisztikai döntések, amelyeket az egész webhelyén hoz, hatással lesznek arra, hogy a látogatók hogyan vélekednek róla. Azzal, hogy következetes vagy, azt üzened a világnak: „Ez az én márkám stílusa, és jól néz ki”. Természetesen a weboldalad minden egyes elemének finomhangolása általában időt vesz igénybe.
Az Elementor téma stílusával viszont gyorsan létrehozhatsz egy következetes dizájnt. Ráadásul ezek a témastílusok modulárisak – ha az egyes oldalakon konkrét beállításokat akarsz megváltoztatni, az Elementor ezt is lehetővé teszi. Ezek az egyedi dizájnválasztások felülírják a globális beállításokat, így teljes mértékben te irányíthatod, hogyan nézzen ki a webhelyed!
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Az Elementor kompatibilis az összes WordPress témával?
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Az Elementor a legtöbb témával kompatibilis. Ahhoz, hogy kompatibilis legyen, a témának jól felépítettnek kell lennie a WordPress irányelveinek megfelelően.
Ha témafejlesztő vagy, és az Elementort beépítetted a témádba, akkor külön segítséget tudunk nyújtani a kompatibilitás elérésében.
Ez általában néhány napot vesz igénybe, amíg elvégezzük a megfelelő beállításokat, de mindenképpen megéri, hogy beépítsd a témádba.
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Mely témák működnek a legjobban az Elementorral?
Az Elementor Theme Builder megjelenésével bármilyen témával dolgozhatsz, és megtervezheted a fejlécet, a láblécet, az egyes hozzászólásokat, az archív oldalát és még sok mást.
Nagyon valószínű, hogy a legtöbb téma működni fog az Elementorral, de ha a leggyorsabb témát keresed, töltsd le a teljesen ingyenes, Hello Elementor nevű barebones témánkat.
Nagyon gyorsan működik (1 másodperc alatt töltődik be), és a Theme Builder segítségével úgy alakíthatod, ahogyan csak szeretnéd.
Ne feledje, hogy a Hello Elementor témát kifejezetten a következőkkel való együttműködésre tervezték
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Hogyan működnek együtt az Elementor téma stílusa és a tervezési rendszer opciói
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
A dizájnrendszer lehetővé teszi a webkészítők számára, hogy a közös dizájnszabványok és elemek létrehozásával fenntartsák a következetességet az egész webhelyen. Ez különösen akkor hasznos, ha egy webhely nagyméretű, vagy ha egyidejűleg több alkotócsapat is dolgozik az oldalon. Ez a tervezési rendszer írásos dokumentáció formájában is megjelenhet, amely tartalmazhat egy szín- és tipográfiai stílusirányzatot, az egész webhelyen használandó közös ikonok vagy képek listáját, valamint egyéb olyan márkaelemeket, amelyek egy egységes és koherens webhelyet alkotnak. A tervezők és a tartalomkészítők ezután az oldal tervezésekor, a tartalom megírásakor stb. hivatkozhatnak a tervezési rendszer útmutatójára.
De még az ilyen típusú tervezési rendszernek is megvannak a maga korlátai. A webes alkotóknak állandóan oda-vissza kell járniuk az útmutató és az éppen végzett munka között, és minden egyes elemet egyenként kell kiigazítaniuk.
Egy gyakori gondolat, ami egy alkotó fejében átfuthat, miközben egy egyszerű címszót ad egy oldalhoz: „Mi is volt a H3-as címsor hexaértéke? És milyen betűsúly volt? 500? Nem, azt hiszem, az a H2 fejléceknél volt, a 400 pedig a H3 fejléceknél, nem igaz?” Az alkotó ezután kotorászik, hogy megkeresse a stílus útmutatót akár egy fizikai, akár egy online mappában, megtalálja a stílusinformációkat, és elkezdi a szín és a betűsúly megváltoztatását. Ha ezt a folyamatot megszorozzuk csak a webhelyen található címsorok számával, majd hozzáadjuk az összes többi elemet, akkor gyorsan következetes, de időigényes tervezési folyamattá válik.
Van egy jobb módja a tervezési rendszer használatának
Egy olyan tervezési rendszer, amely magába a webkészítő termékbe van beépítve, hatalmas előrelépést jelent a pusztán egy írott útmutatóra való hivatkozáshoz képest. Képzeljük el, hogy a webkészítőnk a teljes tervezési rendszert már a projekt kezdetétől fogva beépítette az Elementorba. Ha egy elemnek a szín és a tipográfia egy meghatározott kombinációjára van szüksége, amelyet szabványos márkakombinációként jelöltünk ki, és ez a kombináció egy egyszerű, egy kattintással választható opció az elem szerkesztésekor, az hatalmas időmegtakarítást jelentene a korábbi kézi útmutatóra való hivatkozással szemben.
Ugyanilyen fontos – a jövőbeli, az egész webhelyre kiterjedő változások
Most képzeljük el a régi módon egy tervezési rendszer útmutatójára való hivatkozással, hogy a vállalat teljes márkaátalakításra vállalkozik, és a webkészítő feladata, hogy az egész webhelyen megváltoztasson minden színt, betűcsaládot, betűsúlyt stb. Ez hatalmas vállalkozás lehet, és valószínűleg sok elem kimaradna a folyamat során, ami furcsa, összefüggéstelen dizájnt eredményezne itt-ott furcsa helyeken.
Magába a webhelytervezési termékbe épített tervezési rendszerrel azonban egy ilyen változtatás szó szerint percekig tarthat. Elementor makes it easy to make a change in one place, and have that change reflected throughout the entire site. The combination of Elementor’s Theme Style options and Global Colors & Typography embodies this design system methodology.
FAQ
Q: I’m confused. What is the difference between Theme Style and Design System’s Global Colors / Globlal Fonts? Don’t both control colors and typography cross-site?
A: Although Theme Style and Global Colors & Typography are related, they do serve different functions. Theme Style sets fallback style definitions for HTML tags like <H1>, <body>, <label> and so on. They are not Elementor-specific, but are as general as possible. This is the baseline setting for the site, that comes into play only as a fallback, if no specific element definitions were set.
Global Colors and Global Fonts are additional style layers that use CSS variables. This layer sits on top of the Theme Style layer and take precedence. Ez adja az építőelemeket az egész webhely dizájnrendszeréhez. A négy előre meghatározott globális beállítás színeit és tipográfiáját rendelje hozzá, és tetszés szerint adjon hozzá további globális szín- és tipográfiai beállításokat, mindegyiknek nevet adva. Az Elementorban használt bármely elemhez gyorsan kiválaszthatod az egyik előre definiált beállításodat a globális tervezési rendszeredből.
A jövőben a globális beállítások egyetlen módosítása az összes példányra hatással lesz az egész webhelyeden. Ha bármely elemhez, akár az Elementoron belül, akár azon kívül nincs hozzárendelve globális beállítás, akkor az alapértelmezés szerint a Témastílusban meghatározott beállításokat fogja használni. Amint láthatod, mind a Theme Style, mind a Design System globális színei és globális betűtípusai nagyon szükséges funkciók, így mindenképpen figyelj mindkettőre.
K: Ez segít tisztázni a dolgokat, de tudna egy konkrét példát mondani?
V: Persze! Szerkessze meg bármelyik Elementor oldalt, és állítsa be egy H2 címsor színét és tipográfiáját a globális másodlagos stílusra, amelyet korábban a Site Settings > Design System > Global Colors and Global Fonts menüponton keresztül rendelt hozzá. Most tegye ugyanezt az oldal bármely más eleménél, és az összes olyan oldalon, amelyhez ugyanezt a színt vagy szövegstílust szeretné használni. Azt szeretné, hogy a gombok színe megegyezzen a H2-fejlécek színével? Remek, csak válassza ki a másodlagos színt minden egyes gombjához.
Most állítsa be a H3 címsorok színét és szövegstílusát más színnel és más szövegstílussal, a többi előre meghatározott globális beállítás egyikével. Tegyük fel, hogy létrehoztál egy új globális beállítást, amelynek a neve Kiegészítő. Szeretné, ha néhány oszlop háttere ugyanolyan színű lenne? Rendben, rendelje a létrehozott Kiegészítő globális színbeállítást ezekhez az oszlophátterekhez is.
Szükség szerint tegye ezt más elemekkel is.
A jövőben, ha úgy dönt, hogy megváltoztatja webhelye valamelyik színét vagy tipográfiai beállítását, ezt csak egyszer teheti meg, és pontosan tudja, hogy ez mely elemekre lesz hatással az egész webhelyen. A globális beállítások egyetlen egyszerű módosításával minden olyan elem, amely az adott beállítást használja, azonnal megváltozik az egész webhelyen.
K: Oké, ezt értem, és ez nagyon jó, de van néhány oldalam, amelyet nem az Elementorral szerkesztek? Mi a helyzet a fejlécekkel, gombokkal és oszlopháttérrel? Milyen stílusokat fognak örökölni?
V: Itt jönnek a képbe a téma stílusbeállításai. Még ha ezek az oldalak nem is Elementor-szerkesztett oldalak, az Elementor globális beállításaiban beállított Témastílus továbbra is az irányításod alatt áll. Az ezeken az oldalakon lévő elemek továbbra is a Témastílusban beállított stílusokat öröklik, mivel nem kaptak Globális színek vagy Globális betűtípusok stílusokat. Ily módon az Elementor képes az egész webhely stílusát irányítani, még az Elementorral nem szerkesztett oldalakon is!
Megjegyzés: Ha véletlenül vannak olyan elemei, amelyek stílusát nem állította be sem a Design System > Global Colors vagy Global Fonts, sem a Theme Style-ban, akkor az adott elem stílusát vagy a témától, vagy a böngészőtől, vagy más ismeretlen forrásból, például egy pluginból örökli, amely esetleg beállítja az elem stílusát. A teljes ellenőrzés érdekében tehát ne hagyjon semmit üresen a Theme Style (Témastílus) mezőben. Állítsa be az összes lehetséges opciót, így tudhatja, hogy a beállításai lesznek az alapértelmezett visszaeső beállítások minden olyan beállításhoz, amelyet nem a Design System globális színek vagy globális betűtípusok beállításai vezérelnek.
K: A Global Colors megjelenése előtt a színválasztónak volt lehetősége a színek mentésére. Ez egy kis lehetőség volt a tervezési konzisztencia fenntartására, mivel a márka színei mindig elérhetőek voltak minden színválasztóban. Ezek már nem léteznek az új színválasztóban. Elveszett az összes kemény munkám, amit a márka színeinek a színválasztóhoz való hozzáadásával végeztem?
V: A kemény munkája nem veszett kárba. Az Elementor 3.0-ra történő frissítéskor, amikor az új Globális színek és a frissített színválasztó bevezetésre került, a frissítési folyamat automatikusan hozzáadta a mentett színeit a Globális színek palettához. Könnyedén kiválaszthatja őket a legördülő listából bármely elem színopciójához, anélkül, hogy most már meg kellene nyitnia a színválasztót!
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Hogyan állíthatom be a Téma stílusát?
A Témastílus beállítások olyan globális beállítások, amelyek lehetővé teszik az alapértelmezett stílusbeállítások beállítását különböző elemekhez, például a Háttérképekhez, fejlécekhez, gombokhoz, képekhez és űrlapmezőkhöz. Ezek a beállítások felülírják a téma stílusbeállításait, és átveszik annak helyét, lehetővé téve, hogy az Elementor segítségével olyan elemek stílusát is beállíthassa, amelyeket nem az Elementor épített. Alapértelmezés szerint ez csak a nem Elementor elemekre alkalmazza a stílusokat, például a WooCommerce pénztár mezőkre, a Contact Form 7 címkékre, a 3rd-party fejlécekre és még sok másra. Ha szeretné, kikényszerítheti, hogy ezek a téma stílusbeállítások az Elementor által épített elemekre is vonatkozzanak.
Megjegyzés: Az Elementor Pro felhasználók Global Custom CSS-t is beállíthatnak, amellyel egyéni CSS szabályokat alkalmazhatsz az egész webhelyedre.
Témastílusok alkalmazása az Elementor elemekre:
Ahhoz, hogy a Theme Style beállítások az Elementor legtöbb elemére és widgetjére is érvényesek legyenek, ki kell kapcsolnia az Elementor alapértelmezett színeit és betűtípusait.
Az alapértelmezett színek és alapértelmezett betűtípusok letiltásához lépjen az Elementor > Beállítások menüpontba, és tegyen egy jelölőnégyzetet az Alapértelmezett színek letiltása és az Alapértelmezett betűtípusok letiltása melletti négyzetekbe.
Téma stílusok beállítása
Kattintson a Hamburger menüre bármely oldal vagy poszt widgetpaneljének bal felső sarkában, hogy elérje a Site Settings > Theme Style (Oldalbeállítások) > Theme Style (Témastílus) beállításokat. A Témastílus négy lapból áll: Tipográfia, Gombok, Képek és űrlapmezők.
Tipográfia
Szövegszín: Válassza ki az alapértelmezett szöveg színét.
Tipográfia: Az alapértelmezett szöveg tipográfiai beállításainak módosítása
bekezdések közötti távolság: Az alapértelmezett bekezdés utáni távolság mértékének beállítása (margó-alsó)
Link
Normál | Hover
Szín: Válassza ki a linkek alapértelmezett színét normál és lebegő állapot esetén is.
Tipográfia: A linkek alapértelmezett tipográfiájának megváltoztatása normál és lebegő állapot esetén egyaránt.
H1-H6
Szín: Válassza ki az egyes címsorok (H1, H2, H3, H4, H5 és H6) alapértelmezett színét.
Tipográfia: Az egyes címsorok (H1, H2, H3, H4, H5 és H6) alapértelmezett tipográfiai beállításainak beállítása.
Gombok
Tipográfia: A gombok alapértelmezett tipográfiájának módosítása
Szövegárnyék: A gombok alapértelmezett szövegárnyékának beállítása.
Normál | Hover
Szövegszín: A gombok szövegének alapértelmezett színének kiválasztása.
Háttérszín: Válassza ki a gombok alapértelmezett háttérszínét.
Border Type (Szegélytípus): A gombok alapértelmezett szegélytípusának beállítása (Nincs, Egyszínű, Dupla, Szaggatott, Dotted, Dashed, Groove).
Box Shadow (Dobozárnyékolás): A gombok alapértelmezett dobozárnyékolási beállításainak beállítása.
Border Radius (Szegélysugár): A gombok sarokkerekítésének szabályozására szolgáló alapértelmezett határsugár beállítása.
Padding (kitöltés): A gombok alapértelmezett kitöltési beállításainak módosítása
Form Fields (űrlap mezők)
Címke
Szín: Válassza ki a mezőcímkék alapértelmezett szövegszínét.
Tipográfia: A mezőcímkék alapértelmezett tipográfiai beállításainak beállítása
Mező
Tipográfia: A beviteli mező szövegének alapértelmezett tipográfiai beállításai.
Normál | Fókusz
Szövegszín: Válassza ki a beviteli mező szövegének alapértelmezett szövegszínét.
Háttérszín: Válassza ki a beviteli mezők alapértelmezett háttérszínét.
Border Type (Szegélytípus): A bemeneti mezők keretének alapértelmezett típusának beállítása (Nincs, Egyszínű, Dupla, Szaggatott, Szaggatott, Szaggatott, Barázdált).
Border Radius (Szegélysugár): A bemeneti mezők sarokkerekítésének szabályozására szolgáló alapértelmezett határsugár beállítása.
Box Shadow (Dobozárnyékolás): A beviteli mezők alapértelmezett dobozárnyékolási beállításainak beállítása.
Átmenet időtartama (ms) (csak fókusz): A Fókusz átmenet alapértelmezett időtartamának beállítása milliszekundumban.
Padding (kitöltés): A beviteli mezők alapértelmezett kitöltési beállításainak beállítása.
Képek
Normál | Hover
Határtípus: A képek alapértelmezett szegélytípusának beállítása (nincs, egyszínű, dupla, szaggatott, szaggatott, szaggatott, barázdált) normál és lebegő módban egyaránt.
Határ sugara: A képek sarokkerekségének szabályozására szolgáló alapértelmezett szegélysugár beállítása Normál és Hover módban egyaránt.
Átlátszatlanság: A képek alapértelmezett átlátszatlansági szintjének beállítása a Normál és a Hover módban egyaránt.
Dobozárnyékolás: A képek alapértelmezett dobozárnyékolási beállításainak beállítása a Normál és a Hover módban egyaránt.
CSS-szűrők: Az alapértelmezett CSS-szűrők beállítása: Blur, Brightness, Contrast és Saturation a képekhez a Normal és a Hover módban is.
Átmenet időtartama (ms) (csak Hover): Beállítja az alapértelmezett időtartamot milliszekundumban, amíg a Hover átmenet megtörténik.
Visszavonás / Újraindítás és Vázlat / Közzététel
Just like any other Elementor editing you might do, Theme Style woks with the Revisions and History controls, so you can undo / redo any changes, and can always revert back to an earlier version of your Theme Style design.
Theme Style also works with Draft and Publish modes, so you can test the changes and save them to draft, without having them affect your live site. Your live site will only get the changes applied when you click the Theme Style’s Publish button.
HTML Elements Affected
Note: Some elements won’t get affected because Elementor doesn’t allow editing them (e.g fieldset, input[type=”reset”] and more)
Background color:
<body>
Buttons:
button
input[type=”button”]
input[type=”submit”]
.elementor-button
Paragraph spacing:
<p>
Links:
<a>
Headings:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Form:
label
input:not([type=”button”]):not([type=”submit”])
textarea
.elementor-field-textual
Images:
<img>
Miért tűnt el az összes témastílusom?
Ez akkor történik, ha az alapértelmezett készletet törlik. Ha a Sablonok > Mentett sablonok menüpontra lép, majd kiválasztja az Összes sablon megtekintését, akkor ott egy új sablon lesz felsorolva, a Default Kit nevű. A Témastílusok ebben a Mentett sablonban vannak tárolva. A Default Kit sablon, ha törli, automatikusan újra létrehozza magát, de törlése eltávolítja a Témastílusokban tárolt összes beállítást, ezért csak akkor törölje ezt a sablont, ha az a célja, hogy teljesen visszaállítsa a Témastílusokat.
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Hogyan hozhatok létre egy menüt a téma testreszabójával?
Bevezetés
A menük szinte minden webhely részét képezik, és látogatóidnak könnyű hozzáférést biztosítanak webhelyed különböző részeihez. Az egyik módja annak, hogy menüt hozzon létre webhelye számára, a téma testreszabója.
Ez a bemutató végigvezet az oldalak, bejegyzések és egyéb webhelytartalmak hozzáadásának folyamatán a navigációs menüjéhez. Ebben az esetben az Elementor Hello Theme testreszabóját fogjuk használni. Ha más témát használsz, akkor az adott téma dokumentációját kell tanulmányoznod.
Első lépések
A weboldalad felső admin sávjából, vagy a Dashboard > Appearance (Megjelenés) menüpontból válaszd a Customizerbe való belépést. Itt válassza ki a Menük harmonikát:
Kattintson az Új menü létrehozása gombra
Nevezze el az új menüt (például: Elsődleges), és kapcsolja be a menü helyét.
Kattintson a Tételek hozzáadása gombra. Egy panel fog kibontakozni, amely megmutatja a menüjéhez hozzáadható elemeket. Adja hozzá az újonnan importált Elementor oldalakat.
Mostantól ezek az oldalak a menüben lesznek. Kattintással és húzással tetszés szerint átrendezheti őket.
Az elemek kibontásával kategóriákat vagy más, a készletedhez kapcsolódó tartalmat is hozzáadhatsz.
Hozzon létre almenüket úgy, hogy az elemeket egy szülőelem alá húzza úgy, hogy kissé behúzva legyenek.
Állítsa be a Menü helye elsődleges és tegye közzé a menüt.
Menü hozzárendelése a Nav Menu Widgethez
Most már szükség lehet arra is, hogy az új menüt hozzárendelje a Nav Menu widgethez. Ehhez szerkessze meg a Header sablonját a Theme Builderben. A Menü választó mezőben válassza ki az újonnan létrehozott menüt, hogy hozzárendelje a widgethez.
Megjegyzés: Ha a Lábléc sablonja Nav Menu widgetet használ, a fenti lépésekkel létrehozhat és hozzárendelhet egy vagy több további menüt.
Megjegyzés: Itt tudhat meg többet a Navigációs widgetről.
————őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Hogyan szerkeszthetem a Hello Theme fejlécét és láblécét?
A Hello Theme ingyenes fejléc és lábléc testreszabásának bevezetése lehetővé teszi mindenki számára, hogy az Elementor oldalbeállítások segítségével létrehozzon egy alapvető fejléc és lábléc kialakítást a webhelyére. Ha Elementor Pro-t használsz, és már van egy fejléc és lábléc, amelynek megjelenítési feltételei be vannak állítva, akkor az itt létrehozott fejléc és lábléc nem jelenik meg.
A beállítások megtalálása
A fejléc és a lábléc testreszabási beállításait a webhelybeállítások alatt találja. A globális webhelybeállításokkal kapcsolatos további információkért kattintson ide.
Megjegyzés: Ez a funkció csak új webhelyen lesz aktív. A meglévő webhelyeknek a Kísérletek képernyőn keresztül kell engedélyezniük ezt a funkciót. Az aktiválás után két új szakasz jelenik meg a Site Settings > Theme Style (Oldalbeállítások > Témastílus) alatt.
Oldalfejléc testreszabása
A webhelyfejléc testreszabása menüpontban beállíthatja a webhelyfejléc megjelenését. Az elrendezések kiválasztása mellett testre szabhatja az egyes elemek szélességét, háttérszínét, menüjét, megjelenését és stílusát.
Fejléc
Vezérlési lehetőségek
Site Logo – Kapcsolja be ezt a kapcsolót a logó vagy a cím megjelenítéséhez/elrejtéséhez.
Tagline – Kapcsolja be ezt a kapcsolót a tagline megjelenítéséhez/elrejtéséhez.
Menü – Kapcsolja be ezt a menü megjelenítéséhez / elrejtéséhez.
Elrendezés – Válasszon az Alapértelmezett, az Invertált vagy a Középre helyezett között.
Szélesség – Válassza ki a teljes szélesség vagy a keretes formátumot.
Gap – Itt állíthatja be a fejléc margóhézagát százalékban vagy px-ben.
Háttértípus – Válassza a klasszikus vagy a gradiens opciót.
Szín – Állítsa be a háttérszín(eke)t a színválasztó segítségével.
Kép – Válasszon egy megjelenítendő képet a médiatárból vagy töltse fel. Ha ez megtörtént, választhat a standard képvezérlők közül a pozíció, a csatolás, az ismétlés és a méret beállításai közül.
Webhely logója
Vezérlési lehetőségek
Típus – A legördülő menüből választhat a cím és a logó opciók közül.
Szöveg színe – (ha fentebb a Szöveg van kiválasztva) Válassza ki a színt a kiválasztó, a beviteli vagy a dinamikus lehetőségek közül.
Tipográfia – (ha fentebb a Szöveg van kiválasztva) Állítsa be a cím betűméretét és betűtípusát.
Logo Width (ha a Logo fentebb van kiválasztva) – A csúszkával állíthatja be a méretet százalékban, PX-ben vagy VH-ban.
Tagline
Vezérlési lehetőségek
Szöveg színe – Válassza ki a színt a kiválasztóból, a beviteli vagy a dinamikus lehetőségek közül.
Tipográfia – A címsor betűméretének és betűtípusának beállítása.
Menü
Vezérlési lehetőségek
Menü – A legördülő menüből válassza ki a megjelenítendő menüt. Ezeket a WP menükből lehet beállítani
Menü elrendezése – Válassza ki a vízszintes vagy a legördülő elrendezést
Töréspont – Válassza ki azt a töréspontot, amelynél a váltómenü megjelenjen.
Szín – Válasszon színt a választó, a beviteli vagy a dinamikus lehetőségek közül.
Toggle Color – Válassza ki a színt a kiválasztó, a beviteli vagy a dinamikus lehetőségek közül.
Typography – A menü betűméretének és betűtípusának beállítása
A webhely láblécének testreszabása
Lábléc
Vezérlési lehetőségek
Site Logo – Kapcsolja be a logó vagy a cím megjelenítéséhez/elrejtéséhez.
Tagline – Kapcsolja be ezt a funkciót a tagline megjelenítéséhez/elrejtéséhez.
Menü – Kapcsolja be ezt a menü megjelenítéséhez/elrejtéséhez
Copyright – Kapcsolja be a láblécben lévő szerzői jogi szöveg megjelenítéséhez/elrejtéséhez.
Elrendezés – Válasszon az Alapértelmezett, az Invertált vagy a Középre helyezett között.
Szélesség – Válassza ki a teljes szélesség vagy a keretes formátumot.
Gap – Itt állítsa be a fejléc margóhézagát százalékban vagy px-ben.
Háttértípus – Válassza a klasszikus vagy a színátmenetes opciót.
Szín – Állítsa be a háttérszín(eke)t a színválasztó segítségével.
Kép – (ha a fenti Classic (Klasszikus) beállítás van kiválasztva) Válasszon egy megjelenítendő képet a médiatárból vagy töltse fel. Ha ez megtörtént, választhat a standard képvezérlők közül a pozíció, a csatolás, az ismétlés és a méret beállításai közül.
Webhely logója
Vezérlési lehetőségek
Típus – A legördülő menüből választhat a cím és a logó opciók közül.
Szöveg színe – (ha fentebb a Szöveg van kiválasztva) Válassza ki a színt a kiválasztó, a beviteli vagy a dinamikus lehetőségek közül.
Tipográfia – (ha fentebb a Szöveg van kiválasztva) Állítsa be a cím betűméretét és betűtípusát.
Logo Width (ha a Logo fentebb van kiválasztva) – A csúszkával állíthatja be a méretet százalékban, PX-ben vagy VH-ban.
Tagline
Vezérlési lehetőségek
Szöveg színe – Válassza ki a színt a kiválasztóból, a beviteli vagy a dinamikus lehetőségek közül.
Tipográfia – A címsor betűméretének és betűtípusának beállítása.
Menü
Vezérlési lehetőségek
Menü – A legördülő menüből válassza ki a megjelenítendő menüt. Ezeket a WP menükből lehet beállítani
Menü elrendezése – Válassza ki a vízszintes vagy a legördülő elrendezést
Töréspont – Válassza ki azt a töréspontot, amelynél a váltómenü megjelenjen.
Szín – Válasszon színt a választó, a beviteli vagy a dinamikus lehetőségek közül.
Toggle Color – Válassza ki a színt a kiválasztó, a beviteli vagy a dinamikus lehetőségek közül.
Typography – A menü betűméretének és betűtípusának beállítása
Szerzői jog
Vezérlési lehetőségek
Textarea – Írja be a szerzői jogi szöveget ebbe a mezőbe egyszerű szöveg, HTML vagy dinamikus beállítások segítségével.
Szöveg színe – Válasszon színt a kiválasztóból, a beviteli vagy a dinamikus lehetőségek közül.
Tipográfia – A szerzői jog betűméretének és betűtípusának beállítása
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Nem elemmentor
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Hogyan kell beállítani a globális téma beállításait az Elementoron belül
A tipográfia, színek, gombstílusok, hátterek, űrlapmezőstílusok stb. beállítása minden egyes weboldalon külön-külön nagyon fárasztó munka lehet. A design következetessége minden webes alkotó célja …
Dapo Babarinde
Dapapo Dapoaro Dapoapo: 2020. december 16, december 16: Folyamatok
Forgó Föld bolygó a Nap fényével. Fehér haló kering a fényes csillag körül a világűrben csillagokkal
Ez a tartalom affiliate linkeket tartalmaz. Tekintse meg affiliate nyilatkozatunkat.
A tipográfia, a színek, a gombstílusok, a hátterek, az űrlapmezők stílusának stb. beállítása minden egyes weboldalon külön-külön olyan fárasztó munka lehet. A design következetessége minden webkészítő célja, és a több oldallal együtt jár a következetes design fenntartásának ijesztő feladata.
Képzelje el, hogy egy projekt majdnem befejezése után az ügyfél azt mondja: „Hé, megtenné, hogy a weboldalon a betűtípust Montserratról Source Sans Pro-ra cseréli? Úgy érzem, jobban fog kinézni…”. Tegyük fel, hogy ezt minden egyes oldalon meg kell tennie, próbálja meg elképzelni az arcát, amikor ezt hallja az ügyféltől.
Mi lenne, ha az Elementor oldalépítőn belül globálisan beállíthatnád a téma stílusát? A WordPress témák lehetővé teszi a testreszabási beállításokat, azonban valószínűleg újra kell kezdenie, ha felmerül a téma megváltoztatásának igénye.
Az Elementorral könnyedén beállíthatja az összes téma stílusát közvetlenül a bővítmény felhasználói paneljéből, és hosszú ideig megőrizheti a választott stílusát a weboldalán. Visszatérve arra az esetre, amikor egy ügyfél betűtípus-változtatást kér, az Elementor globális stílusbeállításaival csak annyit kell tennie, hogy az Elementoron belül a webhelybeállítások, majd a tipográfia (a téma stílusa alatt) menjen, és váltson a kívánt betűtípusra. A legmenőbb dolog az, hogy ez a változtatás az egész weboldalon érvényesül, így nem kell oldalanként elvégeznie a változtatást. Hallottam, hogy azt mondtad: Félelmetes?
Továbblépve, néhány a leggyakoribb globális beállítások közül, amelyeket az Elementoron belülről kezelhetsz:
Tipográfia
Gombok
Képek
Formanyomtatvány mezők
Háttérképek
Link stílusok
Mindezek a testreszabások néhány kattintással és percek alatt elvégezhetők.
Vegye figyelembe, hogy mielőtt létrehozná a beállításokat, az Elementor először értesíti Önt, hogy tiltsa le az alapértelmezett színeket és betűtípusokat. Ehhez navigálj az Elementorra a műszerfalon, majd kattints a beállításokra az Elementor alatt. Itt láthatja az alapértelmezett színek és betűtípusok letiltásának lehetőségeit.
Most pedig itt van, hogyan kell beállítani a globális téma stílusát az Elementorban
Az alapértelmezett színek globális beállítása az Elementorban
(1) Az Elementor szerkesztőben kattintson a bal felső sarokban lévő hamburger ikonra. Ez megnyitja az Elementor stílus és beállítások beállítási menüjét.
Globális témabeállítások beállítása az Elementoron belül
(2) Ezután kattintson a webhelybeállításokra. Ez megnyit egy másik menüt, amelyből kiválaszthatja a stílus beállítását
A globális téma beállításainak beállítása az Elementoron belül
(3) Most kattintson a Globális színekre a dizájnrendszer alatt. Ha már bent vagy, beállíthatod a kívánt színeket, majd a UPDATE gombra kattintva elmentheted a beállításokat.
Hogyan állítsuk be a globális téma beállításait az Elementoron belül?
A színeket el is nevezheted, ha szeretnéd.
Alapértelmezett betűtípusok globális beállítása az Elementorban
(1) Kövesse a fenti 1. lépéseket, csak ezúttal kattintson a 3. lépésben a Globális betűtípusok gombra.
(2) A globális betűtípusok beállításain belül a kívánt betűtípusokat választhatod ki elsődleges, másodlagos, szöveges vagy ékezetes betűtípusnak. Lehetőséget kap arra is, hogy további betűtípusokat adjon hozzá.
Címsorok és linkek tipográfiájához
(1) Kövesse az 1. pontban említett lépéseket, és jusson el a webhelybeállításokhoz.
(2) Most kattintson a Téma stílusa alatt a Tipográfia menüpontra. Itt beállíthatja a színeket és a tipográfia tulajdonságait a bekezdések, a törzsszöveg és mind a hat címsorszöveg esetében.
A globális témabeállítások beállítása az Elementoron belül
Ne feledje, hogy az itt elvégzett változtatások az egész weboldalra kihatnak. Például a H2 címsorszövegben végzett bármilyen változtatás a webhely MINDEN H2 címsorszövegére hatással lesz.
Alapértelmezett gombok globális beállítása az Elementorban
(1) Kövesse az 1. pontban említett lépéseket, és lépjen be a webhelybeállításokba.
(2) Most kattintson a Theme Style (Témastílus) alatt a Buttons (Gombok) menüpontra. Nagyon sok testreszabási lehetőség áll rendelkezésre a kívánt gombstílushoz. Megváltoztathatja a gombok alapértelmezett tipográfiáját, beállíthatja az alapértelmezett szövegárnyékot, kiválaszthatja a gombszöveg alapértelmezett szövegszínét, beállíthatja a gombok alapértelmezett háttérszínét, a kitöltést, a szegély sugarát és még sok mást.
Hogyan állítsuk be a globális téma beállításait az Elementoron belül szerkesztett Html 6a4a3ea8
A fentiekben ismertetett módon a képek és űrlapmezők globális téma stílusait is beállíthatja. A képek esetében kiválaszthatja a kívánt szegélytípust, a szegély sugarát, és még dobozárnyékot is hozzáadhat, ha szeretné.
Befejezés
Az Elementor globális témabeállításaival rengeteg mindent megtehetsz.
Van néhány bővítmény, amely kiterjeszti az Elementor globális témabeállításainak funkcionalitását; ezek közül kiemelkedik az AnalogWP, amely lehetővé teszi a globális stíluskészítés fejlettebb szintjét. A bővítménynek van ingyenes és fizetős változata is, kiterjedt Elementor sablonkönyvtárral.
Remélem, hogy hasznosnak találta ezt a cikket, és következetesebbé válik a weboldalakon megjelenő dizájnokkal.
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
jóóóóóóóóóóóóóóóóóóóóóóóóóóóóó
őőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőőő
Elementor témastílusok – nagyszerű funkció, de tartsa meg a témáját
Által
David McCan
2020. február 19
Bevezetés
Az Elementor csapata kiadott egy új témastílus funkciót. A globális stílusok már néhány éve gyakran kért szolgáltatás. A közleményben az Elementor csapata azt írja, hogy az új funkció „a témát és a kódot váltja fel a globális témastílusok beállításához”, és „kódolás nélkül stílusmódosításokat hajthat végre a webhelyén”, valamint „nincs szükség a téma testreszabására”. Módosítsa a témabeállításokat az Elementorból.”
Ebben a bejegyzésben kipróbálom az új funkciót, hogy megtudjam, mennyire „globális” valójában. Megszabadulhatunk azoktól a témáktól, amelyek lehetővé teszik, hogy sok stílusbeállítást állítsunk be a Testreszabóban? Vannak jó hírek és rossz hírek. Folytassa az olvasást, hogy megtudja, hogyan működik ez.
Videó verzió
Test One – Elementor ingyenes
A globális stílusbeállítások beállítása
Célom, hogy kézenfekvő stílusválasztást hozzak, és megnézzem, alkalmazzák-e azokat. A Hello Theme és az Elementor Free új telepítése során belépek az Elementorba, és meglátom a Global Style részt.
Elementor globális stílusmenük
Átmentem az alapértelmezett színekre, és kiválasztottam egy színpalettát. Vegye figyelembe, hogy ha rákattint a kiválasztott színek egyikére, megváltoztathatja azt.
Stílusok Pick színpaletta
Alapértelmezett színpaletták
Stílusok A színek testreszabása
Az alapértelmezett színek módosítása
Ezután az Alapértelmezett betűtípusokba mentem. Az alapértelmezett a Roboto. Észrevettem, hogy a betűtípust valójában a Hello Theme használja, ezért az alapértelmezett beállításokat Open Sans-ra változtattam.
Stílusok Alapértelmezett betűtípusok
Ezután beléptem a Téma stílus területére, és értesítést kaptam, hogy tiltsam le az alapértelmezett színeket és betűtípusokat az Elementor beállítási oldalán.
Stílusok Megjegyzés
Ezért rákattintottam a linkre, és letiltottam őket.
Stílusok Alapértelmezések letiltása
Visszamentem az Elementor szerkesztőhöz, frissítettem az oldalt, és láttam, hogy vannak a háttér, a tipográfia, a gombok, az űrlapmezők és a képek szakaszai.
Téma stílusok menük
Beléptem a Háttér területre, és világoskék színűre állítottam a hátteret.
Stílusok háttérszín beállítása
Beléptem a Tipográfia szakaszba, és beállítottam a törzs és a címsorok szövegének színeit. Nem a szépségre gondoltam, hanem valamire, ami gyorsan kiemelkedik, hogy lássuk, működik-e: sötétvörös a testhez és sötétkék a címsorokhoz.
Tipográfia színek beállítása
Ezután bementem a Gomb területre, és létrehoztam egy gombstílust. A gomboknak sötétkék szöveget és szegélyszínt, valamint fehér háttérszínt adtam.
Gombstílusok létrehozva
Végül beléptem a Kép területre, és 10 képpontos világosszürke szegélyt állítottam a képek köré.
Képstílusok létrehozva
Hozzáadtam az oldalhoz egy fejlécet, szövegszerkesztőt, képet és gombot, és elmentettem. Így néznek ki globális stílusaink. Láthatjuk, hogy a döntéseinket alkalmaztuk.
Példa globális stílusokra
De amikor megnéztem az elülső oldalt, nem vettem észre a betűtípust. Open Sans-nak kellett volna lennie, de a Segoe UI-t mutatták.
A betűtípus-beállítások nincsenek alkalmazva
Ha emlékszel, az Alapértelmezett betűtípusok területen választottam a betűtípust, így bementem a Téma stílus / Tipográfia szakaszba, és ott az Open Sans-t választottam.
A tipográfiai betűtípus választásának beállítása
És most helyesen mutattak. Emiatt arra gondolok, hogy az Alapértelmezett betűtípusok területet át lehet venni az új tipográfiai beállítások javára.
Betűbeállítások alkalmazva
Új oldalak az Elementor ingyenes verziójában
Létrehoztam egy új oldalt az Elementorban, és hozzáadtam egy fejlécet, szöveges widgetet, gombot és képet. Az összes stílust tökéletesen átvitték, beleértve a háttérszínt is.
Újabb Elementor oldal
Tehát a globális stílusok az Elementorban létrehozott tartalmakhoz működnek, ami nagyszerű időmegtakarítást és üdvözlendő kiegészítést jelent.
Mi a helyzet Gutenberggel
A témastílusok szolgáltatás marketingje az volt, hogy nem kellett a témára mennünk a stílusok beállításához. Így hát létrehoztam egy oldalt Gutenbergben. Így néz ki a Gutenberg szerkesztőben. Mint látható, a Gutenberg-szerkesztőben a „globális” stílusok egyike sem kerül alkalmazásra.
Oldal Gutenberg szerkesztői stílusai nem alkalmazhatók
Rendben, de mi a helyzet az elejével? A globális stílusokat ott sem alkalmazták.
Gutenberg oldal a fronton
Az Elementor létrehoz egy alapértelmezett stíluskészletet!
Egy dologra figyeltem fel, hogy a WordPress adminisztrátorának Elementor Templates területén van egy sablon az „Alapértelmezett készlethez”.
Az Elementor létrehoz egy alapértelmezett stíluskészletet
Bementem szerkeszteni, és örömmel láttam, hogy a korábban kiválasztott témastílus-beállítások mind ott vannak. Például itt van a világoskék háttér.
Alapértelmezett készlet a szerkesztőben
Ez azt jelenti, hogy létrehozhat egy témastíluskészletet, és exportálhatja azt egy másik webhelyen való használatra. Ez elképesztő!
Mi a helyzet a stíluskészlet változásaival?
Ian Bowden javaslatára bementem a Style Kit sablonba, és megváltoztattam. Kiválasztottam egy script betűtípust a törzshöz. Ezután megnéztem egy oldalt, amelyet korábban az Elementorral készítettem. A módosítás automatikusan alkalmazásra került az oldalon.
Mi a helyzet az Elementor Pro használatakor?
Kíváncsi voltam, mi történik, ha az Elementor Pro-t használjuk? A globális stílusokat az Elementoron kívül is alkalmazzák? Engedélyeztem a Pro-t, és létrehoztam egy oldalt Gutenbergben. Sem a szerkesztőben, sem a fronton nem volt öröm. A globális stílusok n
Sem a szerkesztőben, sem a fronton nem volt öröm. A globális stílusokat nem alkalmazták a Gutenberg-tartalomra.
Rendben, mi történik, ha létrehozok egy témasablont az egyetlen oldalhoz? Beléptem a Theme Builderbe, és létrehoztam egy sablont.
Belépés a témaépítőbe
Meghatároztam, hogy egyoldalasra való, és nevet adtam neki.
Egyoldalas sablon létrehozása
Csak behúztam egy Címsor widgetet és a bejegyzéstartalom widgetet. Az Elementor felkapott egy oldalt, amit Gutenbergben készítettem, Teszt néven. Ne feledje, hogy a szerkesztőben a háttér, a cím, a szöveg és a kép stílusát vették fel, de a gombstílust nem.
Egyoldalas sablon a Szerkesztőben
Ugyanaz elöl. A gombstíluson kívül mindent átvittek. Gondolom, ez leegyszerűsíti a stílusblokkokat Gutenbergben, de néhányuk stílusát továbbra is manuálisan kell beállítani.
Egyetlen Sablon Alkalmazott Elöl
Mi a helyzet a többi témával?
Megpróbáltam megnézni a Gutenberg tesztoldalt Astra, Generate Press és Page Builder Framework témákban, és ugyanúgy működtek, mint a Hello téma. A „globális stílusok” működtek az Elementor Theme Builder sablonnál a gomb kivételével az összes elemnél.
Összefoglalás és következtetések
Az új témastílus funkcióra vonatkozó „globális” igény korlátozott volt, és nem mindenhol működött. Az igazság kedvéért az új funkciót bejelentő blogbejegyzésben ez állt: „Elérkezett a globális stílus első szakasza!” Tehát egyértelmű, hogy az Elementor csapata tudja, hogy van még tennivaló.
Remélem, hogy az Elementor lehetővé teszi a globális stílusok betöltését Gutenbergben és az Elementoron kívül létrehozott tartalmakon. Ez valóban lehetőséget adna arra, hogy eltávolodjunk a témáktól a rengeteg testreszabási lehetőséggel. Amíg ez meg nem történik, valószínűleg a legjobb olyan témát használni, amely lehetővé teszi az Elementoron kívüli stílusok beállítását.
Annak ellenére, hogy még csak az első szakaszban járunk ennek a funkciónak a használatában, még az Elementoron belüli globális stíluslehetőségek is óriási időt takarítanak meg, és a webhelykészítők értékelni fogják. Ezenkívül nagyon jó, hogy exportálhatunk és importálhatunk témastíluskészleteket más webhelyekre. Létrehozhat Elementor témasablonokat, és ez átviszi az Elementor globális stílusok egy részét, de nem az összeset. Az új Theme Style funkciókat fogom használni, és várom, hogy ezek a jövőbeni kiadásokban bővüljenek.