Divi에서 사용자 정의 전역 헤더에 대한 인라인 로그인 양식을 디자인하는 방법

헤더에 대한 인라인 로그인 양식을 만드는 것은 사용자 경험을 크게 향상시킬 수 있습니다. 사용자가 언제든지 또는 사이트의 모든 페이지에서 로그인하기가 정말 쉽기 때문에 회원 사이트 및 온라인 상점에 적합합니다. 이 튜토리얼에서는 사용자 정의 헤더 사용자 Divi Theme Builder를 위한 인라인 로그인 양식을 디자인하는 방법을 보여 드리겠습니다. 이를 위해 간단한 반응형 전역 헤더를 만든 다음 Divi의 로그인 모듈을 사용하여 헤더 오른쪽 상단에 컴팩트 인라인 로그인 양식을 디자인합니다. 빌드에는 약간의 사용자 정의 CSS가 필요하지만 모든 것이 준비되면 Divi의 기본 제공 디자인 옵션을 사용하여 모든 헤더 디자인과 쉽게 일치하도록 인라인 로그인 양식을 쉽게 사용자 정의할 수 있습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 인라인 로그인 양식이 있는 사용자 정의 헤더를 간단히 살펴보겠습니다.

다음은 태블릿 및 휴대폰 디스플레이의 인라인 로그인 양식입니다.

다음은 사용자가 로그인할 때 표시되는 메시지와 "로그아웃" 링크입니다.

인라인 로그인 양식 헤더 레이아웃 무료 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 테마 빌더 이식성 옵션을 사용하여 json 파일 중 하나를 Divi 테마 빌더에 추가하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오. 시작하는 데 필요한 모든 것입니다. Divi Theme Builder를 사용하여 처음부터 새로운 헤더 템플릿 레이아웃을 생성합니다.

새 전역 헤더 추가

작업을 진행하려면 웹 사이트에 대한 새 글로벌 헤더를 만들어야 합니다. 이렇게 하려면 WordPress 대시보드로 이동하여 Divi > 테마 빌더로 이동합니다.

기본 웹사이트 템플릿에서 "전역 헤더 추가"를 클릭한 다음 "전역 헤더 작성"을 클릭하십시오.

그런 다음 처음부터 빌드 옵션을 선택합니다.

인라인 로그인 양식으로 Divi 글로벌 헤더 디자인하기

섹션 사용자 정의

글로벌 헤더 레이아웃 편집기를 구성하면 사이트에 대한 사용자 정의 헤더를 처음부터 완전히 작성할 수 있습니다. 시작하려면 일반 섹션에 대한 설정을 열고 다음을 업데이트하십시오.

• 배경 그라데이션 왼쪽 색상:
• 배경 그라디언트 오른쪽 색상:
• 기울기 방향: 48deg
• 패딩: 상단 10픽셀, 하단 10픽셀, 왼쪽 20픽셀, 오른쪽 20픽셀

사용자 정의 헤더의 응답성을 높이기 위해 섹션의 기본 요소에 다음 사용자 정의 CSS를 추가합니다.

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

첫 번째 행에 헤더 로고 추가

이제 섹션이 준비되었으므로 첫 번째 행을 추가할 수 있습니다.

행 추가

섹션에 1열 행을 추가합니다.

로고 이미지가 있는 이미지 모듈 추가

1열 행에 이미지 모듈을 추가합니다. 여기에 헤더 로고를 추가합니다.

이미지 모듈 이미지 및 여백 업데이트

다음과 같이 이미지 설정을 업데이트합니다.

• 이미지: [로고 추가(약 64px x 64px)]

• 여백: 20px 오른쪽

행 설정 업데이트

더 진행하기 전에 행에 대한 설정을 열고 다음을 업데이트합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 25%
• 행 정렬: 왼쪽
• 패딩: 0px 상단, 0px 하단

두 번째 행에 인라인 로그인 양식 추가

행 추가

이제 첫 번째 행이 준비되었으므로 편집기에서 첫 번째 행이 왼쪽 섹션의 25%를 차지할 것임을 알 수 있습니다. 이것은 본질적으로 헤더의 로고에 대해 지정된 행이 될 것입니다. 인라인 로그인 양식과 오른쪽 메뉴에 대한 섹션 행을 만들어야 합니다.

섹션에 1열 구조의 두 번째 행을 추가합니다.

로그인 양식 추가

1열 행 안에 로그인 모듈을 추가합니다.

기본 콘텐츠 삭제

로그인 설정에서 모의 ​​제목과 본문 내용을 삭제합니다.

로그인 양식 사용자 정의 클래스 및 CSS 추가

