# Webhelylogó, webhelycím, szlogen és retina logó

> A webhely logóját, címét és szlogenjét a WordPress beállításaiból kiíró widgetek, valamint a retina logó beállítása.

A fejléc és a lábléc építéséhez négy kis widget tartozik. Három közülük (Site Logo, Site Title, Site Tagline) a WordPress saját beállításaiból veszi az adatot, ezért ha később átírod a logót, a címet vagy a szlogent, minden oldalon magától frissül. A negyedik, a **Retina kép** (retina logó), két méretben tölti fel a logót, hogy éles legyen a nagy felbontású képernyőkön is. Ezek a widgetek az Elementor Theme Builderrel készített fejlécben, láblécben, hősszekcióban és karbantartási oldalakon is jól használhatók.

## Site Logo: a webhely logója

A widget a logót közvetlenül a WordPress beállításaiból jeleníti meg. Retina-kész, tehát a nagyobb felbontású logót is élesen mutatja.

1. Nyisd meg az oldalt vagy a sablont az Elementorral.
2. Keresd meg a **Site Logo** widgetet a widgetpanelen (a UAE Lite csoportban), és húzd a kívánt helyre.
3. Válaszd ki a logó forrását:
   - **Webhelylogó**: a **Megjelenés → Testreszabás → Honlap azonosítás** alatt beállított logót használja.
   - **Egyéni kép**: feltölthetsz egy másik képet, amely felülírja az alapértelmezett logót.

### Tartalom fül

| Beállítás | Mit csinál |
|---|---|
| Logó forrása | A webhely logója vagy egyéni kép. |
| Link | A logó a kezdőlapra mutat (alapértelmezett), nem mutat sehova, a képet fényképnézegetőben nyitja meg, vagy egyéni URL-re mutat. |
| Felirat | Tetszőleges szöveg a logó alatt: szlogen, rövid leírás vagy akadálymentesítési szöveg. A felirat külön stílusozható. |

### Stílus fül

- **Kép szélessége**: egyéni szélesség a logónak.
- **Igazítás**: balra, középre vagy jobbra.
- **Háttérszín**: egyszínű vagy színátmenetes háttér a logó mögött.
- **Árnyék**: lágy vagy éles árnyék a logó körül.
- **Szegély és sarokkerekítés**.
- **Átlátszatlanság**: finom halványítás.
- **CSS-szűrők**: elmosás, fényerő, kontraszt, szürkeárnyalat, árnyalat és hasonlók.

A méret, az igazítás és a térközök külön állíthatók asztali gépre, tabletre és mobilra. A **Haladó** fülön az Elementor szokásos beállításai érhetők el: belépő animáció, Z-index, reszponzív láthatóság, egyéni margó és padding.

## Site Title: a webhely címe

A widget a **Beállítások → Általános** oldalon megadott webhelycímet írja ki, ezért sosem kell kézzel átírni.

1. Húzd a **Site Title** widgetet a fejlécbe, a hősszekcióba vagy a láblécbe.
2. A **Tartalom** fülön a következőket állíthatod:
   - **Cím előtti szöveg**: a cím elé kerülő szöveg, például „Üdvözlünk a(z)”.
   - **Cím utáni szöveg**: a cím után álló szöveg, például „· Alapítva 1999”.
   - **HTML-címke**: H1, H2 stb. A megfelelő címsorszint a szerkezet és a keresőoptimalizálás miatt fontos.
3. A **Stílus** fülön a szövegszínt, a tipográfiát (betűtípus, vastagság, méret, sorköz), az igazítást (balra, középre, jobbra, sorkizárt) és a térközöket (margó, padding) állíthatod.

Jó tudni: a fejlécben minden oldalon dinamikusan megjelenik a cím, a 404-es és a karbantartási oldalon pedig nem kell kézzel átírni a webhely nevét. A Site Logo widgettel együtt teljes arculati blokkot adhat.

## Site Tagline: a webhely szlogenje

A widget a **Beállítások → Általános** oldalon a **Honlap egysoros leírása** mezőben megadott szöveget jeleníti meg. Ha átírod a leírást, a módosítás azonnal látszik minden oldalon, ahol a widget szerepel.

1. Keresd meg a **Site Tagline** widgetet, és húzd a kívánt helyre.
2. A **Tartalom** fülön két mező van: **Szlogen előtti szöveg** és **Szlogen utáni szöveg**.
3. A **Stílus** fülön: szövegszín, tipográfia (betűcsalád, vastagság, méret, betűköz) és igazítás (balra, középre, jobbra, sorkizárt).

Ha a widget üres, ellenőrizd, hogy a **Honlap egysoros leírása** ki van töltve a WordPress **Beállítások → Általános** oldalán. Jó helyei: a kezdőlap, a Rólunk oldal bevezetője, a lábléc és a karbantartási oldal. A Site Logo és a címsor widgetek mellé téve egységes fejlécszakaszt kapsz.

## Retina kép: éles logó nagy felbontású kijelzőkön

A retina (2x) kijelzőkön a normál méretű kép elmosódottnak látszhat. A **Retina kép** widget két képet kap, és a böngésző a kijelzőnek megfelelőt tölti be.

1. Húzd a **Retina kép** widgetet a fejlécbe vagy a navigációs sávba.
2. A **Tartalom** fülön töltsd fel:
   - **Alapértelmezett kép kiválasztása**: a normál (1x) logó.
   - **Retina-kép kiválasztása**: a kétszeres méretű (2x) logó.
3. Állítsd be a többi mezőt.

![A Retina kép widget Tartalom füle az alapértelmezett és a retina kép mezőjével](./kepek/fejlec-lablec-retina-tartalom.webp)

*A Retina kép widget Tartalom füle az alapértelmezett és a retina kép mezőjével* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A képen a két képmező, a **Képfelbontás**, az **Igazítás**, a **Felirat** és a **Link** látszik.

Tipp: a retina kép mérete legyen a normál kép kétszerese. Ha a normál logó 150×50 képpont, a retina változat legyen 300×100.

| Beállítás | Mit csinál |
|---|---|
| **Képfelbontás** | A megjelenített méret (például Medium - 300 x 300). |
| **Igazítás** | Balra, középre vagy jobbra a szakaszban. Fejlécben és navigációs sávban a logó elhelyezésére való. |
| **Felirat** | Szöveg a logó alatt (akadálymentesítés, szlogen, leírás). A **Stílus** fülön külön stílusozható. |
| **Link** | Kattintható logó: a kezdőlapra vagy egyéni URL-re. Megadhatod, hogy új lapon nyíljon, és hogy `nofollow` attribútumot kapjon. |

A **Stílus** fülön a szélesség (eszközönként külön), a legnagyobb szélesség (hogy nagy képernyőn se nyúljon el), a szegély stílusa (folytonos, szaggatott, pontozott, dupla), a sarokkerekítés (akár teljesen kerek logó is), az árnyék (pozíció, elmosás, kiterjedés) és az átlátszatlanság állítható. A widget reszponzív: eszközönként más méretet adhatsz meg, és egyes eszközökön el is rejtheted.