Khi hiển thị nhiều lời gọi hành động trên trang của bạn, có thể hữu ích khi tạo hiệu ứng cuộn tương tác kết hợp các yếu tố khác nhau. Một giải pháp là chuyển đổi các mô-đun thành các phần tử cố định trong khi chúng đang di chuyển trong vùng chứa cột của chúng. Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn cách tạo một thiết kế đẹp mắt xử lý kỹ thuật này. Bạn cũng sẽ có thể tải xuống tệp JSON miễn phí!

Đi thôi.

khảo sát

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem xét lần cuối về cách nó hoạt động với các kích thước màn hình khác nhau.

Tổng quan về phần container divi cố định

Hãy bắt đầu tái tạo!

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

Bắt đầu bằng cách thêm một phần thông thường mới vào trang bạn đang làm việc.

Lựa chọn phần divi

khoảng cách

Mở cài đặt phần và thay đổi lề dưới và lề trên cho các kích thước màn hình khác nhau.

  • Đầu bọc: 7vw (máy tính để bàn), 10vw (máy tính bảng), 15vw (điện thoại)
  • Upholstery ở phía dưới: 20vw (máy tính để bàn), 7vw (máy tính bảng), 10vw (điện thoại)
Cấu hình giãn cách phần Divi

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

Cấu trúc cột

Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:

Chọn bố cục cột divi

kích thước

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và để nó chiếm toàn bộ chiều rộng của phần. Cậu ấy cũng là rất quan trọng  kích hoạt tùy chọn 'Cân bằng độ cao cột'. Bằng cách này, bạn sẽ tạo không gian trống trong các cột cho phép các mô-đun cố định di chuyển tự do trong khi cuộn trang.

  • Sử dụng chiều rộng máng tùy chỉnh: Có
  • Chiều rộng máng xối: 1
  • Cân bằng chiều cao cột: Có
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Cấu hình dòng tham số Divi

Cột 2 Đệm trên

Sau đó mở cài đặt cho cột 2 và thêm một số phụ trên cùng trên màn hình.

  • Phần đệm trên: 20vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
Cấu hình divi lợi nhuận cao

Cột 3 Đệm trên

Ngoài ra, thêm một giá trị điền hàng đầu tùy chỉnh vào cột thứ ba.

  • Đệm tốt nhất: 40vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
Cấu hình lợi nhuận cao của cột 3 divi

Cột 4 Đệm trên

Và hoàn thành các tham số của dòng bằng cách thêm giá trị điền cao hơn vào cột 4.

  • Phần đệm trên: 60vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
cột container

Thêm CTA vào cột 1

Thêm nội dung

Đã đến lúc bắt đầu thêm mô-đun! Mô-đun đầu tiên chúng ta cần trong cột 1 là mô-đun CTA (Kêu gọi hành động). Chèn nội dung de Votere choix.

Cấu hình lời gọi hành động Divi

Liên

Đồng thời thêm một liên kết đến nút. Điều này sẽ cho phép nút hiển thị trong thiết kế.

  • URL của liên kết của nút: #
Cấu hình nút gọi hành động

Màu nền

Thay đổi màu nền của mô-đun sau đó.

  • Màu nền: #ffffff
Màu nền Divi

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

Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản chung.

  • Sắp xếp văn bản: trung tâm
  • Màu văn bản: tối
Căn chỉnh cấu hình của cuộc gọi văn bản với hành động divi

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

Cũng thay đổi cài đặt văn bản của tiêu đề.

  • Cấp độ tiêu đề: H3
  • Tiêu đề văn bản: Phổ
  • Tiêu đề văn bản màu: # 000000
  • Kích thước tiêu đề văn bản: 2vw (máy tính để bàn), 4vw (máy tính bảng), 6vw (điện thoại)
Chỉnh sửa tiêu đề difvi kêu gọi hành động

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

Với các thông số của cơ thể của văn bản.

  • Phông chữ cơ thể: Fira Sans
  • Trọng lượng của phông chữ: Nhẹ
  • Văn bản màu cơ thể: # 000000
  • Kích thước văn bản cơ thể: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Chiều cao cơ thể: 1.8em
Nội dung của văn bản divi

Cài đặt nút

Đừng quên tạo kiểu cho nút mô-đun CTA của bạn.

  • Sử dụng kiểu tùy chỉnh cho nút: Có
  • Kích thước văn bản nút: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Màu văn bản nút: #ffffff
  • Màu nền của nút: #444eff
  • Chiều rộng của đường viền nút: 0px
Cấu hình kiểu nút gọi hành động
  • Bán kính đường viền của nút: 50vw
  • Phông chữ: Fira Sans
Cấu hình thông số nút Divi
  • Phần đệm trên: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Upholstery ở phía dưới: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Lớp đệm bên trái: 3vw (máy tính để bàn), 7vw (máy tính bảng), 13vw (điện thoại)
  • Upholstery bên phải: 3vw (máy tính để bàn), 7vw (máy tính bảng), 13vw (điện thoại)
