CSS-osztály és CSS ID

Az osztály több elemet köt össze, így egyetlen szabállyal stílusozhatod őket. Az azonosító (ID) egyetlen elemet jelöl meg az oldalon, így rá hivatkozhatsz, például horgonylinkkel. Mindkettő a Haladó fül Elrendezés szekciójában van.

https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor

A képen a CSS ID mezőben „fo-cim”, a CSS-osztályok mezőben „change-color” áll.

CSS-osztály hozzáadása egy elemhez

1. Jelölj ki egy elemet a vásznon.
2. A panelen nyisd meg a Haladó fület.
3. Írd az osztály nevét a CSS-osztályok mezőbe.
4. Ismételd meg minden elemnél, amelyet ugyanabba az osztályba szeretnél tenni.

Az osztály nevét pont nélkül add meg. A névnek betűvel kell kezdődnie, a szavakat kötőjellel vagy aláhúzással választhatod el. Szóközt és speciális karaktert ne használj.

CSS ID megadása

A CSS ID mezőbe írt azonosítóval egyetlen elemet jelölsz meg. Erre az elemre aztán linkkel is hivatkozhatsz (horgony), és egyedi CSS-szabállyal is megcélozhatod. Egy azonosítót egy oldalon csak egy elemnek adj.

A CSS-kód megírása Elementor Pro-val

Az Elementor Pro-ban közvetlenül a szerkesztőben írhatsz CSS-t, és a változást azonnal látod.

1. Az egész webhelyre érvényes szabályhoz nyisd meg a Webhely beállításai panelt, és válaszd az Egyedi CSS részt.
2. Egy elemre vonatkozó szabályt az adott widget Haladó fülén, az Egyedi CSS szekcióban írhatsz.
3. A szabályban az osztály neve elé írj pontot, például:

.change-color { color: green; }

A CSS-kód megírása az ingyenes változatban

Az Elementor ingyenes változatában nincs Egyedi CSS panel a szerkesztőben. A kódot a WordPress testreszabójában adhatod meg.

1. Mentsd az Elementor-oldalt.
2. A WordPress vezérlőpultján válaszd a Megjelenés → Testreszabás → További CSS menüpontot.
3. Írd be a szabályt, az osztály neve elé pontot téve.

A widget belsejének célzása

Az Elementor az egyedi osztályt a widget külső HTML-burkolójára teszi, ezért a szabály az egész elemre vonatkozik. Ha a stílus nem érvényesül a widget belsejében lévő szövegen vagy képen, a szabályhoz add hozzá a HTML-címkét is:

.change-color h2 { color: green; }
.change-color img { border-radius: 8px; }

Példa: hetente váltott színű szövegek

Egy weboldalon hetente más színű legyen néhány kiemelt szöveg. A szerkesztéskor minden ilyen szövegelemhez a CSS-osztályok mezőben a „change-color” osztályt rendeled, a Webhely beállításai → Egyedi CSS részben pedig ezt írod:

.change-color { color: green; }

Ha később más színt szeretnél, elég a „green” szót lecserélned: az összes megjelölt elem színe egyszerre változik.