Divi: Cách tạo biểu mẫu đăng nhập bật lên

Bạn có muốn tạo một hình thức cửa sổ bật lên đăng nhập trong Divi bằng các nút đăng nhập/đăng xuất?

Việc tạo ra một hình thức cửa sổ bật lên đăng nhập trong Divi có thể là một cách hiệu quả để cải thiện thiết kế trang web của bạn và trải nghiệm người dùng đăng nhập / đăng xuất. 

Ý tưởng là tạo ra một hình thức đăng nhập hiển thị trong cửa sổ bật lên mỗi khi người dùng nhấp vào nút đăng nhập trong tiêu đề trang. 

Điều này thuận tiện hơn việc chuyển hướng người dùng đến trang đăng nhập tùy chỉnh.

Trong hướng dẫn này, chúng tôi sẽ tạo biểu mẫu đăng nhập bật lên với các nút đăng nhập và đăng xuất tùy chỉnh trong Divi. 

Sử dụng mô-đun Đăng nhập Divi và một vài mô-đun Nút, chúng tôi sẽ tạo trải nghiệm đăng nhập cửa sổ bật lên liền mạch trên giao diện người dùng bằng cách cho phép người dùng đăng nhập và đăng xuất mà không bị chuyển hướng đến trang khác.

Hãy bắt đầu!

khảo sát

Dưới đây là một cái nhìn nhanh về thiết kế mà chúng tôi sẽ tạo trong hướng dẫn này.

Chú ý cách nút đăng nhập và nút đăng xuất thay đổi tương ứng. Và khi người dùng đăng nhập, họ sẽ ở lại trang hiện tại. 

Ngoài ra, biểu mẫu đăng nhập bật lên hiển thị nội dung "cảnh báo" khác nhau mỗi khi người dùng cố gắng đăng xuất.

Những gì bạn cần để bắt đầu

Mặc dù bạn có thể thêm biểu mẫu đăng nhập bật lên này và các nút đăng nhập / đăng xuất tùy chỉnh vào bất kỳ tiêu đề tùy chỉnh nào, chúng tôi sẽ sử dụng tiêu đề được tạo sẵn để tăng tốc quá trình và bắt đầu thiết kế một cách nhanh chóng.

Nhập mẫu tiêu đề "Gói bố cục huy động vốn cộng đồng" vào trình tạo Divi

Để bắt đầu, hãy tải xuống Divi Crowdfunding Layout Pack Header and Footer miễn phí . Để làm điều này, hãy truy cập bài đăng trên blog .

Sau đó, nhập email của bạn để tải xuống tệp zip.

Sau đó, giải nén tệp để sẵn sàng nhập.

Để nhập tệp vào trình chỉnh sửa chủ đề, hãy làm theo các bước sau:

1. Đi tới Divi> Theme Builder.
2. Nhấp vào biểu tượng khả năng di động.
3. Trong cửa sổ bật lên Khả năng di động, hãy chọn tab nhập.
4. Chọn tệp đã giải nén đã tải xuống trước đó để nhập.
5. Cliquer sur Nhập Trình tạo chủ đề Divi Templates.
6. Nhấp vào biểu tượng chỉnh sửa để chỉnh sửa tiêu đề đã nhập.

Tạo biểu mẫu đăng nhập bật lên trong Divi

Phần 1: Tạo các nút Đăng nhập và Đăng xuất

Khi ở trong Trình chỉnh sửa bố cục tiêu đề chung, hãy mở xem lớp để bạn có thể dễ dàng nhìn thấy tất cả các yếu tố.

Trong hàng trên cùng của phần tiêu đề, hãy xóa mô-đun Theo dõi trên mạng xã hội bên cạnh nút Đăng nhập trong cột 3.

Đọc cũng: Divi: So sánh các loại gradient khác nhau

Tạo nút đăng nhập

Để tạo nút đăng nhập của chúng tôi, hãy mở cài đặt mô-đun Nút trong cột 3 của hàng trên cùng.

Cập nhật các mục sau trong tab thiết kế:

• Biểu tượng nút: biểu tượng khóa (xem ảnh chụp màn hình)
• Vị trí biểu tượng nút: Phải
• Chỉ hiển thị biểu tượng khi di chuột cho nút: KHÔNG
• Lớp đệm: 0,5em (Trên và Dưới), 2em (Trái), 0,7em (Phải)

