4 sätt att linda in text runt en bild i WordPress

4 sätt att linda in text runt en bild i WordPress

Behöver du placera text runt bilden på ett elegant sätt? Lär dig hur du gör det enkelt utan kodning och designupplevelse. Gutenberg Editor ger fler alternativ för att linda in text runt text i WordPress.

Du kan uppnå en snygg webbplats och en enkel redigeringsrutin för innehåll samtidigt. Genom att välja Gutenberg-redigeraren för din WordPress-webbplats får du det bästa verktyget ur ett långsiktigt perspektiv. Du kommer att ha fler alternativ för att linda in text runt bilder på olika sätt. Gutenberg ger många fördelar som tydligare källkod för webbplatsen, hastighet, säkerhet och användbarhet.

Ladda ner Citadela WordPress Tema & Plugins

Kom igång nu med en riskfri provperiod. Inget kreditkort krävs.

Hur skriver jag in text runt bilden i WordPress?

Gutenberg-redigeraren och blocken gör webbplatsinnehållet lättare, modernt och lättläst. Vi visar dig fler sätt att linda in text runt bilden i WordPress Sidor, inlägg och anpassade inläggstyper också. Det finns olika block och du kan även använda dem i kombination, som en uppsättning delar och funktioner som ger dig ytterligare alternativ för ombrytningen.

Du kan välja block för den omslutande texten runt bilden beroende på undersidan och dess innehållstyp. Du kan välja en stil för presentationssidan och en annan för ett blogginlägg. Tänk också på vilken typ av innehåll som representerar bilden. Är det en beskrivningsbild eller mer representativa eller säljande medier?

Slå in text runt bild - blockerar urval

Det finns 4 block som du kan använda för att slå in ett textblock runt en bild. Vi beskriver dem alla:

Ombrytning av text och bild för bättre läsupplevelse

Det finns flera skäl till varför du bör använda detta block. Du kommer att uppskatta det mest om du skriver blogginlägg. Bilder är en integrerad del av berättelsen. Det spelar ingen roll om du skriver en reseblogg eller en tidning om IT-nyheter. Så när du lägger till foton i ditt innehåll, tänk på bildjustering. Läsarna kommer att kunna förstå bättre vad du skriver om.

I många fall är det nödvändigt att infoga bild och text sida vid sida. Vad är det som är viktigt?

  • Det måste vara logiskt. Bilden måste ligga bredvid rätt text.
  • Den måste vara snyggt inriktad.
  • Den måste passa in i hela webbplatsens layout.

Bild- och paragrafblock

Text runt en bild i den klassiska WordPress-redigeraren
Exempel på en inte särskilt snygg text som omslöt bilden

Under tiden i Klassisk redaktör du kan också placera text bredvid bilden, du kan inte prata om snygg justering. Speciellt om bilden var liten och man lade mer text bredvid den. Texten täckte över bilden och det såg inte snyggt ut.

Gutenberg-redaktör och dess Image-block har en fantastisk funktion - storleksändring av bilder. Dra prickar runt bilden för att automatiskt ändra dess storlek och textjustering.

Skriv in text runt en bild med Gutenbergs bild- och styckeblock
Ändra storlek på bilden och välj justering

Media & Text block - WordPress justerar texten bredvid bilden

Hur justerar jag text bredvid bild?

Kom igång nu

Kom igång nu med en riskfri provperiod. Inget kreditkort krävs.

Media & Text-blocket är en fantastisk funktion. Media & Text-blocket löser detta problem och säkerställer perfekt anpassning av texten till bilden utan att störa kompositionen och layouten. Det är anledningen till att du ska använda det här blocket.

Det förbättrar webbplatsens design även på mobila enheter. Detta omslutande block hjälper WordPress-temat att täcka olika mobila layouter. På en smartphone måste alla delar av webbplatsen vara tydligt synliga och läsbara. Hur kommer Media & Text-blocket att se ut på mobiltelefoner och tabellen hanterar funktionen "Stack on mobile" som vi kommer att titta på nedan.

Inom kort kommer du att kunna använda Media & Text-blocket i vårt nya WordPress-tema som heter Citadela. Läs mer om Citadela-temat i en separat artikel.

Hur lägger jag till Media & Text-block i blockredigeraren?

Att lägga till Media & Text-blocket är lika enkelt som att lägga till vilket annat block som helst. Det är ett kärnblock som innebär att du inte behöver ladda ner eller installera något.

Använd "+"-ikonen i den övre panelen eller var som helst i redigeraren och välj Media & Text-blocket.

