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.
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
Tạo form liên hệ #2
Thêm một phần mới
Nền Gradient
Hãy chuyển sang ví dụ tiếp theo! Thêm một phần mới với nền dốc.
- Dừng Gradient:
- 50%: #562fef
- 50%: #ffffff
- Loại Gradient: Tuyến tính
khoảng cách
Thêm các giá trị đệm tùy chỉnh vào cài đặt khoảng cách trong phần này.
- Đệ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:
Màu nền
Chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thêm màu nền cho hàng.
- Màu nền: #ffffff
2 cột nền gradient
Thêm nền chuyển màu vào cột thứ hai trong hàng.
- Dừng Gradient:
- 0%: # 9932ff
- 100%: #562fef
- Kiểu: Tuyến tính
- Chỉ đạo: 160 độ
kích thước
Cũng sửa đổi các tham số kích thước dòng.
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng máng xối: 1
- Cân bằng chiều cao cột: CÓ
khoảng cách
Tiếp theo, thêm các giá trị khoảng cách tùy chỉnh.
- Hàng :
- Đệm (Trên và Dưới): 0px
- Cột 1:
- Đệm: 100px (Trên cùng), 50px (Dưới cùng)
- Đệm (Trái và Phải): 50px
- Cột 2:
- Đệm (Trên và Dưới): 100px
- Đệm (Trái và Phải): 50px
biên giới
Thêm '20px' vào mỗi đường viền.
Hộp bóng
Cuối cùng, thêm một bóng hộp tinh tế vào đường kẻ.
- Độ mạnh của Box Shadow Blur: 45px
- Độ lan tỏa của bóng hộp: -11px
- Màu Sadow: rgba(0,0,0,0.3)
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! Bắt đầu với mô-đun Văn bản trong cột đầu tiên.
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 :
- Độ đậm phông chữ: Cực đậm
- Kiểu phông chữ: TT
- Màu sắc: #562fef
- Kích thước: 100px (Máy tính để bàn), 80px (Máy tính bảng), 60px (Điện thoại)
- Khoảng cách chữ cái: -10px
- Chiều cao dòng: 1 em
khoảng cách
Cũng thêm một lề dưới.
- Lề (Dưới cùng): 50px
Thêm mô-đun Biểu mẫu liên hệ vào cột 1
Các yếu tố
Mô-đun thứ hai chúng ta sẽ cần trong cột đầu tiên là mô-đun Biểu mẫu liên hệ Sau khi bạn đã thêm mô-đun này, hãy tắt tùy chọn 'Sử dụng hình ảnh xác thực cơ bản'.
- Sử dụng Captcha cơ bản: KHÔNG
Cài đặt văn bản trường biểu mẫu
Sau đó thay đổi màu nền của các trường biểu mẫu.
- Màu nền của trường: #ffffff
Cài đặt nút
Đồng thời thử với các cài đặt nút để tạo nút biểu tượng thay vì nút văn bản.
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Cái nút :
- Kích thước văn bản: 73px
- Màu văn bản: rgba(0,0,0,0) (Mặc định),
- Màu nền: rgba(255,255,255,0) (Di chuột)
- Chiều rộng đường viền: 0px
- Màu biểu tượng: #9932ff
- Chỉ hiển thị biểu tượng khi di chuột cho nút: KHÔNG
Hộp bóng
Cuối cùng, thêm một bóng hộp tinh tế vào mỗi trường.
- Độ mạnh của Box Shadow Blur: 36px
- Sức mạnh lan truyền của Box Shadow: -14px
- Màu bóng: rgba (0,0,0,0.3)
Thêm mô-đun Văn bản vào cột 2
Thêm nội dung
Mô-đun đầu tiên chúng ta sẽ cần trong cột thứ hai là một mô-đun Văn bản khác.
Cài đặt văn bản
Khi bạn đã thêm nội dung, hãy chỉnh sửa cài đặt văn bản cho mô-đun này.
- Bản văn :
- Độ đậm phông chữ: Cực đậm
- Kiểu phông chữ: TT
- Màu: #ffffff
- Kích thước: 23px
- Khoảng cách chữ: -1px
Thêm Mô-đun Blurb #1 vào Cột 2
Thêm nội dung
Mô-đun thứ hai chúng ta sẽ cần là mô-đun Blurb. Đi trước và nhập một số thông tin liên lạc.
Chọn biểu tượng
Sau đó chọn một biểu tượng tương ứng.
Cài đặt biểu tượng
Thay đổi cài đặt cho biểu tượng này.
- Màu biểu tượng: #ffffff
- Vị trí Hình ảnh / Biểu tượng: Bên phải
Cài đặt văn bản tiêu đề
Tiếp tục bằng cách thực hiện một số thay đổi đối với cài đặt văn bản tiêu đề tiếp theo.
- Kích thước văn bản tiêu đề: 15px
- Khoảng cách chữ tiêu đề: -0,5 pixel
khoảng cách
Và thêm một lề trên.
- Lề (Trên cùng): 120px
Sao chép mô-đun Blurb hai lần
Sau khi chỉnh sửa xong mô-đun Blurb đầu tiên, bạn có thể tiếp tục và sao chép mô-đun đó hai lần.
Sửa đổi nội dung và biểu tượng của hai bản sao
Chỉnh sửa nội dung và biểu tượng của hai bản sao để chia sẻ các loại thông tin liên hệ khác nhau với khách truy cập.
Thay đổi khoảng cách của hai bản sao
Lề trên của hai bản sao cũng nên được thay đổi.
- Lề (Trên cùng): 30px
Tạo form liên hệ #3
Thêm một phần mới
Màu nền
Hãy chuyển sang ví dụ thứ ba! Thêm một phần mới với màu nền sau:
- Màu nền: #3491CE
khoảng cách
Tiếp tục bằng cách thêm các giá trị đệm tùy chỉnh trong cài đặt khoảng cách.
- Đệm (Trên và Dưới): 200px
Thêm dòng số 1
Cấu trúc của cột
Tiếp theo, thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
Thêm mô-đun Văn bản
Thêm nội dung
Đã đến lúc bắt đầu thêm các mô-đun! Mô-đun đầu tiên chúng ta sẽ cần thêm vào cột đầu tiên là mô-đun Văn bản. Nhập một nội dung của sự lựa chọn.
Cài đặt văn bản
Tiếp theo, thay đổi cài đặt văn bản.
- Bản văn :
- Độ đậm phông chữ: Cực đậm
- Màu văn bản: rgba (255,255,255,0.24)
- Kích thước văn bản: 100px (Máy tính để bàn), 70px (Máy tính bảng), 36px (Điện thoại)
- Chiều cao dòng: 1 em
- Định hướng: Trung tâm
khoảng cách
Cũng thêm một lề dưới âm.
- Lề (Dưới cùng): -100px
Thêm dòng 2
Cấu trúc của cột
Hàng thứ hai chúng ta cần để hoàn thành ví dụ này chứa cấu trúc cột sau:
Nền Gradient
Chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt dòng và thêm nền dốc.
- Dừng Gradient:
- 50%: #11CE84
- 50%: #10C77F
- Loại Gradient: Tuyến tính
- Chỉ đạo: 160 độ
kích thước
Cũng thay đổi các tham số kích thước.
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng máng xối: 1
- Cân bằng chiều cao cột: CÓ
khoảng cách
Sau đó thêm một số giá trị đệm.
- Đệm: 150px (Trên cùng), 100px (Dưới cùng)
- Đệm: 50px (Trái và Phải)
biên giới
Sau đó, chuyển đến cài đặt đường viền và thêm '20px' vào mỗi góc. Cũng sử dụng một đường viền dưới cùng.
- Góc tròn: 20px
- Chiều rộng đường viền dưới cùng: 10px
- Màu viền dưới: #1ba35a
Hộp bóng
Hoàn thành cài đặt đường kẻ bằng cách thêm 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: -24px
- Màu bóng: rgba (0,0,0,0.3)
Thêm mô-đun Biểu mẫu liên hệ vào cột 1
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 đầu tiên chúng ta cần trong cột đầu tiên của hàng là mô-đun Biểu mẫu liên hệ. Mở trường tên và email và thay đổi cài đặt bố cục.
- Tạo toàn bộ băng thông: CÓ
Các yếu tố
Sau đó vô hiệu hóa hình ảnh xác thực.
- Sử dụng Captcha cơ bản: KHÔNG
Cài đặt nút
Và thay đổi cài đặt nút.
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Màu chữ của nút: #ffffff
- Dừng Gradient:
- 50%: #3AA0E3
- 50%: #3491CE
- Loại độ dốc: Tuyến tính
- Hướng dốc: 155 độ -
- Chiều rộng đường viền nút: 0 pixel
- Bán kính đường viền nút: 10px
- Sức mạnh lan truyền của Box Shadow: -2px
- Màu bóng: #0a60af
Xem thêm: Divi: Cách tùy chỉnh giỏ hàng và các biểu tượng tìm kiếm của mô-đun "Fullwidth Menu"
biên giới
Chúng tôi cũng thêm '5px' góc tròn vào từng trường.
Thêm mô-đun Văn bản vào cột 2
Thêm nội dung
Trong cột thứ hai, mô-đun đầu tiên chúng ta cần là mô-đun Văn bản. Đi trước và nhập một số nội dung.
Màu nền
Sau đó thay đổi màu nền.
- Bối cảnh: rgba (255,255,255,0.13)
Cài đặt văn bản
Cũng chỉnh sửa với cài đặt văn bản.
- Bản văn :
- Trọng lượng phông chữ: Nhẹ
- Màu văn bản: #ffffff
- Kích thước văn bản: 15px
- Khoảng cách giữa các chữ cái: -0,5px
khoảng cách
Và thêm phần đệm tùy chỉnh để tạo khoảng trống cho mô-đun.
- Đệm (Trên và Dưới): 12px
- Đệm (Trái và Phải): 10px
biên giới
Chúng tôi cũng thêm '20px' ở góc trên bên trái và góc dưới bên trái. Trên hết, chúng ta sẽ thêm một đường viền bên trái.
- Góc bo tròn: 20px(Trên cùng bên trái và Dưới cùng bên trái)
- Chiều rộng viền trái: 34px
- Màu viền trái: #edf000
tầm nhìn
Để làm cho thiết kế này phù hợp với các kích thước màn hình khác nhau, chúng tôi sẽ tắt mô-đun Văn bản trên điện thoại và máy tính bảng.
Sao chép mô-đun văn bản hai lần
Khi bạn đã chỉnh sửa xong mô-đun Văn bản đầu tiên, hãy tiếp tục và sao chép mô-đun đó hai lần.
Sửa đổi nội dung của hai bản sao
Thay đổi nội dung của hai bản sao thành nội dung khác.
Thay đổi khoảng cách của hai bản sao
Và thêm lề trên để tạo khoảng cách giữa mỗi mô-đun.
- Lề (Trên cùng): 20px
Sửa đổi đường viền của hai bản sao
Cuối cùng, thay đổi màu của đường viền bên trái của từng bản sao riêng lẻ.
- Màu 1: #00faff
- Màu 2: #00f76f
Xem thêm bài viết của chúng tôi về Cách tạo thanh trượt đàn accordion đáp ứng
khảo sát
Phiên bản máy tính để bàn
Bây giờ chúng ta đã thực hiện xong tất cả các bước, hãy xem lần cuối các thiết kế mô-đun Biểu mẫu liên hệ Divi trên máy tính để bàn.
di động
Và đây là những gì bạn có thể mong đợi từ các thiết kế mô-đun Biểu mẫu liên hệ của Divi trên kích thước màn hình nhỏ hơn:
Tải DIVI ngay bây giờ !!!
Kết luận
Trong bài đăng này, chúng tôi đã chia sẻ 3 thiết kế mô-đun Biểu mẫu liên hệ Divi tuyệt vời mà bạn có thể dễ dàng sử dụng và sửa đổi cho bất kỳ trang web nào bạn tạo.
Les hình thức Danh bạ là một phần thiết yếu của nhiều trang web, vì vậy điều quan trọng là đảm bảo thiết kế của bạn thuyết phục được khách truy cập liên hệ.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...