Dưới tab Nâng cao, gán cho nút hai lớp CSS tùy chỉnh như sau:

• Lớp CSS: et-toggle-popup et-popup-login-button

Tạo nút đăng xuất

Để tạo nút đăng xuất của chúng tôi, hãy sao chép nút đăng nhập hiện có trong cột 3.

Để giúp phân biệt hai nút, bạn có thể cập nhật nhãn của từng nút tương ứng. Tiếp theo, mở cài đặt mô-đun Nút Nhân bản trong cột 3.

Thay đổi văn bản của nút thành "Đăng xuất".

Cập nhật các mục sau trong tab thiết kế:

• Biểu tượng nút: biểu tượng mở khóa (xem ảnh chụp màn hình)

Dưới tab Nâng cao, cập nhật nút Lớp CSS như sau:

• Lớp CSS: et-toggle-popup et-popup-logout-button

Lớp đầu tiên sẽ giữ nguyên nhưng lớp thứ hai sẽ khác.

Phần 2: Tạo phần cửa sổ bật lên

Sau khi hoàn thành các nút, chúng tôi đã sẵn sàng tạo phần bật lên sẽ đóng vai trò là cửa sổ bật lên của chúng tôi chứa hình thức de kết nối.

Bên dưới phần tiêu đề, hãy thêm một phần thông thường mới.

Sau đó, chèn một hàng một cột bên trong phần.

Cài đặt phần

Trước khi cập nhật hàng, hãy mở cài đặt phần.

Dưới tab Nội dung, cung cấp cho phần này màu nền trắng:

• Nền: #ffffff

Dưới tab Thiết kế, cập nhật những điều sau:

• Chiều rộng: 100%
• Chiều rộng tối đa: 800px (Máy tính để bàn), 80% (Máy tính bảng), 100% (Điện thoại)
• Căn chỉnh phần: Căn giữa
• Chiều cao: tự động (Máy tính để bàn và Máy tính bảng), 100% (Điện thoại)
• Chiều cao tối đa: 100%
• Padding: 0px (Trên và dưới)

• Góc tròn: 10px
• Box Shadow: xem ảnh chụp màn hình
• Box Shadow Vertical Vị trí: 0px
• Cường độ mờ: 100pixels
• Sức mạnh lan truyền: 50px

Dưới tab Nâng cao, cập nhật những điều sau:

Thêm một lớp CSS tùy chỉnh.

• Lớp CSS: et-popup-login

Thêm đoạn mã CSS tùy chỉnh vào phần tử chính:

overscroll-behavior: contain;

Cập nhật các tùy chọn Hiển thị và Vị trí.

• Tràn ngang: Ẩn
• Tràn dọc: tự động
• Chức vụ: Cố định
• Vị trí: Trung tâm Trung tâm
• Chỉ số Z: 999999

Cài đặt dòng

Với cài đặt phần đã có, hãy mở cài đặt đường và cập nhật cài đặt thiết kế sau:

• Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
• Chiều rộng máng xối: 1
• Chiều rộng: 100%
• Chiều rộng tối đa: 100%
• Đệm: 0px (Trên), 5vh (Dưới)

Phần 3: Tạo biểu tượng cửa sổ bật lên đóng

Để tạo biểu tượng đóng cửa sổ bật lên sẽ đóng / ẩn cửa sổ bật lên khi nhấp vào, chúng tôi sẽ sử dụng mô-đun Blurb.

Thêm một mô-đun Blurb mới vào hàng.

Mở cài đặt mô-đun và xóa tiêu đề và văn bản nội dung.

Sau đó thêm biểu tượng như sau:

• Sử dụng biểu tượng: CÓ
• Biểu tượng: biểu tượng "x" (xem ảnh chụp màn hình)

Dưới tab Thiết kế, cập nhật những điều sau:

• Màu biểu tượng: # 004e43
• Căn chỉnh hình ảnh / biểu tượng: căn giữa
• Sử dụng Kích thước Phông chữ Biểu tượng: CÓ
• Kích thước phông chữ biểu tượng: 50px
• Chiều rộng: 50px
• Mô-đun căn chỉnh: phải
• Chiều cao: 50px

