CodeWatchers

Divi에서 플로팅 레이블로 뉴스레터 양식을 만드는 방법

Rifat Divi Tutorials Oct 17, 2021

우리는 일반적으로 잡지나 블로그 웹사이트에서 뉴스레터 양식을 발견합니다. 시선을 사로잡는 다양한 디자인의 형태는 언제나 우리의 시선을 끈다. 또한 창의적으로 디자인된 형태는 사용자 경험에 긍정적인 영향을 미치는 분야에서 매우 활발합니다. 양식에는 사용자가 입력해야 하는 값의 유형을 알려주는 자리 표시자가 있습니다. 따라서 누군가가 해당 필드의 정보를 추가하려고 할 때 자리 표시자와 입력 필드 이름을 동일하게 설정하고 자리 표시자를 보이지 않게 하고 처음에는 보이지 않던 레이블 이름을 팝업으로 만들면 어떻게 될까요?

Divi에서 플로팅 레이블로 뉴스레터 양식을 만드는 방법

약간 복잡하게 들리나요? 걱정하지 마세요. 오늘은 양식의 자리 표시자가 떠다니고 데이터를 입력하는 동안 맨 위로 올라가는 Divi 에서 양식을 디자인하는 방법을 보여 드리겠습니다. 시작하겠습니다.

시사

오늘의 양식이 어떻게 생겼는지 간단히 살펴보세요.

뉴스레터 양식 디자인하기

이메일 옵틴 양식 작성

양식을 추가할 Divi 빌더가 있는 페이지를 엽니다. 섹션으로 이동하여 1열 행을 추가합니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

이제 열에 이메일 옵션 양식 모듈을 추가합니다.

이메일 선택 모듈에 대한 설정을 엽니다. 콘텐츠 탭에서 텍스트를 변경합니다.

이메일 제공과 연결하는 것을 잊지 마십시오. 연결이 없으면 양식이 라이브 페이지에 나타나지 않습니다.

다음으로, 폼에 멋진 눈 진정 색상을 추가하십시오.

  • 배경색: #8B80F9

디자인 탭에서 양식 레이아웃을 업데이트하십시오.

  • 레이아웃: 상단에 본체, 하단에 양식

이제 그에 따라 필드 속성을 변경합니다.

  • 필드 배경색: 투명
  • 필드 텍스트 색상: #ffffff
  • 필드 여백: 1.5em 상단
  • 필드 패딩: 위쪽 0.5em, 아래쪽 0.5em, 왼쪽 1em, 오른쪽 1em
  • 필드 텍스트 크기: 1.2em
  • 필드 줄 높이: 2em

다음으로 테두리 스타일을 변경합니다.

  • 모서리가 둥근 필드: 0px
  • 필드 하단 테두리 너비: 2px
  • 필드 하단 테두리 색상: #ffffff

이제 제목 글꼴 스타일을 변경합니다.

  • 제목 글꼴 두께: 굵게
  • 제목 글꼴 스타일: TT
  • 제목 텍스트 정렬: 가운데

이제 버튼을 변경합니다.

  • 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 텍스트 색상: #8B80F9
  • 버튼 배경색: #ffffff
  • 버튼 문자 간격: 0.1em
  • 버튼 글꼴 두께: 굵게
  • 버튼 글꼴 스타일: TT

이제 양식에 최대 너비와 패딩을 추가해 보겠습니다. 우리 디자인에 대한 마지막 조정입니다.

  • 최대 너비: 500px
  • 패딩: 위쪽 5%, 아래쪽 5%, 왼쪽 3%, 오른쪽 3%

마지막으로 디자인에 CSS 클래스를 추가하여 디자인에 CSS 및 JQuery 코드를 추가할 코딩 섹션에서 대상을 지정할 수 있습니다.

  • CSS 클래스: et-float-labels

사용자 정의 코드 추가

CSS 및 JQuery 코드를 추가할 디자인 아래에 코드 모듈을 추가합니다.

CSS 코드

이제 아래에 작성된 코드를 복사하여 코드 모듈에 붙여넣습니다. 스타일 태그 안에 코드를 보관해야 합니다. 

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}

제이쿼리 코드

이제 Script 태그를 추가하고 다음 JQuery 코드를 붙여넣습니다. 

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  var $floatLabelField = $(".et-float-labels p");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

최종보기

최종 디자인은 다음과 같습니다.

결론

따라서 Divi 에서 창의적인 뉴스레터 양식을 만드는 것이 매우 쉽고 매우 짧은 시간에 플로팅 레이블 이메일 수신 동의 양식을 만들 수 있습니다. 필요에 따라 디자인을 사용자 정의하십시오. 사용자 정의 코드는 레이블을 떠 있게 만드는 데 매우 중요하므로 태그 안에 조심스럽게 넣으십시오. 이 디자인이 마음에 드셨으면 좋겠습니다. 그렇다면 Divi를 사랑하는 친구들과 공유해 보세요. 이와 같은 Divi 튜토리얼을 더 보려면 업데이트를 구독하세요.

Divi WordPress Theme