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.
Her ser du forskjellen mellom den eksisterende siden og det du vil lagre. Grønne linjer legges til, røde fjernes.
<iframe> i koden.
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