{"id":13065,"date":"2026-03-27T15:37:58","date_gmt":"2026-03-27T15:37:58","guid":{"rendered":"https:\/\/cmacademy.events\/knowledge-base\/einfuehrung-in-den-website-designer\/"},"modified":"2026-07-13T08:16:21","modified_gmt":"2026-07-13T08:16:21","slug":"einfuehrung-in-den-website-designer","status":"publish","type":"ht_kb","link":"https:\/\/cmacademy.events\/de\/knowledge-base\/einfuehrung-in-den-website-designer\/","title":{"rendered":"Einf\u00fchrung in den Website-Designer"},"content":{"rendered":"\n<style>\n  \/* ------------------------------------------------------------\n     Einf\u00fchrung in den Website-Designer\n     Aktualisiertes Layout:\n     - breitere Videokarte\n     - schmalere Inspirationskarte\n     - zweispaltiges Layout innerhalb der Videokarte\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  \/* Prim\u00e4res Label: gleicher Stil wie beim 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  \/* Sekund\u00e4re Labels:\n     Video gr\u00fcn und Inspiration blau *\/\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: 154px !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: 184px !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      Starten Sie erfolgreich mit dem Design Ihrer Website \u2013 mit dieser kurzen Einf\u00fchrung in den Website-Designer.\n    <\/p>\n  <\/div>\n\n  <div class=\"cm-website-resource-grid\" aria-label=\"Ressourcen zum 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          Einf\u00fchrung in den Website-Designer\n        <\/div>\n\n        <p>\n          Die PDF-Einf\u00fchrung bietet einen schnellen \u00dcberblick \u00fcber den Website-Designer und die grundlegenden Werkzeuge zum Erstellen Ihrer Website.\n        <\/p>\n      <\/div>\n\n      <a\n        href=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2026\/03\/Website-Designer-Intro-DE-1.pdf\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"cm-website-button\"\n      >\n        PDF \u00f6ffnen\n      <\/a>\n    <\/article>\n\n    <aside class=\"cm-website-video-card\">\n      <span class=\"cm-website-video-badge\">Videoanleitung<\/span>\n\n      <div class=\"cm-website-video-content\">\n        <div class=\"cm-website-video-copy\">\n          <div class=\"cm-website-video-title\">\n            Ausf\u00fchrlichere Anleitung ben\u00f6tigt?\n          <\/div>\n\n          <p>\n            Das vollst\u00e4ndige Video bietet eine ausf\u00fchrlichere Einf\u00fchrung in das Bearbeiten und Erstellen Ihrer Website.\n          <\/p>\n        <\/div>\n\n        <div class=\"cm-website-video-embed\">\n          <iframe\n            src=\"https:\/\/player.vimeo.com\/video\/1045263444?h=2301732bec\"\n            title=\"Deutsche Videoanleitung zum 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          Website-Beispiele entdecken\n        <\/div>\n\n        <p>\n          Entdecken Sie im Website-Inspirationsbereich Ideen und Beispiele, die Sie beim Gestalten Ihrer eigenen Website verwenden k\u00f6nnen.\n        <\/p>\n\n        <span class=\"cm-website-inspiration-meta\">\n          Layouts, Bereiche und Designideen\n        <\/span>\n      <\/div>\n\n      <div class=\"cm-website-spacer\"><\/div>\n\n      <a\n        href=\"https:\/\/cmacademy.events\/de\/knowledge-base\/website-inspirationsbibliothek\/\"\n        class=\"cm-website-inspiration-link\"\n      >\n        Inspiration ansehen\n      <\/a>\n    <\/aside>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Starten Sie erfolgreich mit dem Design Ihrer Website \u2013 mit dieser kurzen Einf\u00fchrung in den Website-Designer. Website-Designer Einf\u00fchrung in den Website-Designer Die PDF-Einf\u00fchrung bietet einen schnellen \u00dcberblick \u00fcber den Website-Designer und die grundlegenden Werkzeuge zum Erstellen Ihrer Website. PDF \u00f6ffnen Videoanleitung Ausf\u00fchrlichere Anleitung ben\u00f6tigt? Das vollst\u00e4ndige Video bietet eine ausf\u00fchrlichere Einf\u00fchrung in das Bearbeiten und &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/cmacademy.events\/de\/knowledge-base\/einfuehrung-in-den-website-designer\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eEinf\u00fchrung in den Website-Designer\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[5894,226],"ht-kb-tag":[206,205],"class_list":["post-13065","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-website-und-design","ht_kb_category-supportartikel","ht_kb_tag-website-de","ht_kb_tag-website-designer-de","entry"],"_links":{"self":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/13065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/comments?post=13065"}],"version-history":[{"count":10,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/13065\/revisions"}],"predecessor-version":[{"id":17407,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/13065\/revisions\/17407"}],"wp:attachment":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/media?parent=13065"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb-category?post=13065"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=13065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}