Divi 헤더에 드롭다운 로그인 양식을 추가하는 방법

회원 웹사이트를 구축하고 있다면 로그인 경험을 고려하는 것이 매우 필요합니다. 물론 방문자가 기본 WordPress 로그인 페이지를 사용하도록 허용할 수 있지만 헤더에 로그인 양식을 포함하여 방문자를 더 쉽게 만들 수도 있습니다. 이 경우 헤더의 공간을 절약할 수 있도록 클릭 시 로그인 양식을 트리거해야 합니다. 그것이 바로 오늘의 Divi 튜토리얼에서 보여드릴 내용입니다. 처음부터 전역 헤더를 만들고 드롭다운 로그인 양식을 포함합니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

글로벌 헤더 템플릿을 무료로 다운로드하십시오

무료 글로벌 헤더 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

1. 새 글로벌 헤더 템플릿 생성

Divi 테마 빌더로 이동

WordPress 웹 사이트의 백엔드에서 Divi Theme Builder로 이동하여 시작하십시오. 거기에서 "글로벌 헤더 추가"를 클릭하십시오.

새 글로벌 헤더 추가

드롭다운 메뉴가 나타납니다. 처음부터 빌드를 시작하려면 "글로벌 헤더 빌드"를 선택하여 계속하십시오.

2. 헤더 디자인 빌드

섹션 #1 추가

배경 이미지

템플릿 편집기 안에 들어가면 이미 섹션이 있음을 알 수 있습니다. 섹션 설정을 열고 배경 이미지를 업로드하거나 배경 색상을 사용하세요.

간격

섹션의 디자인 탭으로 이동하고 다음으로 위쪽 및 아래쪽 패딩을 수정합니다.

• 상단 패딩: 10px
• 하단 패딩: 10px

섹션에 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 수정합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예
• 너비:
  • 데스크탑: 80%
  • 태블릿 및 전화: 95%
• 최대 너비: 2580px

간격

다음으로 패딩 값을 수정합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 왼쪽 패딩: 1%
• 오른쪽 패딩: 1%

주요 요소 CSS

열을 자동으로 수직으로 정렬하기 위해 고급 탭에서 행의 기본 요소에 다음 CSS 코드 줄을 추가합니다.

display: flex;
justify-content: center;
align-items: center;

열 1에 소셜 미디어 팔로우 모듈 추가

소셜 네트워크 추가

열 1의 소셜 미디어 팔로우 모듈부터 시작하여 모듈을 추가할 시간입니다. 원하는 소셜 네트워크를 추가합니다.

각 소셜 네트워크의 배경색을 개별적으로 변경

그런 다음 각 소셜 네트워크의 배경색을 개별적으로 흰색으로 변경합니다.

• 배경색: #ffffff

아이콘 설정

일반 모듈 설정으로 돌아가서 디자인 탭에서 아이콘 색상을 변경합니다.

• 아이콘 색상: #141414

국경

다음 테두리 설정에서 일부 둥근 모서리 설정을 적용합니다.

• 모든 모서리: 100px

2열에 버튼 모듈 추가

사본 추가

2열에서 필요한 유일한 모듈은 버튼 모듈입니다. 원하는 사본을 추가하십시오.

버튼 정렬

다음으로 모듈의 정렬을 변경하십시오.

• 버튼 정렬: 오른쪽

버튼 설정

그런 다음 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 12px
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #ff4700
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 2px

• 버튼 글꼴: 프라타
• 버튼 글꼴 스타일: 대문자

간격

그리고 간격 설정에 다음 패딩 값을 적용하여 버튼 설정을 완료합니다.

• 상단 패딩: 16px
• 하단 패딩: 16px
• 왼쪽 패딩: 24px
• 오른쪽 패딩: 24px

섹션 #2 추가

배경색

이전 섹션 바로 아래에 다른 섹션을 추가하고 다음 배경색을 사용합니다.

• 배경색: #fff4ef

간격

다음 디자인 탭에서 모든 기본 상단 및 하단 패딩을 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

행 #1 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 변경합니다.

• 열 높이 균등화: 예
• 너비:
  • 데스크탑: 80%
  • 태블릿 및 전화: 95%
• 최대 너비: 2580px

간격

간격 설정에서도 패딩 값을 수정합니다.

• 상단 패딩: 5px
• 하단 패딩: 5px
• 왼쪽 패딩: 2%
• 오른쪽 패딩: 2%

2열 설정

배경색

그런 다음 2열 설정을 열고 태블릿과 휴대폰에서만 배경색을 적용합니다.

• 데스크탑: /
• 태블릿 및 전화: #f2e8e3

간격

더 작은 화면 크기에도 일부 상단 및 하단 패딩을 추가하고 있습니다.

• 탑 패딩:
  • 태블릿 및 휴대전화: 25px
• 하단 패딩:
  • 태블릿 및 휴대전화: 25px

열 1에 메뉴 모듈 추가

메뉴 선택

다음으로 행에 메뉴 모듈을 추가합니다. 원하는 메뉴를 선택하세요.

로고 업로드

메뉴 모듈에 로고를 업로드하십시오.

배경색 제거

그런 다음 메뉴의 배경색을 제거합니다.

메뉴 텍스트 설정

모듈의 디자인 탭으로 이동하여 다음과 같이 메뉴 텍스트의 스타일을 지정합니다.

• 메뉴 글꼴: Prata
• 메뉴 텍스트 색상: #111821
• 메뉴 텍스트 크기: 18px
• 메뉴 줄 높이: 1.4em
• 텍스트 정렬: 오른쪽

드롭다운 메뉴 설정

드롭다운 메뉴 설정도 변경합니다.

