Divi: Cách thêm biểu mẫu liên hệ vào tiêu đề chung

mệnh Gaetan | Divi, Hướng dẫn Divi

Cần thêm một Mẫu liên hệ đến một tiêu đề toàn cầu?

Khi bạn tạo một tiêu đề tùy chỉnh cho Website Khi sử dụng Trình tạo chủ đề Divi, bạn thấy mình đang tìm cách hoàn hảo để thêm CTA (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ệ di chuyể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 truy cập vào liên lạc mà không cần phải cuộn. 

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ệ có thể cuộn bằng mã Divi và JQuery & CSS.

Hãy bắt đầu nào!

khảo sát

Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem bản xem trước kết quả mà chúng ta sẽ nhận được.

thêm biểu mẫu liên hệ vào tiêu đề chung trong divi

Tạo một tiêu đề toàn cầu

Đi tới Trình tạo chủ đề

Đi tới Trình tạo chủ đề từ menu Divi có trong trang tổng quan WordPress của bạn và nhấp vào "Thêm tiêu đề chung".

Chọn 'Tạo tiêu đề chung'.

Tạo kiểu tiêu đề

Cài đặt phần

Màu nền

Khi ở trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Mở phần này và thay đổi màu nền.

  • Nền: #FFFFFF

khoảng cách

Sau đó, xóa Lề trong trên và Dưới cùng mặc định khỏi phần.

  • Đỉnh lề bên trong: 0px
  • Lề nội bộ dưới cùng: 0px

Hộp bóng

Cũng áp dụng một bóng hộp tinh tế.

  • Box Shadow Blue Cường độ: 50px
  • Màu phông chữ phụ đề: rgba (0,0,0,0.15)

Thêm một dòng mới

Cấu trúc của cột

Thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:

kích thước

Không thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi cài đặt định cỡ 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
  • Hài hòa chiều cao cột: Có
  • Chiều rộng tối đa: 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.

  • Lợi nhuận nội bộ cao nhất: 1vw
  • Lề nội bộ dưới cùng: 1vw

yếu tố chính

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ử hàng chính.

align-items: center;

Chỉ số Z của cột 2

Chúng tôi cũng đảm bảo cột thứ hai có giá trị z-index cao hơn cho thiết kế đáp ứ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: Căn giữa

kích thước

Cũng thay đổi chiều rộng.

  • Chiều rộng tối đa: 3vw (máy tính để bàn), 5vw (máy tính bảng), 7vw (điện thoại)

Thêm 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 Kiểu mô-đun và thay đổi kiểu bố cục.

  • Phong cách: Căn giữa

Cài đặt văn bản menu

Sau đó thay đổi cài đặt văn bản trong menu mô-đun.

  • Menu Phông chữ: Mở Không có
  • Menu ánh sáng mờ: nửa đậm
  • Màu văn bản menu: # 000000
  • Kích thước văn bản menu: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng), 3 vw (điện thoại)
  • Khoảng cách giữa các chữ cái trong menu: 1px

Cài đặt văn bản menu thả xuống

Tiếp theo, thay đổi màu đường kẻ từ menu thả xuống.

  • Màu dòng menu thả xuống: # 007dff

biểu tượng

Thay đổi màu biểu tượng menu bánh hamburger.

  • Màu biểu tượng menu bánh hamburger: # 007dff
thêm biểu mẫu liên hệ vào tiêu đề chung trong divi

Thêm mô-đun Văn bản vào cột 3

Thêm thông điệp

Chuyển sang mô-đun thứ ba! Thêm mô-đun Văn bản với tin nhắn bạn chọn.

Màu nền

Thêm màu nền.

  • Màu nền: # 007dff
thêm biểu mẫu liên hệ vào tiêu đề chung

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ữ văn bản: Mở Sans
  • Văn bản nhẹ nhàng: In đậm
  • Màu văn bản Văn bản: #ffffff
  • Văn bản Kích thước văn bản: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng), 3 vw (điện thoại)
  • Căn chỉnh văn bản: Căn giữa
thêm biểu mẫu liên hệ vào tiêu đề chung

kích thước

Sau đó sửa đổi các tham số kích thước mô-đun.

  • Chiều rộng tối đa: 33%
  • Căn chỉnh mô-đun: Trung tâm
thêm biểu mẫu liên hệ vào tiêu đề chung

khoảng cách

Tiếp theo, thêm đệm trên và dưới tùy chỉnh.

  • Lề nội bộ cao nhất: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng và điện thoại)
  • Ký quỹ nội bộ thấp: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng và điện thoại)
thêm biểu mẫu liên hệ vào tiêu đề chung

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.

  • Hình chữ nhật tròn: 100px

Thêm một mô-đun Văn bản khác 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 biểu tượng mũi tên sau vào vùng nội dung: '▼'.

