생성하시겠습니까? 형태 로그인/로그아웃 버튼이 있는 Divi의 팝업 로그인?
의 창조 형태 로그인 팝업 Divi 사이트 디자인 및 로그인/로그아웃 사용자 경험을 개선하는 효과적인 방법이 될 수 있습니다.
아이디어는 형태 사용자가 페이지 헤더의 로그인 버튼을 클릭할 때마다 팝업으로 표시되는 로그인입니다.
이것은 사용자를 사용자 정의 로그인 페이지로 리디렉션하는 것보다 더 편리합니다.
이 튜토리얼에서는 Divi에서 사용자 지정 로그인 및 로그아웃 버튼이 있는 팝업 로그인 양식을 만듭니다.
Divi 로그인 모듈과 몇 가지 버튼 모듈을 사용하여 사용자가 다른 페이지로 리디렉션되지 않고 로그인 및 로그아웃할 수 있도록 하여 프런트 엔드에서 원활한 팝업 로그인 경험을 만들 것입니다.
시작하자!
측량
이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.
로그인 버튼과 로그아웃 버튼이 각각 어떻게 변경되는지 확인하십시오. 그리고 사용자가 로그인하면 현재 페이지에 유지됩니다.
또한 팝업 로그인 양식은 사용자가 로그아웃을 시도할 때마다 다른 "경고" 내용을 표시합니다.
시작하려면 무엇이 필요합니까?
이 팝업 로그인 양식과 사용자 정의 로그인/로그아웃 버튼을 사용자 정의 헤더에 추가할 수 있지만 미리 만들어진 헤더를 사용하여 프로세스 속도를 높이고 디자인을 빠르게 시작할 수 있습니다.
"Crowdfunding Layout Pack" 헤더 템플릿을 Divi 빌더로 가져오기
시작하려면 다운로드 Divi Crowdfunding 레이아웃 팩 머리글 및 바닥글 무료 . 이렇게 하려면 다음으로 이동하십시오. 블로그 게시물 .
그런 다음 이메일을 입력하여 zip 파일을 다운로드합니다.
그런 다음 가져올 준비가 되도록 파일의 압축을 풉니다.
파일을 테마 편집기로 가져오려면 다음 단계를 따르세요.
- Divi > 테마 빌더로 이동합니다.
- 이식성 아이콘을 클릭합니다.
- 이식성 팝업 창에서 가져오기 탭을 선택합니다.
- 가져올 이전에 다운로드한 압축을 푼 파일을 선택합니다.
- 클 리 커 쉬르 Divi 테마 빌더 가져오기 Canva의 제작된 채널아트 템플릿을.
- 가져온 헤더를 편집하려면 편집 아이콘을 클릭합니다.
Divi에서 팝업 로그인 양식 만들기
1부: 로그인 및 로그아웃 버튼 만들기
전역 헤더 레이아웃 편집기에서 레이어 뷰 모든 요소를 쉽게 볼 수 있습니다.
헤더 섹션의 맨 위 행에서 모듈을 삭제합니다. 소셜 미디어 팔로우 3열의 로그인 버튼 옆에 있습니다.
로그인 버튼 만들기
로그인 버튼을 만들려면 맨 위 행의 3열에 있는 버튼 모듈 설정을 엽니다.
디자인 탭에서 다음 항목을 업데이트합니다.
- 버튼 아이콘: 잠금 아이콘(스크린샷 참조)
- 버튼 아이콘 배치: 오른쪽
- 버튼을 가리킬 때만 아이콘 표시: 아니오
- 패딩: 0,5em(상단 및 하단), 2em(왼쪽), 0,7em(오른쪽)
탭 아래 Advnaced, 다음과 같이 버튼에 두 개의 사용자 정의 CSS 클래스를 할당합니다.
- CSS 클래스: et-toggle-popup et-popup-login-button
로그아웃 버튼 생성
로그아웃 버튼을 생성하려면 3열에 있는 기존 로그인 버튼을 복제하십시오.
두 버튼을 구별하는 데 도움이 되도록 각각의 레이블을 업데이트할 수 있습니다. 그런 다음 3열에서 복제 버튼 모듈 설정을 엽니다.
버튼 텍스트를 "로그아웃"으로 변경합니다.
디자인 탭에서 다음 항목을 업데이트합니다.
- 버튼 아이콘: 잠금 해제 아이콘(스크린샷 참조)
탭 아래 Advnaced, 다음과 같이 CSS 클래스 버튼을 업데이트합니다.
- CSS 클래스: et-toggle-popup et-popup-logout-button
첫 번째 클래스는 그대로 유지되지만 두 번째 클래스는 다릅니다.
2부: 팝업 섹션 만들기
버튼이 완료되면 팝업을 포함하는 팝업으로 사용할 팝업 섹션을 만들 준비가 된 것입니다. 형태 연결.
헤더 섹션 아래에 새 일반 섹션을 추가합니다.
그런 다음 섹션 내부에 XNUMX열 행을 삽입합니다.
섹션 설정
행을 업데이트하기 전에 섹션 설정을 엽니다.
탭 아래 내용, 섹션에 흰색 배경색을 지정합니다.
- 배경: #ffffff
탭 아래 디자인, 다음을 업데이트합니다.
- 폭: 100%
- 최대 너비: 800px(데스크톱), 80%(태블릿), 100%(휴대폰)
- 단면 정렬: 중앙
- 높이: 자동(데스크톱 및 태블릿), 100%(전화)
- 최대 높이: 100%
- 패딩: 0px(상단 및 하단)
- 둥근 모서리: 10px
- 박스 섀도우: 스크린샷 참조
- 상자 그림자 수직 위치: 0px
- 흐림 강도: 100픽셀
- 확산 강도: 50px
탭 아래 Advnaced, 다음을 업데이트합니다.
사용자 정의 CSS 클래스를 추가하십시오.
- CSS 클래스: et-popup-login
기본 요소에 사용자 정의 CSS 스니펫을 추가합니다.
overscroll-behavior: contain;가시성 및 위치 옵션을 업데이트합니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 자동
- 위치: 고정
- 위치: 센터 센터
- Z 인덱스: 999999
라인 설정
단면 설정이 적용된 상태에서 선 설정을 열고 다음 설계 설정을 업데이트합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 폭: 100%
- 최대 너비: 100%
- 패딩: 0px(상단), 5vh(하단)
3부: 팝업 닫기 아이콘 만들기
클릭 시 팝업을 닫거나 숨기는 팝업 닫기 아이콘을 생성하기 위해 Blurb 모듈을 사용할 것입니다.
행에 새 Blurb 모듈을 추가합니다.
모듈 설정을 열고 제목과 본문을 삭제합니다.
그런 다음 다음과 같이 아이콘을 추가합니다.
- 아이콘 사용 : 예
- 아이콘: "x" 아이콘(스크린샷 참조)
탭 아래 디자인, 다음을 업데이트합니다.
- 아이콘 색상: #004e43
- 이미지/아이콘 정렬: 중앙
- 아이콘 글꼴 크기 사용: 예
- 아이콘 글꼴 크기: 50px
- 너비: 50px
- 정렬 모듈: 오른쪽
- 높이: 50px
탭 아래 Advnaced, 다음과 같이 Blurb 모듈에 CSS 클래스를 추가합니다.
- CSS 클래스: et-toggle-popup
파트 4: "로그인" 및 "로그아웃" 로그인 양식 만들기
로그인 및 로그아웃 시 로그인 양식에 대해 다른 콘텐츠와 디자인을 갖기 위해 두 개의 다른 로그인 양식 모듈을 생성합니다.
첫 번째는 사용자가 "로그아웃"할 때마다 표시되는 로그인 양식입니다. 두 번째는 사용자가 "로그인"할 때마다 표시되는 로그인 양식입니다.
"로그아웃" 양식 생성
"로그아웃" 로그인 양식을 만들려면 행 내부의 Blurb 모듈 아이콘 아래에 새 로그인 모듈을 추가하십시오.
모듈 설정을 열고 다음 설정을 변경합니다.
콘텐츠 탭
- 현재 페이지로 이동: 예
- 배경색 사용: 아니요
디자인 탭
- 필드 배경색: rgba(0,78,67,0.05)
- 필드 포커스 배경색: rgba(0,78,67,0,15)
- 텍스트 정렬: 가운데
- 텍스트 색상: 어두운
- 제목 글꼴: Poppins
- 제목 글꼴 두께: 반 굵게
- 텍스트 색상: #000000
- 제목 줄 높이: 1,3em
- 본문 글꼴: Work Sans
버튼 스타일을 업데이트하려면 생성한 로그인 버튼의 버튼 스타일을 헤더 섹션 행의 세 번째 열에 복사합니다.
그런 다음 디자인 탭 아래의 연결 설정에 있는 버튼 옵션 그룹에 버튼 스타일을 붙여넣습니다.
다음으로 로그인 양식의 버튼 스타일을 다음과 같이 업데이트합니다.
- 단추
- 텍스트 색상: #ffffff
- 배경: #004e43
- 배경(호버): #00683c
- 테두리 너비: 0픽셀
- 패딩: 15px(상단 및 하단)
다음으로 크기 조정 옵션을 다음과 같이 업데이트합니다.
- 폭: 100%
- 최대 너비: 80%(데스크톱), 90%(태블릿), 95%(전화)
- 정렬 모듈: 중앙
고급 탭
탭 아래 Advnaced, 다음과 같이 CSS 클래스와 사용자 정의 CSS를 업데이트합니다.
- CSS 클래스: et-logged-out-form
연결 설명을 위한 사용자 정의 CSS:
width: 100% !important;
float: none !important;로그인 양식에 대한 사용자 정의 CSS:
width: 100% !important;
padding: 0px !important;이렇게 하면 데스크탑에서도 로그인 모듈이 전체 행/열 너비에 걸쳐 있게 됩니다.
"로그인" 양식 생성
이제 양식의 "로그아웃" 버전이 완료되었으므로 사용자 경험을 최대화하기 위해 다른 콘텐츠와 스타일을 갖는 "로그인" 버전을 만들어야 합니다.
"로그아웃" 로그인 양식을 만들려면 기존 로그인 양식을 복제하십시오.
다음으로 각 항목의 레이블을 업데이트합니다. 형태 각각 연결.
복제 설정("로그인" 양식)을 열고 사이트 제목을 로그인 양식 모듈의 제목에 동적 콘텐츠로 추가합니다.
그런 다음 사이트 제목 동적 콘텐츠 설정을 열고 다음과 같이 전후 콘텐츠를 업데이트합니다.
- 이전: "엘리건트 테마에서 로그아웃하려고 합니다."
- 후에: ". "
이렇게 하면 사이트에서 로그아웃하려는 사용자에게 멋진 동적 알림이 생성됩니다.
그런 다음 본문에 다음 H3 헤더를 추가합니다.
<h3>Are you sure?</h3>
로그인할 때 로그인 모듈의 내용을 본 적이 있다면 개인화된 "로그아웃" 링크가 포함된 개인화된 메시지가 있다는 것을 알고 있을 것입니다. 이 링크를 버튼처럼 보이게 하려면 본문 링크의 글꼴/텍스트 설정을 다음과 같이 사용자 정의해야 합니다.
- 탭 선택 (링크) 옵션에서 본문.
- 링크 글꼴: Work Sans
- 링크 글꼴 두께: 반 굵게
- 글꼴 스타일: TT
- 링크 텍스트 정렬: 가운데
- 링크 텍스트 색상: #ffffff
참고: 라이브 페이지에서 양식을 볼 때까지 이러한 결과를 미리 볼 수 없습니다.
탭 아래 Advnaced, 다음과 같이 CSS 클래스와 사용자 정의 CSS를 업데이트합니다.
- CSS 클래스: et-logged-in-form
로그인 양식에 대한 사용자 정의 CSS:
display:none;
파트 5: 사용자 지정 코드 추가
팝업 로그인 양식 기능에 필요한 사용자 정의 CSS 및 JQuery를 추가하려면 마지막 로그인 모듈 아래에 새 코드 모듈을 생성하십시오.
CSS
코드 모듈 설정을 열고 다음 CSS를 코드 상자에 붙여넣고 필요한 스타일 태그로 CSS를 래핑합니다.
/* hide popup section */
.et-popup-login {
display: none;
}
/* hide login button when logged in */
.logged-in .et-popup-login-button {
display: none !important;
}
/* hide logout button when logged out */
.et-popup-logout-button {
display: none !important;
}
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
display: inline-block !important;
}
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
display: none !important;
}
/* hide logged in form when logged out */
.et-logged-in-form {
display: none !important;
}
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
display: block !important;
}
/* style logout link within logged in form */
.et-logged-in-form a {
display: block;
padding: 15px 1em;
border-radius: 8px;
background: #004e43;
max-width: 400px;
margin: 20px auto 0px;
}
.et-toggle-popup {
cursor: pointer;
}
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
display: block !important;
}
body.et-fb .et-popup-login-button {
display: inline-block !important;
}CSS는 해당 로그인/로그아웃 버튼과 해당 버튼을 숨기거나 표시하기 위해 WordPress에 내장된 "연결된" 클래스를 사용합니다. 형태 사용자가 로그인하거나 로그아웃할 때마다 "로그인됨"/"로그아웃됨" 로그인 메시지가 표시됩니다.
제이쿼리
끝 스타일 태그 아래에 다음 JQuery를 붙여넣고 필요한 스크립트 태그로 코드를 래핑합니다.
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);이 스니펫은 사용자가 클래스 " 및 토글 팝업 (로그인 및 로그아웃 버튼과 프레젠테이션 아이콘 "x").
또한보십시오: Divi: 배경 마스크 설정 및 패턴 변형 옵션 사용 방법
완료되었습니다!
테마 빌더에서 템플릿에 대한 변경 사항을 저장하는 것을 잊지 마십시오. 저장되면 라이브 페이지에서 결과를 볼 수 있습니다.
최종 결과
다음은 컴퓨터, 태블릿 및 휴대전화의 최종 결과입니다.
로그인 버튼과 로그아웃 버튼이 어떻게 바뀌는지 확인하세요. 그리고 사용자가 로그인하면 현재 페이지에 머물게 됩니다.
또한 팝업 로그인 양식은 사용자가 로그아웃을 시도할 때마다 다른 "경고" 내용을 표시합니다.
지금 DIVI를 다운로드하세요!!!
결론
이 팝업 로그인 양식과 사용자 정의 로그인/로그아웃 버튼을 만들면 Divi의 로그인 양식을 창의적으로 사용하는 방법에 대한 통찰력을 얻을 수 있기를 바랍니다.
각 로그인 양식(또는 버튼)의 디자인과 내용을 자유롭게 조정하여 자신의 웹사이트에서 고유한 로그인 경험을 만드십시오.
또한 이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
