I denne kategori Design & layout
Responsive billeder og indhold
Sådan får du dine billeder til automatisk at tilpasse sig til størrelsen af skærmen hos den der besøger din hjemmeside.
På denne side
Når du laver produktbeskrivelse, kategorisider eller andet indhold med tekst, billeder og/eller tabel-opstillinger, så bør du lave det som responsivt indhold. Altså hvor det automatisk tilpasser sig til om det vises på stor skærm, tablet eller mobil.
Her er en måde du nemt kan gøre det på:
1. Gå ind i tekst/billede redigering
Hvis det er i design visning (også kaldet Layout Builder) så klik på tandhjulet eller dobbeltklik for at redigere billedet.
Ved redigering af varer m.v. ser det nogenlunde tilsvarende ud.
2. Vælg kildekode
Via ‘Værktøj’ og derefter ‘<> Kildekode’
3. Kopiere kildekoden
Vælg hele kildekoden og kopier den til udklipsholder (højre-klik, kopier eller CTRL/mac + C).
4. Brug ChatGPT eller anden AI til omskrivning
Gå til ChatGPT eller tilsvarende og skriv en prompt der for eksempel starter sådan her:
Konverter den følgende html til at være responsive i stedet for for eksempel at bruge tabel. Hvis der skal laves noget CSS, så skal det være inline:
Derefter kopierer du hele din html kode ind.
Du får nu et nyt stykke html kode fra din AI som du kopierer
5. Indsæt dit nu responsive indhold
I kode editor for dit indhold fjern alt det som er nu. Indsæt koden fra ChatGPT/AI
Gem siden og du skulle nu gerne have dit indhold responsivt.
Hvis det kun er billeder som skal gøres responsive
Her er et trick til hvordan du kan få dine billeder til automatisk at tilpasse sig i størrelsen alt efter om den besøgende ser din hjemmeside på for eksempel mobil eller en computer på skrivebord.
Som vist herover gøres dette også i kode editor. Lige efter koden hvor der står
<img
skal du indsætte et mellemrum og dette stykke kode:
class="img-responsive"
således at der samlet set står som i dette eksempel:
