Hur man lägger till text högst upp på en image i WordPress (3 metoder)

Det finns många tillfällen när du behöver lägga till en textöverlagring till en bild i WordPress.

Du kanske ska skapa en iögonfallande banner för din hemsida. Eller så kanske du vill lägga till en fängslande titel till din utvalda bild. Vi har stött på den här situationen själva, och att lägga till en textöverlagring är ett bra sätt att göra dina bilder mer informativa och engagerande.

Om du behöver hjälp med att lägga till text ovanpå din bild i WordPress, då har du kommit till rätt ställe. Vi har hittat 3 enkla sätt att lägga till text ovanpå bilder i WordPress, inga designkunskaper behövs.

När lägger man till text över images i WordPress

Imagely kan få din WordPress-webbplats att se mer intressant ut och hjälpa till att bryta upp stora textstycken.

Men ibland kan dina images behöva mer förklaring. Du kan till exempel lägga till text högst upp på en image för att förklara vad bilden visar och varför du har lagt till den i ditt post.

Många WordPress bloggar lägger också till text högst upp på en image för att skapa iögonfallande och informativa banners och headers.

I det här inlägget har vi tre nybörjarvänliga sätt att lägga till text högst upp på en image i WordPress. Om du föredrar att hoppa direkt till en viss metod kan du använda länkarna under:

Metod 1: Lägg till text högst upp på en image med hjälp av Cover Block

Ett sätt att lägga till text ovanpå en bild i WordPress är genom att använda Cover-blocket. Du kan använda det här blocket för att visa en bild och sedan skriva text över bilden. Detta gör Cover-blocket perfekt för att skapa hjältebilder, rubriker och banners.

Om du vill add a Cover block till en page eller post klickar du bara på plusknappen ”+ Add Block” i Gutenberg block editor.

Du kan nu skriva in ”Cover” och välja rätt block när det dyker upp.

Här kan du välja standardblocket Cover. Men du kan också välja det mallade alternativet med platshållarbild och text. Med det andra alternativet kan du helt enkelt ersätta den befintliga bilden och texten med din egen.

För att ersätta standard image, klicka för att välja image. När du har gjort det klickar du på knappen ”Replace”.

Om du vill använda en image som redan finns i ditt mediabibliotek i WordPress klickar du helt enkelt på ”Open Media Library”. Sedan kan du välja en befintlig image.

Om du vill ladda upp en new image klickar du istället på ”Upload”.

Detta öppnar ett fönster där du kan välja vilken fil som helst från din dator.

När du har valt en image kan du använda blockets settings för att skapa intressanta och iögonfallande effekter. Du kan till exempel göra så att imagen blir fixed när besökaren rullar på sidan eller add to ett färgöverlägg till imagen.

Om du använder en överlagring kan du ändra dess opacitet med hjälp av skjutreglaget ”Opacity”. Inställningen för opacitet styr hur transparent bakgrundsbilden är.

När du är nöjd med hur imagen ser ut är du redo att add to lite text.

Som standard har blocket Cover en Heading och ett Paragraph-block där du kan lägga till text högst upp på bilden.

För att add to text klickar du bara för att selecta antingen blocket Heading eller Paragraph. Skriv sedan in den text som du vill använda.

När du addar text högst upp på en image kan texten ibland vara svår att läsa. Detta gäller i viss mån för besökare som har dålig syn. Om du vill veta mer kan du vänligen läsa vår guide om hur du förbättrar tillgängligheten på din site i WordPress.

Med det sagt kanske du vill utforma din text så att den blir lättare att läsa.

Om du arbetar med ett Heading block kan du också prova de olika heading-stilarna för att se vilken som är lättast att läsa.

Du kan också hjälpa din text att sticka ut genom att använda en kontrasterande färg.

För att välja en annan färg, välj tabben ”Block” i den högra menyn. Gå sedan vidare och klicka på ”Color” för att förstora denna section.

När du har gjort det klickar du på ”Text”. Detta öppnar en popup där du kan välja en new färg för all text i blocket.

Vanligtvis är större text lättare att läsa.

