Divi: 로그인 양식으로 전역 헤더를 만드는 방법

다음을 사용하여 글로벌 헤더를 생성해야 합니다. 형태 DIVI에서 연결?

의 창조 형태 헤더에 로그인하면 큰 도움이 될 수 있습니다. 사용자 경험.

사용자가 언제든지 모든 페이지에서 로그인할 수 있으므로 구독 웹사이트 및 온라인 상점에 이상적입니다. 웹 사이트.

이번 튜토리얼에서는 디자인하는 방법을 보여드리겠습니다. 형태 사용자 정의 헤더의 사용자를 위한 온라인 로그인. 시작하자!

측량

다음은 이 자습서에서 만들 로그인 양식이 있는 사용자 정의 헤더의 빠른 미리보기입니다.

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

새로운 글로벌 헤더 추가

작업을 진행하려면 새 전역 헤더를 생성해야 합니다. 사이트 웹. 이렇게 하려면 WordPress 대시보드로 이동하여 Divi > Theme Builder로 이동합니다.

에 웹 사이트 템플릿 기본적으로 "전역 헤더 추가"를 클릭한 다음 "전역 헤더 작성"을 클릭합니다.

수평 로그인 양식의 Divi 글로벌 헤더 디자인

섹션 사용자 지정

글로벌 헤더 레이아웃 편집기에서 귀하의 개인화된 헤더를 생성할 수 있습니다. 웹 사이트 무에서 시작합니다. 시작하려면 일반 섹션에서 설정을 열고 다음을 업데이트하세요.

왼쪽 배경 그라데이션 색상:
오른쪽 배경 그라데이션 색상:
기울기 방향: 48도

내부 여백: 위쪽 10px, 아래쪽 10px, 왼쪽 20px, 오른쪽 20px

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

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

첫 번째 줄에 헤더 로고 추가

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

라인 추가

섹션의 열에 행을 추가하십시오.

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

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

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

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

이미지: [로고 추가(약 64 x 64픽셀)]

여백: 20px 오른쪽

라인의 파라미터 업데이트

더 진행하기 전에 회선 설정을 열고 다음을 업데이트하십시오.

사용자 지정 거터 너비 사용: 예
열 간격: 1
최대 너비: 25%
정렬: 왼쪽

내부 여백: 위쪽 0px, 아래쪽 0px

두 번째 줄에 가로 로그인 양식 추가

라인 추가

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

섹션의 열에 구조가있는 두 번째 행을 추가하십시오.

로그인 양식 추가

XNUMX열 행 안에 '연결' 모듈을 추가합니다.

기본 컨텐츠 제거

로그인 모듈 설정에서 가짜 제목과 본문 내용을 제거합니다.

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

로그인 양식을 너무 많이 디자인하기 전에 먼저 CSS 클래스와 사용자 정의 CSS를 로그인 모듈에 추가해 보겠습니다. Divi의 기본 제공 옵션으로 양식 디자인을 마무리하기 전에 양식의 기본 온라인 구조를 설정합니다.

또한 우리의 가이드를 참조하십시오 DIVI에서 슬라이딩 및 반응형 사이드 메뉴를 만드는 방법

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

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

연결 설명 CSS 상자에 다음 사용자 지정 CSS를 추가합니다.

margin-bottom: 0px !important

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

width: 100%;

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

padding: 5px 4% !important

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

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

또한 튜토리얼을 읽어보십시오 DIVI로 블로그 모듈로 블로그 페이지를 만드는 방법

헤더 레이아웃 설정을 열고 다음 사용자 정의 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는 로그인 필드와 버튼이 인라인(가로)으로 "비밀번호를 잊으셨습니까?"라는 메시지를 표시하도록 합니다. 숨겨지고 필드 사이에 작은 여백이 추가됩니다.