Bạn có muốn tạo một Mẫu liên hệ trong Divi xuất hiện sau khi nhấp vào một nút?
Trong hướng dẫn Divi này, chúng tôi sẽ chỉ cho bạn cách tạo một Mẫu liên hệ xuất hiện sau khi nhấp vào nút không sử dụng gì ngoài mã Divi, mã jQuery và mã CSS.
Cũng đọc hướng dẫn của chúng tôi về: Divi: Cách tạo footer dính với hiệu ứng "Reveal"
Đó là một cách tuyệt vời để giữ khách của bạn website tập trung vào hành động mà họ đã cam kết chỉ bằng một cú nhấp chuột. Nó không đưa họ đến một trang khác.
khảo sát
Dưới đây, bạn có thể xem nhanh những gì chúng tôi sẽ tạo, sau đó chuyển sang phần hướng dẫn!
Xem trước trên PC
Xem trước trên điện thoại và máy tính bảng
Tạo một trang mới với bố cục được xác định trước
Hãy bắt đầu bằng cách sử dụng một bố cục được xác định trước từ thư viện Divi. Đối với ví dụ này, chúng tôi sẽ sử dụng trang liên hệ của Gói bố cục sản phẩm làm đẹp .
Thêm một trang mới vào của bạn Website và đặt cho nó một tiêu đề, sau đó chọn tùy chọn 'Sử dụng Divi Builder'.
Chúng tôi sẽ sử dụng bố cục tạo sẵn từ thư viện Divi cho ví dụ này, vì vậy hãy chọn 'Chọn bố cục'.
Tìm và chọn Trang chủ của bố cục 'Công ty thiết kế nội thất'.
Lựa chọn 'Chọn bố cục'để thêm bố cục vào trang của bạn.
Bây giờ chúng tôi đã sẵn sàng để tiếp tục hướng dẫn của chúng tôi.
Tạo một phần bằng mô-đun Nút
Điều đầu tiên chúng ta phải làm là thêm một phần mới nơi chúng ta đặt nút cho phép Mẫu liên hệ để hiển thị.
Xem thêm: Divi: Cách tạo chân trang tùy chỉnh
Chỉ cần thêm một phần tiêu chuẩn
Tiếp theo, chọn hàng một cột.
Khi bạn đã hoàn thành việc đó, hãy thêm mô-đun Nút vào nó.
Bạn có thể tùy chỉnh nút theo bất kỳ cách nào bạn muốn, nhưng bạn cần đảm bảo URL của nút bắt đầu bằng '#' theo sau là một cái gì đó khác. Bạn không thể để trống hoặc chỉ sử dụng ký tự '#'. Bằng cách thêm '#' và văn bản, trang sẽ không di chuyển khi bạn nhấp vào nút. Nếu bạn để trống, trang sẽ làm mới khi nhấp chuột. Và nếu bạn chỉ sử dụng '#', bạn sẽ được đưa lên đầu trang.
Điều quan trọng tiếp theo chúng ta sẽ cần làm là gán một lớp CSS cho nút. Chúng tôi sẽ sử dụng lớp CSS này ở phần sau của bài viết này trong mã jQuery để đảm bảo rằng biểu mẫu liên hệ xuất hiện sau khi nhấp vào. Lớp chúng ta sẽ cần gán cho nút chỉ đơn giản là “nút”.
- Lớp CSS: nút
Tạo biểu mẫu liên hệ phiên bản PC
Điều tiếp theo chúng ta sẽ cần làm là tạo biểu mẫu liên hệ trên màn hình sẽ xuất hiện khi ai đó nhấp vào nút mà chúng ta đã tạo trong phần trước của bài viết này. Phần sau của bài viết này, chúng tôi cũng sẽ hướng dẫn bạn cách tạo phiên bản dành cho thiết bị di động.
Thêm phần tiêu chuẩn mới
Bắt đầu bằng cách thêm một phần tiêu chuẩn mới vào trang bạn đang làm việc. Trong cài đặt phần, hãy chuyển đến tab Nâng cao, thêm "cửa sổ bật lên" vào trường Lớp CSS.
Cuộn xuống cùng tab đó và đặt các dòng mã CSS sau vào trường Trước của danh mục con CSS tùy chỉnh:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Bằng cách thêm phần này, chúng tôi đảm bảo rằng phần này chiếm toàn bộ tab. Bạn có thể điều chỉnh màu nền trong mã CSS để tạo lớp phủ nền mong muốn. Trong trường hợp này, chúng tôi sử dụng màu đen với một số độ trong suốt. Trong cùng một tab này, cũng thêm dòng mã CSS sau vào phần tử chính:
display: none;
Điều cuối cùng chúng ta sẽ phải làm trong tab Nâng cao là hủy kích hoạt phần trên điện thoại và máy tính bảng trong danh mục phụ Chế độ hiển thị.
Thêm một hàng vào hai cột
Tiếp tục bằng cách thêm một hàng hai cột và điều hướng đến tab Phong cách.
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng tối đa: 1291px
Nhập các tham số của từng cột.
Sửa đổi các lề bên trong (Trên cùng, Trái và Phải) như sau:
- Lề trong (Trên cùng, Trái, Phải): 30px
Kết thúc bằng cách chuyển đến tab Nâng cao. Trong phần tử chính, hãy thêm các dòng mã CSS sau:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Thêm mô-đun Văn bản đầu tiên
Khi bạn đã thực hiện tất cả các thay đổi đối với phần và hàng, đã đến lúc thêm các mô-đun khác nhau mà bạn muốn hiển thị.
Điều đầu tiên chúng tôi sẽ thêm là tiêu đề xuất hiện. Bắt đầu bằng cách thêm mô-đun Văn bản mới vào cột đầu tiên của hàng, viết văn bản vào tab Nội dung và chuyển sang tab Phong cách.
Trong tab Kiểu, chúng tôi đã sử dụng các cài đặt sau cho danh mục con Văn bản:
- Phông chữ tiêu đề: Tôm hùm
- Tiêu đề ánh sáng dịu: Văn bản in đậm
- Căn chỉnh văn bản: In đậm
- Màu văn bản tiêu đề: # 002282
- Kích thước văn bản tiêu đề: 37px
- Chiều cao dòng tiêu đề: 1,7 em
Thêm mô-đun Văn bản thứ hai
Tiếp tục bằng cách thêm mô-đun Văn bản mới và nhập văn bản bạn muốn xuất hiện trong tab Nội dung. Chuyển sang tab Kiểu và áp dụng các cài đặt sau cho danh mục con Văn bản:
- Căn chỉnh văn bản: Căn giữa
- Phông chữ văn bản: Arial
- Kích thước Văn bản Văn bản: 13px
- Văn bản Màu Văn bản: # 002282
- Chiều cao dòng văn bản: 1,7 em
Thêm mô-đun 'Theo dõi chúng tôi trên mạng xã hội'
Tiếp theo, chúng tôi cũng sẽ thêm mô-đun 'Theo dõi chúng tôi trên mạng xã hội' vào cột đầu tiên. Trong trường hợp này, chúng tôi đã chọn ba biểu tượng truyền thông xã hội; Facebook, Twitter và Instagram.
Điều cuối cùng chúng ta sẽ cần làm là thêm phần đệm (Trái) vào mô-đun này trong tab Nâng cao. Thêm dòng mã CSS sau vào phần tử chính:
padding-left: 40%;
Thêm mô-đun Biểu mẫu liên hệ
Sau đó, chúng ta có thể di chuyển đến cột thứ hai trong hàng. Trong cột này, điều đầu tiên chúng ta sẽ đặt là mô-đun Biểu mẫu liên hệ.
Đối với ví dụ này, chúng tôi chỉ chọn hai trường; tên và email.
Khi bạn đã thêm mô-đun Biểu mẫu liên hệ, hãy điều hướng đến tab Kiểu của mô-đun Biểu mẫu liên hệ và thực hiện các thay đổi sau đối với danh mục con Trường:
- Trường màu văn bản: # 002282
- Trường Kích thước Văn bản: # 002282
- Chiều cao dòng trường: 1,7 em
Trên cùng một tab đó, hãy thực hiện các thay đổi sau đối với danh mục con Nút:
- Sử dụng các kiểu tùy chỉnh cho Nút: Có
- Nút kích thước văn bản: 20
- Màu văn bản của nút: #FFFFFF
- Nút nền: # 0086c4
Xem thêm: Cách tạo menu trượt và đẩy trong DIVI
- Chiều rộng đường viền nút: 2
- Nút bán kính đường viền: 3
Chuyển sang tab Nâng cao và thêm lợi nhuận 5%.
Thêm một mô-đun Tóm tắt
Một thứ khác chúng ta sẽ cần thêm vào cột thứ hai là một mô-đun Tóm tắt. Điều duy nhất chúng tôi cần mô-đun này là biểu tượng thoát ở trên cùng bên phải của cửa sổ bật lên. Chọn biểu tượng tiếp theo từ danh sách các biểu tượng và để trống mọi thứ khác.
Sau đó, chuyển đến tab Nâng cao và nhập “đóng” dưới dạng lớp CSS.
Trong cùng một tab này, hãy thêm các dòng mã sau vào phần tử chính của danh mục con CSS tùy chỉnh:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Áp dụng tô màu gradient cho đường kẻ
Cuối cùng, chúng ta sẽ thêm một nền gradient đẹp cho đường kẻ. Mở cài đặt và áp dụng các thay đổi sau cho tùy chọn nền gradient:
- Màu gradient đầu tiên: #FFFFFF
- Màu gradient thứ hai: # 0c71c3
- Loại Gradient: Tuyến tính
- Hướng gradient: 124 độ
- Vị trí bắt đầu: 50%
- Vị trí cuối cùng: 50%
Tạo biểu mẫu liên hệ cho máy tính bảng và điện thoại
Bây giờ chúng tôi đã tạo phiên bản PC, phiên bản máy tính bảng và điện thoại sẽ nhanh hơn nhiều. Hầu hết các mô-đun chúng tôi sử dụng cho phiên bản PC đều giống với phiên bản di động.
Sao chép phần trước
Thay vì tắt nó cho điện thoại và máy tính bảng, như chúng tôi đã làm cho phiên bản PC, chúng tôi sẽ tắt phiên bản PC trong danh mục phụ Visibility trong cài đặt mô-đun:
Sửa đổi mã CSS của mô-đun Tóm tắt
Thay vì sử dụng mã máy tính để bàn, hãy sử dụng mã sau để thay thế:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Áp dụng tô màu gradient cho đường kẻ
Đối với phiên bản di động, chúng tôi sử dụng các cài đặt khác nhau cho nền gradient của đường:
- Màu gradient đầu tiên: #FFFFFF
- Màu gradient thứ hai: # 0c71c3
- Loại Gradient: Tuyến tính
- Hướng gradient: 180 độ
- Vị trí bắt đầu: 40%
- Vị trí cuối cùng: 40%
Thêm mã jQuery
Điều cuối cùng chúng ta cần làm cho hướng dẫn này là thêm mã jQuery. Thêm mô-đun Mã và chèn mã JQuery sau:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Kết quả
Nếu bạn làm theo thông báo từng bước, bạn sẽ có thể nhận được kết quả sau trên máy tính:
Và kết quả sau trên máy tính bảng và điện thoại:
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã chỉ cho bạn cách tạo biểu mẫu liên hệ bằng một cú nhấp chuột. Sử dụng phương pháp này để liên lạc với bạn khách là tinh tế nhưng hiệu quả.
Chúng tôi hy vọ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 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.
...