Lägg till Media- och Textblock genom att klicka på "+"
Lägga till Media & Text-block genom att klicka på "+"

Det sista alternativet är att skriva "/" och sedan "media". WordPress kommer automatiskt att visa dig utvalda block som matchar det du sökte efter.

Lägg till media- och textblock med hjälp av snedstreck
Lägga till media- och textblock med hjälp av snedstreck "/"

Hur fungerar Media & Text block?

Media & Text-blocket grupperar i princip 2 olika typer av innehåll i ett. Den första är ett medium, t.ex. en bild eller video som du kan lägga till via:

  • Ladda upp
  • Mediebibliotek
  • Dra och släpp
Alternativ för uppladdning av media och textblock
Se hur enkelt du kan ladda upp en bild med hjälp av dra och släpp

Den andra är utrymme för textinnehåll. Där kan du skriva textstycken, punktlistor eller rubriker. Du kan också lägga till där Knappblock som vi pratade om tidigare.

Textområde i Media- och textblock
I textområdet kan du lägga till olika typer av innehåll

Media & Text-blocket anpassar alltid bild och text sida vid sida, oavsett hur mycket text du skriver. Hur fungerar det här? Bilden justerar sig själv automatiskt baserat på innehållshöjden i textkolumnen.

Bildjustering i Media- och textblock
Exempel på justering av bild och text

Inställningar för media och textblock

Allmänna blockinställningar

1. Översta verktygsfältet

Verktygsfältet ovanför blocket erbjuder flera alternativ. Om ditt aktiva tema stöder det kan du ställa in Media & Text-blocket som bred eller full bredd. Du kan också välja var du vill placera bild eller video genom att klicka på:

  • Visa media till vänster
  • Visa media till höger
Ändring av bild- och textinriktning
Genom att klicka på ikonerna i verktygsfältet kan du ändra bild- och textjustering och position för dem

I det övre verktygsfältet finns också en ikon för att redigera medium där du kan ange Alt Text, Title, Caption eller Description. Läs mer om hur du redigerar bilder i vår artikel Arbeta med WordPress bildblock.

2. Höger sidofält

Höger sidofält erbjuder ytterligare inställningar för Media & Text-block. Det är möjligt att lägga till alternativ text här, ställa in bakgrundsfärg eller lägga till ytterligare CSS-klass. Du kan också aktivera funktionen "Stack on mobile".

Inställningar för bakgrundsfärg
Smidig ändring av bakgrundsfärg

Vad är Stack på mobilen?

Tack vare den här funktionen visas bild och text snyggt på mobila enheter. Om du avaktiverar "Stack on mobile" kommer bild och text att ligga sida vid sida och det blir svårt att läsa i den responsiva versionen.

Om du aktiverar den här funktionen kommer innehåll på vänster sida att visas ovanför innehåll på höger sida i mobiltelefonen.

Stack på mobil funktion för WordPress linda in text runt bild
Förhandsgranskning av webbplatsen på mobil enhet med aktiverad funktion "Stack on mobile"

Justering av text

En del av Media & Text-blocket är tillsammans med bild eller video också textinnehåll. Det kan vara en av följande innehållstyper:

1. Paragraf

I det övre verktygsfältet kan du ställa in textjustering, göra texten fet, kursiv eller lägga till URL-länk.

Formatering av stycke i Media- och textblock
Formateringsalternativ för text

I sidofältet till höger kan du välja teckenstorlek, teckenfärg eller styckefärg. En intressant funktion är "Drop Cap" som markerar det första tecknet i texten. Det är en trevlig funktion i blockinlägg för att göra texten mer intressant.

"Drop Cap"-funktion
Markera text med "Drop Cap"-funktion

2. Rubrik

Rubrik är mycket lik stycke. Du kan också konfigurera dess utseende, göra fetstil eller kursiv och infoga URL-länk. Skillnaden är att du kan välja rubriktyp - H2, H3, H4.

Alternativ för rubriker i Media- och Textblock
Alternativ för rubrik

Andra rubrikstorlekar och justeringsinställningar finns i sidofältet till höger.

3. Lista

Om du lägger till List-block i ditt innehåll kan det vara punktlistor, numrerade listor eller listor med flera nivåer. Du kan också göra texten fet, kursiv och lägga till URL-länk.

Lista alternativ i Media- och textblock
Lista alternativ för ditt textområde

4. Knappblock

Det här blocket som lägger till en knapp i innehållet kan anpassas till webbplatsens design. Knappens färg och stil eller bakgrundsfärg kan konfigureras i sidofältet på höger sida.

Knappalternativ i Media- och Textblock
Alternativ för knappstil

