Bạn có muốn làm nổi bật một phần cụ thể trên trang của mình không? Hôm nay chúng tôi sẽ hướng dẫn bạn cách tạo lớp phủ đường viền động để làm nổi bật nội dung trang của bạn. Chúng tôi sẽ tạo các đường viền động này bằng cách sử dụng mẫu Gói bố cục dành cho nhà phát triển ứng dụng, có sẵn từ Divi Người xây dựng. Tuy nhiên, bạn có thể sử dụng kỹ thuật này cho bất kỳ loại Website mà bạn tạo. Nó chắc chắn sẽ giúp bạn thêm một thứ nguyên bổ sung vào trang của mình. Chúng tôi hy vọng hướng dẫn này cũng truyền cảm hứng cho bạn để tạo lớp phủ đường viền hoạt hình của riêng bạn.
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ả của ba ví dụ này. Bạn cũng có thể mong đợi một kết quả tương tự trên màn hình nhỏ hơn.
Tạo trang mới bằng cách sử dụng trang đích Gói bố cục nhà phát triển ứng dụng
Điều đầu tiên cần làm là tạo một trang mới và sử dụng Gói bố cục dành cho nhà phát triển ứng dụng.
Bản sao anh hùng
Ví dụ của chúng tôi sẽ được tạo ra trong phần anh hùng. Xin nhắc lại, đây là những gì chúng tôi sẽ tạo ra:
Thêm một dòng mới vào phần anh hùng
Cấu trúc cột
Hãy bắt đầu tạo lại ví dụ đầu tiên! Thêm một dòng mới trong phần chuyên ngành bằng cách sử dụng cấu trúc cột sau:
Thêm một mô-đun văn bản
Để trống nội dung
Thêm mô-đun văn bản mới vào dòng và đảm bảo rời khỏi hộp văn bản nội dung trống. Chúng tôi sử dụng mô-đun cho các tùy chọn thiết kế tích hợp chứ không phải để hiển thị nội dung. nội dung viết.
khoảng cách
Đi tới cài đặt giãn cách của mô-đun văn bản và định hình nó bằng cách thêm lề trong và lề dưới tùy chỉnh. Tạo sự chồng chéo giữa mô-đun này và các mô-đun trước đó bằng cách thêm một lề trên cùng âm.
- Lề trên: -480px
- Đệm tốt nhất: 223px
- Đệm dưới: 223px
biên giới
Sau đó, đi đến cài đặt viền của mô-đun và thêm đường viền bạn chọn.
- Chiều rộng của đường viền: 9px
- Màu viền: #0ae2ff
- Kiểu viền: Outset
Hộp bóng
Thêm một bóng hộp quá.
- Lực lượng bóng mờ hộp: 1px
- Độ dày bóng hộp: 15px
- Màu bóng: rgba (10,226,255,0.59)
Hoạt hình
Và thử với các cài đặt hoạt ảnh để hiển thị nội dung. Tuy nhiên, bạn cần lưu ý rằng bạn có thể sử dụng tùy chọn mà bạn thích nhất.
- Phong cách hoạt hình: Lật
- Lặp lại hình ảnh động: Một lần
- Hướng hoạt hình: Phải
- Thời lượng hoạt ảnh: 1500ms
- Độ trễ hoạt ảnh: 1500ms
- Cường độ hoạt hình: 500%
khảo sát
Bây giờ chúng ta đã trải qua tất cả các bước, chúng ta hãy xem xét cuối cùng về kết quả của ba ví dụ chúng ta đã tạo lại trong suốt hướng dẫn này.
cuối cùng suy nghĩ
Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách làm nổi bật nội dung của bạn bằng cách sử dụng lớp phủ đường viền động. Đây là một kỹ thuật tuyệt vời để thu hút sự chú ý vào một phần cụ thể trên trang của bạn và thực hiện nó một cách đầy phong cách. Bạn có thể sử dụng kỹ thuật này cho bất kỳ loại Website mà bạn xây dựng. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy nhớ để lại bình luận trong phần bình luận bên dưới!
