4 viisi, kuidas teksti ümber pildi WordPressis ümbritseda

Kas teil on vaja paigutada teksti ümber pildi elegantselt? Õppige, kuidas seda hõlpsasti teha ilma kodeerimis- ja disainikogemuseta. Gutenbergi toimetaja toob WordPressis rohkem võimalusi teksti ümber teksti mähkimiseks.

Saate samaaegselt saavutada hea väljanägemisega veebisaidi ja lihtsa sisutöötluse. Valides oma WordPressi veebisaidi jaoks Gutenbergi redaktori, saate pikaajaliselt vaadatuna parima tööriista. Teil on rohkem võimalusi, kuidas teksti erinevalt piltide ümber keerata. Gutenberg toob kaasa palju eeliseid, nagu veebilehe selgem lähtekood, kiirus, turvalisus ja kasutatavus.

Kuidas WordPressis teksti ümber pildi keerata?

Gutenbergi toimetaja ja plokid muudavad veebisaidi sisu kergemaks, kaasaegsemaks ja hõlpsasti loetavaks. Näitame rohkem võimalusi, kuidas teksti ümber pildi keerata ka WordPressi lehtede, postituste ja kohandatud postituste tüüpides. On erinevaid plokke ja neid saab kasutada ka kombineeritult, osade ja funktsioonide kogumina, mis annavad sulle lisavõimalusi teksti ümbritsemiseks.

Saate valida pildi ümber pakitud teksti ploki vastavalt alamleheküljele ja selle sisutüübile. Võite valida ühe stiili esitluslehe jaoks ja teise blogipostituse jaoks. Kaaluge ka seda, millist sisu kujutab pilt. Kas tegemist on kirjeldava pildiga või pigem esindus- või müügimeediaga?

Teksti ümbritsemine pildi ümber - blokeerib valiku

On 4 plokki, mida saate kasutada tekstiploki ümbritsemiseks pildi ümber. Me kirjeldame neid kõiki:

• Pildiplokk ja lõikeplokk leiad rohkem allpool
• Meedia ja teksti plokk leiab rohkem allpool
• Veergude plokk individuaalses postituses
• Klasterblokk individuaalses postituses (funktsioon on saadaval ainult koos Citadela Pro plugin)

Teksti ja pildi pakkimine parema lugemiskogemuse tagamiseks

On mitu põhjust, miks te peaksite seda plokki kasutama. Kõige rohkem hindate seda, kui kirjutate blogipostitusi. Pildid on loo lahutamatu osa. Ei ole oluline, kas kirjutate reisiblogi või ajakirja IT-uudistest. Nii et kui lisate oma sisu sees fotosid, mõelge piltide joondamisele. Lugejad saavad paremini aru, millest te kirjutate.

Paljudel juhtudel on vaja sisestada pilt ja tekst kõrvuti. Mis on oluline?

• See peab olema mõistlik. Pilt peab olema õige teksti kõrval.
• See peab olema kenasti joondatud.
• See peab sobima kogu veebilehe kujundusega.

Pildi ja lõigu plokid

Kuigi Klassikaline toimetaja sa võiksid ka teksti pildi kõrvale panna, siis ei saa rääkida kenast joondamisest. Eriti kui pilt oli väike ja sa panid selle kõrvale rohkem teksti. Tekst mähkis pildi üle ja see ei näinud ilus välja.

Gutenbergi toimetaja ja selle pildiblokk toovad kaasa suurepärase funktsiooni - pildi suuruse muutmine. Lohistage punkte ümber pildi, et muuta automaatselt selle suurust ja teksti joondamist.

Meedia ja teksti plokk - WordPress joondab teksti pildi kõrvale

• Teksti ja piltide ümbritsemine meedia- ja tekstiblokiga
• Kuidas lisada meedia- ja tekstiblokki redaktoris
• Kuidas see plokk töötab
• Meedia- ja tekstibloki seaded
• Mida tähendab "Stack on mobile" keskmine
• Boonus: Kuidas õigustada teksti WordPressis

Kuidas joondada teksti pildi kõrval?

Meedia ja teksti plokk on fantastiline funktsioon. Media & Text plokk lahendab selle probleemi ja tagab teksti täiusliku joondamise pildi külge, ilma et see häiriks kompositsiooni ja paigutust. See on põhjus, miks te peaksite seda plokki kasutama.

See parandab veebisaidi kujundust ka mobiilseadmetes. See pakkimisplokk aitab WordPressi teema katta erinevaid mobiilseid paigutusi. Nutitelefonis peab iga osa veebisaidist olema selgelt nähtav ja loetav. Kuidas näeb Media & Text plokk välja mobiiltelefonidel ja tabeli käsitsemine "Stack on mobile" funktsiooniga, mida vaatame allpool.

Peagi saate kasutada meedia- ja tekstiblokki meie uues WordPressi teemas nimega Citadela. Lisateavet Citadela teema kohta leiate eraldi artiklist.

Kuidas lisada meedia- ja tekstiblokki plokkredaktoris?

Meedia ja teksti ploki lisamine on sama lihtne kui mis tahes muu ploki lisamine. See on põhiplokk, mis tähendab, et te ei pea midagi alla laadima ega installima.

Kasutades "+" ikooni ülemisel paneelil või ükskõik kus toimetuses ja valides Media & Teksti ploki.

Viimane võimalus on kirjutada "/" ja seejärel "media". WordPress näitab teile automaatselt valitud plokid, mis vastavad sellele, mida te otsisite.

Kuidas töötab meedia- ja tekstiblokk?

Meedia ja teksti plokk rühmitab põhimõtteliselt 2 erinevat tüüpi sisu ühte. Esimene neist on meedium, nt pilt või video, mida saab lisada:

• Laadige üles
• Meedia raamatukogu
• Lohistage ja laske

Teine on ruumi tekstisisu jaoks. Sinna saab kirjutada teksti lõike, loetelusid või pealkirju. Samuti võite lisada sinna Nupu plokk millest me varem rääkisime.

Meedia ja teksti plokk joondab alati pildi ja teksti kõrvuti, olenemata sellest, kui palju teksti kirjutate. Kuidas see töötab? Pilt kohandub automaatselt vastavalt teksti veeru sisukõrgusele.

Meedia- ja tekstibloki seaded

Üldised plokkide seaded

1. Ülemine tööriistariba

Ploki kohal olev tööriistariba pakub mitmeid võimalusi. Kui teie aktiivne teema seda toetab, saate määrata meedia- ja tekstibloki laiaks või täislaiuliseks. Samuti saate valida, kuhu soovite pildi või video paigutada, klõpsates:

• Näita meediat vasakul
• Näita meediat paremal

Ülemisel tööriistaribal on ka ikoon meediumi redigeerimiseks, kus saate määrata Alt teksti, pealkirja, pealkirja või kirjelduse. Lisateavet piltide redigeerimise kohta leiate meie artiklist Töötamine WordPressi pildiblokiga.

2. Parempoolne külgriba

Paremal küljepalk pakub täiendavat seadistust meedia- ja tekstibloki jaoks. Siin on võimalik lisada alternatiivset teksti, määrata taustavärvi või lisada täiendav CSS-klass. Samuti saate seal lubada funktsiooni "Stack on mobile".

Mis on Stack mobiilis?

Tänu sellele funktsioonile kuvatakse pilti ja teksti kenasti ka mobiilseadmetes. Kui lülitate funktsiooni "Stack on mobile" välja, jäävad pilt ja tekst kõrvuti ja see on responsive versioonis raskesti loetav.

Kui lubate selle funktsiooni, kuvatakse mobiiltelefonis vasakpoolne sisu paremal pool asuva sisu kohal.

Teksti joondamine

