Trang nói về bạn (về) là một trong những trang quan trọng nhất của Website. Điều này cho phép mọi người hiểu bạn hơn và quyết định xem họ có cảm thấy thoải mái khi thực hiện bước tiếp theo hay không. Nếu bạn đang tìm kiếm một cách dễ dàng để đưa tường thuật vào trang này thì bạn sẽ thích hướng dẫn này. Chúng tôi sẽ sử dụng các hiệu ứng cuộn của Divi để tạo ra sự chuyển đổi tường thuật mượt mà khi cuộn. Ngay khi một phần của câu chuyện mờ đi, phần khác lại xuất hiện. Điều này mang lại cho khách cảm giác đọc một câu chuyện thú vị. 

Kết quả cuối cùng có thể

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.

Hoạt hình Divi

1. Tạo phần toàn màn hình đầu tiên của trang

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

Màu nền

Bắt đầu bằng cách thêm phần đầu tiên vào trang Giới thiệu của bạn. Mở cài đặt phần và thay đổi màu nền thành màu đen.

  • Màu nền: # 000000
Phần nền Divi

kích thước

Sau đó chuyển phần thành toàn màn hình bằng cách thêm chiều cao tối thiểu trong các tham số kích thước.

  • Chiều cao tối thiểu: 100vh
Chiều cao phần Divi

2. Thêm một dòng hoạt hình

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

Cấu trúc cột

Sau đó thêm một hàng mới vào phần của bạn bằng cấu trúc cột sau:

Thêm một dòng divi

kích thước

Mở các tham số dòng và cho phép dòng chiếm toàn bộ chiều rộng của phần chứa bằng cách sửa đổi các tham số kích thước.

  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Cấu hình chiều rộng divi tối đa

khoảng cách

Sau đó thêm điền trái và phải trên các kích thước màn hình khác nhau.

  • Đệm bên trái: 20vw (bàn), 10vw (máy tính bảng và điện thoại)
  • Đệm bên phải: 20vw (bàn) 10vw (máy tính bảng và điện thoại)
Tùy chỉnh đệm divi

Hoạt hình

Để tăng hiệu ứng kể chuyện, chúng tôi cũng sẽ sử dụng hoạt ảnh mờ dần cho dòng.

  • Phong cách hoạt hình: Fade
  • Thời lượng hoạt ảnh: 3000ms
  • Đường cong tốc độ hoạt ảnh: dễ vào-ra
  • Lặp lại hoạt ảnh: một lần
Hoạt hình phần Divi

Chức vụ

Cuối cùng, chúng tôi sẽ đảm bảo rằng dòng được định vị ở giữa của bộ chứa phần bằng cách sửa đổi các tùy chọn vị trí.

  • Vị trí: tuyệt đối
  • Địa điểm: Trung tâm
Vị trí bị bãi bỏ divi

3. Chèn tiêu đề với hiệu ứng cuộn

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

Thêm nội dung H1

Mô-đun duy nhất chúng ta cần trong dòng này là mô-đun văn bản có nội dung H1

Thiết kế titire divi

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

Chuyển đến tab thiết kế mô-đun và thay đổi cài đặt văn bản H1 như sau:

  • Phông chữ tiêu đề: Nunito
  • Trọng lượng phông chữ: Semi bold
  • Màu văn bản tiêu đề: #ffffff
  • Kích thước văn bản tiêu đề: 7vw (máy tính để bàn), 9vw (máy tính bảng), 11vw (điện thoại)
Cấu hình phông chữ Divi

Chuyển động thẳng đứng

Chúng tôi cũng sẽ thêm một hình ảnh động dọc tinh tế.

  • Kích hoạt chuyển động dọc: Có
  • Bắt đầu bù: 0 (ở mức 50%)
  • Độ lệch trung bình: 10 (ở mức 100%)
  • Bù đắp cuối cùng: 10
Hoạt hình văn bản Divi

Hiệu ứng cuộn đến và đi