Om du vill göra din text större klickar du på fältet bredvid ”Size” och skriver sedan in en större siffra i det här fältet.

När du är nöjd med hur ditt Cover block ser ut kan du publicera eller updating din page som vanligt. Om du nu besöker din WordPress website kommer du att se din text högst upp på imagen.

Metod 2: Lägg till text högst upp på en image med hjälp av Image Block

Blocket Cover är perfekt för att skapa banners och headers. Du kan dock också lägga till text högst upp i ett standard WordPress Imagely block.

Till att börja med måste du add to ett Image block till din page eller post. För att göra detta klickar du helt enkelt på plusknappen ”+ Add Block” i WordPress Block Editor.

You kan sedan skriva in ”Image” och välja rätt block för att add to your post.

Du kan sedan antingen ladda upp en bild från din dator eller klicka på ”Mediabibliotek” för att välja en bild från WordPress mediabibliotek.

När du har valt din image kan du ändra dess fokuspunkt, add to ett överlägg och ändra opaciteten genom att följa samma process som beskrivs ovan.

Du kan också prova de olika sliders ”Fixed background” och ”Repeated background” för att se vad som fungerar bäst för din Image block.

När du är nöjd med hur din image ser ut klickar du bara på knappen ”Add text over image”.

This adds a area where you can type in your text.

Beroende på din image kan det vara svårt för besökarna att läsa texten i överlägget. Här kan det hjälpa att göra texten fet eller ändra dess färg genom att följa samma process som beskrivs ovan.

You kan också göra din text större.

Detta gör du genom att leta upp section ”Size” i menyn till höger. You can then go ahead and click on the different numbers to make your text larger or smaller.

När you är nöjd med hur text och image ser ut kan du gå vidare och previewa din website. Klicka sedan på ”Save Draft”, ”Update” eller ”Publicera” för att spara dina ändringar.

Om du använder ett block WordPress-tema kan du använda metoderna 1 och 2 för att lägga till text högst upp på en image i någon del av ditt tema med hjälp av WordPress Full Site Editor (Redigering av hela webbplatsen).

Du kan lära dig mer om Redigering av hela webbplatsen i vår kompletta guide för nybörjare till WordPress Full Site Editing.

Metod 3: Skapa en Custom Page Layout med text högst upp på en image

De built-in WordPress blocks är ett snabbt och enkelt sätt att lägga till text högst upp på en image i WordPress. Men om du vill ha friheten att skapa helt customize siddesign, behöver du ett page builder plugin.

SeedProd är det bästa WordPress page builder tillägget på marknaden. Det allow you att lägga till text högst upp på vilken image som helst på hela din website.

Du kan läsa vår fullständiga SeedProd-recension för mer information.

Först måste du installera och aktivera SeedProd plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering måste du enter din SeedProd license key. Du kan få denna nyckel genom att logga in på ditt SeedProd account. Sedan klickar du på tabben ”Downloads”.

När du har gjort det kan du kopiera nyckeln i ”License key” section.

Du kan nu klistra in denna nyckel i din WordPress admin area genom att gå till SeedProd ” Settings page.

När du är här, fortsätt och klistra in din nyckel i fältet ”License key”.

Sedan behöver du bara klicka på ”Verify Key”.

Efter det kommer vi att heada över till SeedProd ” Landing Pages och klicka på ’Add New Landing Page’.

Din nästa uppgift är att välja en template, som kommer att vara din pages startpunkt. Oavsett vilken SeedProd template du väljer kan du customize varje del av mallen för att passa perfekt till din website och ditt varumärke.

Om du föredrar att börja med en tom duk kan du klicka på ”Blank Template”.

I alla våra images använder vi Tasty Squeeze Page template, som är perfekt för att få fler prenumeranter.

När du har hittat en template som du kanske vill använda, hoverar du musen över den. Du kan sedan klicka på ikonen ”Preview”.

Detta kommer att visa en preview av templates.

Om du är nöjd med hur templates ser ut kan du klicka på knappen ”Choose This Template”.

I fältet ”Page Name” skriver du in ett namn för page.

