Billeder til fuldbredde, slider og baggrund i DIVI
Denne miniguide handler særligt om at bruge fuldbreddebilleder, sliderbilleder, baggrundsbilleder og tekst i DIVI så det fungerer på både computer, tablet og smartphone.
Kig på denne side fra skiftevis computer, tablet og smartphone, så du kan se, hvor forskelligt billeder og tekster opfører sig på forskellige skærmtyper.
Alle anvendte billeder er i det såkaldte 16:9 format
1280 px bredt, 720 px højt
Letbaneskinneskidtskraber
Det her dur ikke. Billedet er uegnet til lille skærm. Der er for lange ord. For mange ord. For voldsom skrifttstørrelse. Billeder og tekst kan være flot på den store computerskærm, men umulig på en lille skærm. Nogle billeder kan bruges som baggrundsbilleder. Andre dur ikke. Du skal lære at bruge billeder og tekst i responsivt design.
Letbaneskinneskidtskraber og andre lange ord kan stå på en computerskærm, men knækker på en smartphone. Nogle billeder fungerer fint på stor skærm, men dårligt på en smartphone. Størrelsen er vigtig….
Billedet af kvinde og solnedgang fungerer fint på både computer, tablet og smartphone, når det bruges som et almindeligt fuldbredde-billede – indsat i et billedmodul.
Tekst på foto
Vil du lægge tekst oven på billedet, begynder du at få problemer. Det ser sjældent godt ud. Slet ikke på smartphone og tablet.
Fotoet af kvinden med solnedgang fungerer ikke uden videre godt som baggrund under tekst. Og det ser forskelligt ud på forskellige skærme.
- På computerskærm forsvinder en del af billedets top og bund
- På smartphone forsvinder en del af billedets højre side.
- På tablet forsvinder en del af billedets bund.
Du kan fifle med mange indstillinger og sagtens ende med, at du får det til at se OK ud på en skærmtype – men så ser det sandsynligvis forkert ud på de øvrige skærmtyper.
Lav forskellige indstillinger til computer, tablet og smartphone
Vil du bruge et billede med tekst oven på, skal du vælge et billede, der egner sig til netop det formål. Du kan ikke få et hvilket som helst billede til at fungere fint i alle tilfælde.
I nogle tilfælde er du endda nødt til at lave tre moduler med forskellige indstillinger, hvis det skal se godt ud på både computer, tablet og smartphone. Under avancerede indstillinger kan du vælge, at det modul ikke skal vises på en bestemt skærmtype.
Så du designer et modul, der ser godt ud på computer – og indstiller, at det ikke skal vises på tablet og smartphone. Og gør tilsvarende med de andre skærmtyper.
Her er der indsat en fuldbredde-slider med baggrundsbillede under slidermodulet. Billedet er fint. Men det fungerer slet ikke godt til formålet. Her skal problemet ikke løses ved at rode med koder og indstillinger.
- Computerskærm: fungerer ikke godt
- Smartphone: fungerer ikke godt
- Tablet: Fungerer nogenlunde
Fint billede – fungerer bare ikke
Billedet af pelikanerne er udmærket. Det fungerer bare ikke uden videre som baggrundsbillede.
Det fungerer fint, hvis det indsættes som i et almindeligt billedmodul eller i et fuldbredde-billedmodul.
Billedet af den flyvende måge er fint – men svært at bruge som baggrundsbillede under tekst, fordi der er alt fra lyse til meget mørke farver i billedet. Uanset du lægger mørk eller lys tekst oven på billedet, vil en del af teksten blive ulæselig.
Vil du lægge tekst oven på billedet, begynder du at få problemer. Det ser sjældent godt ud. Slet ikke på smartphone og tablet.
Vil du lægge tekst oven på billedet, begynder du at få problemer. Det ser sjældent godt ud. Slet ikke på smartphone og tablet.
Tekst på urolig baggrund
Hvidt på mursten
Nogle gange er man nødt til at lægge baggrundsfarve under tekst, for at gøre den læselig
Sort på mursten
Nogle gange er man nødt til at lægge baggrundsfarve under tekst, for at gøre den læselig
Brug farve under tekst
Tekst på mursten
Nogle gange er man nødt til at lægge baggrundsfarve under tekst, for at gøre den læselig
WordPress webdesign workshop
Learning by doing er fint, men langsommeligt. Du når mere, hurtigere og bliver bedre ved at blive udfordret og uddannet
Skriv responsivt og mobilvenligt
Tekster skal skrives til responsivt design. Du kan ikke bare hælde almindeligt tekster ind på dine sider.