{"id":13109,"date":"2026-03-27T15:37:58","date_gmt":"2026-03-27T15:37:58","guid":{"rendered":"https:\/\/cmacademy.events\/knowledge-base\/snabb-introduktion-till-webbdesigner\/"},"modified":"2026-07-13T14:03:45","modified_gmt":"2026-07-13T14:03:45","slug":"snabb-introduktion-till-webbdesigner","status":"publish","type":"ht_kb","link":"https:\/\/cmacademy.events\/sv\/knowledge-base\/snabb-introduktion-till-webbdesigner\/","title":{"rendered":"Snabb introduktion till Webbdesigner"},"content":{"rendered":"\n<style>\n  \/* ------------------------------------------------------------\n     Webbdesigner-introduktion\n     Uppdaterad layout:\n     - bredare videokort\n     - smalare inspirationskort\n     - tv\u00e5kolumnslayout 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-video-language-note {\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 ig\u00e5ng med att designa evenemangets webbplats med denna snabba introduktion till Webbdesignern.\n    <\/p>\n  <\/div>\n\n  <div class=\"cm-website-resource-grid\" aria-label=\"Webbdesigner-resurser\">\n\n    <article class=\"cm-website-card\">\n      <div class=\"cm-website-main-copy\">\n        <span class=\"cm-website-label\">Webbdesigner<\/span>\n\n        <div class=\"cm-website-card-title\">\n          Webbdesigner-introduktion\n        <\/div>\n\n        <p>\n          Use the PDF introduction for a quick overview of the Webbdesigner and the basic tools for building your event website.\n        <\/p>\n      <\/div>\n\n      <a\n        href=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2026\/03\/Webbdesigner-SE.pdf\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"cm-website-button\"\n      >\n        \u00d6ppna PDF\n      <\/a>\n    <\/article>\n\n    <aside class=\"cm-website-video-card\">\n      <span class=\"cm-website-video-badge\">Videogenomg\u00e5ng<\/span>\n\n      <div class=\"cm-website-video-content\">\n        <div class=\"cm-website-video-copy\">\n          <div class=\"cm-website-video-title\">\n            Beh\u00f6ver du en mer detaljerad genomg\u00e5ng?\n          <\/div>\n\n          <p>\n            Titta p\u00e5 den fullst\u00e4ndiga genomg\u00e5ngen av Webbdesignern f\u00f6r en mer grundlig introduktion till hur du redigerar och bygger evenemangets webbplats.\n          <\/p>\n\n          <span class=\"cm-website-video-language-note\">\n            Videon \u00e4r p\u00e5 engelska.\n          <\/span>\n        <\/div>\n\n        <div class=\"cm-website-video-embed\">\n          <iframe\n            src=\"https:\/\/player.vimeo.com\/video\/1045264486?h=d8ac5268e4\"\n            title=\"Webbdesigner walkthrough\"\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          Utforska exempel p\u00e5 webbplatser\n        <\/div>\n\n        <p>\n          Bl\u00e4ddra i inspirationsbiblioteket f\u00f6r webbplatser f\u00f6r id\u00e9er och exempel som du kan anv\u00e4nda n\u00e4r du designar din egen evenemangswebbplats.\n        <\/p>\n\n        <span class=\"cm-website-inspiration-meta\">\n          Layouter, sektioner och designid\u00e9er\n        <\/span>\n      <\/div>\n\n      <div class=\"cm-website-spacer\"><\/div>\n\n      <a\n        href=\"https:\/\/cmacademy.events\/sv\/inspiration\/\"\n        class=\"cm-website-inspiration-link\"\n      >\n        Visa inspiration\n      <\/a>\n    <\/aside>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kom ig\u00e5ng med att designa evenemangets webbplats med denna snabba introduktion till Webbdesignern. Webbdesigner Webbdesigner-introduktion Use the PDF introduction for a quick overview of the Webbdesigner and the basic tools for building your event website. \u00d6ppna PDF Videogenomg\u00e5ng Beh\u00f6ver du en mer detaljerad genomg\u00e5ng? Titta p\u00e5 den fullst\u00e4ndiga genomg\u00e5ngen av Webbdesignern f\u00f6r en mer grundlig &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/cmacademy.events\/sv\/knowledge-base\/snabb-introduktion-till-webbdesigner\/\" class=\"more-link\">Forts\u00e4tt l\u00e4sa<span class=\"screen-reader-text\"> \u201dSnabb introduktion till Webbdesigner\u201d<\/span><\/a><\/p>\n","protected":false},"author":6,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[5901,437],"ht-kb-tag":[5825,5779,477],"class_list":["post-13109","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-webbplats-och-design","ht_kb_category-artiklar-for-support","ht_kb_tag-webbdesigner","ht_kb_tag-website","ht_kb_tag-website-designer-sv","entry"],"_links":{"self":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb\/13109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/comments?post=13109"}],"version-history":[{"count":11,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb\/13109\/revisions"}],"predecessor-version":[{"id":17592,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb\/13109\/revisions\/17592"}],"wp:attachment":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/media?parent=13109"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb-category?post=13109"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb-tag?post=13109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}