Som standard kommer SeedProd att använda detta namn som sidans URL. Om du vill ändra denna automatiskt skapade URL, så är det bara att edit texten i fältet ”Page URL”.

När du är nöjd med den information du har enter, click på knappen ”Save and Start Editing the Page”. Detta öppnar templates i SeedProd’s drag and drop editor.

I den vänstra sidebaren ser du all block och sections som du kan add to your page genom att använda drag and drop.

Om du inte använder den tomma templaten kommer din SeedProd page redan att ha några block och sections. För att edit något av detta content, clickar du helt enkelt för att select blocket eller section.

SeedProds vänstra meny kommer nu att visa alla de inställningar du kan använda för att customize detta block eller section. Som du kan se i följande image, om du klickar på ett Headline-block, kan du ändra texten som visas i det här blocket.

Det enklaste sättet att add to text högst upp på en image är genom att använda en av SeedProd’s färdiga Hero sections.

Dessa sections har en placeholder, full width bakgrundsbild, med lite placeholder-text som läggs till högst upp. Du kan helt enkelt ersätta bakgrundsbilden och texten som är standard med ditt eget content.

För att komma igång, klicka på tabben ”Sections” i SeedProd’s vänstra meny.

Du kan sedan klicka på ”Hero” för att se all de färdiga hero sections som du kan add to your page.

För att få Preview på någon av dessa section templates, hoverar du bara över templates och clickar sedan på magnifying glass iconen.

För att gå vidare och add to denna hero section till your design, click on ’Choose This Section’.

Därefter vill du ersätta templatens stock image med din egen image. För att göra det klickar du helt enkelt på stockbilden för att välja den.

Sedan, i SeedProd’s vänstra meny, hoverar du över ’Background Image’ preview tills en trash can icon visas.

You can then go ahead and click on this icon to delete the placeholder image.

Därefter klickar du på ”Use Your Own Image”. Du kan då antingen välja en image från mediabiblioteket i WordPress eller använda en stock image.

SeedProd ger dig enkel tillgång till tusentals royalty gratis stock images. För att ta en titt på SeedProd’s stock image bibliotek, click på ’Use a Stock Image’.

I sökfältet skriver du in ett ord eller en fras som beskriver den image du letar efter och klickar på knappen ”Search”.

SeedProd kommer nu att visa all stock images som matchar din search term.

När du hittar en image som du vill add to your design är det bara att ge den ett click.

När du har add to en image är du redo att ersätta texten i placeholderen.

För att göra detta, klicka för att selecta blocket Text. I area ”Text” skriver du sedan in den text som du vill använda.

Vissa av SeedProds templates har extra content, till exempel call-to-action-knappar.

Vill du ändra detta content? Då klickar du bara för att selecta blocket och gör sedan dina ändringar i SeedProds vänstra meny.

Ett annat alternativ är att ta bort blocket från hero templates.

För att göra detta klickar du bara för att välja blocket och klickar sedan på ikonen för papperskorgen.

När du är nöjd med designen av din page kan du clicka på knappen ”Save”.

Härifrån kan du välja att publicera page eller save den som en template.

För mer details om hur man skapar custom page layouts med SeedProd, kan du se vår guide om hur man skapar en landing page i WordPress.

Bonustips för att hantera bilder och filer i WordPress

Att lägga till text i bilder är bara ett sätt att få din webbplats att se bättre ut. Vill du göra mer med dina bilder? Kolla in dessa enkla guider:

• Hur man enkelt lazy-laddar bilder i WordPress
• Så här lägger du till flera gallerier i WordPress-inlägg och -sidor
• Så här lägger du till en slider för utvalt innehåll i WordPress på rätt sätt
• Så här lägger du till en kant runt en bild i WordPress
• Så här beskär och redigerar du miniatyrbilder av WordPress-inlägg
• Så här lägger du enkelt till interaktiva 360-graders bilder i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till text ovanpå en bild i WordPress. Du kanske också vill se vår guide om hur du massredigerar utvalda bilder och våra expertval för de bästa slider-pluginsen för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.