Linkek színének módosítása

A linkek színét kétféleképpen módosíthatod:

• Webhely beállításai: ez a webhely összes linkjének színét megváltoztatja.
• Kód: ezzel egy adott elem linkjeinek színét módosítod.

A két módszer nem zárja ki egymást: a Webhely beállításai között lilára állíthatod a webhely linkjeit, miközben egy Szövegszerkesztő widget linkjeit kóddal pirosra színezed.

Link színe a Webhely beállításai között

Ez az összes link színét megváltoztatja a webhelyen.

1. A szerkesztő felső sávjában kattints az Elementor logóra, és válaszd a Webhely beállításai menüpontot. A beállítások a panelen jelennek meg.

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

   

2. Kattints a Tipográfia menüpontra.

3. A Link szekcióban a Normál fülön adhatod meg a link alapszínét, a Rámutatás fülön pedig a link színét arra az esetre, amikor a látogató az egeret fölé viszi.

4. A Szín mezőben válassz színt (lásd: Szín kiválasztása).

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

A webhely linkjei ezután a választott színben jelennek meg.

Egy elem linkjének színe

Kóddal egyetlen elem linkszínét is beállíthatod. Ez felülírja a Webhely beállításai között megadott színt. A színt megadhatod:

• közvetlenül az elemben, HTML-lel,
• egyedi CSS-sel.

Link színe HTML-lel

1. Kattints arra az elemre, amelynek a linkszínét módosítani szeretnéd. Az elem beállításai megjelennek a panelen.
2. A szövegmezőben add meg a következő HTML-kódot:

<a style="color:purple;" href="#">Lila link</a>

• A purple helyére írd be a használni kívánt színt.
• A # helyére írd be annak az oldalnak a címét, amelyre a link mutat.
• A „Lila link” helyére azt a szöveget írd, amelyet meg szeretnél jeleníteni.

Figyelem

Egyenes idézőjelet használj, ne „csavartat”. Másolás és beillesztés közben az egyenes idézőjel néha csavartra változik, ilyenkor kézzel kell újra beírnod.

Link színe egyedi CSS-sel

1. Kattints arra az elemre, amelynek a linkszínét módosítani szeretnéd.
2. Kattints a Haladó fülre.
3. Görgess le a panelen, és nyisd ki az Egyedi CSS szekciót.
4. Írd be a CSS-kódot a szövegmezőbe:

.mygreenlink:link, .mygreenlink:visited, .mygreenlink:active {
  color: green;
  text-decoration: none;
}
.mygreenlink:hover {
  color: red;
  text-decoration: underline;
}

Ez létrehoz egy mygreenlink nevű CSS-osztályt. Linkként, aktív állapotban és már meglátogatott linkként is érvényes. A rámutatási állapota pirosra színezi a linket, és aláhúzza, amikor a látogató fölé viszi az egeret.

5. Kattints a Tartalom fülre.
6. A tartalomszerkesztőben kattints a Kód fülre.
7. Írd be a kódot, amely meghívja a CSS-részletet:

<a class="mygreenlink" href="#">Zöld CSS-link</a>

• A # helyére írd be annak az oldalnak a címét, amelyre a link mutat.
• A „Zöld CSS-link” helyére azt a szöveget írd, amelyet meg szeretnél jeleníteni.