Innholdsfortegnelse
Trenger du å plassere tekst rundt bildet på en elegant måte? Lær hvordan du enkelt kan gjøre det uten kode- og designerfaring. Gutenberg-editoren gir deg flere muligheter til å plassere tekst rundt bilder i WordPress.
Du kan få et flott nettsted og en enkel rutine for redigering av innhold samtidig. Hvis du velger Gutenberg-editoren til WordPress-nettstedet ditt, får du det beste verktøyet på lang sikt. Du får flere muligheter til å pakke inn tekst rundt bilder på forskjellige måter. Gutenberg gir mange fordeler, som for eksempel en tydeligere kildekode for nettstedet, hastighet, sikkerhet og brukervennlighet.
Hvordan omslutte tekst rundt et bilde i WordPress?
Gutenberg-editoren og -blokkene gjør innholdet på nettstedet lettere, moderne og lettlest. Vi viser deg flere måter å legge tekst rundt bildet på i WordPress-sider, innlegg og tilpassede innleggstyper. Det finnes ulike blokker, og du kan også bruke dem i kombinasjon, som et sett med deler og funksjoner som gir deg flere muligheter for ombrytning.
Du kan velge blokken for den innrammede teksten rundt bildet i henhold til undersiden og innholdstypen. Du kan velge én stil for presentasjonssiden og en annen for et blogginnlegg. Tenk også på hva slags innhold bildet representerer. Er det et beskrivelsesbilde eller et mer representativt eller selgende bilde?
Ombryter tekst rundt bilde - blokkerer valg
Det finnes fire blokker du kan bruke til å omslutte en tekstblokk rundt et bilde. Vi beskriver dem alle:
- Mer informasjon om bildeblokk og avsnittblokk finner du nedenfor
- Mer informasjon om medie- og tekstblokken finner du nedenfor
- Kolonneblokk i individuelle innlegg
- Klyngeblokk i individuelle innlegg (funksjonen er kun tilgjengelig med Citadela Pro-plugin)
Ombryter tekst og bilde for en bedre leseopplevelse
Det er flere grunner til at du bør bruke denne blokken. Du vil sette mest pris på den hvis du skriver blogginnlegg. Bilder er en integrert del av historien. Det spiller ingen rolle om du skriver en reiseblogg eller et magasin om IT-nyheter. Så når du legger til bilder i innholdet ditt, bør du tenke på bildejustering. Da vil leserne bedre kunne forstå hva du skriver om.
I mange tilfeller er det nødvendig å sette inn bilde og tekst side om side. Hva er viktig?
- Det må gi mening. Bildet må stå ved siden av riktig tekst.
- Den må være pent justert.
- Den må passe til hele nettstedets layout.
Bilde- og avsnittsblokker
Mens du er i Klassisk redaktør du kan også plassere tekst ved siden av bildet, kan du ikke snakke om fin justering. Spesielt hvis bildet var lite og du la mer tekst ved siden av det. Teksten omsluttet bildet, og det så ikke pent ut.
Gutenberg-redaktør og bildeblokken har en fantastisk funksjon - endring av bildestørrelse. Dra prikker rundt bildet for automatisk å endre størrelse og tekstjustering.
Media- og tekstblokk - WordPress justerer tekst ved siden av bildet
- Bryt inn tekst og bilder med Media & Text-blokken
- Slik legger du til medie- og tekstblokker i redigeringsprogrammet
- Slik fungerer denne blokken
- Innstillinger for medie- og tekstblokker
- Hva betyr "Stack på mobil" gjennomsnittlig
- Bonus: Slik rettferdiggjør du tekst i WordPress
Hvordan justere tekst ved siden av et bilde?
Kom i gang nå
Kom i gang nå med en risikofri prøveperiode. Du trenger ikke å bruke kredittkort.
Media & Text-blokken er en fantastisk funksjon. Media & Text-blokken løser dette problemet og sørger for perfekt tilpasning av teksten til bildet uten å forstyrre komposisjon og layout. Det er grunnen til at du bør bruke denne blokken.
Den forbedrer også nettstedets design på mobile enheter. Denne innpakningsblokken hjelper WordPress-temaet med å dekke ulike mobiloppsett. På smarttelefoner må alle deler av nettstedet være godt synlige og lesbare. Hvordan Media & Text-blokken vil se ut på mobiltelefoner, og tabellen håndterer funksjonen "Stack on mobile", som vi skal se nærmere på nedenfor.
Om kort tid kan du bruke Media & Text-blokken i vårt nye WordPress-tema Citadela. Les mer om Citadela-temaet i en egen artikkel.
Hvordan legge til medie- og tekstblokker i blokkeredigeringsverktøyet?
Det er like enkelt å legge til Media & Text-blokken som å legge til en hvilken som helst annen blokk. Det er en kjerneblokk som betyr at du ikke trenger å laste ned eller installere noe.
Bruk "+"-ikonet i det øverste panelet eller hvor som helst i redigeringsprogrammet og velg Media & Text-blokken.
Det siste alternativet er å skrive "/" og deretter "media". WordPress vil automatisk vise deg utvalgte blokker som samsvarer med det du søkte etter.
Hvordan fungerer Media & Text-blokken?
Media & Text-blokken grupperer i utgangspunktet 2 forskjellige typer innhold i én. Den første er et medium, f.eks. et bilde eller en video, som du kan legge til via:
- Last opp
- Mediebibliotek
- Dra og slipp
Den andre er plass til tekstinnhold. Her kan du skrive tekstavsnitt, punktlister eller titler. Du kan også legge til Knappeblokk som vi snakket om tidligere.
Media & Text-blokken justerer alltid bilde og tekst side om side, uansett hvor mye tekst du skriver. Hvordan fungerer det? Bildet justerer seg automatisk basert på høyden på innholdet i tekstkolonnen.
Innstillinger for medie- og tekstblokker
Generelle blokkinnstillinger
1. Øverste verktøylinje
Verktøylinjen over blokken har flere alternativer. Hvis det aktive temaet ditt støtter det, kan du angi at Media & Text-blokken skal være bred eller i full bredde. Du kan også velge hvor du vil plassere bildet eller videoen ved å klikke på :
- Vis media til venstre
- Vis medier til høyre
Øverst på verktøylinjen finner du også et ikon for redigering av medium der du kan angi Alt-tekst, tittel, bildetekst eller beskrivelse. Les mer om redigering av bilder i artikkelen vår Arbeide med WordPress' bildeblokk.
2. Høyre sidefelt
Høyre sidefelt har flere innstillinger for Media & Text-blokken. Her kan du legge til alternativ tekst, angi bakgrunnsfarge eller legge til en ekstra CSS-klasse. Du kan også aktivere funksjonen "Stable på mobil".
Takket være denne funksjonen vises bilder og tekst på en fin måte på mobile enheter. Hvis du deaktiverer "Stack on mobile", vil bilde og tekst ligge side om side og være vanskelig å lese i den responsive versjonen.
Hvis du aktiverer denne funksjonen, vil innholdet på venstre side på mobiltelefonen vises over innholdet på høyre side.
Tekstjustering
En del av Media & Text-blokken er sammen med bilde eller video også tekstinnhold. Det kan være en av følgende innholdstyper:
1. Paragraf
I den øverste verktøylinjen kan du stille inn tekstjustering, gjøre teksten fet, kursiv eller legge til URL-lenke.
I sidepanelet på høyre side kan du velge skriftstørrelse, skriftfarge eller avsnittsfarge. En interessant funksjon er "Drop Cap" som fremhever det første tegnet i teksten. Det er en fin funksjon i blokkinnlegg for å gjøre teksten mer interessant.
2. Overskrift
Overskrift ligner veldig på Avsnitt. Du kan også konfigurere utseendet, gjøre den fet eller kursiv og sette inn URL-lenke. Forskjellen er at du kan velge overskriftstype - H2, H3, H4.
Andre overskriftsstørrelser og justeringsinnstillinger er tilgjengelige i sidepanelet på høyre side.
3. Liste
Hvis du legger til en listeblokk i innholdet, kan det være punktlister, nummererte lister eller lister på flere nivåer. Du kan også gjøre teksten fet, kursiv og legge til URL-lenker.
4. Knappeblokk
Denne blokken som legger til en knapp i innholdet, kan tilpasses nettstedets design. Knappens farge og stil eller bakgrunnsfarge kan konfigureres i sidepanelet på høyre side.
Ikke glem å lese artikkelen om Knappeblokk.
Bytte mellom blokktyper
I Media & Text-blokken er det mulig å konvertere en type innholdsblokk til en annen. Du kan også endre medie- og tekstblokk til bildeblokk, og tekstdelen slettes.
I tekstinnhold er det mulig å endre paragrafblokk til overskrift eller listeblokk.
Bonus: Slik rettferdiggjør du tekst i WordPress
Det er både positive og negative sider ved å bruke justert tekst. Justert tekst finnes vanligvis i bøker og aviser, men brukes ikke lenger på nettsteder. Hvorfor er det slik?
For flere år siden ble Justify-funksjonen integrert i WordPress Classic-editoren. Justifisert tekst pleide å forårsake synlighetsproblemer i ulike nettlesere eller mobile enheter. Det har også sammenheng med vanskelig lesbarhet av justifisert tekst. Denne funksjonen ble derfor utdatert og fjernet.
Denne funksjonaliteten finnes heller ikke i den nye blokkredigereren (Gutenberg).
Så hvordan rettferdiggjør du tekst hvis du virkelig vil?
Løsningen er å legge til enkel CSS-kode i noen få trinn:
- Det finnes en innstilling for Ytterligere CSS-klasse for avsnittsblokken i sidepanelet på høyre side.
- Skriv inn klassenavnet "rettferdiggjøre"
- Publiser side eller artikkel
- Hvis du forhåndsviser den, klikker du på Tilpass i den øverste hovedlinjen.
- På venstre side er det et nytt sidefelt med innstillinger.
- Klikk på Ytterligere CSS
- Sett inn følgende CCS-kode:
p.justify {
text-align: justify;
}
Ferdig. Fra nå av er tekst i medie- og tekstblokken berettiget.
Takket være Gutenberg-editoren har WordPress blitt mer anvendelig uten tredjeparts sidebyggere. Den har stor verdi for nettstedet ditt på lang sikt og når du oppretter eller redesigner et nettsted. Gutenberg-blokkene gir et stort utvalg av stilarter, uansett hva du måtte ønske. WordPress-kode for innpakning av tekst rundt bilder.
Hva synes du om Media & Text-blokken? Har du allerede brukt den? Hvordan liker du å jobbe med den? Gi oss beskjed i kommentarfeltet nedenfor.
Generelt liker jeg blokksystemet, men med mindre jeg har gått glipp av noe, er dette et skritt bakover. Jeg er for øyeblikket ute etter å bare flyte et bilde til venstre eller høyre og få tekst til å bryte som egentlig burde være så enkelt å gjøre, men det virker som WordPress bare ikke vil at det skal skje. Hvorfor ikke? Bruk av media- og bildeblokken fungerer bare hvis teksten har riktig lengde. En side som denne, for eksempel, ønsker ikke å bli gjort om med en merkelig avstand mellom avsnittene hvis teksten ikke har nøyaktig riktig lengde i forhold til bildestørrelsen.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Hei på dere,
tusen takk for tilbakemeldingene dine. Det høres ut som en veldig god idé, derfor vil jeg be deg om å gi oss et minutt av din tid til å svare på fire enkle spørsmål: https://aitthemes.typeform.com/to/vc7arn som kan hjelpe teamet vårt med å lage bedre produkter med unike funksjoner raskere.
Tusen takk for din tid og forståelse.
Med vennlig hilsen!
Zlatko
AIT-team
Ja, jeg får ikke teksten til å brytes om. Denne kombinasjonen av tekstblokker ser ut til å være ubrukelig.
Denne ideen er elendig som eneste måte å sette inn bilder i en blogg på - jeg får ikke teksten til å bryte pent inn, og den er ikke like stor uansett hva jeg gjør. God idé i VISSE situasjoner, men ikke i alle. Noen ganger vil du bare ha et bilde med avsnittene rundt, i stedet for å si noe om bildet.
Hvordan legge til wrapper og bruke innhold i full bredde yar seriøst hvordan å dekke full med deretter ta container i den... byggherre er veldig forvirrende hvordan legge til container wrap veldig dårlig redaktør yar
Hei på dere,
Takk for komplimentene. Ta gjerne en titt på bloggsiden vår https://www.ait-themes.club/blog/ der du finner mange nyttige tips om hvordan du skriver attraktive og nyttige innlegg.
Med vennlig hilsen!
Zlatko
AIT-team
Hei, Abdur,
Tusen takk for tilbakemeldingene dine, det setter teamet vårt stor pris på!
Med vennlig hilsen.
Zlatko
AIT-team
Jeg har samme problem som flere andre i denne tråden. tidligere kunne jeg enkelt legge inn tekst rundt et bilde, som på "om oss"-siden vår, der vi har bilder og biografier. kanskje jeg brukte det gamle redigeringsprogrammet. Men nå prøver jeg å oppdatere siden vår med nye bilder og biografier, og jeg fant ingen måte å enkelt pakke inn tekst på, slik som på de tidligere kombinasjonene av biografier og bilder. Jeg prøvde å bytte til klassisk editor, men nettstedet advarte meg om at jeg hadde "new block editor"-seksjoner, og jeg måtte holde meg til den nyere redigeringsmodusen. kan du fortelle meg hvordan jeg kan få våre nye biografier og bilder til å se ut som våre tidligere innlegg? takk.
Hei på deg,
Hvis du ønsker å deaktivere Gutenberg og fortsette med den klassiske WordPress-editoren, kan du vurdere en plugin fra WordPress-kjerneteamet som lar deg gjøre det med "Classic Editor Plugin".
Med vennlig hilsen!
Zlatko
AIT-team
Hvis du bare vil ha en enkel tekstinnpakning rundt bildet, kan du gjøre dette ved å sette inn den klassiske tekstblokken (som du finner i den første delen av blokkene når du klikker på Bla gjennom. Du får bruke det klassiske redigeringsprogrammet i en enkelt blokk, og ja, det lar deg sette inn et bilde og deretter velge innpakningsalternativet. Problemet er løst 🙂.
TAKK London SEO Guy !!! En enkel løsning, men jeg hadde oversett den!
Og så er det bare å bruke alternativet Konverter til blokker.
Siden dette fungerer, har Block Editor muligheten, men jeg finner ikke ut hvordan den skal konfigureres riktig. I mellomtiden fungerer dette trikset.
Samme problem her. Denne nye versjonen er forferdelig - ingen mulighet til å pakke inn tekst eller gjøre bildet mindre, med mindre du bare vil beskjære.
Jeg kan legge teksten min rundt et bilde i WordPress Block Editor. Det ser ut akkurat slik jeg vil at det skal se ut i "Forhåndsvisning". Men når jeg publiserer bloggen min og WordPress sender den via e-post til følgerne mine, mottar de den med bildet øverst og teksten under bildet. Dette skjer også på stasjonære datamaskiner, ikke bare på små mobiltelefoner. Jeg vil ha det innpakket, ikke stablet.
Hei på dere,
Takk for at du skrev inn. Blokken vil ikke omslutte teksten rundt bildet i WordPress slik du forventer. Ta en titt på følgende instruksjoner, de kan være nyttige for deg: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Med vennlig hilsen!
Zlatko
AIT-team
Jeg gjør alt dette, og bloggen min pakkes perfekt inn i Preview. Når jeg publiserer den, ser den flott ut på bloggsiden min. Men når WordPress sender den via e-post til følgerne mine, og de åpner e-posten, ser de den ikke ombrettet. Bildene ligger oppå teksten. Det ser veldig uprofesjonelt ut. Jeg hadde aldri dette problemet med den gamle Classic Editor. Nå som jeg bruker Block Editor, lar den meg ikke gå tilbake til Classic Editor, selv om det finnes et Classic-alternativ å klikke på.
Hei på dere,
Takk for at du skrev.
Vi ber deg sjekke kunnskapsbasen og/eller dokumentasjonen vår med videoveiledninger:
https://www.ait-themes.club/ait-themes-documentation/
Du kan også legge inn tekniske spørsmål direkte i vårt supportsystem. Logg inn på kontoen din på https://system.ait-themes.club/support/add-question.
Kundestøtten er tilgjengelig på hverdager fra kl. 8.00 til 17.00 mellomeuropeisk tid.
I tillegg finnes det en plugin som lar deg bruke den forrige editoren. Du bør installere og aktivere "Classic editor".
Med vennlig hilsen!
Zlatko
AIT-team
Jeg er uenig i at dette er bedre enn klassisk redigering, fordi alternativene er mer begrensede. Jeg synes denne blokken er visuelt forstyrrende fordi den bruker andre skrifttyper og er bredere enn en tekstblokk. Det å kunne legge tekst jevnt rundt et bilde og samtidig beholde samme skrifttype, størrelse og marginnstillinger gir en mer profesjonell følelse av å være på en magasinside. Dette er bare ett eksempel på hvorfor jeg er dypt skuffet over denne versjonen av wordpress.
Hei Terence
takk for din mening. Har du prøvd prøveversjonen av Citadela? Vi har noen unike blokker som kan hjelpe deg med å justere tekst og bilder. Du kan uansett teste fullversjonen - med alle funksjoner - helt gratis.
Ha en fin dag.