Khi bạn tạo một tiêu đề tùy chỉnh cho Website, khi sử dụng trình tạo chủ đề của Divi, bạn sẽ thấy mình đang tìm cách hoàn hảo để thêm AAL (kêu gọi hành động). Một cách để làm điều này là thêm một Mẫu liên hệ cuộn. Điều này sẽ giúp bạn giữ giao diện tổng thể của tiêu đề rõ ràng đồng thời cung cấp khả năng nhập liên lạc với bạn mà không cần phải cuộn xuống. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một Mẫu liên hệ trình đơn thả xuống bằng cách sử dụng mã Divi và JQuery & CSS. Bạn cũng sẽ có thể tải xuống tệp JSON miễn phí!
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.
1. Chuyển đến Trình tạo chủ đề Divi và bắt đầu tạo tiêu đề toàn cầu
Chuyển đến Trình tạo chủ đề Divi
Bắt đầu bằng cách đi đến Trình tạo chủ đề Divi trong phần phụ trợ của trang web WordPress của bạn.
Tạo một tiêu đề toàn cầu
Nhấp vào "Thêm tiêu đề toàn cầu" và chọn "Tạo tiêu đề toàn cầu" để bắt đầu tạo tiêu đề toàn cầu tùy chỉnh.
2. Xây dựng thiết kế tiêu đề
Cài đặt phần
Màu nền
Khi bên trong mẫu tiêu đề tổng thể, bạn sẽ nhận thấy một phần. Mở phần này và sử dụng màu nền trắng.
- Màu nền: #FFFFFF
khoảng cách
Sau đó loại bỏ phần đệm trên và dưới mặc định khỏi phần.
- Phần đệm trên: 0px
- Đệm dưới: 0px
Hộp bóng
Cũng áp dụng một bóng hộp tinh tế.
- Sức mạnh bóng mờ của hộp: 50px
- Màu bóng: rgba (0,0,0,0,15)
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:
kích thước
Không thêm nhiều mô-đun, mở các tham số dòng và sửa đổi các tham số kích thước như sau:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Cân bằng chiều cao cột: Có
- Chiều rộng: 95%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó thêm phần đệm trên và dưới tùy chỉnh.
- Phần đệm trên: 1vw
- Đệm đáy: 1vw
Yếu tố chính
Và căn chỉnh tất cả nội dung cột bằng cách thêm một dòng mã CSS vào phần tử chính của hàng.
align-items: center;
Cột 2 Chỉ số Z
Chúng tôi cũng đảm bảo rằng cột thứ hai có giá trị chỉ số z cao hơn cho các mục đích phản ứng.
- Chỉ số Z: 12
Thêm mô-đun hình ảnh vào cột 1
Tải logo
Đã đến lúc bắt đầu thêm các mô-đun! Bắt đầu với mô-đun hình ảnh trong cột 1. Tải lên biểu trưng.
sự liên kết
Sau đó, thay đổi căn chỉnh của mô-đun.
- Căn chỉnh hình ảnh: trung tâm
kích thước
Cũng thay đổi chiều rộng.
- Chiều rộng: 3vw (máy tính để bàn), 5vw (máy tính bảng), 7vw (điện thoại)
Thêm một mô-đun menu vào cột 2
Chọn menu
Trong cột thứ hai, chúng tôi sẽ thêm một mô-đun menu.
Bố trí
Chuyển sang tab thiết kế mô-đun và thay đổi kiểu bố cục.
- Phong cách: Trung tâm
Cài đặt văn bản menu
Sau đó thay đổi cài đặt văn bản trong menu mô-đun.
- Phông chữ menu: Mở mà không cần
- Trọng lượng phông chữ menu: Semi bold
- Màu văn bản menu: # 000000
- Kích thước văn bản menu: 0.8vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Khoảng cách chữ cái menu: 1px
Cài đặt văn bản trình đơn thả xuống
Sau đó thay đổi màu của dòng trong menu thả xuống.
- Màu của dòng menu thả xuống: # 007dff
biểu tượng
Với màu biểu tượng menu hamburger.
- Màu biểu tượng menu bánh hamburger: # 007dff
Thêm mô-đun văn bản 1 vào cột 3
Thêm một bản sao
Hãy chuyển sang mô-đun thứ ba! Thêm một mô-đun văn bản với một bản sao bạn chọn.
Màu nền
Sau đó, thêm một màu nền.
- Màu nền: # 007dff
Cài đặt văn bản
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Mở Sans
- Trọng lượng phông chữ của văn bản: đậm
- Màu văn bản: #ffffff
- Kích thước văn bản: 0.8vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Sắp xếp văn bản: trung tâm
kích thước
Sau đó sửa đổi các tham số kích thước mô-đun.
- Chiều rộng: 33%
- Sắp xếp mô-đun: trung tâm
khoảng cách
Sau đó thêm phần đệm trên và dưới tùy chỉnh.
- Phần đệm trên: 0.8vw (máy tính để bàn), 2vw (máy tính bảng và điện thoại)
- Đệm dưới: 0.8vw (bàn), 2vw (máy tính bảng và điện thoại)
biên giới
Và hoàn thành các tham số mô-đun bằng cách thêm một bán kính đường viền.
- Tất cả các góc: 100px
Thêm mô-đun văn bản 2 vào cột 3
Thêm một biểu tượng cho khu vực nội dung
Hãy chuyển sang mô-đun tiếp theo, là một mô-đun văn bản khác. Thêm mũi tên sau vào vùng nội dung: "▼".
Cài đặt văn bản
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Mở Sans
- Màu văn bản: # 007fff
- Kích thước văn bản: 3vw
- Chiều cao của dòng văn bản: 0em
- Sắp xếp văn bản: trung tâm
Chỉ số Z
Chúng tôi cũng tăng chỉ số z của mô-đun.
- Chỉ số Z: 11
Thêm mô-đun mẫu liên hệ vào cột 3
Bây giờ bạn có thể thêm một Mẫu liên hệ ngay cuối mô-đun văn bản có chứa mũi tên. Mô-đun này sử dụng khá đơn giản, vì vậy bạn sẽ cần tùy chỉnh những trường bạn muốn hiển thị.
3. Tùy chỉnh các yếu tố để tạo một hình thức liên lạc trong một cú nhấp chuột
Thêm chiều cao của cột 3
Khi tất cả các mod đã sẵn sàng, đã đến lúc tạo hiệu ứng. Bước đầu tiên để đạt được kết quả mong muốn là mở cài đặt trong cột 3 và thêm chiều cao tùy chỉnh đáp ứng trong tab nâng cao.
Văn phòng:
height: 3vw;
máy tính bảng:
height: 5vw;
Điện thoại:
height: 6vw;
Thêm một lớp CSS vào nút và mũi tên
Sau đó, chúng tôi sẽ thêm cùng một lớp CSS vào hai mô-đun văn bản đầu tiên trong cột 3.
- Lớp CSS: hiển thị-liên lạc
Thêm một lớp CSS vào biểu mẫu liên hệ
Chúng tôi cũng sẽ cần một lớp CSS tùy chỉnh cho mô-đun Biểu mẫu liên hệ.
- Lớp CSS: liên lạc-form-mô-đun
Ẩn mô-đun biểu mẫu Liên hệ
Tiếp tục bằng cách thêm một dòng mã CSS bổ sung vào phần tử chính của mô-đun Biểu mẫu liên hệ. Điều này sẽ cho phép chúng tôi ẩn mô-đun trước khi nhấp vào.
display: none;
Thêm mô-đun mã vào cột 3 bằng mã JQuery và CSS
Và để tạo hàm nhấp chuột, chúng ta sẽ cần một số mã JQuery. Chúng tôi cũng sẽ sử dụng mã CSS tùy chỉnh. Thêm mô-đun mã mới vào cột 2 với mã. Đảm bảo đặt mã JQuery giữa các thẻ script và mã CSS giữa các thẻ kiểu.
jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});
.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.
Văn phòng
Những gì bạn phải nhớ
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách thêm biểu mẫu liên hệ thả xuống vào tiêu đề tùy chỉnh của bạn. Đó là một cách tuyệt vời để kích hoạt hành động sớm.
