[Ad_1]

Cách bạn sử dụng một cách sáng tạo các tính năng tích hợp của Divi có thể tạo ra sự khác biệt trong thiết kế trang của bạn. Ví dụ: các hiệu ứng cuộn của Divi cho phép bạn tạo các tương tác cuộn đẹp mắt. Hôm nay, chúng tôi sẽ thêm một hướng dẫn khác vào danh sách những việc bạn có thể làm với các hiệu ứng cuộn tích hợp của Divi. Cụ thể, chúng tôi sẽ chỉ cho bạn cách hợp nhất bản sao cuộn. Thoạt nhìn, bản sao được đặt dưới hình ảnh đi kèm. Tuy nhiên, ngay sau khi bạn cuộn đến một điểm nhất định, bản sao sẽ xuất hiện phía trên hình ảnh sản phẩm và bắt đầu hòa trộn với hình ảnh. Điều này dẫn đến một hiệu ứng bắt mắt mà dường như không tốn nhiều công sức. Bạn cũng sẽ có thể tải xuống tệp JSON bố cục 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 nhanh kết quả trên các kích thước màn hình khác nhau.

Văn phòng

Cuộn bản sao kết hợp

di động

Cuộn bản sao kết hợp

Tải xuống bố cục MIỄN PHÍ

Để có được bố cục miễn phí, trước tiên bạn cần tải chúng xuống bằng cách sử dụng nút bên dưới. Để truy cập tải xuống, bạn cần đăng ký danh sách gửi thư Divi Daily của chúng tôi bằng cách sử dụng hình thức phía dưới. Là người đăng ký mới, bạn sẽ nhận được nhiều lợi ích Divi hơn nữa và gói Bố cục Divi miễn phí vào mỗi Thứ Hai! Nếu bạn đã có trong danh sách, chỉ cần nhập địa chỉ email của bạn vào bên dưới và nhấp vào tải xuống. Bạn sẽ không được "đăng ký lại" hoặc nhận thêm email.

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

Thêm 2 lần phần giữ chỗ

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

Bắt đầu bằng cách thêm phần giữ chỗ vào trang bạn đang làm việc.

Cuộn bản sao kết hợp

kích thước

Mở cài đặt phần và thay đổi chiều cao trong cài đặt định cỡ.

Cuộn bản sao kết hợp

Phần nhân bản

Sao chép phần một lần. Điều này để lại cho bạn hai phần giữ chỗ trên trang của bạn. Các phần giữ chỗ này sẽ giúp bạn thấy hiệu ứng cuối cùng sau khi xem qua hướng dẫn. Trên một trang web trực tiếp, các phần giữ chỗ sẽ được thay thế bằng các phần bình thường mà bạn sử dụng trên toàn trang.

Cuộn bản sao kết hợp

Thêm phần mới giữa các phần giữ chỗ

Khi các phần trình giữ chỗ đã có, hãy thêm một phần mới vào giữa các phần trình giữ chỗ.

Cuộn bản sao kết hợp

Màu nền

Mở cài đặt phần và sử dụng màu nền trắng.

  • Màu nền: #ffffff

Cuộn bản sao kết hợp

khoảng cách

Chuyển sang tab thiết kế phần và thay đổi các giá trị phần đệm trên cùng và dưới cùng cho phù hợp:

  • Lớp đệm trên cùng: 10vh
  • Đệm dưới cùng: 10vh

Cuộn bản sao kết hợp

Thêm dòng số 1

Cấu trúc cột

Tiếp tục bằng cách thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:

Cuộn bản sao kết hợp

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, chuyển đến cài đặt định cỡ và thay đổi giá trị chiều rộng và chiều rộng tối đa.

  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%

Cuộn bản sao kết hợp

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

Thêm một bản sao

Mô-đun duy nhất chúng ta cần cho dòng này là mô-đun văn bản. Thêm một bản sao của sự lựa chọn của bạn.

Cuộn bản sao kết hợp

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

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:

  • Phông chữ văn bản: Montserrat
  • Trọng lượng phông chữ văn bản: Cực đậm
  • Kiểu phông chữ văn bản: chữ hoa
  • Màu văn bản: # fff2ea
  • Kích thước văn bản: 11vw
  • Chiều cao dòng văn bản: 1 em
  • Căn chỉnh văn bản: Căn giữa

Cuộn bản sao kết hợp

Thêm dòng số 2

Cấu trúc cột

Thêm một hàng khác vào phần bằng cách sử dụng cấu trúc cột sau:

Cuộn bản sao kết hợp

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à thay đổi cài đặt định cỡ như sau:

  • Sử dụng chiều rộng máng xối tùy chỉnh: Có
  • Chiều rộng máng xối: 2
  • Chiều rộng: 90%
  • Căn chỉnh dòng: Căn giữa

Cuộn bản sao kết hợp

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

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