Với một hiệu ứng mờ dần đến và đi.

  • Kích hoạt mờ dần trong và ngoài: Có
  • Độ mờ ban đầu: 100%
  • Độ mờ trung bình: 100% (ở mức 55%)
  • Độ mờ kết thúc: 0% (đến 62%)
Lựa chọn hoạt ảnh Opacity

Mở rộng hiệu ứng cuộn lên và xuống

Cuối cùng nhưng không kém phần quan trọng, chúng tôi cũng sẽ sử dụng hiệu ứng cuộn lên và xuống.

  • Cho phép mở rộng quy mô lên và xuống: Có
  • Tỷ lệ bắt đầu: 100% (đến 40%)
  • Tỷ lệ trung bình: 95% (đến 74%)
  • Tỷ lệ kết thúc: 90%
Văn bản hoạt hình Divi

4. Sao chép toàn bộ phần một lần và bao gồm văn bản mô tả với các hiệu ứng cuộn

Chỉnh sửa tiêu đề và nội dung

Khi bạn đã hoàn thành phần đầu tiên, bạn có thể sao chép nó hoàn toàn. Mở mô-đun văn bản bên trong vùng chứa phần trùng lặp và sử dụng bản sao H2.

Phần nhân bản divi

Sửa đổi các tham số văn bản của mô-đun Văn bản H2

Thay đổi cài đặt văn bản H2 tương ứng:

  • Cảnh sát tiêu đề 2: Nunito
  • Tiêu đề phông chữ 2: bán đậm
  • Mục 2 Màu văn bản: #ffffff
  • Mục 2 Kích thước văn bản: 5vw (máy tính để bàn), 7vw (máy tính bảng), 8vw (điện thoại)
  • Chiều cao của dòng 2: 1em (văn phòng), 1.2em (máy tính bảng và điện thoại)
câu chuyện trên cuộn

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

Thêm nội dung

Tiếp theo, thêm một mô-đun văn bản khác vào cột bằng nội dung mô tả về sự lựa chọn của bạn.

câu chuyện trên cuộn

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

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

  • Phông chữ: Mở Sans
  • Màu văn bản: #ffffff
  • Kích thước văn bản: 1vw (máy tính để bàn), 2.5vw (máy tính bảng), 3vw (điện thoại)
  • Chiều cao dòng văn bản: 3.1em (bàn), 2.5em (máy tính bảng và điện thoại)
câu chuyện trên cuộn

khoảng cách

Cũng sử dụng một lề trên.

  • Lề trên: 8vw
câu chuyện trên cuộn

Hiệu ứng cuộn đến và đi

Tiếp theo, chuyển sang hiệu ứng cuộn trong tab nâng cao và sử dụng cài đặt làm mờ dần và mờ dần sau:

  • Kích hoạt mờ dần trong và ngoài: Có
  • Độ mờ ban đầu: 100%
  • Độ mờ trung bình: 0% (ở mức 31%)
  • Độ mờ đục cuối cùng: 0% (đến 35%)
Hoạt ảnh cuộn mô-đun văn bản Divi

Mở rộng hiệu ứng cuộn lên và xuống

Đồng thời thêm hiệu ứng tăng và giảm tỷ lệ.

  • Cho phép mở rộng quy mô lên và xuống: Có
  • Tỷ lệ bắt đầu: 100% (đến 40%)
  • Tỷ lệ trung bình: 95% (đến 74%)
  • Tỷ lệ kết thúc: 90%
Mô-đun văn bản divi chuyển thể hoạt hình

Bây giờ bạn có thể sao chép phần cuối cùng này nhiều lần nhất có thể. Tuy nhiên, bạn sẽ phải điều chỉnh nội dung của từng phần cho nhu cầu của bạn.

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.

Kết quả mẫu

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 kể một câu chuyện trên trang giới thiệu của bạn bằng các hiệu ứng cuộn tích hợp của Divi. Hiệu ứng mà chúng tôi đã tạo cho phép bản sao liên tiếp mờ dần và mờ dần, mang lại khách như đọc một câu chuyện. 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 đề xuất nào, vui lòng để lại nhận xét trong phần bình luận bên dưới.