Obsah
Potrebujete elegantne umiestniť text okolo obrázka? Naučte sa, ako to urobiť jednoducho bez skúseností s kódovaním a dizajnom. Editor Gutenberg prináša viac možností na obtekanie textu okolo textu vo WordPress.
Môžete tak dosiahnuť dobre vyzerajúce webové stránky a zároveň jednoduchú úpravu obsahu. Výberom editora Gutenberg pre svoju webovú lokalitu WordPress získate z dlhodobého hľadiska najlepší nástroj. Budete mať viac možností na rôzne obtekanie textu okolo obrázkov. Gutenberg prináša mnoho výhod, ako je prehľadnejší zdrojový kód webovej stránky, rýchlosť, bezpečnosť a použiteľnosť.
Ako obaliť text okolo obrázka v systéme WordPress?
Vďaka editoru Gutenberg a blokom je obsah webových stránok ľahší, modernejší a ľahko čitateľný. Ukážeme vám ďalšie spôsoby, ako obaliť text okolo obrázka aj v typoch WordPress Pages, Post a Custom Post. Existujú rôzne bloky a môžete ich používať aj v kombinácii, ako súbor častí a funkcií, ktoré vám poskytujú ďalšie možnosti obtekania.
Blok pre obalený text okolo obrázka môžete vybrať podľa podstránky a typu jej obsahu. Jeden štýl môžete zvoliť pre prezentačnú stránku a iný pre príspevok na blogu. Zvážte aj druh obsahu, ktorý obrázok predstavuje. Ide o obrázok s popisom alebo skôr o reprezentatívne či predajné médium?
Obaliť text okolo obrázka - Výber blokov
Na obklopenie bloku textu okolo obrázka môžete použiť 4 bloky. Všetky si popíšeme:
- Blok obrázkov a blok odsekov nájdete nižšie
- Blok Médiá a text nájdete nižšie
- Blok stĺpcov v jednotlivých príspevkoch
- Klastrový blok v jednotlivých príspevkoch (funkcia je k dispozícii len s Citadela Pro plugin)
Obalenie textu a obrázka pre lepší zážitok z čítania
Existuje niekoľko dôvodov, prečo by ste mali tento blok používať. Najviac ho oceníte, ak píšete príspevky na blog. Obrázky sú neoddeliteľnou súčasťou príbehu. Nezáleží na tom, či píšete cestovateľský blog alebo magazín o IT novinkách. Preto pri pridávaní fotografií vo vnútri obsahu myslite na zarovnanie obrázkov. Čitatelia budú môcť lepšie pochopiť, o čom píšete.
V mnohých prípadoch je potrebné vložiť obrázok a text vedľa seba. Čo je dôležité?
- Musí to dávať zmysel. Obrázok musí byť vedľa správneho textu.
- Musí byť pekne zarovnaný.
- Musí sa hodiť k celému rozloženiu webovej stránky.
Bloky obrázkov a odsekov
Kým v Klasický editor mohli by ste tiež umiestniť text vedľa obrázka, nemohli by ste hovoriť o peknom zarovnaní. Najmä ak bol obrázok malý a vedľa neho ste umiestnili viac textu. Text prekrýval obrázok a nevyzeralo to pekne.
Editor Gutenberg a jeho blok Obrázok prináša skvelú funkciu - zmenu veľkosti obrázka. Potiahnutím bodov okolo obrázka automaticky zmeníte jeho veľkosť a zarovnanie textu.
Blok Médiá a text - WordPress zarovná text vedľa obrázka
- Obalenie textu a obrázkov pomocou bloku Médiá a text
- Ako pridať blok Médiá a text v editore
- Ako tento blok funguje
- Nastavenia bloku Médiá a text
- Čo znamená "Zásobník v mobile" priemer
- Bonus: Ako ospravedlniť text vo WordPress
Ako zarovnať text vedľa obrázka?
Začnite teraz
Jednorazová platba. 30-dňová záruka vrátenia peňazí.
Blok Médiá a text je fantastická funkcia. Blok Media & Text rieši tento problém a zabezpečuje dokonalé zarovnanie textu k obrázku bez narušenia kompozície a rozloženia. To je dôvod, prečo by ste mali tento blok používať.
Zlepšuje aj dizajn webových stránok na mobilných zariadeniach. Tento baliaci blok pomáha téme WordPress pokryť rôzne mobilné rozloženia. Na smartfóne musí byť každá časť webovej lokality jasne viditeľná a čitateľná. Ako bude blok Médiá a text vyzerať na mobilných telefónoch a tabuľka obsluhuje funkciu "Stack on mobile", na ktorú sa pozrieme nižšie.
V krátkom čase budete môcť používať blok Médiá a text v našej novej téme WordPress s názvom Citadela. Viac informácií o téme Citadela sa dozviete v samostatnom článku.
Ako pridať blok Médiá a text v editore blokov?
Pridanie bloku Médiá a text je rovnako jednoduché ako pridanie akéhokoľvek iného bloku. Je to základný blok, čo znamená, že nemusíte nič sťahovať ani inštalovať.
Pomocou ikony "+" na hornom paneli alebo kdekoľvek v editore a výberom bloku Médiá a text.
Poslednou možnosťou je napísať "/" a potom napísať "media". WordPress vám automaticky zobrazí vybrané bloky zodpovedajúce tomu, čo ste hľadali.
Ako funguje blok Médiá a text?
Blok Médiá a text v podstate zoskupuje 2 rôzne typy obsahu do jedného. Prvý je médium, napr. obrázok alebo video, ktoré môžete pridať prostredníctvom:
- Nahrať
- Knižnica médií
- Ťahanie a púšťanie
Druhým je priestor pre textový obsah. Môžete tam písať odseky textu, zoznamy s odrážkami alebo nadpisy. Môžete tam tiež pridať Blok tlačidiel o ktorej sme hovorili predtým.
Blok Médiá a text vždy zarovná obrázok a text vedľa seba bez ohľadu na to, koľko textu napíšete. Ako to funguje? Obrázok sa automaticky prispôsobí na základe výšky obsahu v textovom stĺpci.
Nastavenia blokov médií a textu
Všeobecné nastavenia bloku
1. Horný panel nástrojov
Panel nástrojov nad blokom ponúka niekoľko možností. Ak to vaša aktívna téma podporuje, môžete nastaviť blok Médiá a text ako široký alebo na celú šírku. Môžete si tiež vybrať, kam chcete umiestniť obrázok alebo video kliknutím na:
- Zobrazenie médií vľavo
- Zobrazenie médií vpravo
Na hornom paneli nástrojov sa nachádza aj ikona na úpravu média, kde môžete nastaviť Alt Text, Nadpis, Titulok alebo Popis. Viac informácií o úprave obrázkov nájdete v našom článku Práca s blokom obrázkov WordPress.
2. Pravý bočný panel
Pravý bočný panel ponúka ďalšie nastavenia pre blok Médiá a text. Je tu možné pridať alternatívny text, nastaviť farbu pozadia alebo pridať ďalšiu triedu CSS. Môžete tu tiež povoliť funkciu "Stack on mobile".
Čo je to zásobník v mobilnom telefóne?
Vďaka tejto funkcii sa obrázok a text pekne zobrazujú na mobilných zariadeniach. Ak funkciu "Stack on mobile" zakážete, obrázok a text zostanú vedľa seba a v responzívnej verzii budú ťažko čitateľné.
Ak túto funkciu povolíte, v mobilnom telefóne sa obsah na ľavej strane zobrazí nad obsahom na pravej strane.
Zarovnanie textu
Súčasťou bloku Media & Text je spolu s obrázkom alebo videom aj textový obsah. Môže to byť jeden z nasledujúcich typov obsahu:
1. Odsek
V hornom paneli nástrojov môžete nastaviť zarovnanie textu, zarovnať text tučným písmom, kurzívou alebo pridať odkaz URL.
V bočnom paneli na pravej strane si môžete vybrať veľkosť písma, farbu písma alebo farbu odseku. Zaujímavou funkciou je "Drop Cap", ktorá zvýrazní prvý znak textu. Je to pekná funkcia v blokových príspevkoch, ktorá robí text zaujímavejším.
2. Nadpis
Nadpis je veľmi podobný odseku. Môžete tiež konfigurovať jeho vzhľad, nastaviť tučné písmo alebo kurzívu a vložiť odkaz URL. Rozdiel je v tom, že si môžete vybrať typ nadpisu - H2, H3, H4.
Ďalšie veľkosti nadpisov a nastavenia zarovnania sú k dispozícii v bočnom paneli na pravej strane.
3. Zoznam
Ak do obsahu pridáte blok Zoznam, môžu to byť odrážky, číslovaný zoznam alebo viacúrovňový zoznam. Text môžete tiež zvýrazniť tučným písmom, kurzívou a pridať odkaz URL.
4. Blok tlačidiel
Tento blok, ktorý pridáva tlačidlo k obsahu, možno prispôsobiť dizajnu webovej stránky. Farbu a štýl tlačidla alebo farbu pozadia možno nakonfigurovať v bočnom paneli na pravej strane.
Nezabudnite si prečítať článok o Blok tlačidiel.
Prepínanie medzi typmi blokov
V bloku Médiá a text je možné konvertovať jeden typ bloku obsahu na iný. Blok Media & Text môžete tiež zmeniť na blok Image (Obrázok) a textová časť sa odstráni.
V textovom obsahu je možné zmeniť blok Odsek na blok Nadpis alebo Zoznam.
Bonus: Ako ospravedlniť text vo WordPress
Používanie odôvodneného textu má svoje pozitíva aj negatíva. Odôvodnený text sa zvyčajne nachádza v knihách alebo novinách, ale na webových stránkach sa už nepoužíva. Prečo?
Pred niekoľkými rokmi bola funkcia Justify integrovaná priamo do editora WordPress Classic. Odôvodnený text spôsoboval problémy s viditeľnosťou v rôznych prehliadačoch alebo mobilných zariadeniach. Súviselo to aj s ťažkou čitateľnosťou ospravedlneného textu. Táto funkcia bola preto zastaraná a odstránená.
Táto konkrétna funkcia neexistuje ani v novom blokovom editore (Gutenberg).
Ako teda odôvodníte text, ak naozaj chcete?
Riešením je pridanie jednoduchého kódu CSS v niekoľkých krokoch:
- V bočnom paneli na pravej strane je nastavenie pre Ďalšie triedy CSS bloku Odsek
- Napíšte tam názov triedy "zdôvodniť"
- Publikovanie stránky alebo článku
- Ak si ho prezriete, kliknite na položku Prispôsobiť v hlavnom hornom paneli
- Na ľavej strane sa nachádza nový bočný panel s nastaveniami
- Kliknite na Ďalšie CSS
- Vložte nasledujúci kód CCS:
p.justify {
text-align: justify;
}
Hotovo. Odteraz je text vo vašom bloku Médiá a text odôvodnený.
Vďaka editoru Gutenberg sa WordPress stal použiteľnejším bez nástrojov na vytváranie stránok tretích strán. Z dlhodobého hľadiska a pri vytváraní alebo redizajne webových stránok má pre vaše webové stránky vynikajúcu hodnotu. Bloky Gutenberg poskytujú veľký rozsah štýlu, akokoľvek by ste mohli nájsť ruku Kód WordPress na obtekanie textu okolo obrázkov.
Aký je váš názor na blok Media & Text? Používali ste ho už? Ako sa vám s ním pracuje? Dajte nám vedieť v komentároch nižšie.
Všeobecne sa mi systém blokov páči, ale ak mi niečo neuniklo, toto je krok späť. Momentálne sa snažím jednoducho posúvať obrázok doľava alebo doprava a dostať text do zábalu, čo by malo byť naozaj jednoduché, ale zdá sa, že WordPress to jednoducho nechce. Prečo to nejde? Použitie bloku médií a obrázkov funguje len vtedy, ak má text správnu dĺžku. Stránka, ako je napríklad táto, sa nechce prerábať s nepárnym odstupom medzi odsekmi, ak text nie je presne správnej dĺžky pre veľkosť obrázka.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Dobrý deň,
ďakujem za vašu spätnú väzbu. Znie to ako veľmi dobrý nápad, preto by som vás chcel požiadať, aby ste nám venovali minútu svojho času a odpovedali na 4 jednoduché otázky: https://aitthemes.typeform.com/to/vc7arn, ktoré môžu nášmu tímu pomôcť rýchlejšie vytvoriť lepšie produkty s jedinečnými funkciami.
Ďakujeme za váš čas a pochopenie.
Srdečný pozdrav!
Zlatko
Tím AIT
Áno, text sa mi nedá zabaliť. Zdá sa, že táto kombinácia textových blokov je nepoužiteľná.
Tento nápad je na nič ako jediný spôsob vkladania obrázkov do blogu - text sa mi nedarí pekne zabaliť a nemá rovnakú veľkosť, nech robím čokoľvek. Dobrý nápad pre určité situácie, ale nie pre všetky. Niekedy chcete mať len obrázok, okolo ktorého sa budú obtáčať odseky, a nie povedať niečo o obrázku.
Ako pridať obal a použiť obsah v plnej šírke yar vážne, ako pokryť plnú s potom vziať kontajner v ňom.. staviteľ je veľmi mätúce, ako pridať kontajner zábal veľmi zlý editor yar
Dobrý deň,
ďakujeme za vaše pochvaly. Neváhajte a pozrite si našu stránku blogu https://www.ait-themes.club/blog/, kde nájdete mnoho užitočných tipov, ako písať atraktívne a užitočné príspevky.
Srdečný pozdrav!
Zlatko
Tím AIT
Ahoj Abdur,
Ďakujeme vám za vašu spätnú väzbu, náš tím si ju veľmi cení!
S pozdravom.
Zlatko
Tím AIT
Mám rovnaké ťažkosti ako niekoľko ďalších ľudí na tomto vlákne. v minulosti som bol schopný ľahko zabaliť text okolo obrázku, ako v našom "o nás" stránku, kde máme fotky a životopisy. možno som používal starý editor. Teraz sa snažím aktualizovať našu stránku s novými fotkami a životopismi a nenašiel som spôsob, ako ľahko obaliť text ako na našich predchádzajúcich kombináciách životopisov a fotiek. Pokúsil som sa prepnúť na klasický editor, ale stránka ma upozornila, že mám "nové sekcie blokového editora" a musím zostať pri novšom režime úprav. môžete mi povedať, ako dosiahnuť, aby naše nové životopisy a obrázky vyzerali ako naše predchádzajúce príspevky? ďakujem.
Ahoj,
Ak chcete vypnúť Gutenberg a pokračovať v klasickom editore WordPress, zvážte plugin od jadra WordPress, ktorý vám to umožní pomocou "Classic Editor Plugin".
S pozdravom!
Zlatko
Tím AIT
Pre tých, ktorí chcú len jednoduché textové obtekanie okolo obrázka, to môžete urobiť vložením klasického textového bloku (nachádza sa v prvej časti blokov po kliknutí na tlačidlo Prehľadávať. Získate možnosť používať klasický editor v jednom bloku a áno, ten vám umožní vložiť obrázok a potom vybrať možnosť obtekania. Problém vyriešený 🙂
ĎAKUJEME London SEO Guy!!! Jednoduché riešenie, ale prehliadol som ho!
A potom... jednoducho použite možnosť Konvertovať na bloky.
Keďže to funguje, Editor blokov má túto možnosť, ale neviem nájsť, ako ju správne nastaviť. Zatiaľ funguje táto fičúra.
Rovnaké problémy tu. Táto nová verzia je príšerná - nie je možné správne obaliť text alebo dokonca zmenšiť fotografiu, ak ju nechcete len orezať.
Som schopný obaliť svoj text okolo obrázka v blokovom editore WordPress. V náhľade to vyzerá presne tak, ako chcem. Keď však uverejním svoj blog a WordPress ho pošle e-mailom mojim sledovateľom, dostanú ho s obrázkom na vrchu a textom pod obrázkom. Stáva sa to aj na stolových počítačoch, nielen na malých mobilných telefónoch. Chcem ho mať zabalený, nie naskladaný.
Dobrý deň,
Ďakujeme, že ste nám napísali. Blok nebude obaliť text okolo obrázka vo WordPress, ako by ste očakávali. Pozrite si, prosím, nasledujúce pokyny, pretože by vám mohli pomôcť: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
S pozdravom!
Zlatko
Tím AIT
Toto všetko robím a môj blog sa dokonale zabalí do Preview. Keď ho uverejním, na stránke blogu vyzerá skvele. Ale keď ho WordPress pošle e-mailom mojim sledovateľom a tí si ho otvoria, nevidia ho zabalený. Fotografie sú na vrchu textu. Vyzerá to veľmi neprofesionálne. So starým klasickým editorom som tento problém nikdy nemal. Teraz, keď používam Editor blokov, mi nedovolí vrátiť sa do klasického editora, hoci je tam možnosť Classic, na ktorú sa dá kliknúť.
Dobrý deň,
Ďakujeme, že ste nám napísali.
Radi by sme vás požiadali, aby ste si pozreli našu databázu znalostí a/alebo dokumentáciu s videonávodmi:
https://www.ait-themes.club/ait-themes-documentation/
Alebo môžete posielať technické otázky priamo do nášho špecializovaného systému podpory. Prihláste sa do svojho účtu na adrese https://system.ait-themes.club/support/add-question.
Zákaznícka podpora sa poskytuje počas pracovných dní od 8:00 do 17:00 stredoeurópskeho času.
Okrem toho existuje zásuvný modul, ktorý vám umožní používať predchádzajúci editor. Mali by ste si nainštalovať a aktivovať "Klasický editor".
S úctou!
Zlatko
Tím AIT
Nesúhlasím s tým, že je to lepšie ako klasické úpravy, pretože možnosti sú obmedzenejšie. Myslím si, že tento blok, pretože používa iné písma a je širší ako textový blok, je vizuálne rušivý. Možnosť plynulo obaliť text okolo obrázka pri zachovaní rovnakého nastavenia písma, veľkosti a okrajov prináša profesionalitu stránky časopisu. Toto je len jeden z príkladov, prečo som hlboko sklamaný z tejto verzie programu wordpress.
Ahoj Terence
ďakujeme za váš názor. Vyskúšali ste našu skúšobnú verziu Citadela? Máme niekoľko jedinečných blokov, ktoré by vám mohli pomôcť s úpravou textu a obrázkov. Každopádne si môžete vyskúšať plnú verziu - všetky funkcie, zadarmo.
Prajem pekný deň.