Cần kết hợp các trường nội tuyến và các trường có chiều rộng đầy đủ của mô-đun Đăng ký thông tin de Divi ?
Le Mẫu liên hệ là một yếu tố quan trọng cần đưa vào trang web của bạn nếu bạn muốn thu hút email và chuyển đổi khách truy cập thành khách hàng.
Mô-đun Đăng ký thông tin de Divi có thể dễ dàng tùy chỉnh để tạo hình thức thẻ liên hệ hấp dẫn và quyến rũ cho tất cả các loại trang web. Mô-đun này đi kèm với hai tùy chọn hiển thị có thể được áp dụng cho từng trường biểu mẫu: en ligne ou toàn bộ chiều rộng.
Trong hướng dẫn này, chúng tôi sẽ trình bày bốn khả năng bố trí độc đáo cho Mẫu liên hệ Divi sử dụng các trường nội tuyến và toàn chiều rộng.
Hãy bắt đầu!
khảo sát
Đây là bản xem trước về những gì chúng tôi sẽ thiết kế.
Bố cục đầu tiên
Bố cục thứ hai
Bố cục thứ ba
Bố cục thứ tư
Những gì bạn cần để bắt đầu
Trước khi chúng ta bắt đầu, cài đặt và kích hoạt chủ đề Divi và đảm bảo bạn có phiên bản Divi mới nhất trên trang web của mình.
Bây giờ bạn đã sẵn sàng để bắt đầu!
4 bố cục mẫu cho mô-đun Biểu mẫu liên hệ của Divi sử dụng các trường nội tuyến và toàn chiều rộng
Chọn bố cục được xác định trước
Mỗi mẫu trong số 4 mẫu được sửa đổi từ bố cục Trang liên hệ sửa giày của Gói bố trí sửa chữa giày, mà bạn có thể tìm thấy trong Thư viện Divi.
Thêm một trang mới vào trang web của bạn và đặt tiêu đề cho nó, sau đó chọn tùy chọn Sử dụng Divi Builder.
Chúng tôi sẽ sử dụng bố cục tạo sẵn từ thư viện Divi cho ví dụ này, vì vậy hãy chọn Duyệt qua các bố cục.
Tìm và chọn bố cục Trang liên hệ sửa giày.
Sélectionnez Sử dụng bố cục này để thêm bố cục vào trang của bạn.
Bây giờ chúng tôi đã sẵn sàng để thiết kế các ví dụ của chúng tôi.
Bố cục đầu tiên
Đầu tiên, di chuyển dòng chứa mô-đun Đăng ký thông tin vào phần trên, ngay bên dưới dòng có mô-đun Blurb. Sau đó, bạn có thể xóa phần trống còn lại.
Mở cài đặt dòng và thêm phần đệm bên trái và bên phải,
- Phần đệm (Trái và Phải): 15%
Chọn các tùy chọn đáp ứng và đặt phần đệm cho thiết bị di động.
- Phần đệm (Trái và Phải): 5%
Đã thay đổi bố cục biểu mẫu liên hệ với các trường nội tuyến và toàn chiều rộng
Đối với bố cục này, chúng tôi sẽ tạo hai trường riêng biệt cho tên và họ.
Mở cài đặt mô-đun Biểu mẫu liên hệ và thay đổi trường ID và Tiêu đề cho trường Họ thành Tên.
Thêm một trường mới bên dưới trường Tên. Đặt trường ID và Tiêu đề thành Tên.
Trong cài đặt trường tên, hãy mở cài đặt bố cục và đặt Tạo toàn băng thông thành Không.
- Tạo toàn bộ băng thông: KHÔNG
Sau đó, trong cài đặt của Mẫu liên hệ, thay đổi thứ tự chủ ngữ và số điện thoại để số điện thoại được liệt kê trước chủ ngữ.
Mở cài đặt bố cục trường Chủ đề và đặt trường thành chiều rộng đầy đủ.
- Tạo toàn bộ băng thông: CÓ
Tùy chỉnh thiết kế biểu mẫu liên hệ
Bây giờ, hãy thay đổi một vài cài đặt để hoàn thành thiết kế. Điều hướng đến tab Thiết kế của cài đặt mô-đun Biểu mẫu liên hệ.
Đầu tiên, thay đổi màu nền của nút.
- Nền nút: #DBC2B3
Thêm lề trên vào nút.
- Lề nút (Trên cùng): 10px
Cuối cùng, chuyển đến cài đặt đường viền và thêm các góc bo tròn vào các trường.
- Đầu vào Góc bo tròn: 30px
Xem thêm: Divi: Cách thêm biểu trưng đáp ứng vào mô-đun "Menu toàn màn hình"
Kết quả cuối cùng của ví dụ 1
Đây là kết quả cuối cùng trên máy tính để bàn và thiết bị di động.
Ví dụ thứ hai
Đối với ví dụ thứ hai của chúng tôi, chúng tôi sẽ di chuyển các mô-đun Blurb sang bên trái của trang và đặt biểu mẫu liên hệ ở bên phải của trang. Di chuyển các mô-đun Blurb vào một cột.
Thay đổi cách bố trí hàng.
Mở cài đặt thiết kế dòng và tắt Sử dụng chiều rộng máng xối tùy chỉnh.
- Sử dụng Chiều rộng Máng tùy chỉnh: KHÔNG
Thêm mã vào CSS tùy chỉnh của thành phần chính để căn chỉnh theo chiều dọc các mô-đun Lời giới thiệu và Biểu mẫu liên hệ.
align-items:center;
Bây giờ chúng ta cần loại bỏ đường viền mỏng giữa các cột. Mở cài đặt hàng, sau đó mở cài đặt cột 1. Trong tab Thiết kế, chuyển đến cài đặt đường viền và xóa đường viền.
- Chiều rộng đường viền phải: 0px
Tiếp theo, mở cài đặt cột 2 và lặp lại các bước để xóa đường viền.
- Chiều rộng đường viền phải: 0px
Đặt văn bản "Liên hệ với chúng tôi" ở giữa.
Di chuyển biểu mẫu liên hệ sang cột bên phải. Xóa phần trống còn lại.
Đã thay đổi bố cục biểu mẫu liên hệ với các trường nội tuyến và toàn chiều rộng
Bố cục này cũng sẽ có hai trường riêng biệt cho tên và họ. Mở cài đặt mô-đun Biểu mẫu liên hệ và thay đổi trường ID và Tiêu đề cho trường Họ thành Tên.
Thêm một trường mới bên dưới trường Tên. Đặt trường ID và Tiêu đề thành Tên.
Trong cài đặt trường tên, hãy mở cài đặt bố cục và đặt Tạo toàn băng thông thành Không.
- Tạo toàn bộ băng thông: KHÔNG
Thay đổi thứ tự của trường điện thoại và chủ đề để điện thoại đứng trước chủ ngữ.
Mở cài đặt trường cho Email, Điện thoại và Chủ đề, đồng thời đặt bố cục thành toàn bộ chiều rộng.
- Tạo toàn bộ băng thông: CÓ
Tùy chỉnh thiết kế biểu mẫu liên hệ
Mở cài đặt hàng, sau đó mở cài đặt cột 2. Đặt màu nền.
- Bối cảnh: #DBC2B3
Trong cài đặt cột 2, chuyển đến tab Thiết kế và thêm phần đệm.
- Đệm (Trên, Dưới, Trái và Phải: 50px
Chọn biểu tượng di động để thay đổi cài đặt phản hồi. Đặt phần đệm cho thiết bị di động.
- Padding (Trên cùng, Dưới cùng, Trái và Phải): 30px
Sau đó thêm bóng hộp vào cột.
Cuối cùng, mở cài đặt mô-đun Biểu mẫu liên hệ và thay đổi màu văn bản của trường.
- Màu văn bản của trường: #000000
Kết quả cuối cùng của ví dụ 2
Đây là kết quả cuối cùng của cách bố trí thứ hai.
Ví dụ thứ ba
Đối với bố cục thứ ba, chúng ta sẽ có biểu mẫu liên hệ ở bên trái và các mô-đun Blurb ở bên phải. Hãy bắt đầu bằng cách thay đổi cấu trúc cột của hàng chứa các mô-đun Blurb.
Di chuyển mô-đun địa chỉ sang cột bên phải.
Tiếp theo, di chuyển mô-đun Văn bản “Liên hệ với chúng tôi” sang cột bên trái, sau đó xóa dòng trống còn lại.
Di chuyển Mô-đun Biểu mẫu Liên hệ sang cột bên trái, bên dưới mô-đun Văn bản “Liên hệ với Hoa Kỳ”. Xóa phần trống còn lại.
Mở cài đặt dòng, trong tab Thiết kế và tắt Sử dụng chiều rộng máng xối tùy chỉnh
- Sử dụng Chiều rộng Máng tùy chỉnh: KHÔNG
Thêm mã vào CSS tùy chỉnh của thành phần chính để căn chỉnh theo chiều dọc các mô-đun Lời giới thiệu và Biểu mẫu liên hệ.
align-items:center;
Mở cài đặt hàng, sau đó mở cài đặt cột 1. Trong tab Thiết kế, chuyển đến cài đặt đường viền và xóa đường viền. Lặp lại các bước để xóa đường viền khỏi cột 2.
- Chiều rộng đường viền phải: 0px
Thay đổi bố cục của biểu mẫu liên hệ
Tuy nhiên, chúng tôi sẽ giữ nguyên độ rộng của trường đối với thiết kế thứ ba, mở cài đặt biểu mẫu liên hệ và thay đổi thứ tự của số điện thoại và trường chủ đề để điện thoại xuất hiện trước.
Kết quả cuối cùng của ví dụ 3
Đây là kết quả cuối cùng của cách bố trí thứ ba.
Đọc cũng: Divi: Cách hiển thị mô-đun Fullwidth Header trên toàn màn hình
Ví dụ thứ tư
Đối với bố cục thứ tư và cũng là bố cục cuối cùng, mô-đun Biểu mẫu liên hệ sẽ ở bên trái và mô-đun Trình bày giới thiệu ở bên phải. Một lần nữa, chúng ta sẽ bắt đầu bằng cách thay đổi cấu trúc cột của hàng chứa các mô-đun Blurb.
Di chuyển mô-đun địa chỉ sang cột bên phải.
Tiếp theo, di chuyển mô-đun Biểu mẫu liên hệ sang cột bên trái. Xóa phần trống còn lại.
Mở cài đặt dòng, trong tab Thiết kế và tắt Sử dụng chiều rộng máng xối tùy chỉnh.
- Sử dụng Chiều rộng Máng tùy chỉnh: KHÔNG
Thêm mã vào CSS tùy chỉnh của thành phần chính để căn chỉnh theo chiều dọc các mô-đun Lời giới thiệu và Biểu mẫu liên hệ.
align-items:center;
Mở cài đặt hàng, sau đó mở cài đặt cột 1. Trong tab Thiết kế, chuyển đến cài đặt đường viền và xóa đường viền.
- Chiều rộng đường viền phải: 0px
Tiếp theo, mở cài đặt cột 2 và lặp lại các bước để xóa đường viền.
- Chiều rộng đường viền phải: 0px
Mở cài đặt mô-đun Văn bản cho văn bản "Liên hệ với chúng tôi" và căn giữa văn bản.
- Căn chỉnh văn bản: Căn giữa
Đã thay đổi bố cục biểu mẫu liên hệ với các trường nội tuyến và toàn chiều rộng
Đối với thiết kế này, tất cả các trường của chúng tôi sẽ có chiều rộng đầy đủ. Mở cài đặt mô-đun Biểu mẫu liên hệ, sau đó mở cài đặt cho từng trường. Trên tab Thiết kế, chọn Bố trí và xác định Tạo toàn bộ chiều rộng sur CÓ.
Khi bạn đã tạo từng trường có chiều rộng đầy đủ, biểu mẫu sẽ trông như thế này.
Bây giờ hãy thay đổi trường ID và Tiêu đề cho trường Họ thành Tên.
Thêm một trường mới bên dưới trường Tên. Đặt trường ID và Tiêu đề thành Tên.
Thay đổi thứ tự của trường điện thoại và chủ đề để điện thoại đứng trước chủ ngữ.
Tùy chỉnh thiết kế mô-đun Biểu mẫu liên hệ
Trong cài đặt mô-đun, trong tab Thiết kế, hãy đặt màu văn bản của trường thành màu đen.
- Màu văn bản của trường: #000000
Mở phần cài đặt và thêm màu nền.
- Bối cảnh: #DBC2B3
Cuối cùng, thêm một mặt nạ nền.
- Mặt nạ nền: Vòm
- Biến đổi mặt nạ: ngang
Để làm cho mặt nạ nền hoạt động tốt hơn trên thiết bị di động, hãy sử dụng cài đặt phản hồi.
- Biến đổi mặt nạ (Điện thoại): ngang và xoay
Kết quả cuối cùng
Đây là kết quả cuối cùng của bố cục thứ tư.
Kết quả cuối cùng
Hãy xem xét tất cả các ví dụ của chúng tôi một lần nữa.
ví dụ đầu tiên
Ví dụ thứ hai
Ví dụ thứ ba
Ví dụ thứ tư
Tải DIVI ngay bây giờ !!!
Kết luận
Có một biểu mẫu liên hệ hấp dẫn có thể tăng chuyển đổi của bạn và cho phép khách truy cập kết nối trực tiếp với bạn.
Như chúng tôi đã trình bày trong bài viết này, bạn có thể sử dụng các tùy chọn trường nội tuyến và toàn chiều rộng để tạo các giao diện và bố cục khác nhau cho biểu mẫu của mình, đồng thời các tùy chọn thiết kế tích hợp sẵn của Divi cho phép bạn tạo các thiết kế độc đáo và hấp dẫn để giúp biểu mẫu nổi bật.
Hy vọng rằng kỹ thuật này sẽ bổ sung một kỹ năng thiết kế hữu ích khác cho các dự án trong tương lai.
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.
...
