4 módja a szöveg körbetekerésének a WordPressben a kép körül

Szükséged van arra, hogy elegánsan helyezd el a szöveget a kép körül? Ismerje meg, hogyan teheti ezt egyszerűen, kódolási és tervezési tapasztalat nélkül. A Gutenberg szerkesztő több lehetőséget kínál a WordPressben a szöveg körüli szövegtekercselésre.

Egyszerre érhet el egy jól kinéző weboldalt és egy könnyű szerkesztési tartalmi rutint. Ha a Gutenberg szerkesztőt választja WordPress webhelye számára, hosszú távon a legjobb eszközt kapja. Több lehetősége lesz arra, hogy a szöveget másképp tekerje a képek köré. A Gutenberg számos előnnyel jár, mint például a weboldal áttekinthetőbb forráskódja, a sebesség, a biztonság és a használhatóság.

Hogyan tekerjük a szöveget a kép köré a WordPressben?

A Gutenberg szerkesztő és a blokkok könnyebbé, modernebbé és könnyedén olvashatóvá teszik a weboldal tartalmát. További módokat mutatunk arra, hogyan lehet a szöveget a kép köré tekerni a WordPress Pages, Post és Custom Post típusokban is. Különböző blokkok vannak, és ezeket kombinálva is használhatod, olyan részek és funkciók összességeként, amelyek további lehetőségeket biztosítanak a szövegtekercseléshez.

Az aloldal és annak tartalmi típusa szerint választhatja ki a kép köré csomagolt szöveg blokkját. Választhat egy stílust a bemutatóoldalhoz és egy másikat egy blogbejegyzéshez. Azt is vegye figyelembe, hogy milyen típusú tartalom képviseli a képet. Ez egy leíró kép vagy inkább reprezentatív vagy értékesítő média?

Szöveg a kép köré tekercselése - blokkok kiválasztása

4 blokkot használhatsz egy szövegblokk kép köré való tekercseléséhez. Mindegyiket leírjuk:

• Képblokk és bekezdésblokk alább többet talál
• Média és szövegblokk alább olvasható
• Oszlopok blokk egyéni állásban
• Klaszter blokk egyéni hozzászólásban (ez a funkció csak a Citadela Pro plugin)

Szöveg és kép becsomagolása a jobb olvasási élmény érdekében

Több okból is érdemes ezt a blokkot használni. Leginkább akkor fogja értékelni, ha blogbejegyzéseket ír. A képek a történet szerves részét képezik. Nem számít, hogy utazási blogot vagy informatikai hírekről szóló magazint írsz. Tehát amikor képeket adsz hozzá a tartalmadon belül, gondolj a képek igazítására. Az olvasók jobban megértik majd, miről írsz.

Sok esetben szükséges a kép és a szöveg egymás melletti beillesztése. Mi a fontos?

• Értelmesnek kell lennie. A képnek a megfelelő szöveg mellett kell lennie.
• Szépen ki kell igazítani.
• A weboldal teljes elrendezéséhez illeszkednie kell.

Kép és bekezdés blokkok

Míg a Klasszikus szerkesztő a kép mellé szöveget is elhelyezhetnél, nem beszélhetnél szép igazításról. Különösen, ha a kép kicsi volt, és több szöveget tettél mellé. A szöveg túlburkolta a képet, és nem nézett ki szépen.

Gutenberg szerkesztő és annak Image blokkja egy nagyszerű funkcióval rendelkezik - a kép átméretezésével. Húzza a pontokat a kép körül, hogy automatikusan megváltoztassa a kép méretét és a szöveg igazítását.

Média és szöveg blokk - WordPress szöveg igazítása a kép mellé

• Szöveg és képek beburkolása a Média és szöveg blokkal
• Hogyan adjunk hozzá Média és szöveg blokkot a szerkesztőben
• Hogyan működik ez a blokk
• Média és szövegblokk beállítások
• Mit jelent a "Stack mobilon" átlagosan
• Bónusz: Hogyan igazítsuk a szöveget a WordPressben

