# Média és szöveg blokk

> Kép vagy videó és szöveg egymás mellett: hozzáadás, eszköztár, szélesség, vágás és stílusok.

A **Média és szöveg** blokk egy képet vagy videót helyez a szöveg mellé. A szöveg oldalán ugyanúgy írhatsz, mint egy Bekezdés blokkban, és más blokkokat is beszúrhatsz.

## A blokk hozzáadása

Kattints a **+** (blokkbeszúró) gombra, és válaszd a **Média és szöveg** blokkot. Vagy írd be egy üres Bekezdés blokkba, hogy `/média` (vagy `/media`), és nyomj entert.

## Tartalom hozzáadása

A média oldalán feltölthetsz egy fájlt a számítógépedről, vagy kiválaszthatsz egyet a médiatárból. A szöveg oldalán kezdj el gépelni; a szövegdobozba további blokkokat is tehetsz a blokkbeszúróval.

![A Média és szöveg blokk kijelölve: eszköztár és a Beállítások fül](./kepek/blokkok-media-szoveg-szerkeszto.webp)

*A Média és szöveg blokk kijelölve: eszköztár és a Beállítások fül* (https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit)

A képen a kép a bal, a szöveg a jobb oldalon áll; az oldalsávban a **Média szélessége** csúszka, az **Egymás alá mobilon** és a **Kép vágása a kitöltéshez** kapcsoló, a **Helyettesítő szöveg** mező és a **Felbontás** választó látszik.

Ha olyan fájlt töltesz fel, amelyet a blokk nem támogat, a böngésző bal alsó sarkában hibaüzenet jelenik meg.

## Az eszköztár

- **Átalakítás:** a blokkot Oszlopok, Csoport, Kép (videó esetén Videó) vagy Borító blokká alakíthatod.
- **Húzás** és **Mozgatás fel / le:** a hatpontos ikonnal húzd új helyére a blokkot, a nyilakkal lépésenként mozgasd.
- **Igazítás:** alapértelmezett, széles vagy teljes szélességű megjelenés, ha a témád támogatja.
- **Függőleges igazítás módosítása:** a szöveg a média tetejéhez, közepéhez vagy aljához igazodik.
- **Média megjelenítése balra / jobbra:** a média helyét cseréli a szöveghez képest.
- **Hivatkozás:** a képhez hivatkozást adhatsz: külső címet, az oldalad egy oldalát, magát a médiafájlt vagy a melléklet oldalát.
- **Csere:** lecseréli a már beillesztett médiafájlt.
- **Beállítások** (három pont): másolás, kettőzés és szerkesztés HTML-ként.

## Beállítások fül

- **Média szélessége:** a média és a szöveg aránya. Csúszkával vagy számmal állíthatod, 15 és 85 százalék között.
- **Egymás alá mobilon:** bekapcsolva keskeny kijelzőn a média és a szöveg egymás alatt jelenik meg, így mindkettő jól olvasható marad. Ilyenkor a bal oldali tartalom kerül felülre.
- **Kép vágása a kitöltéshez:** ha a kép nem tölti ki az oszlop teljes szélességét, ezzel automatikusan körbevágod. Megjelenik a fókuszpont-választó: húzd a legfontosabb részre, vagy add meg a bal és felső helyzetet százalékban, így a vágás után is a lényeg marad látható.
- **Helyettesítő szöveg:** a kép leírása, amely a képernyőolvasóknak és a keresőmotoroknak szól. Hagyd üresen, ha a kép csak dekoratív.
- **Felbontás:** a kép mérete (teljes, nagy, közepes vagy bélyegkép).
- **Haladó:** HTML-horgony, további CSS-osztályok, további CSS és az engedélyezett blokkok.

## Stílusok fül

![A Média és szöveg blokk Stílusok füle](./kepek/blokkok-media-szoveg-stilusok.webp)

*A Média és szöveg blokk Stílusok füle* (https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit)

A képen a **Betűkészlet**, a **Háttér** és a **Méretek** panel látszik.

- **Szín:** szöveg-, háttér- és hivatkozásszín. Választhatsz a javaslatok közül, vagy megadhatsz egyedit.
- **Betűkészlet:** betűtípus, megjelenés, sormagasság, betűköz, díszítés, kis- és nagybetű, betűméret.
- **Méretek:** belső és külső margó.
- **Keret:** a keret színe, vastagsága és lekerekítése.