{"id":36,"date":"2026-07-19T15:28:11","date_gmt":"2026-07-19T13:28:11","guid":{"rendered":"https:\/\/new.mailfino.com\/newsletter-editor\/"},"modified":"2026-07-19T22:03:40","modified_gmt":"2026-07-19T20:03:40","slug":"newsletter-editor","status":"publish","type":"page","link":"https:\/\/new.mailfino.com\/en\/newsletter-editor\/","title":{"rendered":"Newsletter-Editor"},"content":{"rendered":"<style>\n:root {\n  --mf-ink: #14242c;\n  --mf-muted: #5b6b72;\n  --mf-blue: #287fc1;\n  --mf-blue-dark: #185e91;\n  --mf-navy: #07163d;\n  --mf-green: #103f39;\n  --mf-red: #df5948;\n  --mf-yellow: #f2c14e;\n  --mf-soft: #f4f7f6;\n  --mf-line: #dce4e1;\n  --mf-white: #fff;\n  --mf-shadow: 0 18px 50px rgba(20, 36, 44, 0.09);\n}\n\n#header .sub-menu {\n  padding: 8px;\n  border: 1px solid rgba(17, 51, 79, 0.12);\n  border-radius: 6px;\n  background: #ffffff;\n  box-shadow: 0 16px 38px rgba(17, 51, 79, 0.16);\n}\n\n#header .sub-menu .ct-menu-link {\n  min-height: 0;\n  padding: 12px 14px;\n  border-radius: 4px;\n  color: #172b38;\n}\n\n#header .sub-menu .menu-item:hover > .ct-menu-link,\n#header .sub-menu .menu-item:focus-within > .ct-menu-link,\n#header .sub-menu .current-menu-item > .ct-menu-link {\n  background: #edf4f8;\n  color: #24587b;\n}\n\nbody.page {\n  color: var(--mf-ink);\n  background: var(--mf-white);\n}\n\nbody.page .hero-section,\nbody.page #footer {\n  display: none;\n}\n\nbody.page .ct-container-full[data-vertical-spacing] {\n  --theme-content-vertical-spacing: 0;\n}\n\nbody.page .entry-content {\n  max-width: none;\n  margin: 0;\n  padding: 0;\n}\n\nbody.page .entry-content > * {\n  margin-block: 0;\n}\n\nbody.page header.ct-header {\n  position: sticky;\n  z-index: 80;\n  top: 0;\n}\n\nbody.admin-bar.page header.ct-header {\n  top: 32px;\n}\n\nbody.page .ct-header [data-row*=\"middle\"] {\n  --height: 82px;\n  background: rgba(255, 255, 255, 0.97);\n  border-bottom: 1px solid var(--mf-line);\n}\n\nbody.page .ct-header [data-id=\"menu\"] > ul > li > a {\n  color: var(--mf-ink);\n  font-size: 15px;\n  font-weight: 650;\n  letter-spacing: 0;\n  text-transform: none;\n}\n\nbody.page .ct-header [data-id=\"logo\"] .site-title a {\n  display: block;\n  width: 190px;\n  height: 48px;\n  overflow: hidden;\n  background: url(\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-logo.png\") center \/ contain no-repeat;\n  color: transparent;\n  font-size: 0;\n  white-space: nowrap;\n}\n\nbody.page .ct-header [data-id=\"search\"] {\n  display: none;\n}\n\n.mf-shell {\n  width: min(1240px, calc(100% - 64px));\n  margin-inline: auto;\n}\n\n.mf-page-hero {\n  position: relative;\n  width: 100vw;\n  max-width: none !important;\n  min-height: 590px;\n  margin-left: calc(50% - 50vw);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  background-color: var(--mf-navy);\n  background-image: var(--mf-page-art);\n  background-position: right center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  color: var(--mf-white);\n}\n\n.mf-page-hero::before {\n  position: absolute;\n  inset: 0;\n  background: rgba(4, 19, 58, 0.16);\n  content: \"\";\n}\n\n.mf-page-hero-inner {\n  position: relative;\n  z-index: 2;\n  width: 50%;\n  padding: 78px 0 86px;\n}\n\n.mf-kicker {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 20px;\n  color: #7ddcf0;\n  font-size: 13px;\n  font-weight: 800;\n  letter-spacing: 0;\n  text-transform: uppercase;\n}\n\n.mf-kicker::before {\n  width: 34px;\n  height: 2px;\n  background: var(--mf-yellow);\n  content: \"\";\n}\n\n.mf-page-hero h1 {\n  max-width: 690px;\n  margin: 0 0 26px;\n  color: var(--mf-white);\n  font-size: 58px;\n  line-height: 1.03;\n  letter-spacing: 0;\n}\n\n.mf-page-hero-copy {\n  max-width: 630px;\n  margin: 0;\n  color: #dbe6f6;\n  font-size: 20px;\n  line-height: 1.55;\n}\n\n.mf-cloud-hero {\n  min-height: 520px;\n  background: var(--mf-navy);\n}\n\n.mf-cloud-hero::before {\n  display: none;\n}\n\n.mf-cloud-layout {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: 0.88fr 1.12fr;\n  gap: 70px;\n  align-items: center;\n  padding: 62px 0;\n}\n\n.mf-cloud-copy h1 {\n  margin: 0 0 24px;\n  color: var(--mf-white);\n  font-size: 54px;\n  line-height: 1.04;\n}\n\n.mf-cloud-copy p:not(.mf-kicker) {\n  margin: 0;\n  color: #dbe6f6;\n  font-size: 19px;\n}\n\n.mf-cloud-screen {\n  margin: 0;\n  padding: 22px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.mf-cloud-screen img {\n  display: block;\n  width: 100%;\n}\n\n.mf-cloud-proof {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-cloud-proof div {\n  padding: 34px;\n}\n\n.mf-cloud-proof div + div {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-cloud-proof strong {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--mf-ink);\n  font-size: 18px;\n}\n\n.mf-cloud-proof span {\n  color: var(--mf-muted);\n}\n\n.mf-cloud-choice {\n  display: flex;\n  gap: 38px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 34px 40px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-soft);\n}\n\n.mf-cloud-choice h2 {\n  margin: 0 0 8px;\n  font-size: 28px;\n}\n\n.mf-cloud-choice p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-editor-hero {\n  min-height: 650px;\n  background: var(--mf-soft);\n  color: var(--mf-ink);\n}\n\n.mf-editor-hero::before {\n  display: none;\n}\n\n.mf-editor-layout {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: 0.8fr 1.2fr;\n  gap: 72px;\n  align-items: center;\n  padding: 78px 0;\n}\n\n.mf-editor-copy .mf-kicker {\n  color: var(--mf-blue-dark);\n}\n\n.mf-editor-copy h1 {\n  margin: 0 0 24px;\n  color: var(--mf-ink);\n  font-size: 56px;\n  line-height: 1.03;\n}\n\n.mf-editor-copy p:not(.mf-kicker) {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 19px;\n}\n\n.mf-editor-copy .mf-button-secondary {\n  border-color: var(--mf-blue-dark);\n  color: var(--mf-blue-dark);\n}\n\n.mf-editor-stage {\n  margin: 0;\n  padding: 16px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-editor-stage img {\n  display: block;\n  width: 100%;\n}\n\n.mf-editor-proof {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-editor-proof article {\n  padding: 32px 28px;\n}\n\n.mf-editor-proof article + article {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-proof strong {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--mf-ink);\n  font-size: 17px;\n}\n\n.mf-editor-proof span {\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-editor-elements {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-element {\n  min-height: 238px;\n  padding: 28px;\n  border-right: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n  background: var(--mf-white);\n}\n\n.mf-editor-element-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  min-height: 78px;\n  margin-bottom: 20px;\n}\n\n.mf-editor-element-head img {\n  display: block;\n  width: 76px;\n  height: 76px;\n  object-fit: cover;\n  border: 1px solid #d9e2e0;\n  border-radius: 6px;\n  background: #fff;\n}\n\n.mf-editor-element-head span {\n  display: block;\n  color: var(--mf-blue);\n  font-size: 12px;\n  font-weight: 800;\n}\n\n.mf-editor-element h3 {\n  margin-bottom: 8px;\n  font-size: 19px;\n}\n\n.mf-editor-element p {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-editor-detail {\n  display: grid;\n  grid-template-columns: 0.92fr 1.08fr;\n  gap: 76px;\n  align-items: center;\n}\n\n.mf-editor-detail-reverse {\n  grid-template-columns: 1.08fr 0.92fr;\n}\n\n.mf-editor-detail-reverse .mf-editor-detail-copy {\n  order: 2;\n}\n\n.mf-editor-detail-reverse .mf-editor-shot {\n  order: 1;\n}\n\n.mf-editor-detail-copy > p:not(.mf-eyebrow) {\n  color: var(--mf-muted);\n  font-size: 17px;\n}\n\n.mf-editor-shot {\n  margin: 0;\n  padding: 14px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-editor-shot img,\n.mf-editor-shot video {\n  display: block;\n  width: 100%;\n}\n\n.mf-editor-shot video {\n  aspect-ratio: 16 \/ 10;\n  background: #eef1f0;\n  object-fit: cover;\n}\n\n.mf-editor-shot figcaption {\n  padding: 12px 4px 0;\n  color: var(--mf-muted);\n  font-size: 13px;\n}\n\n.mf-editor-wide-shot {\n  margin: 40px 0 0;\n  padding: 14px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-editor-wide-shot img,\n.mf-editor-wide-shot video {\n  display: block;\n  width: 100%;\n}\n\n.mf-editor-wide-shot video {\n  aspect-ratio: 16 \/ 10;\n  background: #eef1f0;\n  object-fit: cover;\n}\n\n.mf-editor-wide-shot figcaption {\n  padding: 12px 4px 0;\n  color: var(--mf-muted);\n  font-size: 13px;\n}\n\n.mf-editor-wide-shot-dark {\n  border-color: rgba(255, 255, 255, 0.2);\n  background: #1b3138;\n}\n\n.mf-editor-wide-shot-dark figcaption {\n  color: #c9dbd7;\n}\n\n.mf-editor-tools {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-editor-tool {\n  padding: 30px;\n}\n\n.mf-editor-tools-visual .mf-editor-tool {\n  min-height: 360px;\n}\n\n.mf-editor-tool-icon {\n  display: block;\n  width: 96px;\n  height: 96px;\n  margin-bottom: 22px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  object-fit: cover;\n  background: var(--mf-soft);\n}\n\n.mf-editor-tool + .mf-editor-tool {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-tool span {\n  display: block;\n  margin-bottom: 18px;\n  color: var(--mf-red);\n  font-size: 12px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.mf-editor-tool p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-editor-tools-six {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.mf-editor-tools-six .mf-editor-tool:nth-child(n + 4) {\n  border-top: 1px solid var(--mf-line);\n}\n\n.mf-editor-tools-six .mf-editor-tool:nth-child(4) {\n  border-left: 0;\n}\n\n.mf-editor-tools-four {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.mf-editor-tools-four .mf-editor-tool:nth-child(n + 3) {\n  border-top: 1px solid var(--mf-line);\n}\n\n.mf-editor-tools-four .mf-editor-tool:nth-child(3) {\n  border-left: 0;\n}\n\n.mf-editor-note {\n  margin-top: 30px;\n  padding: 22px 24px;\n  border-left: 4px solid var(--mf-blue);\n  background: #eef5f8;\n  color: var(--mf-ink);\n}\n\n.mf-editor-note strong {\n  display: block;\n  margin-bottom: 5px;\n}\n\n.mf-editor-routes {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n}\n\n.mf-editor-routes-three {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.mf-editor-route {\n  padding: 36px;\n}\n\n.mf-editor-route + .mf-editor-route {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-route p {\n  color: var(--mf-muted);\n}\n\n.mf-text-link {\n  color: var(--mf-blue-dark);\n  font-weight: 750;\n  text-decoration: none;\n}\n\n.mf-feature-rows {\n  border-top: 1px solid var(--mf-line);\n}\n\n.mf-feature-row {\n  display: grid;\n  grid-template-columns: 110px 0.72fr 1.28fr;\n  gap: 28px;\n  padding: 34px 0;\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-feature-row > span {\n  color: var(--mf-red);\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.mf-feature-row h3,\n.mf-feature-row p {\n  margin: 0;\n}\n\n.mf-feature-row p {\n  color: var(--mf-muted);\n}\n\n.mf-section-dark .mf-feature-row {\n  border-color: rgba(255, 255, 255, 0.18);\n}\n\n.mf-section-dark .mf-feature-row p {\n  color: #c9dbd7;\n}\n\n.mf-architecture {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  overflow: hidden;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-architecture-step {\n  position: relative;\n  min-height: 250px;\n  padding: 36px;\n}\n\n.mf-architecture-step + .mf-architecture-step {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-architecture-step span {\n  display: block;\n  margin-bottom: 42px;\n  color: var(--mf-blue);\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.mf-architecture-step p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-directory-nav {\n  position: sticky;\n  z-index: 40;\n  top: 82px;\n  width: 100vw;\n  max-width: none !important;\n  margin-left: calc(50% - 50vw);\n  border-bottom: 1px solid var(--mf-line);\n  background: rgba(255, 255, 255, 0.97);\n}\n\n.mf-directory-nav-inner {\n  display: flex;\n  gap: 28px;\n  overflow-x: auto;\n  padding: 18px 0;\n}\n\n.mf-directory-nav a {\n  flex: 0 0 auto;\n  color: var(--mf-ink);\n  font-size: 14px;\n  font-weight: 700;\n  text-decoration: none;\n}\n\n.mf-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 32px;\n}\n\n.mf-button {\n  display: inline-flex;\n  min-height: 50px;\n  align-items: center;\n  padding: 13px 20px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  background: var(--mf-red);\n  color: var(--mf-white);\n  font-weight: 750;\n  text-decoration: none;\n  transition: transform 160ms ease;\n}\n\n.mf-button:hover {\n  color: var(--mf-white);\n  transform: translateY(-2px);\n}\n\n.mf-button-secondary {\n  border-color: rgba(255, 255, 255, 0.7);\n  background: transparent;\n}\n\n.mf-section {\n  width: 100vw;\n  max-width: none !important;\n  padding: 104px 0;\n  margin-left: calc(50% - 50vw);\n}\n\n.mf-section-soft {\n  background: var(--mf-soft);\n}\n\n.mf-section-dark {\n  background: var(--mf-green);\n  color: var(--mf-white);\n}\n\n.mf-section-head {\n  max-width: 820px;\n  margin-bottom: 48px;\n}\n\n.mf-eyebrow {\n  margin: 0 0 16px;\n  color: var(--mf-blue);\n  font-size: 13px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.mf-section h2 {\n  max-width: 820px;\n  margin: 0 0 20px;\n  color: var(--mf-ink);\n  font-size: 46px;\n  line-height: 1.09;\n  letter-spacing: 0;\n}\n\n.mf-section h3 {\n  margin: 0 0 12px;\n  color: var(--mf-ink);\n  font-size: 22px;\n  letter-spacing: 0;\n}\n\n.mf-section-lead {\n  max-width: 760px;\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 19px;\n  line-height: 1.6;\n}\n\n.mf-section-dark h2,\n.mf-section-dark h3 {\n  color: var(--mf-white);\n}\n\n.mf-section-dark .mf-section-lead {\n  color: #c9dbd7;\n}\n\n.mf-grid-2,\n.mf-grid-3,\n.mf-grid-4 {\n  display: grid;\n  gap: 16px;\n}\n\n.mf-grid-2 {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.mf-grid-3 {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.mf-grid-4 {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.mf-card {\n  min-height: 210px;\n  padding: 30px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: 0 7px 22px rgba(20, 36, 44, 0.04);\n}\n\n.mf-card p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-card-mark {\n  display: block;\n  margin-bottom: 24px;\n  color: var(--mf-red);\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.mf-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 72px;\n  align-items: center;\n}\n\n.mf-visual {\n  margin: 0;\n}\n\n.mf-visual img {\n  display: block;\n  width: 100%;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-checks {\n  margin: 28px 0 0;\n  padding: 0;\n  list-style: none;\n}\n\n.mf-checks li {\n  position: relative;\n  margin: 12px 0;\n  padding-left: 28px;\n  color: var(--mf-ink);\n}\n\n.mf-checks li::before {\n  position: absolute;\n  left: 0;\n  color: var(--mf-green);\n  font-weight: 900;\n  content: \"\u2713\";\n}\n\n.mf-section-dark .mf-checks li {\n  color: #e6f0ed;\n}\n\n.mf-compare {\n  width: 100%;\n  overflow: hidden;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  border-collapse: separate;\n  border-spacing: 0;\n  background: var(--mf-white);\n}\n\n.mf-compare th,\n.mf-compare td {\n  padding: 20px;\n  border-right: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n  text-align: left;\n  vertical-align: top;\n}\n\n.mf-compare th {\n  background: var(--mf-soft);\n  color: var(--mf-ink);\n}\n\n.mf-compare tr:last-child td,\n.mf-compare tr:last-child th {\n  border-bottom: 0;\n}\n\n.mf-compare th:last-child,\n.mf-compare td:last-child {\n  border-right: 0;\n}\n\n.mf-faq {\n  display: grid;\n  gap: 10px;\n}\n\n.mf-faq details {\n  padding: 22px 24px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n}\n\n.mf-faq summary {\n  color: var(--mf-ink);\n  font-weight: 750;\n  cursor: pointer;\n}\n\n.mf-faq p {\n  margin: 14px 0 0;\n  color: var(--mf-muted);\n}\n\n.mf-integration-groups {\n  display: grid;\n  gap: 54px;\n}\n\n.mf-integration-group h3 {\n  margin-bottom: 20px;\n  font-size: 26px;\n}\n\n.mf-integration-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 12px;\n}\n\n.mf-integration {\n  display: block;\n  position: relative;\n  min-height: 150px;\n  padding: 24px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  color: inherit;\n  text-decoration: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;\n}\n\na.mf-integration:hover,\na.mf-integration:focus-visible {\n  border-color: var(--mf-blue);\n  box-shadow: 0 12px 28px rgba(17, 51, 79, 0.12);\n  transform: translateY(-2px);\n}\n\n.mf-integration strong {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--mf-ink);\n  font-size: 17px;\n}\n\n.mf-integration p {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-status {\n  display: inline-block;\n  margin-bottom: 16px;\n  padding: 3px 7px;\n  border-radius: 4px;\n  background: #e5f2ed;\n  color: #235c4f;\n  font-size: 11px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.mf-status-beta {\n  background: #fff1ce;\n  color: #73510a;\n}\n\n.mf-final {\n  text-align: center;\n}\n\n.mf-final .mf-section-head {\n  margin-right: auto;\n  margin-left: auto;\n}\n\n.mf-final .mf-section-head h2,\n.mf-final .mf-section-lead {\n  margin-right: auto;\n  margin-left: auto;\n}\n\n.mf-final .mf-actions {\n  justify-content: center;\n}\n\n.mf-final .mf-button-secondary {\n  border-color: var(--mf-blue-dark);\n  color: var(--mf-blue-dark);\n}\n\n.mf-footer {\n  width: 100vw;\n  max-width: none !important;\n  padding: 54px 0 28px;\n  margin-left: calc(50% - 50vw);\n  background: #102027;\n  color: #b8c5ca;\n}\n\n.mf-footer-grid {\n  display: grid;\n  grid-template-columns: 1.45fr 1fr 1fr 1fr;\n  gap: 40px;\n}\n\n.mf-footer-logo {\n  width: 180px;\n  margin: 0 0 16px;\n  filter: brightness(0) invert(1);\n}\n\n.mf-footer h3 {\n  margin: 0 0 14px;\n  color: var(--mf-white);\n  font-size: 15px;\n}\n\n.mf-footer p,\n.mf-footer a {\n  color: #b8c5ca;\n  font-size: 14px;\n  text-decoration: none;\n}\n\n.mf-footer a {\n  display: block;\n  margin: 8px 0;\n}\n\n.mf-footer-bottom {\n  margin-top: 38px;\n  padding-top: 22px;\n  border-top: 1px solid #314149;\n  font-size: 13px;\n}\n\n@media (max-width: 999px) {\n  .mf-cloud-layout,\n  .mf-editor-layout {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-editor-detail,\n  .mf-editor-detail-reverse {\n    grid-template-columns: 1fr;\n    gap: 42px;\n  }\n\n  .mf-editor-detail-reverse .mf-editor-detail-copy,\n  .mf-editor-detail-reverse .mf-editor-shot {\n    order: initial;\n  }\n\n  .mf-editor-proof {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .mf-editor-elements {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .mf-editor-proof article:nth-child(3) {\n    border-left: 0;\n  }\n\n  .mf-editor-proof article:nth-child(n + 3) {\n    border-top: 1px solid var(--mf-line);\n  }\n\n  .mf-architecture {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-architecture-step + .mf-architecture-step {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-cloud-screen,\n  .mf-editor-stage {\n    max-width: 760px;\n  }\n\n  .mf-page-hero-inner {\n    width: 64%;\n  }\n\n  .mf-page-hero h1 {\n    font-size: 46px;\n  }\n\n  .mf-section {\n    padding: 80px 0;\n  }\n\n  .mf-section h2 {\n    font-size: 38px;\n  }\n\n  .mf-grid-4,\n  .mf-integration-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .mf-split {\n    grid-template-columns: 1fr;\n    gap: 46px;\n  }\n\n  .mf-footer-grid {\n    grid-template-columns: 1.4fr 1fr 1fr;\n  }\n}\n\n@media (max-width: 689px) {\n  body.admin-bar.page .ct-header {\n    top: 46px;\n  }\n\n  body.page .ct-header [data-id=\"logo\"] .site-title a {\n    width: 150px;\n    height: 40px;\n  }\n\n  .mf-shell {\n    width: min(100% - 32px, 1240px);\n  }\n\n  .mf-page-hero {\n    min-height: 760px;\n    align-items: flex-start;\n    background-position: center bottom;\n    background-size: auto 36%;\n  }\n\n  .mf-cloud-hero,\n  .mf-editor-hero {\n    min-height: 0;\n    background-image: none;\n  }\n\n  .mf-cloud-layout,\n  .mf-editor-layout {\n    gap: 38px;\n    padding: 48px 0 58px;\n  }\n\n  .mf-cloud-copy h1,\n  .mf-editor-copy h1 {\n    font-size: 38px;\n  }\n\n  .mf-cloud-proof {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-cloud-proof div {\n    padding: 26px 0;\n  }\n\n  .mf-cloud-proof div + div {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-cloud-choice {\n    display: block;\n    padding: 28px;\n  }\n\n  .mf-cloud-choice .mf-button {\n    margin-top: 22px;\n  }\n\n  .mf-feature-row {\n    grid-template-columns: 1fr;\n    gap: 10px;\n    padding: 28px 0;\n  }\n\n  .mf-editor-proof,\n  .mf-editor-elements,\n  .mf-editor-tools,\n  .mf-editor-routes {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-editor-proof article + article,\n  .mf-editor-proof article:nth-child(3),\n  .mf-editor-tool + .mf-editor-tool,\n  .mf-editor-tools-six .mf-editor-tool:nth-child(4),\n  .mf-editor-tools-four .mf-editor-tool:nth-child(3),\n  .mf-editor-route + .mf-editor-route {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-editor-element {\n    min-height: 0;\n  }\n\n  .mf-editor-tools-visual .mf-editor-tool {\n    min-height: 0;\n  }\n\n  .mf-editor-proof article:nth-child(n + 3) {\n    border-top: 1px solid var(--mf-line);\n  }\n\n  .mf-directory-nav {\n    top: 70px;\n  }\n\n  .mf-page-hero-inner {\n    width: 100%;\n    padding: 48px 0 300px;\n  }\n\n  .mf-page-hero h1 {\n    font-size: 38px;\n  }\n\n  .mf-page-hero-copy {\n    font-size: 17px;\n  }\n\n  .mf-section {\n    padding: 66px 0;\n  }\n\n  .mf-section h2 {\n    font-size: 32px;\n  }\n\n  .mf-grid-2,\n  .mf-grid-3,\n  .mf-grid-4,\n  .mf-integration-grid,\n  .mf-footer-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-card {\n    min-height: 0;\n    padding: 26px;\n  }\n\n  .mf-compare {\n    display: block;\n    overflow-x: auto;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mf-button {\n    transition: none;\n  }\n}\n\n<\/style>\n\n<section class=\"mf-page-hero mf-editor-hero\">\n  <div class=\"mf-shell mf-editor-layout\">\n    <div class=\"mf-editor-copy\">\n      <p class=\"mf-kicker\">Newsletter-Editor<\/p>\n      <h1>Newsletter, die Fachabteilungen selbst bearbeiten k\u00f6nnen<\/h1>\n      <p>Inhalte per Drag-and-Drop aufbauen, Vorlagen wiederverwenden, Bilder und Links pflegen, mobil pr\u00fcfen und als Test-E-Mail versenden.<\/p>\n      <div class=\"mf-actions\">\n        <a class=\"mf-button\" href=\"https:\/\/app.mailfino.de\/?mode=trial\">Im Demo-Konto testen<\/a>\n        <a class=\"mf-button mf-button-secondary\" href=\"#editor-im-detail\">Editor im Detail<\/a>\n      <\/div>\n    <\/div>\n    <figure class=\"mf-editor-stage\">\n      <img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-editor-impuls-2026-07-19.jpg\" alt=\"Aktuelle Oberfl\u00e4che des mailfino Newsletter-Editors mit moderner Impuls-Vorlage, Inhaltsbereichen und Gestaltungsoptionen\">\n    <\/figure>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\" id=\"editor-im-detail\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-editor-proof\">\n      <article><strong>Drag-and-Drop<\/strong><span>Text-, Bild- und Layoutbereiche visuell anordnen.<\/span><\/article>\n      <article><strong>Vorlagen &amp; Elemente<\/strong><span>Bew\u00e4hrte Strukturen f\u00fcr weitere Mailings nutzen.<\/span><\/article>\n      <article><strong>KI-Assistenz<\/strong><span>Newsletter-Texte entwerfen, \u00fcberarbeiten und \u00fcbersetzen.<\/span><\/article>\n      <article><strong>Pr\u00fcfen &amp; testen<\/strong><span>Mobile Vorschau aufrufen und Test-E-Mails versenden.<\/span><\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft\">\n  <div class=\"mf-shell mf-editor-detail\">\n    <div class=\"mf-editor-detail-copy\">\n      <p class=\"mf-eyebrow\">Visuell arbeiten<\/p>\n      <h2>Inhalte aufbauen, ohne jedes Mailing neu zu programmieren<\/h2>\n      <p>Der Drag-and-Drop-Editor bildet den normalen Redaktionsprozess ab. Inhaltsbereiche werden zusammengestellt, verschoben und direkt im Entwurf bearbeitet.<\/p>\n      <ul class=\"mf-checks\">\n        <li>Text-, Bild- und Layoutbereiche anordnen<\/li>\n        <li>Abst\u00e4nde und Gestaltung im Entwurf anpassen<\/li>\n        <li>Verlinkungen direkt am Inhalt hinterlegen<\/li>\n        <li>Personalisierungen in das Mailing einf\u00fcgen<\/li>\n      <\/ul>\n    <\/div>\n    <figure class=\"mf-editor-shot\">\n      <video autoplay muted loop playsinline controls preload=\"metadata\" poster=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-editor-drag-drop-blank-2026-07-19.jpg\" aria-label=\"Kurze Demonstration: Mehrere Newsletter-Bausteine werden per Drag-and-Drop eingesetzt und ein Bild wird mit KI erzeugt\">\n        <source src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-editor-drag-drop-ai-demo-2026-07-19.mp4\" type=\"video\/mp4\">\n        Ihr Browser unterst\u00fctzt die eingebettete Videowiedergabe nicht.\n      <\/video>\n      <figcaption>Vom leeren Newsletter zum Entwurf: \u00dcberschrift, Text, Bild und Schaltfl\u00e4che per Drag-and-Drop einsetzen und ein Bild mit KI erzeugen.<\/figcaption>\n    <\/figure>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Bausteine im Editor<\/p>\n      <h2>Aus wenigen Elementen entstehen unterschiedliche Newsletter-Layouts<\/h2>\n      <p class=\"mf-section-lead\">Die Elemente werden in den Entwurf gezogen, an der gew\u00fcnschten Stelle platziert und anschlie\u00dfend mit den jeweils passenden Optionen bearbeitet.<\/p>\n    <\/div>\n    <div class=\"mf-editor-elements\">\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/H1_Headline_180.png\" alt=\"\" loading=\"lazy\"><span>01<\/span><\/div>\n        <h3>\u00dcberschriften<\/h3><p>Inhalte gliedern und Hierarchien im Mailing sichtbar machen.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/SimpleText_180.png\" alt=\"\" loading=\"lazy\"><span>02<\/span><\/div>\n        <h3>Textbereiche<\/h3><p>Flie\u00dftext, Links und personalisierte Inhalte redaktionell pflegen.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/Image_180.png\" alt=\"\" loading=\"lazy\"><span>03<\/span><\/div>\n        <h3>Bilder &amp; Banner<\/h3><p>Visuelle Inhalte in einzelne Bereiche oder \u00fcber die gesamte Breite einsetzen.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/XButton_180.png\" alt=\"\" loading=\"lazy\"><span>04<\/span><\/div>\n        <h3>Schaltfl\u00e4chen<\/h3><p>Handlungsaufforderungen als klar erkennbare Ziele gestalten.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/Container_1Col_180.png\" alt=\"\" loading=\"lazy\"><span>05<\/span><\/div>\n        <h3>Einspaltige Layouts<\/h3><p>Inhalte ruhig und linear f\u00fcr unterschiedliche Bildschirmgr\u00f6\u00dfen aufbauen.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/Container_2Col_180.png\" alt=\"\" loading=\"lazy\"><span>06<\/span><\/div>\n        <h3>Mehrspaltige Layouts<\/h3><p>Text und Medien nebeneinander anordnen und mobil gesondert pr\u00fcfen.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/Spacer_180.png\" alt=\"\" loading=\"lazy\"><span>07<\/span><\/div>\n        <h3>Abstandhalter<\/h3><p>Vertikale Abst\u00e4nde kontrollieren, ohne leere Textzeilen zu verwenden.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/Divider_180.png\" alt=\"\" loading=\"lazy\"><span>08<\/span><\/div>\n        <h3>Trennlinien<\/h3><p>Abschnitte optisch voneinander abgrenzen und lange Mailings strukturieren.<\/p>\n      <\/article>\n      <article class=\"mf-editor-element\">\n        <div class=\"mf-editor-element-head\"><img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/styled_table_180.png\" alt=\"\" loading=\"lazy\"><span>09<\/span><\/div>\n        <h3>Tabellen<\/h3><p>Tabellarische Inhalte im Drag-and-Drop-Editor aufbauen und bearbeiten.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\">\n  <div class=\"mf-shell mf-editor-detail mf-editor-detail-reverse\">\n    <div class=\"mf-editor-detail-copy\">\n      <p class=\"mf-eyebrow\">Vorlagen und Wiederverwendung<\/p>\n      <h2>Mit einem verl\u00e4sslichen Ausgangspunkt beginnen<\/h2>\n      <p>Vorlagen und gespeicherte Entw\u00fcrfe helfen dabei, wiederkehrende Newsletter effizient aufzusetzen. Teams k\u00f6nnen so mit abgestimmten Grundstrukturen arbeiten, statt Layout und Aufbau jedes Mal neu zu beginnen.<\/p>\n      <ul class=\"mf-checks\">\n        <li>Vorlagen als Ausgangspunkt ausw\u00e4hlen<\/li>\n        <li>Wiederkehrende Elemente weiterverwenden<\/li>\n        <li>Entw\u00fcrfe f\u00fcr sp\u00e4tere Bearbeitung speichern<\/li>\n        <li>Benutzerkonten, Rechte und Freigaben administrieren<\/li>\n        <li>Vorlagen und Elemente im Team gemeinsam nutzen<\/li>\n      <\/ul>\n    <\/div>\n    <figure class=\"mf-editor-shot\">\n      <img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-vorlagen-2026-07-19.jpg\" alt=\"Aktuelle Auswahl verschiedener Newsletter-Vorlagen in mailfino\">\n      <figcaption>Vorlagen schaffen einen konsistenten Startpunkt f\u00fcr unterschiedliche Newsletter-Formate.<\/figcaption>\n    <\/figure>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">KI-Assistenz im Editor<\/p>\n      <h2>Newsletter-Texte schneller vorbereiten und weiterentwickeln<\/h2>\n      <p class=\"mf-section-lead\">Die KI-Assistenz unterst\u00fctzt direkt bei der redaktionellen Arbeit. Das Ergebnis bleibt ein bearbeitbarer Entwurf und kann vor dem Versand fachlich gepr\u00fcft werden.<\/p>\n    <\/div>\n    <div class=\"mf-editor-tools mf-editor-tools-four\">\n      <article class=\"mf-editor-tool\"><span>Entwerfen<\/span><h3>Mit einem ersten Text starten<\/h3><p>Aus einer inhaltlichen Vorgabe einen Ausgangsentwurf f\u00fcr den Newsletter erstellen.<\/p><\/article>\n      <article class=\"mf-editor-tool\"><span>\u00dcberarbeiten<\/span><h3>Formulierungen verbessern<\/h3><p>Vorhandene Newsletter-Texte sprachlich weiterentwickeln und anschlie\u00dfend redaktionell anpassen.<\/p><\/article>\n      <article class=\"mf-editor-tool\"><span>\u00dcbersetzen<\/span><h3>Texte in weitere Sprachen \u00fcbertragen<\/h3><p>Newsletter-Inhalte \u00fcbersetzen und das Ergebnis vor der Verwendung inhaltlich kontrollieren.<\/p><\/article>\n      <article class=\"mf-editor-tool\"><span>Bilder erzeugen<\/span><h3>Passende Motive vorbereiten<\/h3><p>Bilder per KI erzeugen und anschlie\u00dfend in den Newsletter-Entwurf \u00fcbernehmen.<\/p><\/article>\n    <\/div>\n    <div class=\"mf-editor-note\">\n      <strong>KI bleibt optional<\/strong>\n      In der Cloud ist die KI-Assistenz integriert. Selfhosting-Kunden verwenden einen eigenen Together.ai-API-Key. mailfino l\u00e4sst sich auch vollst\u00e4ndig ohne KI betreiben. An den KI-Dienst wird nur der eingegebene Newsletter-Text beziehungsweise Prompt \u00fcbermittelt; Kontakt- oder Empf\u00e4ngerdaten werden nicht automatisch \u00fcbertragen.\n    <\/div>\n    <figure class=\"mf-editor-wide-shot\">\n      <img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-ki-menu-2026-07-19.jpg\" alt=\"KI-Men\u00fc im mailfino Newsletter-Editor mit Funktionen zum Generieren, Verbessern und \u00dcbersetzen von Text\">\n      <figcaption>Die Textfunktionen der KI-Assistenz sind direkt im Editor erreichbar.<\/figcaption>\n    <\/figure>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Werkzeuge f\u00fcr die Redaktion<\/p>\n      <h2>Texte, Bilder und technische Details unter Kontrolle<\/h2>\n      <p class=\"mf-section-lead\">Der Editor deckt die t\u00e4gliche Inhaltsarbeit ab und l\u00e4sst zugleich Raum f\u00fcr die technische Bearbeitung.<\/p>\n    <\/div>\n    <div class=\"mf-editor-tools mf-editor-tools-six mf-editor-tools-visual\">\n      <article class=\"mf-editor-tool\">\n        <img decoding=\"async\" class=\"mf-editor-tool-icon\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/text-links.png\" alt=\"\" loading=\"lazy\">\n        <span>Text &amp; Links<\/span>\n        <h3>Inhalte direkt pflegen<\/h3>\n        <p>Texte bearbeiten, URLs, E-Mail-Adressen und Dateien verlinken. Personalisierungsfelder lassen sich in Inhalt, Betreff, Preheader\/Alternativtext und Links verwenden.<\/p>\n      <\/article>\n      <article class=\"mf-editor-tool\">\n        <img decoding=\"async\" class=\"mf-editor-tool-icon\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/typography-spacing.png\" alt=\"\" loading=\"lazy\">\n        <span>Gestaltung<\/span>\n        <h3>Schrift und Abst\u00e4nde abstimmen<\/h3>\n        <p>Schriftart, Gr\u00f6\u00dfe, Zeilenh\u00f6he, Breite, Innenabst\u00e4nde und Rahmen passend zum Element einstellen.<\/p>\n      <\/article>\n      <article class=\"mf-editor-tool\">\n        <img decoding=\"async\" class=\"mf-editor-tool-icon\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/image-editing.png\" alt=\"\" loading=\"lazy\">\n        <span>Bilder<\/span>\n        <h3>Medien passend einsetzen<\/h3>\n        <p>Bilder hochladen, skalieren, zuschneiden, rund oder mit abgerundeten Ecken darstellen, verlinken und mit Bild-Alt-Text versehen.<\/p>\n      <\/article>\n      <article class=\"mf-editor-tool\">\n        <img decoding=\"async\" class=\"mf-editor-tool-icon\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/html-editing.png\" alt=\"\" loading=\"lazy\">\n        <span>HTML<\/span>\n        <h3>Quelltext gezielt bearbeiten<\/h3>\n        <p>Den HTML-Code eines Elements oder des gesamten Newsletters f\u00fcr technische Feinabstimmungen bearbeiten.<\/p>\n      <\/article>\n      <article class=\"mf-editor-tool\">\n        <img decoding=\"async\" class=\"mf-editor-tool-icon\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/color-palette.png\" alt=\"\" loading=\"lazy\">\n        <span>Corporate Design<\/span>\n        <h3>Eigene Farbpalette hinterlegen<\/h3>\n        <p>Unternehmensfarben als RGB- oder Hex-Werte speichern und in weiteren Entw\u00fcrfen wiederverwenden.<\/p>\n      <\/article>\n      <article class=\"mf-editor-tool\">\n        <img decoding=\"async\" class=\"mf-editor-tool-icon\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/header-preheader.png\" alt=\"\" loading=\"lazy\">\n        <span>Header &amp; Preheader<\/span>\n        <h3>Technische Details kontrollieren<\/h3>\n        <p>Automatisch erzeugten Alternativtext und Preheader nutzen sowie bei Bedarf eigenen CSS-Code im Newsletter-Header erg\u00e4nzen.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Importieren, speichern und wiederverwenden<\/p>\n      <h2>Entw\u00fcrfe bleiben bearbeitbar und nachvollziehbar<\/h2>\n      <p class=\"mf-section-lead\">Der Editor unterst\u00fctzt nicht nur das Schreiben, sondern auch den Umgang mit wiederkehrenden und bereits vorhandenen Inhalten.<\/p>\n    <\/div>\n    <div class=\"mf-feature-rows\">\n      <article class=\"mf-feature-row\"><span>Start<\/span><h3>Vorlage oder HTML-Datei verwenden<\/h3><p>Einen neuen Newsletter aus einer System- oder eigenen Vorlage erstellen. Vorhandene HTML-Dateien lassen sich importieren, k\u00f6nnen je nach Aufbau aber nur eingeschr\u00e4nkt visuell bearbeitbar sein.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>Speichern<\/span><h3>Entwurf, Kopie oder Vorlage anlegen<\/h3><p>Den aktuellen Stand speichern, unter einem neuen Namen weiterf\u00fchren oder als Vorlage f\u00fcr k\u00fcnftige Newsletter bereitstellen.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>Export<\/span><h3>Entwurf als HTML-Datei sichern<\/h3><p>Den Newsletter zus\u00e4tzlich als HTML-Datei auf dem eigenen Computer speichern.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>Sicherung<\/span><h3>Autosave und fr\u00fchere Versionen nutzen<\/h3><p>Automatisches Speichern in einem gew\u00e4hlten Intervall aktivieren und fr\u00fchere Entwurfsversionen innerhalb der verf\u00fcgbaren Aufbewahrungszeit aufrufen.<\/p><\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-dark\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Qualit\u00e4t vor dem Versand<\/p>\n      <h2>Vorschau pr\u00fcfen, Testmail versenden, Entwurf \u00fcberarbeiten<\/h2>\n      <p class=\"mf-section-lead\">Vor dem eigentlichen Versand l\u00e4sst sich die mobile Darstellung simulieren und eine Test-E-Mail an ausgew\u00e4hlte Empf\u00e4nger senden.<\/p>\n    <\/div>\n    <div class=\"mf-feature-rows\">\n      <article class=\"mf-feature-row\"><span>01<\/span><h3>Responsive Optionen<\/h3><p>F\u00fcr Drag-and-Drop-Entw\u00fcrfe festlegen, wie Layouts auf kleineren Bildschirmen reagieren und welche Elemente mobil oder am Desktop sichtbar sind.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>02<\/span><h3>Mobile Styles gestalten<\/h3><p>Mit einem eigenen Designer Styles direkt f\u00fcr die mobile Ansicht festlegen und Elemente gezielt nur mobil oder nur am Desktop anzeigen.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>03<\/span><h3>Mobile Vorschau<\/h3><p>Den Entwurf in einer simulierten mobilen Ansicht kontrollieren und auff\u00e4llige Stellen vor dem Versand \u00fcberarbeiten.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>04<\/span><h3>Test-E-Mail<\/h3><p>Das Mailing in realen Postf\u00e4chern pr\u00fcfen und Inhalt, Links, Personalisierung sowie Absenderwirkung beurteilen.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>05<\/span><h3>E-Mail-Clients ber\u00fccksichtigen<\/h3><p>Mehrspaltige Layouts, Bilder, Abst\u00e4nde und technische Anpassungen insbesondere in relevanten Desktop- und Mobilprogrammen testen.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>06<\/span><h3>Personalisierte Browseransicht<\/h3><p>Empf\u00e4nger k\u00f6nnen den Newsletter bei Bedarf \u00fcber einen Link als personalisierte Webansicht im Browser \u00f6ffnen.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>07<\/span><h3>Versand gefahrlos simulieren<\/h3><p>F\u00fcr Tests lassen sich fiktive E-Mail-Adressen mit der Endung <code>.ap<\/code> verwenden. mailfino durchl\u00e4uft den Versandprozess, simuliert die Zustellung aber ohne eine reale E-Mail zu versenden.<\/p><\/article>\n    <\/div>\n    <figure class=\"mf-editor-wide-shot mf-editor-wide-shot-dark\">\n      <video autoplay muted loop playsinline controls preload=\"metadata\" poster=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-desktop-mobile-winter-poster-2026-07-19.jpg\" aria-label=\"Kurze Demonstration: Eine Winterurlaub-Vorlage wechselt im mailfino Editor zwischen Desktop- und Mobilmodus\">\n        <source src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-desktop-mobile-winter-2026-07-19.mp4\" type=\"video\/mp4\">\n        Ihr Browser unterst\u00fctzt die eingebettete Videowiedergabe nicht.\n      <\/video>\n      <figcaption>Desktop und Mobil im direkten Wechsel: Die Winterurlaub-Vorlage l\u00e4sst sich in beiden Ansichten kontrollieren und gezielt gestalten.<\/figcaption>\n    <\/figure>\n    <div class=\"mf-editor-note\">\n      <strong>Realistische Darstellung statt falscher Garantie<\/strong>\n      E-Mail-Programme interpretieren HTML teilweise unterschiedlich. Vorschau und Testmail unterst\u00fctzen die Pr\u00fcfung, garantieren aber keine identische Darstellung in jedem Client.\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Der vollst\u00e4ndige Newsletter-Prozess<\/p>\n      <h2>Der Editor ist mit Kontakten, Versand und Ergebnissen verbunden<\/h2>\n      <p class=\"mf-section-lead\">Ein Newsletter entsteht nicht isoliert. Zielgruppen, Einwilligungen, Versandstatus und Reporting geh\u00f6ren zum gleichen Arbeitsablauf.<\/p>\n    <\/div>\n    <div class=\"mf-feature-rows\">\n      <article class=\"mf-feature-row\"><span>Vorher<\/span><h3>Kontakte und Zielgruppen<\/h3><p>Adressverwaltung, Listen, Formulare und Einwilligungen bereiten die passenden Empf\u00e4nger f\u00fcr das Mailing vor.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>Vorbereitung<\/span><h3>Absender, Betreff und Empf\u00e4nger pr\u00fcfen<\/h3><p>Das fertige Mailing mit Versandangaben und der vorgesehenen Empf\u00e4ngerliste zusammenf\u00fchren.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>Versand<\/span><h3>Sofort, terminiert oder verteilt senden<\/h3><p>Newsletter unmittelbar versenden, f\u00fcr einen Zeitpunkt planen oder das Volumen \u00fcber Stunden beziehungsweise Tage verteilen.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>Automation<\/span><h3>Formularbasierte E-Mail-Serien aufbauen<\/h3><p>Nach einer Formularanmeldung eine vorbereitete Folge von E-Mails automatisch starten, etwa f\u00fcr Willkommen oder Follow-up.<\/p><\/article>\n      <article class=\"mf-feature-row\"><span>Danach<\/span><h3>Ergebnisse und Fehler auswerten<\/h3><p>Versandstatus, \u00d6ffnungen, Klicks, Abmeldungen und kategorisierte Versandfehler in Berichten nachvollziehen.<\/p><\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Cloud, Selfhosting oder Enterprise<\/p>\n      <h2>Der gleiche Produktkern, passend zu Ihrem Betriebsmodell<\/h2>\n    <\/div>\n    <div class=\"mf-editor-routes mf-editor-routes-three\">\n      <article class=\"mf-editor-route\">\n        <h3>mailfino Cloud<\/h3>\n        <p>Direkt im Demo-Konto starten und Editor, Vorlagen sowie den Versandprozess ohne eigene Installation kennenlernen.<\/p>\n        <a class=\"mf-text-link\" href=\"\/cloud\/\">Cloud kennenlernen \u2192<\/a>\n      <\/article>\n      <article class=\"mf-editor-route\">\n        <h3>mailfino Selfhosting<\/h3>\n        <p>Den Newsletter-Editor in der eigenen Umgebung betreiben und die Kontrolle \u00fcber den technischen Betrieb behalten.<\/p>\n        <a class=\"mf-text-link\" href=\"\/selfhosting\/\">Selfhosting ansehen \u2192<\/a>\n      <\/article>\n      <article class=\"mf-editor-route\">\n        <h3>mailfino Enterprise<\/h3>\n        <p>Individuelle Betriebs-, Integrations- und Projektanforderungen f\u00fcr gr\u00f6\u00dfere Organisationen abstimmen.<\/p>\n        <a class=\"mf-text-link\" href=\"https:\/\/enterprise.mailfino.de\/\">Enterprise-Angebot ansehen \u2192<\/a>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">H\u00e4ufige Fragen<\/p>\n      <h2>Fragen zum Newsletter-Editor<\/h2>\n    <\/div>\n    <div class=\"mf-faq\">\n      <details><summary>Brauche ich HTML-Kenntnisse?<\/summary><p>F\u00fcr die normale Arbeit mit dem Drag-and-Drop-Editor nicht. Der zus\u00e4tzliche HTML-Editor richtet sich an Anwender, die Quelltext gezielt bearbeiten m\u00f6chten.<\/p><\/details>\n      <details><summary>Kann ich bestehende Vorlagen weiterverwenden?<\/summary><p>mailfino unterst\u00fctzt Vorlagen und gespeicherte Entw\u00fcrfe als wiederverwendbare Ausgangspunkte. Ob und wie eine bestehende externe Vorlage \u00fcbernommen wird, sollte anhand der konkreten HTML-Datei gepr\u00fcft werden.<\/p><\/details>\n      <details><summary>Kann ich eine vorhandene HTML-Datei importieren?<\/summary><p>Ja. HTML-Dateien k\u00f6nnen importiert werden. Abh\u00e4ngig von Aufbau und Herkunft kann die visuelle Weiterbearbeitung jedoch eingeschr\u00e4nkt sein.<\/p><\/details>\n      <details><summary>Speichert mailfino Entw\u00fcrfe automatisch?<\/summary><p>Automatisches Speichern kann mit einem Intervall aktiviert werden. Zus\u00e4tzlich stehen fr\u00fchere Entwurfsversionen f\u00fcr eine begrenzte Aufbewahrungszeit zur Verf\u00fcgung.<\/p><\/details>\n      <details><summary>Kann ich Dateien im Newsletter anbieten?<\/summary><p>Ja. Dateien werden hochgeladen und als Download-Link in den Newsletter eingebunden. Die Anzahl ist nicht begrenzt; pro Datei gelten maximal 2 MB.<\/p><\/details>\n      <details><summary>Welche Bildformate kann ich hochladen?<\/summary><p>Dokumentiert sind JPG, JPEG, GIF und PNG mit einer maximalen Dateigr\u00f6\u00dfe von 2 MB.<\/p><\/details>\n      <details><summary>Kann ich die mobile Darstellung pr\u00fcfen?<\/summary><p>Ja. Die mobile Vorschau simuliert die Darstellung. Zus\u00e4tzlich empfiehlt sich eine Test-E-Mail, da E-Mail-Clients HTML unterschiedlich interpretieren k\u00f6nnen.<\/p><\/details>\n      <details><summary>Kann ich den Versand ohne echte Empf\u00e4nger testen?<\/summary><p>Ja. Bei fiktiven E-Mail-Adressen mit der Endung <code>.ap<\/code> wird der Versandprozess simuliert, ohne eine reale E-Mail zuzustellen.<\/p><\/details>\n      <details><summary>Kann der Editor im Team verwendet werden?<\/summary><p>Ja. Administratoren k\u00f6nnen Benutzerkonten sowie unterschiedliche Rechte und Freigaben verwalten. Vorlagen und Elemente lassen sich f\u00fcr die gemeinsame Nutzung im Team bereitstellen.<\/p><\/details>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft mf-final\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Produkt selbst beurteilen<\/p>\n      <h2>Erstellen Sie ein Testmailing im Demo-Konto<\/h2>\n      <p class=\"mf-section-lead\">So sehen Sie direkt, ob Bedienung, Vorlagen und Arbeitsablauf zu Ihrem Team passen.<\/p>\n    <\/div>\n    <div class=\"mf-actions\">\n      <a class=\"mf-button\" href=\"https:\/\/app.mailfino.de\/?mode=trial\">Demo-Konto anlegen<\/a>\n      <a class=\"mf-button mf-button-secondary\" href=\"\/integrationen\/\">Integrationen ansehen<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<footer class=\"mf-footer\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-footer-grid\">\n      <div>\n        <img decoding=\"async\" class=\"mf-footer-logo\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-logo.png\" alt=\"mailfino\">\n        <p>Newsletter- und Marketing-Automation f\u00fcr KMU \u2013 als Cloud oder Selfhosting.<\/p>\n      <\/div>\n      <div>\n        <h3>Produkt<\/h3>\n        <a href=\"\/newsletter-editor\/\">Newsletter-Editor<\/a>\n        <a href=\"\/#produkt\">Formulare &amp; Double-Opt-In<\/a>\n        <a href=\"\/#produkt\">Adressverwaltung<\/a>\n        <a href=\"\/#produkt\">Versand &amp; Reporting<\/a>\n      <\/div>\n      <div>\n        <h3>Betrieb<\/h3>\n        <a href=\"\/cloud\/\">Cloud<\/a>\n        <a href=\"\/selfhosting\/\">Selfhosting<\/a>\n        <a href=\"https:\/\/enterprise.mailfino.de\/\">Enterprise<\/a>\n      <\/div>\n      <div>\n        <h3>Unternehmen<\/h3>\n        <a href=\"https:\/\/www.mailfino.de\/impressum\/\">Impressum<\/a>\n        <a href=\"https:\/\/www.mailfino.de\/datenschutz\/\">Datenschutz<\/a>\n        <a href=\"https:\/\/www.mailfino.de\/agb\/\">AGB<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"mf-footer-bottom\">\u00a9 2026 4OfficeAutomation GmbH. Alle Rechte vorbehalten.<\/div>\n  <\/div>\n<\/footer>\n\n","protected":false},"excerpt":{"rendered":"<p>Newsletter mit mailfino erstellen: Editor, Vorlagen, Bilder, mobile Vorschau und Test-E-Mail.<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-36","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":23,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages\/36\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages\/36\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/media?parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}