Divi 이메일 Optin 모듈의 이름 필드를 제거하는 방법

오늘의 튜토리얼에서는 Divi Email Optin Module의 이름 필드를 제거하는 방법을 보여 드리겠습니다. 이름 필드를 삭제하는 것은 이메일 옵틴 모듈의 표준인 이름과 성 필드가 시각적으로 나타나지 않도록 하는 것만이 아닙니다. 그것은 또한 기능에 관한 것입니다. 기본적으로 이름과 이메일 주소는 구독에 필요합니다. 그렇기 때문에 이름 필드를 보이지 않게 만드는 것만으로는 프로세스에 도움이 되지 않습니다.

그러나 작업을 완료하는 데 도움이 되도록 이름 필드를 시각적으로 제거 하고 기능적으로도 작동하도록 하는 방법을 보여줍니다.

결과

이 포스트를 차근차근 따라하시면 ​​다음과 같은 결과를 얻으실 수 있습니다.

이메일 Optin 모듈의 이름 필드를 제거하려는 이유

이름 필드를 제거하려는 몇 가지 이유가 있을 수 있습니다. 이유를 모르겠다면; 아래 나열된 두 가지 이유를 살펴보십시오.

방문자의 시간을 절약하려면

첫 번째 이유는 사용자 경험을 염두에 두는 것입니다. 이메일 필드만 요청하면 방문자가 귀하와 빠르게 상호 작용할 수 있습니다. 그들이 해야 할 유일한 일은 그들의 이메일 주소를 입력하는 것이고 당신은 그들이 관심 있는 콘텐츠를 제공하게 될 것입니다.

장벽을 더 작게 만들기 위해/빠른 행동에 의존

사람들이 웹에서 접하는 모든 선택 모듈을 작성해야 한다면 아마도 시간이 부족할 것입니다. Optin 양식은 오늘날 모든 종류의 웹사이트에 포함되어 있습니다. 사람들이 그들에게 매료되었던 시대는 끝났습니다. 그들이 구독하기 위해 너무 많은 노력을 기울여야 한다는 것을 알면(읽기: 너무 많은 필수 필드를 완료해야 함), 아마 그냥 무시할 것입니다. 그러나 이메일 주소만 묻는다면 그들이 그것에 대해 괜찮을 가능성이 더 큽니다. 이메일 주소를 입력하는 데 최대 5초가 소요됩니다(인간의 평균 주의 시간 7초 미만).

Divi 이메일 Optin 모듈의 이름 필드를 제거하는 방법

YouTube 채널 구독

더 이상 지체하지 않고 이 작업을 수행해 보겠습니다.

새 페이지 추가

가장 먼저 해야 할 일은 새 페이지를 추가하거나 이메일 필드만 있는 이메일 옵틴 모듈을 배치할 페이지를 여는 것입니다.

이메일 옵틴 모듈 추가

해당 페이지에서 원하는 위치에 Email Optin Module을 추가하십시오. Email Optin 모듈로 페이지를 미리 보면 다음과 같이 표시됩니다.

아무 필드도 작성하지 않고 구독 버튼을 클릭하면 작동하지 않는다는 것을 알 수 있습니다. 기본적으로 이메일 옵틴 모듈이 작동하려면 이름과 이메일 값이 필요합니다. 그렇기 때문에 필드를 사라지게 만드는 것(그러나 여전히 존재함)이 작동하지 않습니다. 그것들을 제거해도 작동하지 않습니다.

그러나 할 수 있는 일은 이름 필드에 기본값을 추가하는 것입니다. 필드에 값이 있는지 확인하는 '*'와 같은 것을 사용할 수 있습니다. 우리가 해야 할 또 다른 일은 입력 필드에 연결된 레이블을 삭제하는 것입니다. 이 모든 것을 달성하기 위해 일부 jQuery 코드와 CSS 코드를 사용할 것입니다.

CSS 코드 추가

CSS 코드를 추가하는 것으로 시작하겠습니다. CSS 코드는 두 필드가 페이지에 표시되지 않도록 합니다. 기능적인 부분의 경우 jQuery 코드 라인을 사용해야 합니다.

CSS 코드를 특정 페이지 또는 전체 웹사이트에 적용할 수 있습니다. 사용할 방법은 이메일 필드에만 코드 모듈을 사용하려는 빈도에 따라 다릅니다. Email Optin Module을 여러 페이지에서 여러 번 사용하려면 두 번째 방법을 사용하십시오. 한 페이지만 계산하려면 첫 번째 방법을 사용하세요.

특히 한 페이지에 CSS 코드 추가

특히 한 페이지에 CSS 코드를 추가하려면 작업 중인 페이지에서 다음 아이콘을 클릭하십시오.

나타나는 화면에서 다음 CSS 코드 줄을 복사하여 붙여넣습니다.

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

테마 옵션에 CSS 코드 추가

전체 웹사이트에 CSS 코드를 추가하려면 WordPress 대시보드 > Divi > 테마 옵션 > 일반 탭으로 이동하고 다음 CSS 코드 줄을 사용자 정의 CSS 필드에 추가합니다.

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

jQuery 코드 추가

계속해서 필요한 jQuery 코드를 추가하겠습니다. jQuery 코드를 추가하려면 두 가지 가능성도 있습니다. 하나의 특정 페이지에 적용되도록 코드를 추가하거나 전체 웹사이트에 코드를 추가하는 것입니다.

특히 한 페이지에 jQuery 코드 추가(코드 모듈)

특히 한 페이지에 jQuery 코드를 추가하려면 Email Optin 모듈 바로 아래에 코드 모듈을 추가하십시오. 코드 모듈을 열고 다음 jQuery 코드 줄을 그 안에 넣습니다.

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

레이블을 제거했으므로 이메일 주소 필드의 값에 아무 것도 포함되지 않도록 하고 있습니다. 레이블을 보완하고 사람들이 무엇을 입력해야 하는지 알 수 있도록 대신 자리 표시자를 사용하고 있습니다. 이 경우 자리 표시자는 '이메일 주소'이지만 자유롭게 다른 것으로 바꿔도 됩니다.

테마 옵션에 jQuery 코드 추가

jQuery 코드를 전체 웹 사이트에 적용하려면 테마 옵션에 배치할 수 있습니다. 그렇게 하려면 WordPress 대시보드 > Divi > 테마 옵션 > 통합으로 이동하여 다음 jQuery 코드 줄을 웹사이트 헤드에 배치합니다.

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

결과

이 게시물의 모든 단계를 수행하고 CSS 및 jQuery 코드를 특정 페이지 또는 웹사이트의 모든 페이지에 적용하면 다음과 같은 결과를 얻을 수 있습니다.

마지막 생각들

이 게시물에서는 이메일 주소 필드만 있는 이메일 옵틴 모듈을 구현하는 방법을 보여주었습니다. 그러한 결과를 얻고자 하는 이유는 효율성 때문입니다. 이메일 주소만 요청하면 청중이 구독하는 데 더 적은 노력을 들이고 이메일 목록을 더 빨리 작성할 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

adichrisworo / shutterstock.com의 주요 이미지