Lag profesjonelle Canvas-sider — av Kaspar Bredahl Rasmussen
Ferdiglagde sider du kan tilpasse
Undertekst eller beskrivelse
Velg elementer fra venstre side for å bygge din side
Juster innstillinger i venstre panel for å se endringer i sanntid.
Disse formene krever at CSS-klasser er installert i Canvas. Kontakt IT-support for installasjonsveiledning.
Du redigerer full HTML inkludert struktur og styling. Feil kan ødelegge designet. Bruk "Tilbakestill" for å angre endringer.
/courses/.
/courses/.
Kopier denne koden og lim den inn i Canvas HTML-editoren:
Sikkerhet
API-tokenet ditt har samme tilganger som Canvas-kontoen din. Det lagres bare i din nettleser (localStorage) og sendes via Canvas-proxyen — som standard EU-proxyen som kjører samme-opprinnelse på learnsmith.eu — til Canvas på hver forespørsel. Ikke del tokenet med andre. Fjern tokenet nedenfor hvis du låner maskinen til noen.
F.eks. https://nord.instructure.com
Generer under Konto → Innstillinger → Godkjente integrasjoner → + Nytt tilgangstoken i Canvas.
La denne stå på /api/canvas-proxy for å bruke EU-proxyen som kjører samme-opprinnelse på learnsmith.eu. Avanserte brukere kan kjøre sin egen — se server/README.md.
Velg leverandør, modell og lim inn din egen API-nøkkel. Nøkkelen lagres kun i denne nettleseren og sendes direkte til leverandøren du velger via vår EU-proxy — vi logger hverken nøkkelen eller innholdet i forespørselen.
Lim inn din egen nøkkel. Den lagres kun lokalt i nettleseren din.
Her ser du forskjellen mellom den eksisterende siden og det du vil lagre. Grønne linjer legges til, røde fjernes.
Du må sette opp en AI-tilkobling først.
Lim denne inn i ChatGPT, Claude eller en annen AI sammen med kildeteksten din. Kopier resultatet og lim det inn i temafeltet over, så klikk ✨.
Du må sette opp en AI-tilkobling først.
Lim denne inn i ChatGPT, Claude eller en annen AI sammen med kildeteksten din. Kopier resultatet og lim det inn i temafeltet over, så klikk ✨.
Du må sette opp en AI-tilkobling først.
Lim denne inn i ChatGPT, Claude eller en annen AI sammen med kildeteksten din. Kopier resultatet og lim det inn i temafeltet over, så klikk ✨.
Du må sette opp en AI-tilkobling først.
Lim denne inn i ChatGPT, Claude eller en annen AI sammen med kildeteksten din. Kopier resultatet og lim det inn i temafeltet over, så klikk ✨.
Du må sette opp en AI-tilkobling først.
Lim denne inn i ChatGPT, Claude eller en annen AI sammen med kildeteksten din. Kopier resultatet og lim det inn i temafeltet over, så klikk ✨.
Du må sette opp en AI-tilkobling først.
Lim denne inn i ChatGPT, Claude eller en annen AI sammen med kildeteksten din. Kopier resultatet og lim det inn i temafeltet over, så klikk ✨.
<iframe> i koden.
Fyll inn overskrift og brødtekst, og velg deretter side og bredde for bildet. Trenger du liste eller rikere formatering, redigér direkte på lerretet etter innsetting.
Bytte bilde: Bruk bilde-knappen på elementets verktøylinje etter innsetting — den åpner den vanlige Canvas-bildedialogen (opplasting eller URL).
Tips: Vil du ha tekst og bilde som adskilte kolonner ved siden av hverandre (ikke at teksten flyter rundt bildet)? Bruk heller elementet Innhold + Bilde eller en av Rutenett-beholderne.
Lim inn en YouTube-URL og skriv inn transkripsjonen. Transkripsjonen vises i et sammenleggbart felt under videoen — viktig for tilgjengelighet og for elever som foretrekker å lese.
Legg til flere bilder, og galleriet tilpasser seg automatisk skjermbredden — tre kolonner på desktop, én på mobil. Alle bilder må ha en offentlig https-URL.
Lim inn en offentlig bilde-URL, klikk på bildet for å plassere nummererte punkter, og skriv en forklaring for hvert punkt. Bildet må være en offentlig https-URL — Canvas avviser data:-URI-er, og Canvas-filer krever pålogging som forhåndsvisningen her ikke har.
Lag en aktivitet med eget ikon, farge og tekst. Velg mellom en kompakt eller en detaljert variant.
📹), et Font Awesome klassenavn (fa-solid fa-video), eller en hel <i>-tag kopiert fra Font Awesome (gratis-samlingen). Vi finner ut hvilken type det er automatisk.
#00B0B9).
Lenkeknapp (valgfri) — kun synlig i detaljert variant.
Lag en infoboks med eget ikon, farge og rammestil. Velg mellom en kompakt eller en detaljert variant.
fa-solid fa-circle-info), eller en hel <i>-tag kopiert fra Font Awesome.
Lenkeknapp (valgfri) — kun synlig i detaljert variant.
Velg en tabelltype for å komme i gang:
Klikk i cellene for å redigere innholdet:
Hva skjer med HTML-en din?
💡 Generelle tips:
Vi har erfart at lærere som limer inn Panopto-video-kode her får problemer med tillatelser. Studenter kan ikke se videoene fordi de ikke har riktige rettigheter.
Logg inn med e-post for å lagre design i skyen og åpne dem igjen senere.
Innlogget som:
Sletter kontoen din og alle lagrede design permanent. Handlingen kan ikke angres.
Dette er Canvas Designer 1.1 — et visuelt verktøy for å lage profesjonelle Canvas-sider uten å skrive HTML. Her er det nyeste:
Du kan nå bytte mellom norsk (bokmål) og engelsk fra språkvelgeren øverst i verktøyet. Velget lagres i nettleseren, og Canvas Designer husker det neste gang du kommer tilbake.
Alle elementene er designet for å fungere i både lys og mørk modus i Canvas-appen. Studentene dine får samme gode leseopplevelse uansett om de bruker pc eller mobil.
Grensesnittet er omarbeidet slik at du kan lage profesjonelle Canvas-sider raskere og tryggere. Dra elementer inn, tilpass med noen klikk — ingen HTML-kunnskap nødvendig.
Du kan bytte mellom bokstavmarkører, emojis og Font Awesome-ikoner fra verktøylinjen øverst. Det gir et helhetlig ikonspråk på tvers av alle emnene dine. Font Awesome krever at Canvas har FA lastet via Custom CSS.
Denne meldingen vises kun én gang. Du finner alle innstillinger i verktøylinjen øverst. Arbeidet ditt autolagres mens du jobber — om nettleseren lukkes får du tilbud om å gjenopprette utkastet neste gang.
Canvas Designer lar deg bygge profesjonelle Canvas LMS-sider visuelt.
Designet ditt er nå live i Canvas!
Godt design er tilgjengelig design.
| Ctrl+Z / Cmd+Z | Angre siste handling |
| Ctrl+Y / Cmd+Shift+Z | Gjør om siste handling |
Versjon: 1.0.0
Laget av: Kaspar Bredahl Rasmussen
Lisens: AGPL-3.0-or-later + CC BY-SA 4.0
Gratis for utdanningsbruk.
Canvas Designer er bygd i Norge og driftet på Hetzner i Helsinki, Finland. Alle komponenter — server, database, e-post, ikoner, skrifttyper og bilder — lastes fra EU-infrastruktur. Ingen amerikanske skytjenester, ingen sporing, ingen tredjepartsanalyse. Les personvernerklæringen for detaljer.
Canvas Designer er gratis.
☕ Kjøp meg en kaffe