Bỏ qua đến nội dung chính

Cách thêm biểu mẫu liên hệ thả xuống vào tiêu đề toàn cầu của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Khi bạn tạo tiêu đề tùy chỉnh cho trang web của mình bằng cách 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 (lời kêu gọi hành động). Một cách để làm điều này là thêm một biểu mẫu liên hệ thả xuống. Điều này sẽ giúp bạn giữ cho giao diện tổng thể của tiêu đề sạch sẽ trong khi cung cấp khả năng 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 biểu mẫu liên hệ thả xuống bằng cách sử dụng mã Divi và JQuery & CSS. Bạn cũng 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.

Menu thả xuống Divi

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.

Tiêu đề divi toàn cầu

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.

Xây dựng tiêu đề divi toàn cầu

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
Điều chỉnh nền

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
Cấu hình đệm

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)
Cấu hình bóng Divi

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:

Chọn một bố cục

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%
Định cấu hình kích thước đường divi

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
Cấu hình giãn cách phần

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;

Css tùy chỉnh

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
Tham số cột

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.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Mô-đun hình ảnh divi

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
Mô-đun hình ảnh căn chỉnh

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)
hình thức liên lạc thả xuống

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.

Cá nhân hóa mô-đun menu divi

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
Kiểu mô-đun menu

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
Văn bản menu Divi

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
Menu thả xuống Divi

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
Biểu tượng menu divi

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.

Liên hệ với chúng tôi mô-đun divi

Màu nền

Sau đó, thêm một màu nền.

  • Màu nền: # 007dff
Nền divi

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
Màu phông chữ Divi

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
Định cỡ phần văn bản divi

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)
Cấu hình giãn cách mô-đun văn bản

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.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • Tất cả các góc: 100px
Cấu hình đường viền mô-đun văn bản

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: "▼".

Mô-đun văn bản Divi fleche

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
Phông chữ divi mô-đun văn bản

Chỉ số Z

Chúng tôi cũng tăng chỉ số z của mô-đun.

  • Chỉ số Z: 11
Vị trí mô-đun văn bản Divi

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 hình thức liên lạc ở dưới cùng của mô-đun văn bản có chứa mũi tên. Mô-đun này khá đơn giản để sử dụng, vì vậy bạn sẽ phải tùy chỉnh các trường mà bạn muốn hiển thị.

Mô-đun biểu mẫu liên hệ

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;

Mẫu tờ rơi liên hệ

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: show-contact
Thêm phần liên hệ hiển thị

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: mô-đun liên hệ
Thêm một lớp vào biểu mẫu divi

Ẩ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;

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Phong cách mô-đun css divi

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

Thêm mã javascript

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

Ví dụ thiết kế

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. 

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
4 cổ phiếu
cổ phiếu4
tweet
Enregistrer