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

Visa aktuellt år automatiskt i Divis bottom bar

Divis bottenlist (bottom bar) passar utmärkt för information om Copyright © men många glömmer att uppdatera till rätt år. Lägg in ett årtal som uppdateras automatiskt.

10 oumbärliga guider till Divi

Även om Divi till stora delar är självförklarande finns det några grundläggande guider som jag återkommer till gång på gång. Det handlar om nyttiga funktioner som förenklar ditt arbete och skapar en optimal användarupplevelse för dina besökare. Håll till godo!

✔ Checklista: 10 saker att göra efter lanseringen av din WordPress-hemsida

Efter mycket jobb har du äntligen publicerat din WordPress-hemsida. Men tro inte att du är klar; det är nu jobbet börjar! Här är en checklista med tio punkter som du bör bocka av direkt efter lanseringen.1. Säkerheten först!2018 stod WordPress för 90% av alla hackade...

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...

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...

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...

Inspiration: 10 svenska hemsidor i WordPress

Behöver du fylla på med ny inspiration till dina webbprojekt? Här hittar du tio svenska WordPress-hemsidor som kan boosta din kreativitet. Oavsett om det handlar om dataspel, friluftsliv, musik eller vatten och avlopp(!) så går det att skapa riktigt snygg webbdesign. Mycket nöje!

Divi Nugget #7: Skapa runda bilder direkt i WordPress (utan Photoshop)

Helt eller delvis runda bilder används ofta för att göra designen lite mjukare. På många hemsidor används till exempel rundade porträttbilder och produktbilder. Här är det enklaste och mest effektiva sättet att skapa runda bilder i WordPress.

Divi snabbar upp laddtiden med ny uppdatering

Nu släpper Divi en teknisk uppdatering som innebär att din sajt kommer att laddas snabbare för besökarna. Genom att all CSS-kod lagras i statiska filer så hålls kodmängden på de enskilda sidorna nere. Allt sker såklart automatiskt i bakgrunden så förändringen påverkar...

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...