Vektoros šablonok:

miért használjuk őket és mire szolgálnak

A vektoros šablonok egyszerű stílusrendszert jelentenek a termékek, kategóriák és blogcikkek címkéinek formázásához. Ezeknek a šablonoknak a segítségével különböző és változatos oldaldesignokat lehet létrehozni CSS változók segítségével, amelyek meghatározzák a címkék megjelenését.

A következő cikkben egyszerű példákkal mutatjuk be, hogyan lehet megváltoztatni a widgetek közötti távolságokat, a címsorok méretét H2-től H4-ig, bekezdések, listapontok és egyéb elemek nagyságát. Továbbá elmagyarázzuk a "scope systém"-et, aminek köszönhetően lehetővé válik egy konkrét widget megjelenésének megváltoztatása egy konkrét terméknél, kategóriában vagy cikkben.

Widgetek struktúrája 

A vektoros sablonok megfelelő megértéséhez meg kell mutatni a widgetek kódját. Mindegyik tartalmaz HTML-t, amely a BEM metodikával van formázva, és ez stabil megjelenést és előrelátható működést biztosít. A widgetek és azok tartalmának megjelenését az úgynevezett CSS változók segítségével lehet beállítani, amelyek a kódszerkesztőben készülnek és módosulnak.

Mielőtt bármilyen design-t kezdenénk készíteni, bizonyosodjunk meg arról, hogy a megjelenési mód beállításaiban a "Generikus címke stílusrendszer" opció van kiválasztva. Továbbá a "Megjelenés" szekcióban válassza az "Pobo eredeti" megjelenést. 

Ha a wysiwyg szerkesztőben meg akarjuk változtatni a címsorok tipográfiáját (H2, H3, H4), megváltoztathatjuk a tulajdonságokat, például a méretet, vastagságot, színt, sorköz magasságot, betűtípus típusát, külső és belső kitöltést. Végeredményben pedig használhatók (alapértelmezés szerint kikapcsolt) before pseudo elemek is.

A címsorokra ezek a változók vonatkoznak:

A címsorok módosításához a "Megjelenés" szekcióban hozzunk létre egy új kódot "Tipográfia módosítása" néven, és illesszük be a következő tartalmat:

Hogyan lehet megtudni, mely elemek változtathatók meg változókkal

A leggyorsabb mód az úgynevezett kódvizsgálat, amikor csak rá kell kattintani például egy bekezdésre a jobb gombbal, és a helyi menüből válassza az "Inspect Element" vagy "Megvizsgál" opciót (az operációs rendszertől és a böngészőtől függően). Ezután megnyílik egy panel, ahol a HTML címke a bal oldalon, a változók listája pedig a jobb oldalon van.

A --pobo-* előtaggal kezdődő változók rákattinthatók, hogy megtudjuk az alapértelmezett értékeiket. Ezután módosíthatók.

Minden widget maximális szélességgel, margóval és kitöltéssel rendelkezik az alapbeállításban:

Ezeket az értékeket az igényeknek megfelelően lehet módosítani, például csökkenteni a kitöltést, ezáltal csökkentve a widgetek közötti tért. Fontos megjegyezni, hogy ezek alkalmazása minden widgetre hatással lesz, bár van lehetőség arra, hogy konkrét widgetre konkrét tulajdonságokat állítsunk be, mint például a háttérk étsáse efaj becéset pedig, semaní de más.

Előfordulnak olyan helyzetek, amikor szükség van egy konáé.;scope systemet, amely lehetővé teszi egy konkrét widget (azaz annak ID-je) megjelenésének befolyásolását. Jelenleg megmutatjuk, hogyan lehet invertálni egy ikon sávval rendelkező widgetet, amit a ezen az oldalon lát. És ez csak egy konkrét widget esetében van így, tehát ha ugyanazt a widgetet újrahasznosítja, az ezekre a stílusokra nem kerül automatikusan alkalmazásra.