Dưới tab Nâng cao, thêm một lớp CSS vào mô-đun Blurb như sau:

• Lớp CSS: et-toggle-popup

Phần 4: Tạo Biểu mẫu đăng nhập “Đã đăng nhập” và “Đã đăng xuất”

Để có nội dung và thiết kế khác nhau cho biểu mẫu đăng nhập khi đăng nhập và đăng xuất, chúng tôi sẽ tạo hai mô-đun biểu mẫu đăng nhập khác nhau. 

Đầu tiên sẽ là biểu mẫu đăng nhập sẽ được hiển thị mỗi khi người dùng “đăng xuất”. Thứ hai sẽ là biểu mẫu đăng nhập sẽ được hiển thị mỗi khi người dùng “đăng nhập”.

Tạo biểu mẫu “Đã đăng xuất”

Để tạo biểu mẫu đăng nhập “Đã đăng xuất”, hãy thêm mô-đun Đăng nhập mới bên dưới biểu tượng mô-đun Blurb bên trong hàng.

Mở cài đặt mô-đun và thay đổi các cài đặt sau:

Tab nội dung

• Chuyển hướng đến trang hiện tại: CÓ
• Sử dụng màu nền: KHÔNG

Tab thiết kế

• Màu nền trường: rgba (0,78,67,0.05)
• Màu nền lấy nét trường: rgba (0,78,67,0,15)
• Căn chỉnh văn bản: Căn giữa
• Màu văn bản: Tối

• Phông chữ tiêu đề: Poppins
• Độ đậm phông chữ tiêu đề: nửa đậm
• Màu văn bản: # 000000
• Chiều cao dòng tiêu đề: 1,3 em
• Phông chữ nội dung: Work Sans

Để cập nhật kiểu nút, hãy sao chép kiểu nút từ nút đăng nhập mà chúng tôi đã tạo vào cột thứ ba trong hàng của phần Tiêu đề.

Sau đó, dán các kiểu nút vào nhóm tùy chọn nút trong cài đặt kết nối trong tab Thiết kế.

Tiếp theo, cập nhật các kiểu nút cho biểu mẫu đăng nhập như sau:

• nút
  • Màu văn bản: #ffffff
  • Nền: # 004e43
  • Nền (Di chuột): # 00683c
  • Chiều rộng đường viền: 0 pixel
  • Đệm: 15px (Trên cùng và Dưới cùng)

Tiếp theo, cập nhật các tùy chọn định cỡ như sau:

• Chiều rộng: 100%
• Chiều rộng tối đa: 80% (Máy tính để bàn), 90% (Máy tính bảng), 95% (Điện thoại)
• Mô-đun căn chỉnh: Trung tâm

Tab nâng cao

Dưới tab Nâng cao, cập nhật lớp CSS và CSS tùy chỉnh như sau:

• Lớp CSS: et-log-out-form

CSS tùy chỉnh cho mô tả kết nối:

width: 100% !important;
float: none !important;

CSS tùy chỉnh cho biểu mẫu đăng nhập:

width: 100% !important;
padding: 0px !important;

Điều này sẽ đảm bảo rằng mô-đun Đăng nhập kéo dài toàn bộ chiều rộng hàng / cột, ngay cả trên máy tính để bàn.

Tạo biểu mẫu "Đã đăng nhập"

Bây giờ phiên bản "Đã đăng xuất" của biểu mẫu đã hoàn tất, chúng tôi cần tạo phiên bản "Đã đăng nhập" sẽ có nội dung và kiểu dáng khác nhau để tối đa hóa trải nghiệm người dùng.

Để tạo biểu mẫu đăng nhập "Đã đăng xuất", hãy sao chép biểu mẫu đăng nhập hiện có.

Tiếp theo, cập nhật nhãn cho từng hình thức kết nối tương ứng.

Mở cài đặt trùng lặp (biểu mẫu “Đã đăng nhập”) và thêm tiêu đề trang web dưới dạng nội dung động vào tiêu đề của mô-đun biểu mẫu đăng nhập.

Sau đó, mở cài đặt nội dung động của tiêu đề trang web và cập nhật nội dung trước và sau như sau:

• Trước: “Bạn đang cố gắng đăng xuất khỏi Chủ đề thanh lịch”
• Sau: ". " 

Điều này sẽ tạo ra một thông báo động tốt đẹp cho người dùng đang cố gắng đăng xuất khỏi trang web.

Sau đó, thêm tiêu đề H3 sau vào phần nội dung:

<h3>Are you sure?</h3>

Nếu bạn đã từng xem nội dung của mô-đun Đăng nhập khi đăng nhập, bạn biết rằng có một thông báo được cá nhân hóa bao gồm liên kết "đăng xuất" được cá nhân hóa. Để làm cho liên kết này trông giống như một nút, chúng ta cần tùy chỉnh cài đặt phông chữ / văn bản của liên kết nội dung như sau:

• Chọn tab liên kết theo tùy chọn Bài kiểm tra cơ thể.
• Phông chữ liên kết: Work Sans
• Độ đậm phông chữ liên kết: Bán đậm
• Kiểu phông chữ: TT
• Căn chỉnh văn bản liên kết: căn giữa
• Màu văn bản liên kết: #ffffff

LƯU Ý: Bạn sẽ không thể xem trước các kết quả này cho đến khi bạn xem biểu mẫu trên trang trực tiếp.

Dưới tab Nâng cao, cập nhật lớp CSS và CSS tùy chỉnh như sau:

• Lớp CSS: et-logged-in-form

CSS tùy chỉnh cho biểu mẫu đăng nhập:

display:none;

Phần 5: Thêm mã tùy chỉnh

Để thêm CSS và JQuery tùy chỉnh cần thiết cho chức năng biểu mẫu đăng nhập bật lên, hãy tạo mô-đun Mã mới trong mô-đun Đăng nhập cuối cùng.

CSS

Mở cài đặt mô-đun Mã và dán CSS sau vào hộp mã, đảm bảo bọc CSS trong các thẻ kiểu cần thiết.

/* 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;
}

Lưu ý rằng CSS sử dụng lớp “kết nối” được tích hợp trong WordPress để ẩn/hiển thị các nút đăng nhập/đăng xuất tương ứng và hình thức Thông báo đăng nhập “Đã đăng nhập”/”Đã đăng xuất” mỗi khi người dùng đăng nhập hoặc đăng xuất.

JQuery

Bên dưới thẻ kiểu kết thúc, hãy dán JQuery sau để đảm bảo bọc mã trong các thẻ tập lệnh cần thiết.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Đoạn mã này chỉ đơn giản là chuyển đổi phần bật lên bất cứ khi nào người dùng nhấp vào một trong ba mục có lớp " and-toggle-popup (nút đăng nhập và đăng xuất cộng với biểu tượng bản trình bày "x").

Xem thêm: Divi: Cách sử dụng cài đặt mặt nạ nền và tùy chọn biến đổi mẫu

Nó được thực hiện!

Đừng quên lưu những thay đổi bạn đã thực hiện đối với mẫu trong trình tạo chủ đề. Sau khi lưu, bạn có thể xem kết quả trên trang trực tiếp.

Kết quả cuối cùng

Đây là kết quả cuối cùng trên máy tính, máy tính bảng và điện thoại.

Chú ý nút đăng nhập và nút đăng xuất thay đổi như thế nào. Và, khi người dùng đăng nhập, người dùng sẽ ở lại trang hiện tại. 

Ngoài ra, biểu mẫu đăng nhập bật lên hiển thị nội dung "cảnh báo" khác nhau mỗi khi người dùng cố gắng đăng xuất.

Tải DIVI ngay bây giờ !!!

Kết luận.

Hy vọng rằng việc tạo biểu mẫu đăng nhập bật lên này và các nút đăng nhập / đăng xuất tùy chỉnh sẽ cung cấp cho bạn một số thông tin chi tiết về cách sử dụng biểu mẫu đăng nhập của Divi một cách sáng tạo. 

Vui lòng điều chỉnh thiết kế và nội dung của từng biểu mẫu đăng nhập (hoặc các nút) để tạo trải nghiệm đăng nhập độc đáo trên trang web của riêng bạn.

Chúng tôi cũng hy vọng rằng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.

Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.

Đừng ngần ngại cũng tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.

...