När du skapar ett inlägg i WordPress kan du ladda upp en Utvald bild (Featured Image) som visas mellan rubriken och brödtexten. För att Divi ska visa din bildtext under bilden så behöver du lägga till en rad kod. Vi visar hur och bjuder dessutom på en enkel CSS-stil.

Före

Bildtexten visas inte 🙁

Efter #1

Standarddesign

Efter #2

Med egen CSS

Tips! Innan du börjar bör du säkerställa att du använder ett barntema (child theme) till Divi. Annars skrivs dina ändringar över nästa gång  du uppdaterar Divi. Skapa ett gratis barntema »

1. Lägg till en Utvald bild

Börja med att skapa ett inlägg (post) och bläddra ner för att lägga till din utvalda bild. Det spelar ingen roll om du skapar inlägget med Divi Builder eller någon annan editor, så länge du använder temat Divi.

Skapa ett inlägg med en Utvald bild

2. Ange din bildtext

Välj en befintlig bild eller ladda upp en ny bild till mediabiblioteket. Skriv in din önskade bildtext i fältet ”Bildtext” till höger om bilderna. Klicka på knappen ”Ange utvald bild”

Skriv i din bildtext

3. Kopiera single.php

Tyvärr räcker inte detta för att bildtexten ska visas. Men lugn, det tar bara några minuter att locka fram den.

Börja med att ladda ner single.php från katalogen /wp-content/themes/Divi/

Detta gör du enklast med en ftp-klient som FileZilla eller via filhanteraren i kontrollpanelen på ditt webbhotell.

 

Utvald bild som inte visar bildtexten

3. Redigera single.php

Öppna din nedladdade fil för redigering i t.ex. NotePad ++ för Windows eller CotEditor för Mac.

Sök upp följande rad:

print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height );

Lägg till den här raden direkt under raden ovan:

echo '<p class="custom_caption">'.get_the_post_thumbnail_caption().'</p>';

Spara och ladda upp din sprillans nya single.php i katalogen för ditt barntema, t.ex. /wp-content/themes/ditt-barntema/

Lägg in kod i single.php

Så här ska det se ut när du är klar.

Nu visas bildtexten under den utvalda bilden

Ändringen slår igen på alla inlägg, även de som är publicerade innan du uppdaterade single.php. 

Bonus: Snygga till bildtexten med CSS

Men visst ser bildtexten lite tråkig ut? Du kan påverka stilen via CSS-klassen .custom_caption. Här är ett enkelt exempel som du kan lägga in i Divi > Tema-anpassare > Extra CSS för att centrera texten, göra den kursiv och snygga till padding och radavstånd.

CSS:

.custom_caption {
padding: 0px 8px;
text-align: center;
font-style: italic;
line-height: 1.3em;
}

Centrerad och kursiv bildtext

Det var allt för den här gången. Lycka till!

Mer från bloggen

Öka antalet samtal med telefonlänkar

Att sänka trösklarna för dina besökare när de vill kontakta dig kan leda till fler värdefulla interaktioner och lägre drop-out. Ett enkelt sätt att uppnå detta är att skapa telefonlänkar som triggar uppringning vid klick – även kallat click-to-call. Detta är...

Så installerar du WordPress manuellt – komplett guide

Wordpress är världens mest använda plattform för webbpublicering. Och det är kanske inte så konstigt: Wordpress är gratis, användarvänligt och flexibelt med öppen källkod. Här visar vi hur du installerar Wordpress från grunden och bjuder på några bonustips för att du...

Uppdatera i WordPress direkt från mobilen

Elegant Themes har nu släppt en efterlängtad uppdatering till Divi Builder: Sidbyggaren är nu helt responsiv. Detta innebär att det är smidigt att uppdatera innehållet på din Wordpress-hemsida från mobilen – var du än befinner dig. Som en bonus blir sidbyggaren även...

Divi Nugget #2: Skapa en studsande scroll-pil neråt i WordPress

I Divi Nugget #2 går vi igenom hur du skapar en studsande scroll-pil neråt på din hemsida i WordPress. Vi ser även till att pilen är klickbar och länkar till sektioner under. Se videon nu.

Så visar du bildtexten under din utvalda bild i Divi

När du skapar ett inlägg i Wordpress kan du ladda upp en Utvald bild (Featured Image) som visas mellan rubriken och brödtexten. För att Divi ska visa din bildtext under bilden så behöver du lägga till en rad kod. Vi visar hur och bjuder dessutom på en enkel...

Så döljer du textskuggan i Divis sliders och växlare

Om du vill ta bort skuggan på rubriker och text i Divis moduler Slider (Växlare) och Fullwidth Slider (Fullbredds-växlare) märker du snart att det inte finns någon inställning för detta i Divis sidbyggare. Så här döljer du skuggan med lite CSS. /** Ta bort textskuggan...

Klarar dina texter vi-testet?

Vad var det första du gjorde när du som barn fick den rykande färska skolkatalogen? Om du febrigt bläddrade fram till bilden på dig själv så var du knappast ensam. Vi är självupptagna varelser. Eller som Joe Pulizzi uttrycker det: Kunderna bryr sig inte om ditt...

Sex snabba sätt att ta tempen på din webbplats

Presterar inte din webbplats toppresultat trots att du matar den med bra och nyttigt innehåll? Det kan bero på att den är krasslig och hostar bort potentiella besökare. Här kommer sex enkla (och för det mesta helt gratis) sätt att ställa en träffsäker diagnos. För om...

12 exempel på strålande webbdesign i WordPress & Divi

Varje dag skapas 50 000(!) nya hemsidor i Wordpress. Vi har samlat 12 exempel på strålande webbdesign av allt från små frilansare till internationella storföretag; från konstnärlig minimalism till färgsprakande överdåd. Men alla sajterna har ett par saker saker...

Divi Nugget #6: Skapa länkar i WordPress på snabbaste sättet

Det är inte alla som känner till genvägen för att skapa en länk på bara en sekund i WordPress. Vi går igenom både det vanliga sättet att skapa länkar i WordPress och det blixtsnabba sättet. Se videon nu.