Cần tạo tiêu đề toàn cầu với hình thức kết nối trong DIVI?
Việc tạo ra một hình thức đăng nhập trên tiêu đề của bạn có thể là một sự thúc đẩy tuyệt vời cho trải nghiệm người dùng.
Chúng lý tưởng cho các trang web đăng ký và cửa hàng trực tuyến vì chúng cho phép người dùng đăng nhập bất kỳ lúc nào trên bất kỳ trang nào của website.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thiết kế một hình thức đăng nhập trực tuyến cho người dùng trên một tiêu đề tùy chỉnh. Bắt đầu nào!
khảo sát
Đây là bản xem trước nhanh của tiêu đề tùy chỉnh với biểu mẫu đăng nhập mà chúng tôi sẽ tạo trong hướng dẫn này.
Đây là thông báo và liên kết "đăng xuất" sẽ hiển thị khi người dùng đã đăng nhập.
Thêm tiêu đề chung mới
Để mọi thứ diễn ra suôn sẻ, chúng ta cần tạo một tiêu đề chung mới cho Website. Để thực hiện việc này, hãy truy cập bảng điều khiển WordPress và điều hướng đến Divi > Trình tạo chủ đề.
Trên mẫu trang web theo mặc định, nhấp vào "Thêm tiêu đề toàn cầu", sau đó nhấp vào "Xây dựng tiêu đề toàn cầu".
Thiết kế tiêu đề toàn cầu Divi với biểu mẫu đăng nhập ngang
Tùy chỉnh phần
Từ trình chỉnh sửa Bố cục Tiêu đề Toàn cầu, bạn có thể tạo tiêu đề được cá nhân hóa cho website Bắt đầu từ không có gì. Để bắt đầu, hãy mở cài đặt trong phần bình thường và cập nhật những thông tin sau:
- Màu gradient nền bên trái:
- Màu gradient nền bên phải:
- Hướng gradient: 48 độ
- Lề trong: 10px trên, 10px dưới, 20px trái, 20px phải
Để làm cho tiêu đề của chúng tôi phản hồi nhanh hơn, chúng tôi sẽ thêm CSS tùy chỉnh sau vào phần tử phần chính.
display:flex;
justify-content:center;
align-items:center;
Thêm biểu trưng tiêu đề vào dòng đầu tiên
Bây giờ phần đã sẵn sàng, chúng ta có thể thêm dòng đầu tiên.
Thêm dòng
Thêm một hàng vào một cột trong phần.
Thêm mô-đun Hình ảnh với hình ảnh biểu trưng
Trong hàng một cột, hãy thêm mô-đun Hình ảnh. Đây sẽ là nơi chúng tôi thêm logo tiêu đề.
Cập nhật hình ảnh và lề mô-đun hình ảnh
Cập nhật cài đặt hình ảnh như sau:
- Hình ảnh: [thêm logo (khoảng 64 x 64 px)]
- Lề: phải 20px
Cập nhật các tham số của dòng
Trước khi tiếp tục, hãy mở cài đặt dòng và cập nhật những điều sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Khoảng cách cột: 1
- Chiều rộng tối đa: 25%
- Căn chỉnh: trái
- Lề nội bộ: 0px Trên, 0px Dưới
Đã thêm biểu mẫu đăng nhập ngang vào dòng thứ hai
Thêm dòng
Bây giờ hàng đầu tiên đã sẵn sàng, bạn sẽ nhận thấy trong trình chỉnh sửa rằng hàng đầu tiên sẽ chiếm 25% phần bên trái. Đây về cơ bản sẽ là dòng được chỉ định cho biểu trưng tiêu đề của chúng tôi. Chúng ta cần tạo một hàng phần cho biểu mẫu đăng nhập và menu ở phía bên phải.
Thêm một hàng thứ hai với cấu trúc vào một cột trong phần.
Thêm một hình thức đăng nhập
Bên trong hàng một cột, thêm mô-đun 'Kết nối'.
Xóa nội dung mặc định
Trong cài đặt mô-đun Đăng nhập, hãy xóa tiêu đề và nội dung giả mạo.
Thêm lớp tùy chỉnh cho biểu mẫu đăng nhập và CSS
Trước khi chúng ta đi quá xa trong việc thiết kế biểu mẫu đăng nhập, trước tiên hãy thêm lớp CSS và CSS tùy chỉnh vào mô-đun Đăng nhập. Thao tác này sẽ thiết lập cấu trúc trực tuyến cơ bản của biểu mẫu trước khi hoàn thiện thiết kế của biểu mẫu với các tùy chọn được tích hợp sẵn của Divi.
Cũng xem hướng dẫn của chúng tôi trên Cách tạo menu bên trượt và đáp ứng trong DIVI
Trong tab Nâng cao, thêm lớp CSS sau:
- Lớp CSS: tiêu đề-đăng nhập-biểu mẫu
Thêm CSS tùy chỉnh sau vào hộp CSS mô tả kết nối:
margin-bottom: 0px !important
Sau đó, thêm CSS tùy chỉnh sau vào vùng CSS của biểu mẫu đăng nhập:
width: 100%;Thêm CSS tùy chỉnh sau vào vùng CSS Trường đăng nhập:
padding: 5px 4% !important
Thêm CSS tùy chỉnh vào cài đặt bố cục tiêu đề
Vì chúng tôi đã thêm lớp CSS tùy chỉnh của mình vào mô-đun biểu mẫu đăng nhập, chúng tôi có thể thêm CSS tùy chỉnh của chúng tôi sẽ chỉ nhắm mục tiêu biểu mẫu đăng nhập cụ thể đó.
Đọc thêm hướng dẫn của chúng tôi về Cách tạo trang blog với mô-đun Blog với DIVI
Mở cài đặt bố cục tiêu đề và thêm CSS tùy chỉnh sau:
.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 này sẽ làm cho các trường và nút đăng nhập hiển thị nội tuyến (theo chiều ngang), thông báo "Quên mật khẩu của bạn?" sẽ bị ẩn và một lề nhỏ giữa các trường sẽ được thêm vào.
Cài đặt dòng
Trước khi chúng tôi hoàn thiện biểu mẫu đăng nhập, hãy cập nhật các thông số dòng như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Khoảng cách cột: 1
- Căn chỉnh: Đúng
- Lề nội bộ: 0px Trên, 0px Dưới
Thiết lập cài đặt cho mẫu đăng nhập
Bây giờ chúng tôi đã sẵn sàng cập nhật cài đặt biểu mẫu đăng nhập. Mở cài đặt mô-đun Connect và cập nhật những thứ sau:
- Sử dụng màu nền: KHÔNG
Trường và liên kết văn bản
- Các trường Màu nền: rgba (255,255,255,0.2)
- Trường Màu Văn bản: #ffffff
- Phông chữ trường: Lato
- Trường Kích thước Văn bản: 14px
- Căn chỉnh văn bản: phải
Thiết kế nút
- Sử dụng các kiểu tùy chỉnh cho Nút: KHÔNG
- Kích thước văn bản nút: 15px
- Nút nền: # ff3190
- Nút chiều rộng đường viền: 0 pixel
- Phông chữ nút: Lato
- Nút lề: 2px trên, 2px dưới
- Nút đệm: 15px Bottom
- Lề trong: 0px trên, 0px dưới, 0px trái, 0px phải
Thêm menu vào dòng thứ hai
Mô-đun menu
Với biểu mẫu đăng nhập của chúng tôi tại chỗ, chúng tôi có thể thêm menu ngay bên dưới.
Thêm mô-đun Menu bên dưới mô-đun Đăng nhập.
Cài đặt mô-đun menu
Cập nhật cài đặt menu như sau:
- Nền: rgba (0,0,0,0)
- Menu phông chữ: Lato
- Menu Soft Light: Bold
- Màu văn bản menu: #ffffff
- Kích thước văn bản trên menu: 16px
- Căn chỉnh văn bản: phải
- Màu nền của menu thả xuống: #ffffff
- Màu hàng thả xuống: rgba (0,0,0,0)
- Màu văn bản menu thả xuống: # 000000
- Màu nền menu trên thiết bị di động: #ffffff
- Màu văn bản menu di động: # 000000
- Màu biểu tượng giỏ hàng: #ffffff
- Màu biểu tượng tìm kiếm: #ffffff
- Màu biểu tượng menu bánh hamburger: #ffffff
Lưu tiêu đề của biểu mẫu đăng nhập
Đảm bảo lưu bố cục trước khi thoát khỏi trình chỉnh sửa tiêu đề.
Tiếp theo, lưu cài đặt Theme Builder.
Kết quả cuối cùng
Nó được thực hiện!
Bây giờ chúng ta hãy xem kết quả cuối cùng. Để xem kết quả cuối cùng, tất cả những gì bạn phải làm là truy cập một trang trên trang web của bạn.
Và đây là những gì người dùng sẽ thấy khi đăng nhập.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Tiêu đề toàn cầu tùy chỉnh với biểu mẫu đăng nhập này chắc chắn sẽ hữu ích cho bất kỳ trang web đăng ký hoặc cửa hàng trực tuyến nào.
Chỉ với một chút CSS tùy chỉnh, chúng tôi đã có thể chuyển đổi mô-đun Đăng nhập của Divi thành một biểu mẫu đăng nhập trang nhã sẽ hoàn toàn phù hợp với tiêu đề của bất kỳ trang web nào.
Hy vọng điều này sẽ hữu ích cho dự án 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ó.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách 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.
...
