Bạn có muốn tạo một Mẫu liên hệ dính trong DIVI?
Các tùy chọn dính tích hợp của Divi cho phép bạn tạo các hiệu ứng hình ảnh tuyệt đẹp trên trang của mình chỉ với một vài cú nhấp chuột.
Bạn có thể áp dụng các hiệu ứng dính cho bất kỳ thành phần nào trên trang của mình, nhưng trong hướng dẫn này, chúng tôi sẽ tập trung vào cách tạo một Mẫu liên hệ dính trên bất kỳ trang Divi nào bạn tạo.
Cũng đọc hướng dẫn của chúng tôi về Cách tạo tiêu đề chung cố định trong DIVI
Trong ví dụ này, chúng tôi sẽ thêm hình ảnh và thông tin liên hệ sẽ cuộn dưới dạng Mẫu liên hệ sẽ ở lại tại chỗ.
khảo sát
Đây là bản xem trước về những gì chúng tôi sẽ thiết kế. Trên thiết bị di động, chúng tôi không áp dụng hiệu ứng dính.
Cách thêm biểu mẫu liên hệ cố định vào trang Divi của bạn
Tạo một trang mới với bố cục được xác định trước
Hãy bắt đầu bằng cách sử dụng một bố cục được xác định trước từ thư viện Divi. Đối với ví dụ này, chúng tôi sẽ sử dụng trang liên hệ của Gói bố cục sản phẩm làm đẹp .
Thêm một trang mới vào của bạn Website 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 'Chọn bố cục'.
Tìm và chọn các Trang liên lạc của bố cục'Sản phẩm làm đẹp'.
Lựa chọn 'Chọn bố cục'để thêm bố cục vào trang của bạn.
Bây giờ chúng tôi đã sẵn sàng để tiếp tục hướng dẫn của chúng tôi.
Thay đổi bố cục biểu mẫu liên hệ cố định
Đối với hướng dẫn này, chúng tôi muốn biểu mẫu liên hệ ở cột bên trái (cột 1) luôn cố định trong khi người dùng cuộn qua các mô-đun nội dung khác trong cột bên phải (cột 2). Điều này sẽ cung cấp cho chúng tôi một hiệu ứng cuộn động giúp biểu mẫu liên hệ của bạn nổi bật. Hãy bắt đầu bằng cách sửa đổi mẫu được xác định trước của chúng tôi.
Xem thêm: Cách tạo menu trượt và đẩy trong DIVI
Tạo một phần mới
Thêm một phần mới vào trang của bạn.
Sau đó, chèn một hàng mới với hai cột. Bạn có thể thêm phần này vào bất kỳ đâu trên trang, các phần khác cuối cùng sẽ bị xóa khi chúng ta tiến hành thông qua hướng dẫn này.
Mở cài đặt phần và thay đổi màu nền để phù hợp với thiết kế bố cục:
- Nền: # EEE8E2
Thêm mô-đun cố định của bạn vào cột 1
Thêm mô-đun Biểu mẫu liên hệ trong cột 1. Nếu bạn đang làm theo hướng dẫn này hoặc đã có biểu mẫu liên hệ trên trang của mình, bạn có thể chỉ cần kéo mô-đun 'Mẫu Liên hệ'tồn tại trong cột 1.
Di chuyển mô-đun Văn bản Liên hệ ở đầu phần này. Nó cũng sẽ dính. Thêm viền trắng trong cài đặt văn bản để phù hợp với kiểu bố cục:
- Chiều rộng đường viền: 20px
- Màu viền: #FFFFFF
Bố cục ban đầu bao gồm phần đệm giữa văn bản và đường viền, nhưng chúng tôi sẽ bỏ qua điều đó vì nó cắt bỏ phần dưới cùng của biểu mẫu liên hệ trên các màn hình nhỏ hơn.
Thêm mô-đun cuộn của bạn vào cột 2
Trong cột 2, hãy thêm tất cả các mô-đun cuộn của bạn. Đối với trường hợp của chúng tôi, hãy di chuyển hai mô-đun hình ảnh, thông tin liên hệ và thông tin vị trí sang cột 2. Khi bạn đã chuyển các mô-đun của mình sang phần mới, bạn có thể xóa bất kỳ phần trống nào còn lại.
Mẹo: nếu bạn cần di chuyển nhiều mô-đun cùng lúc, hãy giữ phím 'sự thay đổi'trên bàn phím và chọn các mô-đun bạn muốn di chuyển. Sử dụng chức năng di chuyển mô-đun để di chuyển tất cả các mô-đun của bạn cùng một lúc.
Hình ảnh bù đắp lớn của bố cục mà chúng tôi đã chọn có thể gây ra sự cố cuộn theo chiều ngang. Vì vậy, hãy thay đổi một số cài đặt để giải quyết vấn đề này.
Đọc cũng: Cách tạo tiêu đề chung với biểu mẫu đăng nhập trong DIVI
Mở cài đặt phần. Dưới tiên tiến, đi tới Chế độ hiển thị, sau đó cập nhật cài đặt mục bổ sung theo chiều ngang và dọc:
- Tràn ngang: ẩn
- Tràn dọc: ẩn
Trang của bạn bây giờ sẽ trông như thế này, với nội dung cố định của bạn ở cột 1 và nội dung cuộn của bạn ở cột 2.
Chúng tôi đã sẵn sàng thực hiện bước cuối cùng: làm cho biểu mẫu liên hệ trở nên dính.
Làm cho biểu mẫu liên hệ dính
Với bố cục của chúng tôi tại chỗ, chúng tôi có thể bật cài đặt cố định cho biểu mẫu liên hệ của mình. Lựa chọn 'Cài đặt hàng', sau đó chọn cài đặt cột 1.
Trong tab Nâng cao, điều hướng đến 'Hiệu ứng cuộn'. Đây là nơi chúng tôi sẽ thiết lập các thông số dính.
- Vị trí cố định: Bám sát lên đầu
- Thanh bù đắp hàng đầu: 15px
- Giới hạn dính dưới cùng: Dòng
Và đó là tất cả! Bây giờ bạn đã thêm cài đặt cố định vào cột 1, làm cho biểu mẫu liên hệ và tiêu đề của bạn trở nên cố định khi bạn cuộn xuống trang. Bạn sẽ thấy nội dung của cột 2 cuộn bên cạnh biểu mẫu liên hệ.
Kết quả cuối cùng
Bây giờ chúng ta hãy xem biểu mẫu liên hệ cố định của chúng tôi đang hoạt động.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Vì thế ! Đó là nó cho bài viết này. Cài đặt cố định của Divi là một cách dễ dàng để cải thiện giao diện của biểu mẫu liên hệ của bạn - hoặc bất kỳ thành phần nào khác trên trang của bạn. Bạn có thể áp dụng cài đặt cố định cho bất kỳ phần, hàng hoặc mô-đun nào, chỉ hiển thị bất kỳ thứ gì trên Website dính.
Nếu bạn muốn tìm hiểu thêm về những gì bạn có thể làm với các tính năng dính của Divi, hãy xem hướng dẫn của chúng tôi. Ví dụ, bạn có thể tham khảo hướng dẫn của chúng tôi về Cách thêm biểu mẫu liên hệ vào tiêu đề chung.
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 thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách 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.
...