Hogyan igazítsuk a szöveget a kép mellé?

A Media & Text blokk egy fantasztikus funkció. A Media & Text blokk megoldja ezt a problémát, és biztosítja a szöveg tökéletes igazítását a képhez, a kompozíció és az elrendezés megzavarása nélkül. Ez az oka annak, hogy érdemes ezt a blokkot használni.

Javítja a weboldalak tervezését mobileszközökön is. Ez a csomagolóblokk segít a WordPress témának a különböző mobilos elrendezések lefedésében. Az okostelefonon a weboldal minden részének jól láthatónak és olvashatónak kell lennie. Hogyan fog kinézni a Media & Text blokk a mobiltelefonokon és a táblázat kezeli a "Stack on mobile" funkciót, amelyet alább megnézünk.

Rövid időn belül használhatod a Média és szöveg blokkot az új WordPress témánkban, az Citadela-ben. Tudj meg többet az Citadela témáról a külön cikkben.

Hogyan adhatok hozzá Média és szöveg blokkot a blokkszerkesztőben?

A Média és szöveg blokk hozzáadása ugyanolyan egyszerű, mint bármely más blokk hozzáadása. Ez egy alapblokk, ami azt jelenti, hogy nem kell letöltenie vagy telepítenie semmit.

Használja a "+" ikont a felső panelen vagy bárhol a szerkesztőben, és válassza ki a Média és szöveg blokkot.

Az utolsó lehetőség a "/" beírása, és utána a "media" beírása. A WordPress automatikusan megmutatja a kiválasztott blokkokat, amelyek megfelelnek annak, amire rákerestél.

Hogyan működik a Média és szöveg blokk?

A Media & Text blokk alapvetően 2 különböző típusú tartalmat csoportosít egybe. Az első egy médium, pl. kép vagy videó, amit hozzáadhat:

• Feltöltés
• Médiatár
• Drag & Drop

A második a szöveges tartalom számára fenntartott hely. Ide írhatsz szövegrészeket, felsorolásokat vagy címeket. Ön is hozzáadhat ott Gomb blokk amiről korábban beszéltünk.

A Média és szöveg blokk mindig egymás mellé igazítja a képet és a szöveget, függetlenül attól, hogy mennyi szöveget ír. Hogyan működik? A kép automatikusan beállítja magát a szöveg oszlopban lévő tartalom magassága alapján.

Média és szövegblokk beállítások

Általános blokkbeállítások

1. Felső eszköztár

A blokk feletti eszköztár számos lehetőséget kínál. Ha az aktív témája támogatja ezt, akkor a Media & Text blokkot széles vagy teljes szélességűre állíthatja be. Azt is kiválaszthatja, hogy hova szeretne képet vagy videót elhelyezni, ha rákattint:

• Média megjelenítése balra
• Média megjelenítése jobbra

A felső eszköztárban van egy ikon a médium szerkesztéséhez, ahol beállíthatja az Alt szöveget, a címet, a feliratot vagy a leírást. További információk a képek szerkesztéséről a cikkünkben Munka a WordPress képblokkal.

2. Jobb oldalsáv

A jobb oldalsáv további beállításokat kínál a Média és szöveg blokkhoz. Lehetőség van itt Alternatív szöveg hozzáadására, háttérszín beállítására vagy további CSS osztályok hozzáadására. A "Stack on mobile" funkciót is engedélyezheti.

Mi a Stack a mobilon?

Ennek a funkciónak köszönhetően a kép és a szöveg szépen megjelenik a mobileszközökön. Ha kikapcsolja a "Stack on mobile" funkciót, a kép és a szöveg egymás mellett marad, és a reszponzív változatban alig lesz olvasható.

Ha engedélyezi ezt a funkciót, a mobiltelefonon a bal oldali tartalom a jobb oldali tartalom fölött jelenik meg.

Szöveg igazítása

