Bạn có muốn thiết kế một nền Divi hoạt hình khi cuộn trang nhờ mặt nạ và mẫu? Hướng dẫn này là dành cho bạn ...
Thêm hoạt hình cuộn vào Divi và các mẫu và mặt nạ nền của nó là một mẹo thiết kế hữu ích có thể thổi sức sống mới vào các thiết kế nền của bạn. Website.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo và tạo hoạt ảnh cho các mặt nạ và mẫu nền bằng cách sử dụng các tùy chọn cuộn của Divi (không cần mã tùy chỉnh).
Để làm điều này, chúng ta sẽ tạo một lớp nền nổi bằng một dòng Divi mà chúng tôi sẽ sử dụng để tạo hiệu ứng mặt nạ và mẫu nền khi người dùng cuộn qua một phần của nội dung.
Chúng tôi nghĩ bạn sẽ thích kết quả này.
Hãy bắt đầu!
khảo sát
Đây là một minh họa nhanh về hoạt hình cuộn nền cho hướng dẫn này sẽ trông như thế nào.
Khái niệm
Khái niệm về thiết kế này không quá khó để nắm bắt. Chúng tôi bắt đầu với một phần có nền dốc.
Sau đó, chúng tôi tạo một đường được định vị (tuyệt đối) để nó bao phủ hoàn toàn phần đó (giống như lớp phủ). Chúng ta có thể thêm một mẫu nền vào hàng.
Tiếp theo, chúng ta có thể thêm mặt nạ nền cho cột.
Sau đó, chúng tôi thêm hiệu ứng cuộn đến hàng và cột (như tỷ lệ và xoay) sẽ tạo hiệu ứng động cho mẫu và mặt nạ riêng biệt trong nền của phần.
Khi chúng tôi ẩn phần tràn, tất cả những gì chúng tôi thấy là hoạt ảnh có trong phần đó.
Hãy bắt đầu bằng cách tạo một trang với Divi Builder
Để bắt đầu, bạn cần thực hiện những việc sau:
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Xây dựng
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Đọc cũng: Divi: Cách sử dụng "Gradient Builder" để làm đẹp hình ảnh của bạn
Cách tạo mẫu và mặt nạ nền cuộn hoạt hình với Divi
Thiết kế nền phần
Đầu tiên, chúng ta sẽ bỏ qua việc tạo một dòng và bắt đầu chỉnh sửa phần mặc định hiện có trong trình tạo chủ đề.
Để làm cho thiết kế nền của chúng ta lấp đầy trình duyệt, chúng ta cần thêm chiều cao theo chiều dọc cho phần này. Một cách đơn giản để làm điều này là thêm chiều cao tối thiểu cho phần.
Mở cài đặt phần. Dưới tab Thiết kế, cập nhật chiều cao tối thiểu và xóa phần đệm như sau:
- Ký quỹ: 80 vh (Trên và Dưới)
- Padding: 0px (Trên và dưới)
Thiết kế một gradient nền cho phần
Bây giờ chúng ta có thể thêm một gradient nền tùy chỉnh vào phần này.
Để thêm các điểm dừng chuyển màu đầu tiên, hãy đảm bảo cài đặt phần được mở trong tab Nội dung. Sau đó chọn tab Nền Gradient và nhấp để thêm một gradient mới. Điều này sẽ thêm hai màu gradient mặc định. Thêm các Điểm dừng Gradient sau với màu sắc và vị trí như sau:
- Dừng Gradient:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Sau đó thay đổi hướng của gradient tuyến tính:
- Hướng dốc: 270 độ
Thêm hàng vào phần
Bây giờ phần của chúng tôi đã sẵn sàng, hãy thêm một hàng một cột vào phần đó. Dòng này sẽ được sử dụng cho mặt nạ nền và hoạt hình cuộn mẫu của chúng ta.
Tiếp theo, nhân đôi dòng bạn vừa tạo. Dòng thứ hai (trùng lặp) này sẽ được sử dụng cho nội dung khen thưởng vous le feriez quy chuẩn.
Bây giờ bạn sẽ có dòng trên cùng cho hoạt ảnh cuộn nền và một dòng cho nội dung Bình thường.
Tùy chỉnh dòng
Bây giờ chúng ta đã sẵn sàng chuyển màu nền cho phần của mình, chúng ta có thể chuyển sự chú ý của mình sang đường mà chúng ta sẽ sử dụng cho hoạt hình nền khi cuộn của mình.
Mở cài đặt dòng. dưới tab Nâng cao, cập nhật những điều sau:
- Chức vụ: Tuyệt đối
Điều này sẽ cho phép dòng chồng lên phần mà không chiếm bất kỳ không gian thực nào trong tài liệu.
Bây giờ tất cả những gì chúng ta cần làm là cập nhật chiều cao và chiều rộng để chúng trải dài toàn bộ chiều rộng và chiều cao của phần. Thao tác này sẽ tạo lớp phủ mà chúng ta cần và lớp thiết kế nền thứ hai.
Dưới tab Thiết kế, cập nhật các tùy chọn kích thước như sau:
- Chiều cao cột Aquasize: CÓ
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
- Chiều cao: 100%
- Padding: 0px (Trên và dưới)
Bây giờ bạn có thể không nhìn thấy đường này, nhưng nó hiện bao phủ hoàn hảo nền của toàn bộ phần.
Tạo mẫu nền cho đường kẻ
Trong ví dụ này, chúng tôi sẽ thêm mẫu Bông giấy làm nền đường.
Mở cài đặt dòng. Theo tùy chọn Tiểu sử, chọn tab Mẫu nền và cập nhật những điều sau:
- Hoa văn nền: Confetti
- Mẫu :
- Màu: #f6bef7
- Kích thước: Kích thước tùy chỉnh
- Chiều rộng: 35 vw
- Lặp lại Xuất xứ: trung tâm
NHỚ : Việc sử dụng đơn vị chiều dài VW đảm bảo rằng mẫu sẽ mở rộng theo trình duyệt, giữ cho thiết kế nhất quán và phản hồi nhanh.
Thêm hiệu ứng cuộn vào dòng
Bây giờ mẫu nền của chúng ta đã sẵn sàng, chúng ta có thể thêm các hiệu ứng cuộn vào dòng.
Đi tới tab Nâng cao. Theo tùy chọn Hiệu ứng cuộn, cập nhật những điều sau:
Chọn tab Chuyển động ngang và cập nhật những điều sau:
- Bật chuyển động ngang: CÓ
- Độ lệch ban đầu: 0,5 (ở mức 0%)
- Độ lệch giữa: 0 (từ 40% đến 60%)
- Độ lệch kết thúc: -0,5 (ở mức 100%)
Thao tác này sẽ di chuyển mẫu nền của đường bắt đầu 50 pixel sang trái và kết thúc 50 pixel ở bên phải.
Chọn tab "Tăng và giảm tỷ lệ" và cập nhật thông tin sau:
- Cho phép tăng và giảm tỷ lệ: CÓ
- Quy mô bắt đầu: 150% (ở mức 0%)
- Tỷ lệ trung bình: 100% (từ 40% đến 60%)
- Tỷ lệ kết thúc: 150% (ở mức 100%)
Điều này sẽ chia tỷ lệ mẫu nền của hàng khi cuộn.
Chọn tab « Xoay » và cập nhật những điều sau:
- Bật Xoay: CÓ
- Xoay bắt đầu: 10 độ (ở 0%)
- Xoay giữa: 0 độ (từ 40% đến 60%)
- Kết thúc Xoay: -10 độ (ở 100%)
MẸO CHÍNH: Bạn cần giữ vòng quay ở mức tối thiểu nếu không bạn có nguy cơ để lộ các khoảng trống khi đường kẻ không kéo dài qua phần đó. Một nguyên tắc nhỏ là tăng tỷ lệ nếu bạn muốn tăng vòng quay. Điều này sẽ cho phép đường xoay quanh phần mà không để lộ các cạnh.
Thêm mặt nạ nền với hiệu ứng cuộn vào cột
Sau khi hàng của chúng tôi hoàn tất, chúng tôi sẵn sàng thêm mặt nạ nền có hiệu ứng cuộn vào cột của cùng một hàng. Để bắt đầu, hãy thêm một mặt nạ nền.
Để thực hiện việc này, hãy mở cài đặt cột. dưới tab Mặt nạ nền, cập nhật những điều sau:
- Mặt nạ: Layer Blob
- Màu: #ffffff
- Biến đổi mặt nạ: Lật ngang, đảo ngược
Thêm hiệu ứng cuộn vào cột
Bây giờ mặt nạ nền của chúng ta đã sẵn sàng, chúng ta có thể thêm các hiệu ứng cuộn vào cột. Hãy nhớ rằng cột đã có các hiệu ứng cuộn kế thừa từ hàng mẹ.
Tất cả những gì chúng ta sẽ làm là xoay cột theo hướng ngược lại của hàng để mặt nạ và mẫu được phân tách rõ hơn trong suốt thời gian cuộn.
Đi tới tab Nâng cao. Dưới tùy chọn Hiệu ứng cuộn, chọn tab xoay trònng và cập nhật như sau:
- Bật Xoay: CÓ
- Xoay bắt đầu: -15 độ (ở 0%)
- Xoay giữa: 0 độ (từ 40% đến 60%)
- Kết thúc Xoay: 15 độ (ở 100%)
Ẩn phần tràn
Hiện tại, dòng này vẫn hiển thị bất cứ khi nào thao tác cuộn khiến nó vượt ra ngoài phần đó.
Để dọn sạch phần này, chúng ta cần ẩn phần tràn. Để thực hiện việc này, hãy mở phần cài đặt. dưới tab Nâng cao, hãy cập nhật các tùy chọn hiển thị như sau:
- Tràn ngang: Ẩn
- Tràn dọc: Ẩn
Bây giờ nó trông tốt hơn.
Thêm nội dung vào dòng được tạo cho mục đích này
Tại thời điểm này, mặt nạ nền và hoạt hình cuộn mẫu đã hoàn tất. Tất cả những gì chúng ta phải làm là thêm nội dung chúng ta muốn vào dòng mà chúng ta đã tạo trước đó cho nội dung.
Đối với ví dụ này, chúng tôi đã thêm một tiêu đề giả để chúng tôi có thể xem hoạt hình nền sẽ trông như thế nào với văn bản tĩnh.
Kết quả cuối cùng
Hãy xem kết quả cuối cùng của thiết kế của chúng tôi.
Tải DIVI ngay bây giờ !!!
Kết luận
Thật đáng kinh ngạc khi có thể dễ dàng tạo ra những hình nền đẹp như vậy với các tùy chọn hình nền của Divi. Ngoài ra, việc thêm hoạt ảnh với hiệu ứng cuộn của Divi mang lại sức sống mới cho những thiết kế này.
Để có giao diện khác, bạn có thể thử các mặt nạ và mẫu khác nhau trên mỗi lớp. Nếu bạn muốn có thêm cảm hứng về cách sử dụng mặt nạ và hoa văn nền, kiểm tra những 12 kết hợp mặt nạ nền và mẫu
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
