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.
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
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
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:
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%
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)
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
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
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
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)
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
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%)
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%
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.
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)
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à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)
khoảng cách
Cũng sử dụng một lề trên.
- Lề trên: 8vw
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%)
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%
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.
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.
Cảm ơn bạn rất nhiều hướng dẫn của bạn đã giúp tôi rất nhiều 🙂
Bạn có biết cách chuyển trang bằng divi không? Tôi thấy plugin này có vẻ hoạt động tốt https://divi-page-transition.com trên trang web của tôi. Bạn nghĩ sao ?