Các hiệu ứng cuộn của Divi mang đến vô số khả năng thiết kế mới cho các trang web bạn tạo. Các tương tác tinh tế mà bạn chọn để thêm thực sự có thể giúp nâng cao giao diện tổng thể của bạn. Website. Mọi thứ thậm chí còn trở nên tốt hơn ngay sau khi bạn đồng bộ hóa các hiệu ứng cuộn. Trong hướng dẫn này, chúng tôi sẽ đặc biệt xử lý việc tạo phần anh hùng va chạm đẹp với các cột trên cuộn. Thiết kế phần anh hùng hợp nhất hai cột khác nhau trên cuộn, do đó giúp nhấn mạnh bản sao. 

Kết quả có thể

Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.

Va chạm phần Divi

Tái tạo bố cục của Phần anh hùng

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

Tùy chỉnh màu nền

Bắt đầu bằng cách thêm một phần mới vào trang bạn đang làm việc. Mở cài đặt phần và thay đổi màu nền.

  • Màu nền: # f4f2f7
Cấu hình phần Divi

khoảng cách

Cũng loại bỏ phần đệm trên và dưới mặc định khỏi tất cả các phần.

  • Phần đệm trên: 0px
  • Đệm dưới: 0px
Cấu hình khoảng cách Divi

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

Cấu trúc cột

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

Bố cục của các cột divi

kích thước

Nếu không thêm các mô-đun, hãy mở các tham số dòng và sửa đổi các tham số kích thước tương ứng:

  • 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 giãn cách dòng Divi

khoảng cách

Sau đó loại bỏ tất cả các phần đệm trên và dưới mặc định.

  • Phần đệm trên: 0px
  • Đệm dưới: 0px
Khoảng cách dòng Divi

tràn

Và ẩn các dòng tràn.

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
Cấu hình đường hiển thị Divi

Cài đặt cột 1

khoảng cách

Sau đó mở cài đặt trong cột 1 và thêm giá trị điền tùy chỉnh.

  • Phần đệm trên: 15vw
  • Đệm đáy: 10vw
  • Đệm trái: 5vw
  • Đệm phải: 5vw
Cấu hình giãn cách cột hàng Divi

Chỉ số Z

Đồng thời tăng chỉ số z của cột.

  • Chỉ số Z: 12
Vị trí tương đối divi

Cài đặt cột 2

Hình nền

Tiếp tục bằng cách mở cài đặt trong cột 2 và tải lên một hình nền bạn chọn.

  • Kích thước ảnh nền: Bìa
  • Vị trí của hình nền: Trung tâm
  • Lặp lại hình nền: không lặp lại
  • Trộn hình nền: Bình thường
Divi cột nền

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

Thêm nội dung H1

Đã đến lúc thêm các mô-đun, bắt đầu với một mô-đun văn bản đầu tiên trong cột 1. Thêm bất kỳ nội dung H1 nào bạn chọn.

Divi hỗ trợ nghề tự do

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

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

  • Phông chữ: Bóng trong ánh sáng
  • Trọng lượng phông chữ: đậm
  • Màu văn bản tiêu đề: # 000000
  • Kích thước văn bản tiêu đề: 6vw (máy tính để bàn), 11vw (máy tính bảng), 13vw (điện thoại)
  • Khoảng cách chữ cái đầu trang: -2px
  • Chiều cao dòng đầu: 1.2em
Cấu hình phông chữ Divi

khoảng cách

Ngoài ra, thêm một lề trên.

  • Lề trên: 10vw
Cấu hình giãn cách văn bản

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

Thêm nội dung

Chèn một mô-đun văn bản khác với nội dung mô tả của sự lựa chọn của bạn.

Thêm cột văn bản 1 divi

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

Thay đổi cài đặt văn bản của mô-đun như sau:

  • Phông chữ: Mở Sans
  • Màu văn bản: # 1e1e1e
  • Kích thước văn bản: 0.9vw (máy tính để bàn), 1.9vw (máy tính bảng), 3vw (điện thoại)
  • Chiều cao dòng văn bản: 2,4 em
Tùy chỉnh phông chữ văn bản Divi

khoảng cách

Và thêm các giá trị lề tùy chỉnh trên các kích thước màn hình khác nhau.

  • Lề trên: 4vw (máy tính để bàn), 8vw (máy tính bảng), 12vw (điện thoại)
  • Lề dưới: 4vw (máy tính để bàn), 8vw (máy tính bảng), 12vw (điện thoại)
Cấu hình giãn cách văn bản Divi

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

Thêm một bản sao

Mô-đun tiếp theo và cuối cùng chúng ta cần trong cột này là mô-đun nút. Thêm một bản sao của sự lựa chọn của bạn.

Thêm một mô-đun nút divi

Cài đặt nút

Sửa đổi các tham số của các nút mô-đun như sau:

  • 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: # 000000
  • Độ rộng đường viền nút: 0px
  • Bán kính đường viền nút: 100px
