Innehållsförteckning
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.
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:
- Bildblock och styckeblock se mer nedan
- Media & Text block se mer nedan
- Kolumnblock i enskild post
- Klusterblock i ett enskilt inlägg (funktionen är endast tillgänglig med Citadela Pro insticksprogram)
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
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.
Media & Text block - WordPress justerar texten bredvid bilden
- Packa in text och bilder med Media & Text-blocket
- Så här lägger du till Media & Text-block i redigeraren
- Hur detta block fungerar
- Inställningar för media- och textblock
- Vad betyder "Stack på mobilen" medelvärde
- Bonus: Så här rättfärdigar du text i WordPress
Hur justerar jag text bredvid bild?
Kom igång nu
Engångsbetalning. 30 dagars pengarna-tillbaka-garanti.
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.
Det sista alternativet är att skriva "/" och sedan "media". WordPress kommer automatiskt att visa dig utvalda block som matchar det du sökte efter.
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
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.
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.
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
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".
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.
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.
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.
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.
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.
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.
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.
I textinnehåll är det möjligt att ändra Paragraph-block till Heading- eller List-block.
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:
- Det finns en inställning för ytterligare CSS-klass för styckeblock i sidofältet på höger sida
- Skriv där klassens namn "rättfärdiga"
- Publicera sida eller artikel
- Om du förhandsgranskar den klickar du på Anpassa i den övre huvudraden
- På vänster sida finns ett nytt sidofält med inställningar
- Klicka på Ytterligare CSS
- Infoga följande CCS-kod:
p.justify {
text-align: justify;
}
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.
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.
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/
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
Ja, jag kan inte få texten att brytas. Denna textblockskombination verkar vara värdelös.
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.
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
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
Hej Abdur,
Tack så mycket för din feedback, den är mycket uppskattad av vårt team!
Bästa hälsningar.
Zlatko
AIT-team
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.
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
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 🙂
TACK London SEO Guy !!! En enkel lösning men jag hade förbisett den!
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.
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.
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.
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
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å.
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
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.
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.