– instruktioner i brug af WordPress lavet af elever på Medieskolen Lyngby

Artisteer – Responsive Header

Information

Artisteer er et program hvor man kan lave sine egne themes til wordpress eller andre websites. programmet har en række værktøjer der gør det muligt for nemt at ændre design og hjemmesidens layout til præcist som du vil have det. Artisteer koster penge og findes til Windows, Mac OS og Linux.

Responsive header er til dig der gerne vil kunne se din hjemmeside på mobiler og tablets. Responsive header er en funktion i artisteer som hjælper dig med at gøre din hjemmeside funktionær på andre platforme (mobiler og tablets).

Responsive header funktionen findes kun i Artisteer 4 og er en af de nyere og smarte funktioner.

For at bruge denne funktion kræver det at du har:

  1. Artisteer 4
  2. Et header billede

Tutorial

klik på billederne for at åbne i stor udgave

1. Åbn Artisteer 4
1_start_artisteer
2. Tryk på headeren (indikeret med den røde boks) for at bringe Header værktøjs linjen frem. Når header værktøjs linjen er fremme kan du nu trykke insæt billede (indikeret med orange boks)
2_tryk_header_insaet_billede
3. Indsæt dit Header billede og sæt din header farve så du klar
3_billede indsat2_tryk_header_saet_farve
4. åben Responsive view og tryk ”Enable Responsive Web Design”
4_klik_responsiv-view_enable_response
5. Gå ind på de forskellige platforme og slå “Switch to Custom responsive” til
11_tablet_landscape_switch_custom_responsive11_tablet_portrait_switch_custom_responsive11_phone_landscape_switch_custom_responsive6_vaelg_custom_responsive
6. Gå nu tilbage til Desktop view. Højre klik på dit header billede og før musen over visible og slå ”Phone Portrait” fra

dette gør at dette header image vil nu blive vist på alle platforme undtagen phone portrait

7_højreklik_visible_fravælg_phoneportrait
7. Gå nu ind på ”phone portrait View” og insæt dit header image eller et nyt header image med bredden 320px. bare så det passer til breden af mobil portrait.

(Indsæt billede knappen er markeret med den orange boks)

8_insæt_header_til_mobil
8. juster dit header image så det passer på mobilen. Du kan holde Shift/Skift nede for at skalere billedet ned uden at ændre længde forholdene på hver af siderne.
9_juster til header image passer på skærmen
9. Højreklik nu på din mobils header og gå ind under ”visible” og slå alle fra undtagen ”phone Portrait”

Dette vil nu betyde at dette header image kun vil blive vist på mobil portrait versioner.

10_højreklik_visible_slå_desktop_fra