• 드롭다운 메뉴 배경색: #fff4ef
• 드롭다운 메뉴 선 색상: #191919
• 드롭다운 메뉴 텍스트 색상: #191919
• 모바일 메뉴 배경색: #fff4ef
• 모바일 메뉴 텍스트 색상: #191919

아이콘 설정

그런 다음 아이콘 설정에서 아이콘 색상을 변경합니다.

• 장바구니 아이콘 색상: #191919
• 검색 아이콘 색상: #191919
• 햄버거 메뉴 아이콘 색상: #191919

사이징

다음 사이징 설정을 적용하여 모듈 설정을 완료합니다.

• 로고 최대 너비: 50px
• 폭: 100%

3. 드롭다운 로그인 양식 추가 및 기능 클릭

열 2에 Blurb 모듈 추가

제목 추가

이제 헤더의 기초가 구축되었으므로 로그인 드롭다운 트리거 및 양식을 만드는 데 집중할 수 있습니다. 가장 먼저 필요한 것은 행의 2열에 있는 Blurb 모듈입니다. 여기에 제목을 추가하겠습니다.

아이콘 선택

다음으로 아이콘을 선택하겠습니다.

아이콘 설정

모듈의 디자인 탭으로 이동하여 아이콘 설정을 다음과 같이 변경합니다.

• 아이콘 색상: #ffffff
• 원 아이콘: 예
• 원 색상: #ff4700
• 이미지/아이콘 배치: 왼쪽

제목 텍스트 설정

그런 다음 제목 텍스트의 스타일을 지정합니다.

• 제목 글꼴: Lato
• 제목 글꼴 두께: Heavy
• 제목 글꼴 스타일: 대문자
• 제목 텍스트 크기: 12px
• 제목 글자 간격: 3px

생기

또한 애니메이션 설정에서 이 모듈의 기본 애니메이션을 제거합니다.

• 이미지/아이콘 애니메이션: 애니메이션 없음

광고 제목 CSS

그리고 고급 탭의 광고 제목에 상단 여백을 추가합니다.

margin-top: 10px;

위치

마지막으로 위치 설정에서 모듈의 위치를 ​​변경합니다.

• 위치: 절대
• 위치: 센터

섹션 #2에 행 #2 추가

열 구조

로그인 양식을 추가하기 위해 다음 열 구조로 이전 행 아래에 새 행을 사용할 것입니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 변경합니다.

• 열 높이 균등화: 예
• 최대 너비: 2580px

간격

패딩 값도 수정하십시오.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 왼쪽 패딩: 2%
• 오른쪽 패딩: 2%

2열에 로그인 모듈 추가

콘텐츠 제거

열 2에 로그인 모듈을 추가하십시오. 내용 상자가 비어 있는지 확인하십시오.

배경색

다음으로 배경색을 변경합니다.

• 배경색: #ff4700

필드 설정

디자인 탭으로 이동하여 필드의 스타일을 지정합니다.

• 필드 배경색: rgba(0,0,0,0)
• 필드 텍스트 색상: rgba(255,255,255,0.73)
• 필드 왼쪽 패딩: 0px
• 필드 오른쪽 패딩: 0px
• 필드 글꼴: Lato
• 필드 텍스트 크기: 16px

• 필드 라인 높이: 1.8em
• 모든 모서리: 0px
• 필드 하단 테두리 너비: 1px
• 필드 하단 테두리 색상: #ffffff

버튼 설정

그런 다음 버튼 설정을 다음과 같이 수정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 12px
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #141414
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 2px
• 버튼 글꼴: 프라타

• 버튼 글꼴 스타일: 대문자
• 버튼 상단 패딩: 16px
• 버튼 하단 패딩: 16px

사이징

너비도 "100%"인지 확인하십시오.

• 폭: 100%

로그인 버튼 CSS

고급 탭의 로그인 버튼 CSS 상자에 상단 여백을 적용합니다.

margin-top: 30px;

위치

그리고 그에 따라 모듈을 재배치합니다.

• 위치: 절대
• 위치: 오른쪽 상단
• 수직 오프셋: 1px

행 #1의 Blurb 모듈에 CSS ID 추가

이제 필요한 모든 요소가 있으므로 클릭 기능에 집중할 수 있습니다. 먼저 Blurb 모듈을 열고 다음 CSS ID를 추가합니다.

• CSS ID: divi-login-toggle

행 #2의 로그인 모듈에 CSS ID 추가

다음에 로그인 모듈을 열고 다음 CSS ID를 적용하십시오.

• CSS ID: divi-login-form

로그인 모듈 아래에 코드 모듈 추가

그런 다음 로그인 모듈 바로 아래에 코드 모듈을 추가합니다.

스타일 및 스크립트 태그 추가

클릭 기능을 생성하기 위해 일부 CSS 및 JQuery 코드를 사용합니다. 해당 코드를 준비하기 위해 스타일 태그(CSS 코드용)와 스크립트 태그(JQuery 코드용)를 추가합니다.

스타일 태그 사이에 CSS 코드 삽입

스타일 태그 사이에 다음 CSS 코드 줄을 배치합니다.

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

스크립트 태그 사이에 JQuery 삽입

그리고 스크립트 태그 사이의 다음 코드:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Divi 테마 빌더 변경 사항 저장

이제 모든 것이 준비되었으므로 남은 일은 모든 Divi Theme Builder 변경 사항을 저장하고 결과를 보는 것뿐입니다!

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서는 멤버십 웹사이트를 구축할 때 헤더로 창의력을 발휘하는 방법을 보여주었습니다. 보다 구체적으로, 방문자가 WordPress 로그인 페이지로 이동하지 않고도 계정에 로그인할 수 있는 드롭다운 로그인 양식을 포함하는 방법을 보여주었습니다. 헤더 템플릿 JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.