Maizzle 및 Tailwind CSS를 사용한 이메일 마케팅

이메일 마케팅은 이메일을 사용하여 비즈니스 제품 또는 서비스를 홍보하는 강력한 마케팅 채널입니다. 이메일 마케팅은 이메일 목록에 있는 고객에게 신제품, 할인 및 기타 서비스를 알릴 수 있는 마케팅의 한 형태입니다.

여기서는 Maizzle과 TailwindCSS로 HTML 이메일을 만드는 방법을 알려드리겠습니다.

1. 프로젝트 생성

새 프로젝트를 만드는 것은 매우 쉽습니다. 아래 코드와 같이 Maizzle Documentation을 볼 수 있습니다.

npx degit maizzle/maizzle "your-project-name"

다음 cd "your-project-name" 및 npm install

2. Tailwind CSS를 사용하여 이메일 편집

다음을 사용하여 localhost를 감시하는 개발 로컬 서버를 시작할 수 있습니다.

npm run dev

Maizzle에는 이미 사용할 수 있는 기본 제공 템플릿이 있으므로 시작 템플릿으로 사용할 수 있습니다.




메모:

HTML 이메일 구조는 table , tr 및 td를 레이아웃으로 사용합니다. 아이디어는 CSS 그리드와 동일하며 모든 열은 Tailwind를 사용하여 너비를 조정할 수 있는 그리드처럼 동작합니다class="w-1/2 sm:w-full".

3. imagekit.io와 이미지 연결

이메일 HTML을 사용하다 보면 이메일에 이미지를 넣어야 하는 경우가 많습니다. 이메일 HTML은 이미지 자산을 지원하지 않으므로 온라인에서 이미지를 호스팅하여 이미지를 가져올 수 있습니다. 여기서는 imagekit.io을 사용하여 내 이미지를 호스팅합니다. 간단히 업로드하고 src 이미지 태그에 넣을 이미지의 URL을 가져오면 완료됩니다. 이메일 길이 사이에 열리므로 크기를 줄이는 것을 잊지 마십시오.

4. 생산

다음 명령을 실행하여 인라인 CSS 및 기타 여러 최적화가 포함된 HTML 이메일을 보낼 준비가 된 프로덕션을 빌드합니다.

npm run build

빌드 프로덕션 폴더에서 빌드 프로덕션 결과를 볼 수 있습니다. 그런 다음 이메일 수신자에게 보낼 준비가 되도록 HTML 코드를 복사하여 붙여넣으십시오.

4. 첫 번째 HTML 이메일을 보냅니다.

Insert HTML by Designmodo 확장자 google chrome을 사용하여 첫 번째 HTML 이메일을 보냅니다.