Divi: Cách tùy chỉnh mô-đun "Mẫu liên hệ"

Bạn có muốn tạo một Mẫu liên hệ đến trang web của bạn nhờ mô-đun Đăng ký thông tin từ Đivi? Dưới đây là 3 ý tưởng cá nhân hóa…

Les hình thức Chi tiết liên lạc là một phần thiết yếu của nhiều trang web. Mục tiêu chính của họ là trực quan và giúp khách truy cập liên lạc dễ dàng.

Nhưng điều đó không có nghĩa là tất cả hình thức danh bạ phải có giao diện chính xác và được xác định trước. Bạn có thể dễ dàng kết hợp trải nghiệm trực quan với thiết kế đẹp mắt. Đây chính xác là những gì chúng ta sẽ làm trong hướng dẫn này.

Chúng tôi sẽ chia sẻ 3 thiết kế độc đáo của mô-đun Đăng ký thông tin de Divi mà bạn chỉ có thể tạo bằng các tùy chọn tích hợp sẵn của Divi.

Chúng ta hãy đi!

Tổng quan về các thiết kế của mô-đun Biểu mẫu liên hệ Divi

phiên bản máy tính để bàn

Hãy bắt đầu bằng cách xem phiên bản dành cho máy tính để bàn của các thiết kế khác nhau của mô-đun Đăng ký thông tin mà chúng tôi sẽ thiết kế trong hướng dẫn này.

thêm biểu mẫu liên hệ vào trang web của bạn bằng mô-đun Biểu mẫu liên hệ của Divi

Phiên bản di động

Và đây là giao diện của chúng trên kích thước màn hình nhỏ hơn:

Tải DIVI ngay bây giờ !!!

Cách tùy chỉnh mô-đun Biểu mẫu liên hệ Divi: 3 ví dụ

Đọc cũng: Divi: Cách tạo phần thành viên trong nhóm dưới dạng băng chuyền

Tạo form liên hệ #1

Thêm một phần mới

Nền Gradient

Hãy bắt đầu với ví dụ đầu tiên! Thêm một phần mới, chuyển đến cài đặt nền và thêm nền chuyển màu.

Dừng Gradient
- 34%: #4c00ff
- 34%: #ffd400
Loại: Tròn
Hướng dốc: Dưới cùng bên trái

khoảng cách

Tiếp theo, đi đến tùy chọn Khoảng cách trong tab Thiết kế và thay đổi cài đặt như sau.

Đệm (Trên và Dưới): 200px

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

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

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

Cột 1: Màu nền

Chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng, rồi cài đặt cột 1 và thêm màu nền bên dưới

Bối cảnh: rgba (255,255,255,0.55)

Cột 1: Hình nền

Đồng thời thêm hình nền vào cột đầu tiên.

Lặp lại hình nền: Không lặp lại
Trộn ảnh nền: Màn hình

Cột 2: Hình nền

Và một màu nền trắng cho cột thứ hai.

Nền: #ffffff

kích thước

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

Cân bằng chiều cao cột: CÓ

khoảng cách

Đồng thời xóa tất cả các phần đệm tùy chỉnh mặc định.

Đệm (Trên và Dưới): 0px

Bán kính viền cột

Thêm bán kính đường viền cho cả hai cột trong tab nâng cao.

border-radius: 10px;

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

Thêm nội dung

Đã đến lúc bắt đầu thêm các mô-đun khác nhau! Thêm mô-đun Văn bản vào cột đầu tiên với nội dung bạn chọn.

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

Tiếp theo, chuyển đến tab Thiết kế của mô-đun Văn bản và thực hiện một số thay đổi.

Bản văn :
- Phông chữ: Hài lòng
- Màu văn bản: # 333333
- Kích thước: 100px
- Chiều cao dòng: 1 em
- Căn chỉnh: Trung tâm

khoảng cách

Cũng thêm giá trị điền tùy chỉnh.

Phần đệm (Trên cùng): 600px
Phần đệm (Dưới cùng): 100px

