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

> A linkek színe a webhely egészén a Webhely beállításai között, egy elemen HTML-lel vagy egyedi CSS-sel.

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.

   ![A Webhely beállításai menü](./kepek/stilus-webhelybeallitasok.webp)

   *A Webhely beállításai menü* (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://hub.hellowp.io/hu/plugins/elementor/stilus-szinvalasztas/)).

![A Tipográfia beállításai a Link szekcióval](./kepek/stilus-linkek-tipografia.webp)

*A Tipográfia beállításai a Link szekcióval* (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:

```html
<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:

```css
.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:

```html
<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.