Sisällysluettelo
Haluatko sijoittaa tekstiä kuvan ympärille tyylikkäästi? Opi tekemään se helposti ilman koodaus- ja suunnittelukokemusta. Gutenberg-editori tuo WordPressissä lisää vaihtoehtoja tekstin käärimiseen tekstin ympärille.
Voit saada aikaan hyvännäköisen verkkosivuston ja helpon sisällönmuokkauksen samanaikaisesti. Valitsemalla Gutenberg-editorin WordPress-verkkosivustollesi saat parhaan työkalun pitkällä aikavälillä. Sinulla on enemmän vaihtoehtoja tekstin käärimiseen kuvien ympärille eri tavoin. Gutenberg tuo mukanaan monia etuja, kuten selkeämpi verkkosivuston lähdekoodi, nopeus, turvallisuus ja käytettävyys.
Miten kääriä tekstiä kuvan ympärille WordPressissä?
Gutenberg-editori ja lohkot tekevät verkkosivuston sisällöstä kevyempää, modernia ja vaivattomasti luettavaa. Näytämme lisää tapoja, joilla voit kietoa tekstiä kuvan ympärille myös WordPressin Sivut-, Post- ja Custom Post -tyypeissä. Lohkoja on erilaisia, ja voit käyttää niitä myös yhdistelminä, osien ja ominaisuuksien kokonaisuuksina, jotka antavat lisävaihtoehtoja tekstin käärimiseen.
Voit valita kuvan ympärille käärittävän tekstin lohkon alasivun ja sen sisältötyypin mukaan. Voit valita yhden tyylin esittelysivulle ja toisen blogikirjoitukselle. Mieti myös, millaista sisältöä kuva edustaa. Onko se kuvailukuva vai enemmänkin edustava tai myyvä media?
Kääri teksti kuvan ympärille - estää valinnan
Voit käyttää 4 lohkoa, joilla voit kietoa tekstilohkon kuvan ympärille. Kuvaamme ne kaikki:
- Image block ja Paragraph block lisää alla
- Media & Teksti -lohko lisää alla
- Sarakkeet lohko yksittäisessä virassa
- Klusterin lohko yksittäisessä viestissä (ominaisuus käytettävissä vain Citadela Pro-liitännäinen)
Kääri teksti ja kuva parempaan lukukokemukseen
On useita syitä, miksi tätä lohkoa kannattaa käyttää. Arvostat sitä eniten, jos kirjoitat blogikirjoituksia. Kuvat ovat olennainen osa tarinaa. Sillä ei ole väliä, kirjoitatko matkablogia tai IT-uutisia käsittelevää lehteä. Kun siis lisäät kuvia sisältösi sisälle, mieti kuvien kohdistusta. Lukijat ymmärtävät paremmin, mistä kirjoitat.
Monissa tapauksissa on tarpeen lisätä kuva ja teksti rinnakkain. Mikä on tärkeää?
- Sen on oltava järkevää. Kuvan on oltava oikean tekstin vieressä.
- Sen on oltava kauniisti linjassa.
- Sen on sovittava koko verkkosivuston ulkoasuun.
Kuvan ja kappaleen lohkot
Vaikka Classic editor voisit myös sijoittaa tekstin kuvan viereen, et voisi puhua mukavasta kohdistuksesta. Varsinkin jos kuva oli pieni ja sen viereen laitettiin enemmän tekstiä. Teksti peitti kuvan ja se ei näyttänyt kivalta.
Gutenberg-editori ja sen Image-lohko tuovat mukanaan hienon ominaisuuden - kuvan koon muuttamisen. Vedä pisteitä kuvan ympärille, jolloin sen koko ja tekstin kohdistus muuttuvat automaattisesti.
Media & Teksti lohko - WordPress kohdistaa tekstin kuvan viereen
- Kääri teksti ja kuvat Media & Text -lohkolla
- Kuinka lisätä Media & Teksti -lohko editoriin
- Miten tämä lohko toimii
- Media- ja tekstilohkon asetukset
- Mitä "Pino mobiilissa" keskiarvo
- Bonus: Kuinka perustella tekstiä WordPressissä
Kuinka kohdistaa teksti kuvan vieressä?
Aloita nyt
Aloita nyt riskittömällä kokeilujaksolla. Luottokorttia ei tarvita.
Media & teksti -lohko on fantastinen ominaisuus. Media & Text -lohko ratkaisee tämän ongelman ja varmistaa tekstin täydellisen kohdistuksen kuvaan ilman, että sommittelu ja ulkoasu häiriintyvät. Tästä syystä sinun kannattaa käyttää tätä lohkoa.
Se parantaa verkkosivujen suunnittelua myös mobiililaitteilla. Tämä kääreblokki auttaa WordPress-teemaa kattamaan erilaisia mobiiliasetelmia. Älypuhelimessa verkkosivuston jokaisen osan on oltava selvästi näkyvissä ja luettavissa. Miten Media & Text -lohko näyttää matkapuhelimissa ja taulukko käsittelee "Stack on mobile" -toimintoa, jota tarkastelemme alla.
Lyhyessä ajassa voit käyttää Media & Text -lohkoa uudessa WordPress-teemassamme nimeltä Citadela. Lue lisää Citadela-teemasta erillisessä artikkelissa.
Kuinka lisätä Media & Teksti -lohko lohkoeditoriin?
Media- ja tekstilohkon lisääminen on yhtä helppoa kuin minkä tahansa muun lohkon lisääminen. Se on ydinlohko, joten sinun ei tarvitse ladata tai asentaa mitään.
Käytä "+"-kuvaketta yläpaneelissa tai missä tahansa editorissa ja valitse Media & teksti -lohko.
Viimeinen vaihtoehto on kirjoittaa "/" ja sen jälkeen "media". WordPress näyttää sinulle automaattisesti valitut lohkot, jotka vastaavat etsimääsi.
Miten Media- ja tekstilohko toimii?
Media & Teksti -lohko ryhmittelee periaatteessa 2 eri sisältötyyppiä yhdeksi. Ensimmäinen on media esim. kuva tai video, jonka voit lisätä kautta:
- Lataa
- Mediakirjasto
- Vedä & pudota
Toinen on tilaa tekstisisällölle. Voit kirjoittaa sinne tekstikappaleita, luetteloita tai otsikoita. Voit myös lisätä sinne Nappulan lohko josta puhuimme aiemmin.
Media & teksti -lohko kohdistaa kuvan ja tekstin aina vierekkäin riippumatta siitä, kuinka paljon tekstiä kirjoitat. Miten se toimii? Kuva mukautuu automaattisesti tekstisarakkeen sisällön korkeuden mukaan.
Media- ja tekstilohkon asetukset
Yleiset lohkoasetukset
1. Ylin työkalupalkki
Lohkon yläpuolella oleva työkalurivi tarjoaa useita vaihtoehtoja. Jos aktiivinen teemasi tukee sitä, voit asettaa Media & teksti -lohkon leveäksi tai koko leveydeksi. Voit myös valita, mihin haluat sijoittaa kuvan tai videon klikkaamalla:
- Näytä media vasemmalla
- Näytä media oikealla
Ylhäällä työkalupalkissa on myös kuvake, jolla voit muokata mediaa ja asettaa Alt-tekstin, otsikon, kuvatekstin tai kuvauksen. Lue lisää kuvien muokkaamisesta artikkelistamme Työskentely WordPress Image lohko.
2. Oikea sivupalkki
Oikeanpuoleinen sivupalkki tarjoaa lisäasetuksia Media- ja tekstilohkolle. Voit lisätä tänne vaihtoehtoisen tekstin, asettaa taustavärin tai lisätä ylimääräisen CSS-luokan. Voit myös ottaa käyttöön toiminnon "Stack on mobile".
Tämän toiminnon ansiosta kuva ja teksti näkyvät kauniisti mobiililaitteissa. Jos poistat "Pinoaminen mobiililaitteissa" -toiminnon käytöstä, kuva ja teksti pysyvät vierekkäin, ja ne ovat tuskin luettavissa responsiivisessa versiossa.
Jos otat tämän toiminnon käyttöön, matkapuhelimessa vasemmanpuoleinen sisältö näytetään oikeanpuoleisen sisällön yläpuolella.
Tekstin kohdistus
Osa Media & Teksti -lohkosta on yhdessä kuvan tai videon kanssa myös tekstisisältöä. Se voi olla jokin seuraavista sisältötyypeistä:
1. Kohta
Ylätyökalurivillä voit asettaa tekstin tasauksen, lihavoida tai kursivoida tekstiä tai lisätä URL-linkin.
Oikeanpuoleisessa sivupalkissa voit valita fonttikoon, fontin värin tai kappaleen värin. Mielenkiintoinen ominaisuus on "Drop Cap", joka korostaa tekstin ensimmäistä merkkiä. Se on mukava ominaisuus lohko-virkojen tekemisessä, jotta teksti olisi mielenkiintoisempaa.
2. Otsikko
Otsikko on hyvin samanlainen kuin Paragraph. Voit myös määrittää sen ulkoasun, tehdä siitä lihavoidun tai kursivoidun ja lisätä URL-linkin. Erona on, että voit valita otsikkotyypin - H2, H3, H4.
Muita otsikkokokoja ja linjausasetuksia on saatavana sivupalkissa oikealla puolella.
3. Luettelo
Jos lisäät sisältöösi luettelolohkon, se voi olla bullet points, numeroitu luettelo tai monitasoinen luettelo. Voit myös lihavoida ja kursivoida tekstiä ja lisätä URL-linkin.
4. Nappulan lohko
Tämä lohko, joka lisää painikkeen sisältöön, voidaan mukauttaa verkkosivuston suunnitteluun. Painikkeen väri ja tyyli tai taustaväri voidaan määrittää oikealla puolella olevassa sivupalkissa.
Älä unohda lukea artikkelia Nappulan lohko.
Vaihtaminen lohkotyyppien välillä
Media- ja tekstilohkossa on mahdollista muuntaa yksi sisältölohkotyyppi toiseksi. Voit myös muuttaa Media & teksti -lohkon kuvalohkoksi, jolloin tekstiosa poistetaan.
Tekstisisällössä on mahdollista vaihtaa Paragraph-lohko Heading- tai List-lohkoksi.
Bonus: Kuinka perustella tekstiä WordPressissä
Perustellun tekstin käytössä on hyvät ja huonot puolensa. Tasoitettua tekstiä käytetään yleensä kirjoissa ja sanomalehdissä, mutta sitä ei enää käytetä verkkosivustoilla. Miksi?
Useita vuosia sitten oli Justify toiminto integroitu suoraan WordPress Classic editor. Oikeutettu teksti aiheutti ennen näkyvyysongelmia eri selaimissa tai mobiililaitteissa. Se liittyy myös perustellun tekstin vaikeaan luettavuuteen. Tämä toiminto oli siksi vanhentunut ja poistettu.
Tätä toimintoa ei ole myöskään uudessa lohko- (Gutenberg) editorissa.
Miten siis perustelet tekstin, jos todella haluat?
Ratkaisu on lisätä yksinkertainen CSS-koodi muutamassa vaiheessa:
- Sivupalkin oikealla puolella on asetus Kappaleen lohkon ylimääräinen CSS-luokka -asetukselle.
- Kirjoita sinne luokan nimi "perustella"
- Julkaise sivu tai artikkeli
- Jos teet esikatselun, napsauta yläpalkin pääpalkin Mukauta-painiketta.
- Vasemmalla puolella on uusi sivupalkki, jossa on asetukset.
- Napsauta Lisää CSS
- Lisätään seuraava CCS-koodi:
p.justify {
text-align: justify;
}
Selvä. Tästä lähtien on tekstiä Media & Text Block perusteltu.
Gutenberg-editorin ansiosta WordPressistä on tullut entistä käyttökelpoisempi ilman kolmannen osapuolen sivunrakentajia. Sillä on erinomainen arvo verkkosivustollesi pitkän aikavälin näkökulmasta ja verkkosivustoa luotaessa tai uudistettaessa. Gutenbergin lohkot antavat suuren valikoiman tyyliä kuitenkin saatat löytää käsin WordPress-koodi tekstin käärimiseen kuvien ympärille.
Mitä mieltä olet Media & Text -lohkosta? Oletko jo käyttänyt sitä? Miten pidät työskentelystä sen kanssa? Kerro meille alla olevissa kommenteissa.
Yleisesti ottaen pidän lohkojärjestelmästä, mutta ellei minulta jää jotain huomaamatta, tämä on askel taaksepäin. Tällä hetkellä etsin yksinkertaisesti kellua kuvan vasemmalle tai oikealle ja saada tekstiä wrap kuin todella pitäisi olla niin helppo tehdä, mutta näyttää siltä, WordPress vain ei halua, että tapahtuu. Miksi ei? Media- ja kuvalohkon käyttäminen toimii vain, jos teksti on oikean pituinen. Tällaista sivua ei esimerkiksi haluta tehdä uudelleen niin, että kappaleiden välit ovat oudot, jos teksti ei ole täsmälleen oikean pituinen kuvan kokoon nähden.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Hei,
kiitos paljon palautteestasi. Se kuulostaa erittäin hyvältä ajatukselta, joten haluaisin pyytää sinua antamaan meille minuutin ajastasi vastataksesi neljään yksinkertaiseen kysymykseen: https://aitthemes.typeform.com/to/vc7arn, jotka voivat auttaa tiimiämme tekemään parempia tuotteita, joissa on ainutlaatuisia ominaisuuksia nopeammin.
Kiitos paljon ajastanne ja ymmärryksestänne.
Ystävällisin terveisin!
Zlatko
AIT-tiimi
Kyllä, en saa tekstiä käärittyä. Tämä tekstilohkoyhdistelmä näyttää olevan hyödytön.
Tämä idea on surkea, sillä se on ainoa tapa lisätä kuvia blogiin - en saa tekstiä käärittyä nätisti, eikä se ole samankokoinen, vaikka tekisin mitä. Hyvä idea TÄRKEISSÄ tilanteissa, mutta ei kaikissa. Joskus halutaan vain kuva, jonka ympärille kääritään kappaleet, sen sijaan että sanottaisiin jotain kuvasta.
Miten lisätä kääre ja käyttää sisältöä koko leveydellä yar vakavasti miten kattaa koko sitten ottaa kontti se... rakentaja on hyvin hämmentävää, miten lisätä kontti kääri hyvin huono toimittaja yar
Hei,
kiitos kohteliaisuudesta. Voit vapaasti tutustua blogisivuumme https://www.ait-themes.club/blog/, josta löydät monia hyödyllisiä vinkkejä siitä, miten kirjoittaa houkuttelevia ja hyödyllisiä viestejä.
Ystävällisin terveisin!
Zlatko
AIT-tiimi
Hei Abdur,
Kiitos paljon palautteestasi, tiimimme arvostaa sitä suuresti!
Ystävällisin terveisin.
Zlatko
AIT-tiimi
Minulla on samat vaikeudet kuin useilla muilla ihmisillä tässä viestiketjussa.Aiemmin pystyin helposti käärimään tekstiä kuvan ympärille, kuten "meistä" -sivullamme, jossa meillä on kuvia ja elämäkertoja.Ehkä käytin vanhaa editoria. Mutta nyt yritän päivittää sivustoa uusilla kuvilla ja elämäkerroilla, enkä löytänyt tapaa, jolla tekstin voisi helposti kääriä kuten aiemmissa bio/kuvayhdistelmissämme. Yritin vaihtaa klassiseen editoriin, mutta sivusto varoitti minua, että minulla oli "uusi lohkoeditori" -osioita ja minun oli pysyttävä uudemmassa muokkaustilassa. voitko kertoa minulle, miten saan uudet elämäkertamme ja kuvamme näyttämään samalta kuin aiemmat postauksemme? kiitos.
Hei,
Jos haluat poistaa Gutenbergin käytöstä ja jatkaa klassisella WordPress-editorilla, harkitse WordPressin ydintiimin tekemää lisäosaa, jonka avulla voit tehdä sen "Classic Editor Plugin" -lisäosalla.
Terveisin!
Zlatko
AIT-tiimi
Jos haluat vain yksinkertaisen tekstin kuvan ympärille, voit tehdä sen lisäämällä Classic Text Block -lohkon (joka sijaitsee lohkojen ensimmäisessä osassa, kun napsautat Browse. Saat käyttää klassista editoria yhdessä lohkossa ja kyllä, sen avulla voit lisätä kuvan ja valita sitten käärintävaihtoehdon. Ongelma ratkaistu 🙂
KIITOS London SEO Guy!!! Yksinkertainen ratkaisu, mutta olin unohtanut sen!
Ja sitten... yksinkertaisesti käytä Muunna lohkoiksi -vaihtoehtoa.
Koska tämä toimii, lohkoeditori pystyy siihen, mutta en löydä, miten se asetetaan oikein. Sillä välin tämä kikkailu toimii.
Sama ongelma täällä. Tämä uusi versio on kauhea - ei ole mitään tapaa kääriä tekstiä kunnolla tai edes pienentää kuvaa, ellet halua vain rajata sitä.
Pystyn kietomaan tekstini kuvan ympärille WordPressin lohkoeditorissa. Se näyttää juuri siltä, miltä haluan sen näyttävän "esikatselussa". Kun kuitenkin julkaisen blogini ja WordPress lähettää sen sähköpostitse seuraajilleni, he saavat sen niin, että kuva on ylhäällä ja teksti kuvan alla. Tämä tapahtuu myös pöytätietokoneissa, ei vain pienissä kännyköissä. Haluan sen käärittynä, en pinottuna.
Hei,
Kiitos, että kirjoitit. Lohko ei kääri tekstiä kuvan ympärille WordPressissä, kuten odotat. Tutustu seuraaviin ohjeisiin, sillä niistä voi olla apua: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/.
Terveisin!
Zlatko
AIT-tiimi
Teen kaiken tämän, ja blogini toimii täydellisesti Preview-ohjelmassa. Kun julkaisen sen, se näyttää hyvältä blogisivullani. Mutta kun WordPress lähettää sen sähköpostitse seuraajilleni ja he avaavat sähköpostin, he eivät näe sitä käärittynä. Kuvat ovat tekstin päällä. Se on hyvin epäammattimaisen näköistä. Minulla ei koskaan ollut tätä ongelmaa vanhan Classic Editorin kanssa. Nyt kun käytän lohkoeditoria, se ei anna minun palata takaisin klassiseen editoriin, vaikka Classic-vaihtoehto on klikattavissa.
Hei,
Kiitos, että kirjoitit.
Pyydämme sinua ystävällisesti tutustumaan tietopohjaamme ja/tai dokumentaatioomme, jossa on video-oppaita:
https://www.ait-themes.club/ait-themes-documentation/
Voit myös vapaasti lähettää teknisiä kysymyksiä suoraan omaan tukipyyntöjärjestelmäämme. Kirjaudu tilillesi osoitteessa https://system.ait-themes.club/support/add-question.
Asiakastukea tarjotaan työpäivinä klo 8-17 Keski-Euroopan aikaa.
Lisäksi on plugin, jonka avulla voit käyttää edellistä editoria. Sinun pitäisi asentaa ja aktivoida "Classic editor".
Vilpittömästi!
Zlatko
AIT-tiimi
Olen eri mieltä siitä, että tämä on parempi kuin klassinen editointi, koska vaihtoehdot ovat rajallisemmat. Minusta tämä lohko on visuaalisesti häiritsevä, koska siinä käytetään eri fontteja ja se on leveämpi kuin tekstilohko. Se, että tekstiä voi kietoa sujuvasti kuvan ympärille säilyttäen samat fontti-, koko- ja marginaaliasetukset, tuo lehden sivulle ammattimaisuutta. Tämä on vain yksi esimerkki siitä, miksi olen syvästi pettynyt tähän wordpress-versioon.
Hei Terence
kiitos mielipiteestäsi. Oletko kokeillut Citadela:n kokeiluversiota? Meillä on joitakin ainutlaatuisia lohkoja, jotka saattavat auttaa sinua tekstin ja kuvien säätämisessä. Joka tapauksessa voit testata täysversiota - kaikki ominaisuudet, ilmaiseksi.
Hyvää päivänjatkoa.