Glöm inte att läsa artikeln om Knappblock. 

Växla mellan blocktyper

I Media & Text-blocket är det möjligt att konvertera en innehållsblockstyp till en annan. Du kan också ändra Media & Text-block till Image-block och textdelen kommer då att tas bort.

Växla mellan blocktyper
Konvertering av Media & Text-block till ett annat block

I textinnehåll är det möjligt att ändra Paragraph-block till Heading- eller List-block.

Konvertering av Paragraph-block
Konvertering av Paragraph-block till ett annat

Bonus: Så här rättfärdigar du text i WordPress

Att använda motiverad text har sina positiva och negativa sidor. Motiverad text finns vanligtvis i böcker eller tidningar men används inte längre på webbplatser. Varför är det så?

För flera år sedan var Justify-funktionen integrerad direkt i WordPress Classic Editor. Justifierad text brukade orsaka problem med synligheten i olika webbläsare eller mobila enheter. Det är också relaterat till svår läsbarhet av motiverad text. Denna funktion har därför utgått och tagits bort.

Denna speciella funktionalitet finns inte heller i den nya blockredigeraren (Gutenberg).

Så hur motiverar du text om du verkligen vill?

Lösningen är att lägga till enkel CSS-kod i några steg:

  1. Det finns en inställning för ytterligare CSS-klass för styckeblock i sidofältet på höger sida
  2. Skriv där klassens namn "rättfärdiga"
  3. Publicera sida eller artikel
  4. Om du förhandsgranskar den klickar du på Anpassa i den övre huvudraden
  5. På vänster sida finns ett nytt sidofält med inställningar
  6. Klicka på Ytterligare CSS
  7. Infoga följande CCS-kod:
p.justify {
    text-align: justify;
}
Rättfärdiga text med anpassad CSS
Sättet att motivera text i block med hjälp av anpassad kod

Nu är det klart. Från och med nu är texten i ditt Media & Text Block justifierad.

WordPress har blivit mer användbart utan sidbyggare från tredje part tack vare Gutenberg-editorn. Den har ett utmärkt värde för din webbplats ur långsiktig synvinkel och när du skapar eller omformar en webbplats. Gutenberg-blocken ger ett stort utbud av stilar, oavsett hur du vill ha det WordPress-kod för att lägga in text runt bilder.

Ladda ner Citadela WordPress Tema & Plugins

Kom igång nu med en riskfri provperiod. Inget kreditkort krävs.

Vad är din åsikt om Media & Text block? Har du redan använt det? Hur tycker du om att arbeta med det? Låt oss veta i kommentarerna nedan.