Hộp bóng

Để thêm chiều sâu cho thiết kế, hãy sử dụng bóng hộp tinh tế.

Độ mạnh của Box Shadow Blur: 80px
Sức mạnh lan truyền của Box Shadow: -16px
Màu bóng: rgba (0,0,0,0.3)

Thêm mô-đun Hình ảnh vào cột 2

Tải lên một hình ảnh

Tiếp tục bằng cách thêm mô-đun Hình ảnh vào cột thứ hai. Tải lên một hình ảnh của sự lựa chọn của bạn.

kích thước

Thay đổi cài đặt kích thước cho mô-đun này.

Chiều rộng: 25% (máy tính để bàn), 50% (máy tính bảng), 60% (điện thoại)
Căn chỉnh mô-đun: Trung tâm

khoảng cách

Tạo phần chồng lấp bằng cách sử dụng lề trên âm.

Ký quỹ (Hàng đầu): -60%

Biên giới

Sửa đổi đường viền của hình ảnh như sau:

Góc bo tròn: 100px (Tất cả các góc)

Thêm mô-đun Văn bản số 1 vào cột 2

Thêm nội dung

Ngay bên dưới mô-đun Hình ảnh, hãy thêm mô-đun Văn bản có nội dung.

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

Chỉnh sửa cài đặt văn bản cho mô-đun này.

Bản văn :
- Phông chữ: Hài lòng
- Màu văn bản: # 333333
- Kích thước văn bản: 44px
- Định hướng: Trung tâm

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

Thêm nội dung

Sau đó thêm một mô-đun Văn bản khác.

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

Đồng thời thay đổi cài đặt văn bản cho mô-đun này.

Bản văn :
- Phông chữ: Arial
- Màu văn bản: #ffd400
- Màu văn bản: 18px
- Khoảng cách chữ: 2px
- Định hướng: Trung tâm

khoảng cách

Sau đó, thêm một lề dưới cùng.

Lề (Dưới cùng): 100px

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

Kích hoạt tùy chọn "Tạo toàn băng thông" trên trường Tên và email

Mô-đun cuối cùng cần thiết là mô-đun Biểu mẫu liên hệ. Trước khi làm bất cứ điều gì khác, hãy mở các trường tên và email và thay đổi bố cục.

Tạo toàn bộ băng thông: có

Thêm trường chủ đề

Để tạo thiết kế này, chúng tôi đã thêm một trường khác cho chủ đề.

Bảo vệ thư rác

Sau đó tắt tùy chọn captcha.

Sử dụng Captcha cơ bản: KHÔNG

Cài đặt văn bản trường biểu mẫu

Thực hiện một số thay đổi đối với cài đặt văn bản trường biểu mẫu của mô-đun Biểu mẫu liên hệ này

Lĩnh vực :
- Màu nền: rgba(255,255,255,0)
- Phông chữ: Arial
- Trọng lượng phông chữ: Nhẹ
- Kích thước văn bản: 16px
- Khoảng cách giữa các chữ cái: 2px

Cài đặt nút

Chúng tôi cũng đang thay đổi giao diện của các nút.

Sử dụng kích thước tùy chỉnh cho nút: CÓ
Cái nút :
- Màu văn bản: #ffd400
- Chiều rộng đường viền: 0 pixel
- Khoảng cách chữ cái: 2px
- Phông chữ: Arial
- Kiểu phông chữ: U
- gạch dưới Màu: #4c00ff

khoảng cách

Sau đó thêm một số giá trị đệm tùy chỉnh.

Phần đệm (Dưới cùng): 100px
Đệm (Trái và Phải): 50px

biên giới

Và thêm một đường viền dưới tinh tế cho mỗi trường.

Chiều rộng viền dưới của đầu vào: 2px
Đầu vào Màu đường viền dưới cùng: #efefef

Khoảng cách của các trường riêng lẻ

Cuối cùng, thêm lề dưới vào từng trường riêng lẻ ngoại trừ trường thông báo.

Lề (Dưới cùng): 20px