Osa Media & Teksti plokist on koos pildi või videoga ka tekstisisu. See võib olla üks järgmistest sisutüüpidest:

1. Paragrahv

Ülemisel tööriistaribal saate määrata teksti joondamist, muuta teksti paksuks, kaldkirjaks või lisada URL-linki.

Parempoolses küljepaanis saate valida kirjasuuruse, kirjavärvi või lõike värvi. Huvitav funktsioon on "Drop Cap", mis tõstab esile teksti esimese tähemärgi. See on kena funktsioon plokkpostitustes, et muuta tekst huvitavamaks.

2. Pealkiri

Pealkiri on väga sarnane lõikega. Saate ka selle välimust konfigureerida, muuta see paksuks või kursiivseks ja sisestada URL-linki. Erinevus seisneb selles, et saate valida pealkirja tüübi - H2, H3, H4.

Teised pealkirjade suurused ja joondamise seaded on saadaval parempoolses küljepaanis.

3. Loetelu

Kui lisate oma sisule loetelu ploki, võib see olla loetelupunktid, nummerdatud loetelu või mitmetasandiline loetelu. Samuti saate muuta teksti paksuks, kursiiviks ja lisada URL-linki.

4. Nupu plokk

See plokk, mis lisab nupu sisu saab kohandada veebilehe kujundusega. Nupu värvi ja stiili või taustavärvi saab seadistada parempoolses küljepaanis.

Ärge unustage lugeda artiklit Nupu plokk. 

Blokitüüpide vahel vahetamine

Meedia- ja tekstiblokis on võimalik konverteerida üks sisublokitüüp teise. Samuti saate muuta Media & Text ploki Image plokiks ja tekstiosa kustutatakse.

Teksti sisus on võimalik muuta Paragrahvi plokki pealkirja- või loendiplokiks.

Boonus: Kuidas õigustada teksti WordPressis

Põhjendatud teksti kasutamisel on omad positiivsed ja negatiivsed küljed. Põhjendatud teksti võib tavaliselt leida raamatutest või ajalehtedest, kuid veebilehtedel seda enam ei kasutata. Miks?

Mitu aastat tagasi oli Justify funktsioon integreeritud otse WordPress Classic toimetaja. Justified teksti kasutatakse põhjustada nähtavuse probleeme erinevates brauserites või mobiilseadmete. See on seotud ka õigustatud teksti raske loetavusega. See funktsioon oli seetõttu deprecated ja eemaldatud.

Seda konkreetset funktsionaalsust ei ole ka uues plokkredaktoris (Gutenberg) olemas.

Kuidas siis õigustada teksti, kui sa tõesti tahad?

Lahendus on lisada lihtne CSS-kood paari sammuga:

1. Paragrahvi ploki täiendava CSS-klassi jaoks on parempoolses küljepaanis seadistus
2. Kirjutage sinna klassi nimi "põhjendada"
3. Avalda leht või artikkel
4. Kui te vaatate seda eelvaates, klõpsake peamise ülemise riba nupule Kohandada.
5. Vasakul on uus külgriba seadetega
6. Klõpsake täiendavat CSS-i
7. Sisestage järgmine CCS-kood:

p.justify {
    text-align: justify;
}

Tehtud. Nüüdsest on tekst teie Media & Text Blockis õigustatud.

WordPress on tänu Gutenbergi redaktorile muutunud kasutatavamaks ilma kolmandate osapoolte leheehitajateta. See on teie veebisaidi jaoks pikaajaliselt ja veebisaidi loomisel või ümberkujundamisel suurepärase väärtusega. Gutenbergi plokid annavad suure stiilivaliku, kuid võite leida käe WordPressi kood teksti ümbritsevate piltide ümber pakkimiseks.

Milline on teie arvamus meedia- ja tekstibloki kohta? Kas olete seda juba kasutanud? Kuidas teile meeldib sellega töötada? Andke meile kommentaarides allpool teada.