인라인 로그인 양식의 디자인을 너무 깊이 이해하기 전에 먼저 사용자 정의 CSS 및 CSS 클래스를 로그인 모듈에 추가해 보겠습니다. 이렇게 하면 Divi의 기본 제공 옵션을 사용하여 양식에 최종 디자인을 적용하기 전에 양식의 기본 인라인 구조를 얻을 수 있습니다.

고급 탭에서 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 헤더 로그인 양식

로그인 설명 CSS 상자에 다음 사용자 정의 CSS를 추가합니다.

margin-bottom: 0px !important

그런 다음 로그인 양식 CSS 상자에 다음 사용자 정의 CSS를 추가합니다.

width: 100%;

로그인 필드 CSS 상자에 다음 사용자 정의 CSS를 추가합니다.

padding: 5px 4% !important

헤더 레이아웃 설정에 사용자 정의 CSS 추가

로그인 양식 모듈에 사용자 정의 CSS 클래스가 추가되었으므로 이 특정 로그인 양식만 대상으로 하는 사용자 정의 CSS를 추가할 수 있습니다.

헤더 레이아웃 설정을 열고 다음 사용자 정의 CSS를 추가하십시오.

.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}

이 CSS는 로그인 필드와 버튼을 인라인(가로)으로 표시하고 "비밀번호를 잊으셨습니까?"를 숨깁니다. 링크하고 필드 사이에 약간의 여백을 추가합니다.

행 설정

인라인 로그인 양식을 최종 수정하기 전에 다음과 같이 행 설정을 업데이트하겠습니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 행 정렬: 오른쪽
• 패딩: 0px 상단, 0px 하단

로그인 양식 디자인 설정

이제 로그인 양식 설정을 업데이트할 준비가 되었습니다. 로그인 양식 모듈 설정을 열고 다음을 업데이트하십시오.

• 배경색 사용: 아니요

필드 및 링크 텍스트

• 필드 배경: 색상: rgba(255,255,255,0.2)
• 필드 텍스트 색상: #ffffff
• 필드 글꼴: Lato
• 필드 텍스트 크기: 14px
• 텍스트 정렬: 오른쪽
• 링크 글꼴: Lato
• 링크 글꼴 스타일: 밑줄
• 링크 텍스트 색상: #ff3190

버튼 디자인

• 버튼 텍스트 크기: 15px
• 버튼 배경색: #ff3190
• 버튼 테두리 너비: 0px
• 버튼 글꼴: Lato
• 버튼 패딩: 상단 2px, 하단 2px
• 여백: 15px 하단
• 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 0px

두 번째 행에 메뉴 추가

메뉴 모듈

인라인 로그인 양식이 있으면 바로 아래에 메뉴를 추가할 수 있습니다.

로그인 양식 모듈 아래에 메뉴 모듈을 추가합니다.

메뉴 모듈 설정

다음과 같이 메뉴 설정을 업데이트합니다.

• 배경색: rgba(0,0,0,0)
• 메뉴 글꼴: Lato
• 메뉴 글꼴 두께: 굵게
• 메뉴 텍스트 색상: #ffffff
• 메뉴 텍스트 크기: 16px
• 텍스트 정렬: 오른쪽
• 드롭다운 메뉴 배경색: #ffffff
• 드롭다운 메뉴 선 색상: rgba(0,0,0,0)
• 드롭다운 메뉴 텍스트 색상: #000000
• 모바일 메뉴 배경색: #ffffff
• 모바일 메뉴 텍스트 색상: #000000
• 장바구니 아이콘 색상: #ffffff
• 검색 아이콘 색상: #ffffff
• 햄버거 메뉴 아이콘 색상: #ffffff

인라인 로그인 양식 헤더 저장

헤더 레이아웃 편집기를 종료하기 전에 레이아웃을 저장해야 합니다.

그런 다음 테마 빌더 설정도 저장합니다.

최종 결과

그게 다야!

이제 최종 결과를 확인해보자. 최종 결과를 보려면 웹사이트의 페이지를 방문하십시오.

다음은 데스크탑 디스플레이의 헤더입니다.

다음은 태블릿 디스플레이의 인라인 로그인 양식 헤더입니다.

다음은 전화 디스플레이의 인라인 로그인 양식입니다. 모바일 메뉴도 주목해주세요.

다음은 사용자가 로그인하면 표시되는 내용입니다.

마지막 생각들

인라인 로그인 양식이 있는 이 사용자 정의 글로벌 헤더는 모든 멤버십 사이트 또는 온라인 상점에서 확실히 유용할 것입니다. 약간의 사용자 정의 CSS를 사용하여 Divi의 로그인 모듈을 모든 웹사이트의 헤더 안에 잘 들어갈 우아한 인라인 로그인 양식으로 변환할 수 있었습니다. 이것이 다음 프로젝트에 도움이 되기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!