19 svar på ”4 Ways to Wrap Text Around Image in WordPress

  1. Generellt gillar jag blocksystemet men om jag inte missar något är detta ett steg bakåt. Jag letar för närvarande efter att helt enkelt flyta en bild åt vänster eller höger och få text att omsluta som verkligen borde vara så lätt att göra men det verkar som WordPress bara inte vill att det ska hända. Varför vill de inte det? Att använda media- och bildblocket fungerar bara om texten är av rätt längd. En sida som den här vill till exempel inte göras om med ett udda avstånd mellan styckena om texten inte är exakt rätt längd för bildens storlek.

    http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/

    1. Hallå där,

      Tack så mycket för din feedback. Det låter som en mycket bra idé, därför skulle jag vilja be dig att ge oss en minut av din tid för att svara på 4 enkla frågor: https://aitthemes.typeform.com/to/vc7arn som kan hjälpa vårt team att göra bättre produkter med unika funktioner snabbare.

      Tack så mycket för din tid och förståelse.

      Med vänlig hälsning!
      Zlatko
      AIT-team

  2. Den här idén suger som det enda sättet att infoga bilder i en blogg - jag kan inte få texten att omsluta snyggt och den är inte samma storlek oavsett vad jag gör. Bra idé för VISSA situationer, men inte för allt. Ibland vill du bara ha en bild med styckena som sveper runt den, snarare än att säga något om bilden.

  3. Hur man lägger till omslag och använder innehåll i full bredd yar allvarligt hur man täcker full med sedan tar behållaren i den ... byggare är mycket förvirrande hur man lägger till behållaromslag mycket dålig redaktör yar

  4. Hallå där,

    Tack för dina komplimanger. Kika gärna in på vår bloggsida https://www.ait-themes.club/blog/ där du hittar många användbara tips hur du skriver ett attraktivt och användbart inlägg.

    Med vänlig hälsning!
    Zlatko
    AIT-team

  5. Hej Abdur,

    Tack så mycket för din feedback, den är mycket uppskattad av vårt team!

    Bästa hälsningar.
    Zlatko
    AIT-team

  6. Jag har samma svårigheter som flera andra människor på den här tråden. tidigare kunde jag enkelt linda text runt en bild som på vår "om oss" -sida där vi har bilder och biografier. kanske använde jag den gamla redaktören. Jag minns inte. men jag försöker nu uppdatera vår webbplats med nya bilder och bios och kunde inte hitta ett sätt att enkelt linda text som på våra tidigare bio / pic-kombinationer. Jag försökte byta till klassisk redaktör, men webbplatsen varnade mig för att jag hade "nya blockredigerare" -avsnitt och jag var tvungen att stanna kvar med det nyare redigeringsläget. kan du berätta för mig hur jag får våra nya biografier och bilder att se ut som våra tidigare inlägg? tack.

    1. Hej på dig,

      Om du vill inaktivera Gutenberg och fortsätta med den klassiska WordPress-redigeraren kan du överväga ett plugin från WordPress-kärnteamet som gör det möjligt för dig att göra det med "Classic Editor Plugin".

      Bästa hälsningar!
      Zlatko
      AIT-team

  7. För dem som bara vill ha en enkel text som omsluter bilden kan du göra detta genom att infoga Classic Text Block (baserat i den första delen av Blocks när du klickar på Browse. Du får använda den klassiska redigeraren i ett enda block och ja, det gör att du kan infoga en bild och sedan välja ombrytningsalternativ. Problem löst 🙂

    1. Och sedan ... använder du bara alternativet Konvertera till block.
      Eftersom det här fungerar har Block Editor möjligheten men kan inte hitta hur man ställer in det ordentligt. Under tiden fungerar denna fudge.

  8. Samma problem här. Den här nya versionen är hemsk - inget sätt att ordentligt linda text eller ens göra fotot mindre, såvida du inte bara vill beskära.

  9. Jag kan linda in min text runt en bild i WordPress blockredigerare. Det ser ut precis som jag vill att det ska se ut i "Förhandsgranskning". Men när jag publicerar min blogg och WordPress e-postar den till mina följare, får de den med bilden överst och texten under bilden. Detta händer även på stationära datorer, inte bara på små mobiltelefoner. Jag vill ha det inslaget, inte staplat.

    1. Hallå där,

      Tack för att du skrev in. Blocket kommer inte att linda in texten runt bilden i WordPress som du förväntar dig. Vänligen ta en titt på följande instruktioner eftersom du kanske tycker att de är till hjälp: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/

      Bästa hälsningar!
      Zlatko
      AIT-team

      1. Jag gör allt det, och min blogg bryts perfekt i Preview. När jag publicerar den ser den bra ut på min bloggsida. Men när WordPress mejlar den till mina följare, och de öppnar mejlet, ser de inte att den är omslagen. Bilderna ligger ovanpå texten. Det ser väldigt oprofessionellt ut. Jag hade aldrig det problemet med den gamla klassiska redigeraren. Nu när jag använder Block Editor låter den mig inte gå tillbaka till Classic Editor även om det finns ett Classic-alternativ att klicka på.

        1. Hallå där,

          Tack för att du skrev in.
          Vi ber dig vänligen att kontrollera vår kunskapsbas och/eller dokumentation med videohandledning:
          https://www.ait-themes.club/ait-themes-documentation/
          Du kan också skicka tekniska frågor direkt till vårt dedikerade supportbiljettsystem. Vänligen logga in på ditt konto på https://system.ait-themes.club/support/add-question.
          Kundsupport tillhandahålls under arbetsdagar från kl. 8.00 till 17.00 centraleuropeisk tid.

          Dessutom finns det ett plugin som låter dig använda tidigare editor. Du bör installera och aktivera "Classic editor".

          Med vänlig hälsning!
          Zlatko
          AIT-team

  10. Jag håller inte med om att detta är bättre än klassisk redigering, eftersom alternativen är mer begränsade. Jag tycker att det här blocket, eftersom det använder olika teckensnitt och är bredare än ett textblock, är visuellt störande. Att kunna linda text smidigt runt en bild samtidigt som man behåller samma typsnitt, storlek och marginalinställningar ger professionalism som på en tidningssida. Det här är bara ett exempel på varför jag är djupt besviken på den här versionen av Wordpress.

    1. Hej Terence

      Tack för din åsikt. Har du provat vår testversion av Citadela? Vi har några unika block som kan hjälpa dig med att justera text och bilder. Hur som helst kan du testa fullversionen - alla funktioner, gratis.

      Ha en trevlig dag.

Kommentarer är stängda.