Cấu hình căn chỉnh nút Divi

khoảng cách

Sau đó, chuyển đến cài đặt giãn cách và thêm lề trong và lề dưới tùy chỉnh.

  • Đệm hàng đầu: 8vw
  • Đệm đáy: 8vw
Mô-đun gọi hành động cấu hình giãn cách Divi

biên giới

Cũng thêm các góc tròn cho mô-đun.

  • Góc tròn: 1vw (tất cả các góc)
Mô-đun gọi hành động cấu hình đường viền tròn

Hộp bóng

Hoàn thành thiết kế mô-đun bằng cách thêm một bóng hộp tinh tế.

  • Bóng của hộp Vị trí nằm ngang: 10px
  • Lực lượng bóng mờ hộp: 50px
  • Màu bóng: rgba (0,0,0,0,08)
Mô-đun divi cấu hình hộp bóng

Lớp CSS

Bây giờ, để hiệu ứng cuộn dính hoạt động, chúng ta sẽ cần thêm một vài dòng mã CSS vào cuối hướng dẫn này. Để chuẩn bị, chúng tôi sẽ thêm một lớp CSS vào mô-đun CTA.

  • Lớp CSS: dính-cta
Id cấu hình mô-đun gọi hành động và các lớp

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

Tải lên ảnh

Hãy chuyển sang mod tiếp theo và cuối cùng mà chúng ta cần trong cột 1, đó là mod hình ảnh. Tải lên hình ảnh PNG mà bạn chọn.

Thêm mô-đun hình ảnh với chú thích

sự liên kết

Thay đổi căn chỉnh hình ảnh tiếp theo.

  • Căn chỉnh hình ảnh: Trung tâm
Mô-đun hình ảnh căn chỉnh divi

kích thước

Hãy chắc chắn để buộc toàn bộ chiều rộng trên mô-đun.

  • Buộc toàn băng thông: Có
Cấu hình giãn cách mô-đun hình ảnh Divi

khoảng cách

Hoàn thành cài đặt mô-đun bằng cách đi tới cài đặt giãn cách và thêm các giá trị giãn cách tùy chỉnh cho các kích thước màn hình khác nhau.

  • Lề trên: -5vw (máy tính bảng và điện thoại)
  • Lề dưới: -12vw (máy tính để bàn), 5vw (máy tính bảng và điện thoại)
  • Lớp đệm bên trái: 3vw (máy tính để bàn), 10vw (máy tính bảng), 25vw (điện thoại)
  • Upholstery bên phải: 3vw (máy tính để bàn), 10vw (máy tính bảng), 25vw (điện thoại)
Mô-đun giãn cách cấu hình divi hình ảnh donut

Nhân bản hai mô-đun ba lần và đặt các cột còn lại

Khi bạn đã hoàn thành cả hai mô-đun trong cột 1, bạn có thể nhân đôi chúng ba lần và đặt các bản sao vào các cột còn lại của hàng.

cột container

Thay đổi hình ảnh

Đảm bảo thay đổi hình ảnh trong mỗi mô-đun hình ảnh trùng lặp.

Thay đổi nội dung của CTA và màu nền của các nút

Đồng thời thay đổi nội dung CTA với màu nền của nút.

  • Mô-đun CTA #2: #89ffb4
  • Mô-đun CTA #3: #ff89f1
  • Mô-đun CTA #4: #ffd389
Sửa đổi màu sắc của các mô-đun được gọi là hành động

Thêm lớp CSS vào mô-đun hình ảnh trong cột 1, 2 và 3

Bây giờ, để đảm bảo rằng hiệu ứng dính cũng hoạt động trên hình ảnh, chúng ta sẽ cần thêm một lớp CSS vào các mô-đun hình ảnh trong cột 1, 2 và 3.

  • Lớp CSS: hình ảnh dính
Chỉnh sửa hình ảnh cho từng cột

Thêm dòng 2

Cấu trúc cột

Tất cả những gì còn lại là thêm mã CSS. Để làm điều này, hãy thêm một dòng mới.

Thêm hàng vào một cột trên divi

Thêm một mô-đun mã với mã CSS

Thêm một mô-đun mã vào dòng, chèn mã CSS bên dưới và bạn đã hoàn tất!

<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>

Thêm mô-đun mã trên divi

khảo sát

Bây giờ tất cả các bước đã được thực hiện, chúng ta hãy nhìn lại lần cuối những gì đã xảy ra với các kích thước màn hình khác nhau.

Lời kêu gọi hành động cuối cùng của hoạt ảnh divi
cột container

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã chỉ cho bạn cách giữ các mô-đun cố định trong vùng chứa cột của chúng. Sử dụng kỹ thuật này có thể tạo ra các hiệu ứng cuộn tuyệt đẹp cho phép bạn làm nổi bật các lời gọi hành động khác nhau trên trang của mình. Bạn cũng có thể tải xuống tệp JSON miễn phí! 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.