thêm biểu mẫu liên hệ vào tiêu đề chung

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ữ văn bản: Mở Sans
  • Màu văn bản: # 007fff
  • Văn bản Kích thước văn bản: 3vw
  • Chiều cao dòng văn bản: 0em
  • Căn chỉnh văn bản: Căn giữa
thêm biểu mẫu liên hệ vào tiêu đề chung

Chỉ số Z

Hãy cũng tăng chỉ số z của mô-đun.

  • Chỉ số Z: 11

Thêm mô-đun Biểu mẫu liên hệ vào cột 3

Thêm các trường có chiều rộng đầy đủ mà bạn chọn

Mô-đun tiếp theo và cuối cùng chúng ta cần trong cột thứ ba là mô-đun biểu mẫu liên hệ. Thêm bất kỳ trường chiều rộng đầy đủ nào bạn cần.

Thêm một tiêu đề

Cũng sử dụng một tiêu đề.

Màu nền

Tiếp theo, hãy thay đổi màu nền.

  • Màu nền: # e7f2ff

Cài đặt trường

Hãy chuyển đến tab Kiểu của mô-đun và thay đổi cài đặt trường.

  • Các trường Màu nền: #ffffff
  • Màu văn bản trường: #dddddd
  • Màu văn bản tiêu điểm: # 007dff
  • Trường đệm Vertex: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Trường đệm dưới cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Trường Phông chữ: Mở Không có
  • Trường Kích thước văn bản: 0,7 vw (máy tính để bàn), 1,8 vw (máy tính bảng), 3 vw (điện thoại)

Cài đặt văn bản tiêu đề

Chỉnh sửa cài đặt văn bản tiêu đề.

  • Chèn tiêu đề ba: H3
  • Tiêu đề ánh sáng dịu: Văn bản in đậm
  • Căn chỉnh văn bản: căn giữa
  • Màu văn bản tiêu đề: # 007dff
  • Tiêu đề Kích thước văn bản: 1 vw (máy tính để bàn), 2,5 vw (máy tính bảng), 3,5 vw (điện thoại)
  • Chiều cao dòng tiêu đề: 1,6 em

Cài đặt văn bản Captcha

Với cài đặt văn bản captcha.

  • Phông chữ Captcha: Mở Sans
  • Màu văn bản Captcha: # 007dff

Cài đặt nút

Tiếp tục bằng cách tùy chỉnh nút.

  • Sử dụng các kiểu tùy chỉnh cho Nút: Có
  • Kích thước văn bản nút: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng), 3 vw (điện thoại)
  • Màu văn bản của nút: #ffffff
  • Nút Backgound: # 007dff
  • Nút chiều rộng đường viền: 0 pixel
  • Bán kính đường viền nút: 100 px
  • Nút Phông chữ: Mở Không có
  • Nút Soft Light: Chữ in đậm
  • Lề nút: 1vw
  • Nút đệm trên cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng và điện thoại)
  • Nút đệm dưới cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng và điện thoại)
  • Nút bàn phím trái: 2vw (máy tính để bàn), 7vw (máy tính bảng và điện thoại)
  • Nút bàn phím phải: 2vw (máy tính để bàn), 7vw (máy tính bảng và điện thoại)

khoảng cách

Sử dụng các giá trị đệm tùy chỉnh trên các kích thước màn hình khác nhau.

  • Khoảng không bên trong cao nhất: 4vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)
  • Biên lợi nhuận nội bộ dưới cùng: 4vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)
  • Lề trong bên trái: 2vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)
  • Lề nội bộ bên phải: 2vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)

Biên giới

Sau đó, thay đổi cài đặt đường viền.

  • Nhập hình chữ nhật tròn: 10px

Thành phần chính, Tiêu đề liên hệ và CSS Captcha

Hoàn thành cài đặt mô-đun bằng cách thêm một số thay đổi CSS nhỏ vào tab nâng cao.

Yếu tố chính:

01border-radius: 20px;

Tiêu đề của liên lạc :

01margin-bottom: 1vw;

Mã ngẫu nhiên:

01margin-top: 1.5vw;

Tùy chỉnh các phần tử để tạo biểu mẫu liên hệ chỉ bằng một cú nhấp chuột

Thêm chiều cao của cột 3

Khi bạn đã có tất cả các mô-đun tại chỗ, đã đến lúc tạo hiệu ứng. Bước đầu tiên để có được kết quả mong muốn là mở cài đặt 3 cột và thêm chiều cao đáp ứng tùy chỉnh trong tab nâng cao.

Bàn làm việc :

01height: 3vw;

máy tính bảng:

01height: 5vw;

Gọi:

01height: 6vw;

Thêm một lớp CSS vào nút và mũi tên

Tiếp theo, chúng ta 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.

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: contact-form-module

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

01display: 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ã 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, chúng ta hãy xem lại kết quả lần cuối.

thêm biểu mẫu liên hệ vào tiêu đề chung trong divi

Kết luận

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.

Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.

Đăng 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.