Nút phong cách tùy chỉnh divi
  • Nút phông chữ: Mở mà không cần
Cài đặt thông số nút phông chữ

khoảng cách

Và hoàn thành cài đặt nút bằng cách thêm các giá trị đệm tùy chỉnh trên các kích thước màn hình khác nhau.

  • Phần đệm trên: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Đệm dưới: 1vw (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), 5vw (máy tính bảng), 7vw (điện thoại)
  • Đệm bên phải: 3vw (bàn), 5vw (máy tính bảng), 7vw (điện thoại)
Khoảng cách giữa các nút Divi

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

Thêm nội dung

Trong cột thứ hai, mô-đun duy nhất chúng ta cần là mô-đun văn bản. Nhập nội dung bạn chọn.

Văn bản cột 2 divi

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ữ: bóng trong ánh sáng
  • Màu văn bản: rgba (0,0,0,0,25)
  • Kích thước văn bản: 9vw (máy tính để bàn), 14vw (máy tính bảng và điện thoại)
  • Khoảng cách chữ văn bản: -3px
  • Chiều cao của dòng văn bản: 1em
  • Căn chỉnh văn bản: trung tâm (văn phòng), bên trái (máy tính bảng và điện thoại)
Jane doe text cột 2 divi

khoảng cách

Cũng thêm giá trị điền tùy chỉnh.

  • Đệm trên: 5vw (bàn),
  • Đệm dưới: 60vw (máy tính bảng và điện thoại)
  • Đệm trái: 5vw (máy tính bảng và điện thoại)
Giãn cách văn bản Divi

Áp dụng hình động cuộn

Phần

Tăng và giảm

Khi tất cả các mod của bạn đã sẵn sàng, đã đến lúc áp dụng các hiệu ứng cuộn! Trước tiên, hãy mở các thông số phần và sử dụng hiệu ứng chia tỷ lệ sau:

  • Kích hoạt Sclaing từ trên xuống dưới
  • Tỷ lệ bắt đầu: 100% (đến 49%)
  • Quy mô trung bình:
    • Văn phòng: 70% (100%)
    • Máy tính bảng và điện thoại: 100% (100%)
  • Thang điểm cuối:
    • Văn phòng: 70%
    • Máy tính bảng và điện thoại: 100%
Hiệu ứng cuộn hoạt hình divi

Cột 1

Chuyển động ngang

Tiếp tục bằng cách mở cài đặt trong cột 1 và sử dụng hiệu ứng di chuyển ngang sau:

  • Kích hoạt chuyển động ngang: Có
  • Bắt đầu bù: 0
  • Giá trị bù trung bình:
    • Văn phòng: 0 (ở mức 65%)
    • Máy tính bảng và điện thoại: 0 (93%)
  • Kết thúc bù:
    • Văn phòng: 6
    • Máy tính bảng và điện thoại: 0
Căn chỉnh ngang Divi

Tăng và giảm

Đồng thời áp dụng hiệu ứng tăng và giảm tỷ lệ cho cột.

  • Cho phép mở rộng quy mô lên và xuống: Có
  • Quy mô bắt đầu:
    • Văn phòng: 10%
    • Máy tính bảng và điện thoại: 100%
  • Quy mô trung bình:
    • Văn phòng: 90%
    • Máy tính bảng và điện thoại: 100%
  • Tỷ lệ kết thúc: 100%
phần anh hùng va chạm với cột

Cột 2

Chuyển động ngang

Sau đó mở các tham số trong cột 2 và sử dụng các tham số chuyển động ngang sau:

  • Kích hoạt chuyển động ngang: Có
  • Bắt đầu bù: 0
  • Giá trị bù trung bình:
    • Văn phòng: 0 (ở mức 53%)
    • Máy tính bảng và điện thoại: 0 (56%)
  • Kết thúc bù:
    • Văn phòng: -6 (ở mức 53%)
    • Máy tính bảng và điện thoại: 0 (100%)
Divi hoạt hình ngang

Mất dần trong và ngoài

Hoàn thành cài đặt cột bằng cách thêm hiệu ứng mờ dần và mờ dần.

  • Kích hoạt mờ dần trong và ngoài: Có
  • Độ mờ ban đầu: 100% (ở mức 47%)
  • Độ mờ trung bình:
    • Văn phòng: 0% (47%)
    • Máy tính bảng và điện thoại: 100% (47%)
  • Kết thúc độ mờ:
    • Văn phòng: 0%
    • Máy tính bảng và điện thoại: 100%
Chuyển động hoạt hình divi

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã chỉ cho bạn cách sử dụng hiệu ứng cuộn của Divi một cách sáng tạo để tạo phần anh hùng đụng hàng với cột. Ngay sau khi khách cuộn, hai cột khác nhau và các thành phần của chúng bắt đầu hợp nhất. Đổi lại, điều này sẽ cho phép bạn nhấn mạnh bản sao hơn nữa.

Tài nguyên khác

Đây là danh sách nội dung cho phép bạn làm được nhiều việc hơn với theme WordPress Divi.