Minden widget tartalmaz néhány kulcsfontosságú attribútumot, amelyek elengedhetetlenek ahhoz, hogy helyesen működjenek és hogy módosítások végezhetők legyenek rajtuk. Az adott widget minden felhasználásakor látható globális módosítások elvégre azzal az attribúttal érhetők el, mint például data-pobo-widget-id. Ez az attribútum tájékoztatást nyújt az adott widget egyedi ID-jéről, és minden azonos típusú widget esetében közös.

Az egyéni példányok egyéni módosítását fontosabbá tennessee attribútám erősíti geschichte, mint például data-pobo-unique-id. Ez az attribátum különbözik mäykül a mäbkich widget felhasználásátál egyedi, í lyüge lehetővé teszi egy adott widget stilizálását anélkül, hogy befolyásolná a másik példányok stilizálsát.

Az alábbiák lehet náz ki a CSS pasnít közvetlen apríkpeül:

Ha CSS kódíunk az alábbi formátumában van, akkor csak egy adott widgetet befolyásolhatunk. Az esetünkben módosítaní szeretnénk a widget hátterét, a szövegszínt, valamint az egyes ikonok méretét. A teljes kódí segíthet elérni a widget kívánt megjelenesét ezekkel a ikonokkal.

Most egy egyszerű példán keresztül bemutatjuk, hogyan järjunk el lépésről lépésre, ha szeretnénk egy widgetet igazítani az ajánlatunkban. A lenti képeken megtekinthetők két widget megjelenései, bal oldalon a Pobo Page Builder-ben és jobb oldalon már az e-shopba eksportálták őket. 

Tegyük fel, hogy ez a klasszikus megjelenés nem egészében felel meg nekünk, és kisebb változtatásokat szeretnénk végezni. Például szeretnénk megváltoztatni a 2. szintű címsor színét, méretét, és betütípusát. Hogyan tehetjük ezt meg a vektorosl šablonok segítségével?

1. lépés - Hozzunk létre egy Pobo CSS fájlt

Lépjen a felső menüben a Megjelenés -> Egyéni CSS kód fülre és kattintson az "Új stílus létrehozása" gombra. A stílus neve lehet például "Widgetek módosítása képpel jobbra és balra" és illessze be a következő HTML kódot.

2. lépés - Változíthatóinak megtalálása

Emlékezzen rá, milyen módosítások (változások) szükségesek. 

• 2. szintű címsor színe
• 2. szintű címsor mérete
• Betűtípus 2. szintű címsorra

A címre koncentráljunk, mivel itt fogunk módosításokat végezni. Menjünk az e-shopon a termékünkhez, jelöljük ki a címsort a kurzorral, kattintsunk rá jobb gombbal, és válasszuk az "Inspect Element" vagy "Megvizsgál próbált" lehetőséget. Ekkor a böngészőben megtekintheti ezt a részét a CSS kódnak. 

3. lépés - Beillesztés a CSS-be

Csak azokat a változókat illeszze be, amelyek minket érdekelnek, tehát a font-size, szín, és font-family változókat. Elég a változók neve, amely kétphanumeric&aum;ő acnkbegin változók kezdében jelzett, és illesszék be az már létresztő CSS-be, amelyet korábban készítettük.

4. lépés - Töltse ki az értékekkel

Most már csak meg kell tölteni a HTML kódot azokkal az értékkel, amelyek szükségesek. A szöveg méretét leggyakrabban pixelben adják meg. Példáául megpróbálhatja a 30px értéket, majd a saját belátásához kevéséres tweke. A betűtípusnál elég csak az elnevezését tékaz fözärni péplán ehteszózában, pl. "Impact", és a színét a színhexadecimális kódójába zárkódva. Például a vörös színére: #ed0004.

A szerkesztőben kattintson a "Mentés" gombra, és ellenőrizze a változásokat az e-shopban.