Thêm mô-đun hình ảnh vào cột hàng. Tải lên hình ảnh bạn chọn.

Cuộn bản sao kết hợp

sự liên kết

Chuyển sang tab thiết kế mô-đun và thay đổi căn chỉnh hình ảnh cho phù hợp:

Cuộn bản sao kết hợp

kích thước

Sau đó, chuyển đến cài đặt định cỡ và buộc toàn bộ chiều rộng trên mô-đun.

Cuộn bản sao kết hợp

Thêm một mô-đun nút vào cột

Thêm một bản sao

Mô-đun tiếp theo và cuối cùng mà chúng tôi sẽ thêm vào cột là mô-đun nút. Sử dụng một bản sao của sự lựa chọn của bạn.

Cuộn bản sao kết hợp

Căn chỉnh nút

Chuyển đến tab Thiết kế và thay đổi căn chỉnh nút.

Cuộn bản sao kết hợp

Cài đặt nút

Sau đó tạo kiểu cho nút như sau:

  • Sử dụng các kiểu tùy chỉnh cho nút: Có
  • Kích thước văn bản nút: 16px
  • Màu văn bản của nút: # 000000
  • Màu nền của nút: #ffffff
  • Chiều rộng đường viền nút: 0px
  • Khoảng cách giữa các ký tự nút: 2px
  • Phông chữ nút: Montserrat
  • Độ đậm của phông chữ nút: đậm
  • Kiểu phông chữ nút: chữ hoa

Cuộn bản sao kết hợp

khoảng cách

Đồng thời sử dụng các giá trị đệm tùy chỉnh trong cài đặt khoảng cách.

  • Phần đệm trên cùng: 20px
  • Phần đệm dưới cùng: 20px
  • Phần đệm bên trái: 5%
  • Phần đệm bên phải: 5%

Cuộn bản sao kết hợp

Thêm định vị tuyệt đối vào dòng 1

Khi bạn đã hoàn thành hàng thứ hai, hãy quay lại hàng số 1. Mở cài đặt hàng, chuyển đến tab nâng cao và đặt phần này là tuyệt đối. Bằng cách này, dòng và mô-đun văn bản bên trong sẽ được đặt bên dưới dòng chứa mô-đun hình ảnh.

  • Chức vụ: Tuyệt đối
  • Vị trí: Trung tâm

Cuộn bản sao kết hợp

Sao chép hàng n ° 1 và đặt bản sao dưới hàng n ° 2

Để cho phép mô-đun văn bản xuất hiện phía trên hình ảnh, chúng tôi sẽ cần một hàng khác có giá trị z-index cao hơn. Sao chép hàng đầu tiên và đặt bản sao bên dưới hàng thứ hai.

Cuộn bản sao kết hợp

Áp dụng hiệu ứng cho hàng số 3

Tăng chỉ số Z

Mở hàng trùng lặp và thay đổi chỉ mục z trong tab nâng cao.

Cuộn bản sao kết hợp

Thay đổi màu văn bản

Mở mô-đun văn bản trong hàng và thay đổi màu văn bản.

Cuộn bản sao kết hợp

Áp dụng chế độ hòa trộn cho dòng

Sau đó, mở cài đặt hàng và thay đổi chế độ hòa trộn trong cài đặt bộ lọc.

Cuộn bản sao kết hợp

Sử dụng hiệu ứng cuộn trên mô-đun văn bản ở hàng # 3

Thêm hiệu ứng mờ dần và mờ dần

Hoàn thành hướng dẫn bằng cách mở lại nhóm văn bản, chuyển đến hiệu ứng cuộn và bật hiệu ứng mờ dần và mờ dần. Đó là nó!

  • Cho phép làm mờ dần và mờ dần: Có
    • Độ mờ bắt đầu: 0%
    • Độ mờ trung bình: 0% (đến 26%)
    • Độ mờ cuối cùng: 100% (ở mức 28%)
  • Kích hoạt hiệu ứng chuyển động: Giữa phần tử

Cuộn bản sao kết hợp

khảo sát

Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.

Văn phòng

Cuộn bản sao kết hợp

di động

Cuộn bản sao kết hợp

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách sáng tạo với các hiệu ứng cuộn tích hợp của Divi. Cụ thể, chúng tôi đã hướng dẫn bạn cách xáo trộn bản sao cuộn. Lúc đầu, bản sao dường như nằm bên dưới hình ảnh. Sau khi cuộn, bản sao được hiển thị phía trên hình ảnh và hợp nhất với hình ả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.

Nếu bạn muốn tìm hiểu thêm về Divi và nhận thêm quà tặng Divi, hãy nhớ đăng ký kênh của chúng tôi bản tin qua email và đến của chúng tôi Kênh YouTube để bạn luôn là một trong những người đầu tiên biết đến và tận dụng nội dung miễn phí này.



[Ad_2]

Liên kết nguồn