{"id":13003,"date":"2026-03-27T15:37:58","date_gmt":"2026-03-27T15:37:58","guid":{"rendered":"https:\/\/cmacademy.events\/knowledge-base\/introduktion-til-website-designer\/"},"modified":"2026-07-10T15:46:34","modified_gmt":"2026-07-10T15:46:34","slug":"introduktion-til-website-designer","status":"publish","type":"ht_kb","link":"https:\/\/cmacademy.events\/da\/knowledge-base\/introduktion-til-website-designer\/","title":{"rendered":"Introduktion til Website-Designer"},"content":{"rendered":"\n<style>\n  \/* ------------------------------------------------------------\n     Introduktion til Website Designer\n     Opdateret layout:\n     - bredere videokort\n     - smallere inspirationskort\n     - to-kolonne-layout i videokortet\n  ------------------------------------------------------------ *\/\n\n  .cm-website-resource-area,\n  .cm-website-resource-area * {\n    box-sizing: border-box !important;\n    font-family: \"Titillium Web\", sans-serif !important;\n  }\n\n  .cm-website-resource-area {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 1.2rem 0 2.2rem 0 !important;\n    padding: 0 !important;\n  }\n\n  .cm-website-intro {\n    max-width: 1100px !important;\n    margin: 1.15rem 0 1.5rem 0 !important;\n    padding: 0 !important;\n  }\n\n  .cm-website-intro p {\n    color: #24384D !important;\n    font-size: 19px !important;\n    line-height: 1.58 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  .cm-website-resource-grid {\n    display: grid !important;\n    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) !important;\n    gap: 1.15rem !important;\n    width: 100% !important;\n    margin: 1.45rem 0 2rem 0 !important;\n    padding: 0 !important;\n    align-items: stretch !important;\n  }\n\n  .cm-website-card,\n  .cm-website-video-card,\n  .cm-website-inspiration-card {\n    position: relative !important;\n    border-radius: 15px !important;\n    overflow: hidden !important;\n    transition:\n      border-color 0.2s ease,\n      box-shadow 0.2s ease !important;\n  }\n\n  .cm-website-card {\n    grid-column: 1 \/ -1 !important;\n    display: grid !important;\n    grid-template-columns: minmax(0, 1fr) auto !important;\n    align-items: center !important;\n    gap: 1.4rem !important;\n    padding: 1.55rem 1.7rem 1.35rem 1.7rem !important;\n    background: #ffffff !important;\n    border: 1px solid #dce7f3 !important;\n    box-shadow: 0 8px 22px rgba(18, 32, 46, 0.05) !important;\n  }\n\n  .cm-website-card::before {\n    content: \"\" !important;\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    bottom: 0 !important;\n    width: 7px !important;\n    background: #185ABC !important;\n  }\n\n  .cm-website-main-copy {\n    min-width: 0 !important;\n  }\n\n  .cm-website-video-card,\n  .cm-website-inspiration-card {\n    display: flex !important;\n    flex-direction: column !important;\n    min-height: 0 !important;\n    padding: 1.45rem 1.5rem !important;\n    box-shadow: 0 8px 22px rgba(18, 32, 46, 0.04) !important;\n  }\n\n  .cm-website-video-card {\n    background: #f7fbff !important;\n    border: 1px solid rgba(156, 204, 61, 0.42) !important;\n  }\n\n  .cm-website-inspiration-card {\n    background:\n      radial-gradient(\n        circle at 100% 0%,\n        rgba(24, 90, 188, 0.055) 0,\n        rgba(24, 90, 188, 0) 42%\n      ),\n      #ffffff !important;\n    border: 1px solid rgba(24, 90, 188, 0.22) !important;\n  }\n\n  .cm-website-card:hover,\n  .cm-website-video-card:hover,\n  .cm-website-inspiration-card:hover {\n    border-color: rgba(156, 204, 61, 0.52) !important;\n    box-shadow: 0 13px 30px rgba(18, 32, 46, 0.075) !important;\n  }\n\n  \/* Primary label: same as Feature guide *\/\n\n  .cm-website-label {\n    display: block !important;\n    width: auto !important;\n    min-height: 0 !important;\n    padding: 0 !important;\n    margin: 0 0 0.7rem 0 !important;\n    border: 0 !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    color: #185ABC !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    line-height: 1.15 !important;\n    letter-spacing: 0.045em !important;\n    text-transform: uppercase !important;\n  }\n\n  \/* Secondary labels: same green pill style as\n     \"New to Conference Manager?\" *\/\n\n  .cm-website-video-badge,\n  .cm-website-inspiration-badge {\n    display: inline-flex !important;\n    align-items: center !important;\n    width: fit-content !important;\n    min-height: 28px !important;\n    padding: 0.22rem 0.72rem !important;\n    margin: 0 0 0.8rem 0 !important;\n    border-radius: 999px !important;\n    font-size: 13px !important;\n    font-weight: 700 !important;\n    line-height: 1.1 !important;\n    letter-spacing: 0.04em !important;\n    text-transform: uppercase !important;\n  }\n\n  .cm-website-video-badge {\n    background: rgba(156, 204, 61, 0.16) !important;\n    color: #74B51C !important;\n  }\n\n  .cm-website-inspiration-badge {\n    background: rgba(24, 90, 188, 0.09) !important;\n    color: #185ABC !important;\n  }\n\n  .cm-website-card-title,\n  .cm-website-video-title,\n  .cm-website-inspiration-title {\n    display: block !important;\n    color: #1F354D !important;\n    font-size: 21px !important;\n    font-weight: 600 !important;\n    line-height: 1.22 !important;\n    margin: 0 0 0.45rem 0 !important;\n    padding: 0 !important;\n  }\n\n  .cm-website-card p,\n  .cm-website-video-card p,\n  .cm-website-inspiration-card p {\n    color: #24384D !important;\n    font-size: 16px !important;\n    line-height: 1.45 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  .cm-website-video-content {\n    display: grid !important;\n    grid-template-columns: minmax(0, 1fr) 290px !important;\n    gap: 1.2rem !important;\n    align-items: center !important;\n    width: 100% !important;\n  }\n\n  .cm-website-video-copy,\n  .cm-website-inspiration-copy {\n    width: 100% !important;\n    min-width: 0 !important;\n  }\n\n  .cm-website-video-embed {\n    width: 100% !important;\n    max-width: 290px !important;\n    border-radius: 10px !important;\n    overflow: hidden !important;\n    background: #1F354D !important;\n    box-shadow: 0 6px 16px rgba(18, 32, 46, 0.1) !important;\n    justify-self: end !important;\n  }\n\n  .cm-website-video-embed iframe {\n    display: block !important;\n    width: 100% !important;\n    aspect-ratio: 16 \/ 9 !important;\n    height: auto !important;\n    border: 0 !important;\n  }\n\n  .cm-website-inspiration-meta {\n    display: block !important;\n    margin: 0.8rem 0 0 0 !important;\n    color: #60758A !important;\n    font-size: 14px !important;\n    font-weight: 600 !important;\n    line-height: 1.35 !important;\n  }\n\n  .cm-website-spacer {\n    flex: 1 1 auto !important;\n    min-height: 0.8rem !important;\n  }\n\n  .cm-website-resource-grid a.cm-website-button,\n  .cm-website-resource-grid a.cm-website-button:visited,\n  .cm-website-resource-grid a.cm-website-inspiration-link,\n  .cm-website-resource-grid a.cm-website-inspiration-link:visited {\n    display: inline-flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    min-height: 39px !important;\n    border-radius: 9px !important;\n    padding: 0.52rem 0.9rem !important;\n    background: #ffffff !important;\n    background-color: #ffffff !important;\n    box-shadow: none !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    line-height: 1.2 !important;\n    text-decoration: none !important;\n    transition: 0.2s ease !important;\n  }\n\n  .cm-website-resource-grid a.cm-website-button,\n  .cm-website-resource-grid a.cm-website-button:visited {\n    width: 142px !important;\n    color: #74B51C !important;\n    border: 1px solid #9CCC3D !important;\n  }\n\n  .cm-website-resource-grid a.cm-website-button:hover,\n  .cm-website-resource-grid a.cm-website-button:focus,\n  .cm-website-resource-grid a.cm-website-button:focus-visible,\n  .cm-website-resource-grid a.cm-website-button:active {\n    background: #9CCC3D !important;\n    background-color: #9CCC3D !important;\n    color: #ffffff !important;\n    border-color: #9CCC3D !important;\n    text-decoration: none !important;\n    outline: none !important;\n  }\n\n  .cm-website-resource-grid a.cm-website-inspiration-link,\n  .cm-website-resource-grid a.cm-website-inspiration-link:visited {\n    width: 168px !important;\n    color: #185ABC !important;\n    border: 1px solid #185ABC !important;\n  }\n\n  .cm-website-resource-grid a.cm-website-inspiration-link:hover,\n  .cm-website-resource-grid a.cm-website-inspiration-link:focus,\n  .cm-website-resource-grid a.cm-website-inspiration-link:focus-visible,\n  .cm-website-resource-grid a.cm-website-inspiration-link:active {\n    background: #185ABC !important;\n    background-color: #185ABC !important;\n    color: #ffffff !important;\n    border-color: #185ABC !important;\n    text-decoration: none !important;\n    outline: none !important;\n  }\n\n  @media (max-width: 980px) {\n    .cm-website-video-content {\n      grid-template-columns: 1fr !important;\n      align-items: start !important;\n    }\n\n    .cm-website-video-embed {\n      justify-self: start !important;\n      max-width: 340px !important;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .cm-website-resource-grid {\n      grid-template-columns: 1fr !important;\n    }\n\n    .cm-website-card {\n      grid-column: auto !important;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .cm-website-resource-area {\n      margin: 1rem 0 2rem 0 !important;\n    }\n\n    .cm-website-intro {\n      margin: 1rem 0 1.4rem 0 !important;\n    }\n\n    .cm-website-intro p {\n      font-size: 17px !important;\n      line-height: 1.5 !important;\n    }\n\n    .cm-website-resource-grid {\n      margin-top: 1.35rem !important;\n    }\n\n    .cm-website-card {\n      grid-template-columns: 1fr !important;\n      gap: 1rem !important;\n      padding: 1.2rem 1.2rem 1.2rem 1.45rem !important;\n    }\n\n    .cm-website-video-card,\n    .cm-website-inspiration-card {\n      padding: 1.15rem !important;\n    }\n\n    .cm-website-card-title,\n    .cm-website-video-title,\n    .cm-website-inspiration-title {\n      font-size: 20px !important;\n    }\n\n    .cm-website-card p,\n    .cm-website-video-card p,\n    .cm-website-inspiration-card p {\n      font-size: 16px !important;\n    }\n\n    .cm-website-video-embed {\n      max-width: 100% !important;\n    }\n\n    .cm-website-resource-grid a.cm-website-button,\n    .cm-website-resource-grid a.cm-website-inspiration-link {\n      width: 100% !important;\n    }\n  }\n<\/style>\n\n<div class=\"cm-website-resource-area\">\n  <div class=\"cm-website-intro\">\n    <p>\n      Kom godt i gang med at designe dit website med denne hurtige introduktion til Website-Designeren.\n    <\/p>\n  <\/div>\n\n  <div class=\"cm-website-resource-grid\" aria-label=\"Ressourcer til Website Designer\">\n\n    <article class=\"cm-website-card\">\n      <div class=\"cm-website-main-copy\">\n        <span class=\"cm-website-label\">Website-Designer<\/span>\n\n        <div class=\"cm-website-card-title\">\n          Introduktion til Website-Designer\n        <\/div>\n\n        <p>\n          Brug PDF-introduktionen til at f\u00e5 et hurtigt overblik over Website-Designeren og de grundl\u00e6ggende v\u00e6rkt\u00f8jer til at opbygge dit website.\n        <\/p>\n      <\/div>\n\n      <a\n        href=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2026\/03\/Website-Designer-intro-DK.pdf\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"cm-website-button\"\n      >\n        \u00c5bn PDF\n      <\/a>\n    <\/article>\n\n    <aside class=\"cm-website-video-card\">\n      <span class=\"cm-website-video-badge\">Videogennemgang<\/span>\n\n      <div class=\"cm-website-video-content\">\n        <div class=\"cm-website-video-copy\">\n          <div class=\"cm-website-video-title\">\n            Brug for en mere detaljeret gennemgang?\n          <\/div>\n\n          <p>\n            Se den fulde gennemgang af Website-Designeren for at f\u00e5 en mere grundig introduktion til, hvordan du redigerer og opbygger dit website. (Videoen er p\u00e5 engelsk.)\n          <\/p>\n        <\/div>\n\n        <div class=\"cm-website-video-embed\">\n          <iframe\n            src=\"https:\/\/player.vimeo.com\/video\/1045264486?h=d8ac5268e4\"\n            title=\"Gennemgang af Website Designer\"\n            allow=\"autoplay; fullscreen; picture-in-picture\"\n            allowfullscreen\n            loading=\"lazy\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/aside>\n\n    <aside class=\"cm-website-inspiration-card\">\n      <span class=\"cm-website-inspiration-badge\">Inspiration<\/span>\n\n      <div class=\"cm-website-inspiration-copy\">\n        <div class=\"cm-website-inspiration-title\">\n          Se eksempler p\u00e5 websites\n        <\/div>\n\n        <p>\n          G\u00e5 p\u00e5 opdagelse i inspirationsbiblioteket, og find id\u00e9er og eksempler, du kan bruge, n\u00e5r du designer dit eget website.\n        <\/p>\n\n        <span class=\"cm-website-inspiration-meta\">\n          Layouts, sektioner og designid\u00e9er\n        <\/span>\n      <\/div>\n\n      <div class=\"cm-website-spacer\"><\/div>\n\n      <a\n        href=\"https:\/\/cmacademy.events\/da\/knowledge-base\/inspirationsbibliotek-til-websites\/\"\n        class=\"cm-website-inspiration-link\"\n      >\n        Se inspiration\n      <\/a>\n    <\/aside>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kom godt i gang med at designe dit website med denne hurtige introduktion til Website-Designeren. Website-Designer Introduktion til Website-Designer Brug PDF-introduktionen til at f\u00e5 et hurtigt overblik over Website-Designeren og de grundl\u00e6ggende v\u00e6rkt\u00f8jer til at opbygge dit website. \u00c5bn PDF Videogennemgang Brug for en mere detaljeret gennemgang? Se den fulde gennemgang af Website-Designeren for at &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/cmacademy.events\/da\/knowledge-base\/introduktion-til-website-designer\/\" class=\"more-link\">L\u00e6s resten<\/a><\/p>\n","protected":false},"author":6,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[5887,377],"ht-kb-tag":[395,5792,5803,5771,5780,313],"class_list":["post-13003","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-website-og-design","ht_kb_category-supportartikler","ht_kb_tag-elementer","ht_kb_tag-intro","ht_kb_tag-web","ht_kb_tag-website","ht_kb_tag-website-designer","ht_kb_tag-webstedsdesigner","entry"],"_links":{"self":[{"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/ht-kb\/13003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/comments?post=13003"}],"version-history":[{"count":9,"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/ht-kb\/13003\/revisions"}],"predecessor-version":[{"id":17350,"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/ht-kb\/13003\/revisions\/17350"}],"wp:attachment":[{"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/media?parent=13003"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/ht-kb-category?post=13003"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/cmacademy.events\/da\/wp-json\/wp\/v2\/ht-kb-tag?post=13003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}