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 600.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 một 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 (kêu gọi hành động). Một cách để làm điều này là thêm một hình thức liên lạc thả xuống. Điều này sẽ giúp bạn giữ cho cái nhìn tổng thể của tiêu đề của bạn sạch sẽ trong khi cung cấp cơ hội để 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 Divi và mã 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 ở trong mẫu tiêu đề toàn cầu, bạn sẽ 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 toàn bộ nội dung của các cột bằng cách thêm một dòng mã CSS vào thành phần chính của dò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 mục đích phản ứng.

  • Chỉ số Z: 12
Tham số cột

Thêm một 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ột mô-đun hình ảnh trong cột 1. Tải lên logo.

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 sự liên kết 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 đến tab thiết kế mô-đun và thay đổi kiểu bố trí.

  • 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 sắc của biểu tượng menu hamburger.

  • Màu sắc biểu tượng menu 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 đi đến mô-đun thứ ba! Thêm một mô-đun văn bản với một bản sao của sự lựa chọn của bạ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 đến 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

Chúng ta hãy đi đến 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 đến 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 đang 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 mô-đun được đặt đúng chỗ, đã đến lúc tạo hiệu ứng. Bước đầu tiên để đạt được kết quả mong muốn là mở các tham số trong cột 3 và thêm chiều cao tùy chỉnh phản ứ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 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 thành phần 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]

Style css module divi

Thêm mô-đun mã vào cột 3 bằng mã JQuery và CSS

Và để tạo hàm bấm, chúng ta sẽ cần mã JQuery. Chúng tôi cũng sẽ sử dụng mã CSS tùy chỉnh. Thêm một 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 đã trải qua tất cả các bước, hãy xem xét kết quả cuối cùng 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ì cần nhớ

Trong bài viết này, chúng tôi đã chỉ cho 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 ngay từ đầu.

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