A Média és szöveg blokk része a kép vagy videó mellett a szöveges tartalom is. A következő tartalomtípusok egyike lehet:

1. bekezdés

A felső eszköztárban beállíthatja a szöveg igazítását, a szöveget félkövérré, dőlt betűssé teheti, vagy URL-linket adhat hozzá.

A jobb oldali oldalsávban kiválaszthatja a betűméretet, a betűszínt vagy a bekezdés színét. Érdekes funkció a "Drop Cap", amely kiemeli a szöveg első karakterét. Ez egy szép funkció a blokkos hozzászólásokban, hogy a szöveget érdekesebbé tegye.

2. Cím:

A címsor nagyon hasonlít a bekezdéshez. A megjelenést is beállíthatja, félkövér vagy dőlt betűs lehet, és URL-linket is beilleszthet. A különbség az, hogy a címsor típusát - H2, H3, H4 - is kiválaszthatja.

Más címsorméretek és igazítási beállítások a jobb oldali oldalsávban érhetők el.

3. Lista

Ha listablokkot ad hozzá a tartalomhoz, akkor az lehet felsorolás, számozott lista vagy többszintű lista. A szöveget félkövérré és dőlt betűvel is emelheti, valamint URL-linket is hozzáadhat.

4. Gombblokk

Ez a blokk, amely a tartalomhoz gombot ad hozzá, a weboldal kialakításához igazítható. A gomb színe és stílusa vagy háttérszíne a jobb oldali oldalsávban konfigurálható.

Ne felejtsd el elolvasni a cikket a Gomb blokk. 

Váltás a blokk típusok között

A Média és szöveg blokkban lehetőség van arra, hogy az egyik tartalmi blokk típust egy másikba konvertálja. A Média és szöveg blokkot képblokká is módosíthatja, és a szöveges rész törlésre kerül.

A szöveges tartalomban lehetőség van a bekezdés blokkot fejléc vagy lista blokkra változtatni.

Bónusz: Hogyan igazítsuk a szöveget a WordPressben

Az igazított szöveg használatának megvannak a maga pozitív és negatívumai. Az igazított szöveg általában könyvekben vagy újságokban található meg, de a weboldalakon már nem használják. Hogy miért?

Néhány évvel ezelőtt volt Justify funkciót integrált jobbra belül WordPress Classic szerkesztő. Az igazított szöveg láthatósági problémákat okozott a különböző böngészőkben vagy mobileszközökön. Ez az igazított szöveg nehéz olvashatóságával is összefügg. Ez a funkció ezért elavult és eltávolításra került.

Ez a funkció nem létezik az új blokkszerkesztőben (Gutenberg) sem.

Szóval hogyan igazolod a szöveget, ha tényleg akarod?

A megoldás egyszerű CSS kód hozzáadása néhány lépésben:

1. A jobb oldali oldalsávban van egy beállítás a Paragraph blokk további CSS osztálya számára.
2. Írja oda az osztály nevét "igazolja a"
3. Oldal vagy cikk közzététele
4. Ha előnézetben van, kattintson a Testreszabás gombra a felső fő sávban.
5. A bal oldalon van egy új oldalsáv a beállításokkal.
6. Kattintson a További CSS-re
7. Illessze be a következő CCS-kódot:

p.justify {
    text-align: justify;
}

Kész. Mostantól a szöveg a Média és szövegblokkban indokolt.

A WordPress a Gutenberg szerkesztőnek köszönhetően harmadik féltől származó oldalépítők nélkül is használhatóbbá vált. Hosszú távon és a weboldal létrehozása vagy újratervezése során kiváló értéket képvisel a webhelye számára. A Gutenberg blokkok nagy stílusválasztékot adnak, bárhogyan is találja meg a kezét WordPress kód a szöveg képek köré történő csomagolásához.

Mi a véleménye a Media & Text blokkról? Használtad már? Hogy tetszik a munka vele? Írja meg nekünk az alábbi hozzászólásokban.