Hoạt ảnh nền Gradient có thể là một kỹ thuật thiết kế tuyệt vời để mang lại màu sắc nền cho cuộc sống của bạn Website. Đó là một giải pháp hoàn hảo cho những ai muốn thứ gì đó chân thực hơn màu nền tĩnh mà không cần phải dùng đến nền video tải chậm. Ý tưởng cơ bản đằng sau hoạt ảnh nền gradient là sử dụng CSS để tạo phóng to và tạo hoạt ảnh cho nền gradient để tạo ra các chuyển đổi màu chuyển động mượt mà.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo hoạt ảnh nền gradient trên Divi. Phương pháp này kết hợp một đoạn CSS tùy chỉnh làm hoạt hình các màu chuyển sắc được chọn trong cài đặt Divi tích hợp. Cấu hình thực sự khá đơn giản cho một kết quả đẹp như vậy.
Hãy bắt đầu!
Kết quả Posisble
Dưới đây là tổng quan về hai cách chúng ta có thể tạo hoạt hình nền gradient trên Divi.
Tất nhiên, điều kiện tiên quyết cho hướng dẫn này là bạn phải Chủ đề Divi được cài đặt và cập nhật.
Tạo hoạt ảnh nền gradient với trích xuất CSS và tùy chọn nền của Divi
Để bắt đầu, hãy thêm một hàng một cột vào phần mặc định trong Divi Builder.
Cài đặt phần
Sau đó, cập nhật cài đặt phần bằng hình nền. Nền gradient của chúng tôi sẽ được thêm vào dòng của chúng tôi để nó chồng lên hình ảnh này.
Sau đó cập nhật điền như sau:
- Đệm: cao 0px, thấp 0px
Cài đặt hàng và cột
Thông số cột
Mở cài đặt hàng, sau đó cập nhật điền vào cột như sau:
- Đệm: trên 12 vw
Sau đó, thêm CSS tùy chỉnh sau vào phần tử cột chính:
height: 40vw;
Cài đặt dòng
Nền Gradient
Bây giờ chúng ta có thể thêm nền gradient vào dòng. Đảm bảo đặt màu chuyển sắc nửa trong suốt nếu bạn muốn xem hình nền của phần.
Cập nhật các tham số dòng như sau:
- Màu nền bên trái: rgba (12,113,195,0.8)
- Màu nền của gradient bên phải: rgba (131,0,233,0.8)
- Kiểu gradient: tuyến tính
- Hướng dốc: 45 độ
Kích thước
Sau đó cập nhật kích thước dòng như sau:
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Lớp CSS tùy chỉnh
Bây giờ nền gradient của chúng ta đã có, chúng ta cần thêm hoạt ảnh thông qua CSS tùy chỉnh. Trước khi thêm mã CSS, chúng ta cần thêm một lớp CSS tùy chỉnh để nhắm mục tiêu hàng cụ thể đó.
Chuyển đến tab nâng cao và thêm lớp CSS sau:
- Lớp CSS: animate-gradient
Thêm một mô-đun mã
Khi lớp CSS đã được thêm vào dòng, thêm mô-đun mã vào dòng.
Dán CSS trong mô-đun mã
Sau đó dán mã CSS sau vào vùng Mô-đun Cài đặt Mã Mã:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
Đảm bảo bọc mã trong <style></style>vì chúng tôi thêm nó vào mã HTML của trang.
Kết quả
Đây là kết quả cho đến nay. Nền gradient đã được phóng to lên 400% so với kích thước ban đầu và được làm động bằng cách di chuyển sang trái và phải.
Thêm lời kêu gọi hành động
Để hoàn tất thiết kế, hãy thêm mô-đun kêu gọi hành động vào nội dung.
Cài đặt lời kêu gọi hành động
Nội dung
Cập nhật nội dung như sau:
- Thêm một tiêu đề
- Thêm văn bản nút
- Thêm văn bản cơ thể
- URL của liên kết của nút: #
- Sử dụng màu nền: KHÔNG
Conception
Chuyển đến tab Thiết kế và cập nhật những điều sau:
- Phông chữ: Kaushan Script
- Kích thước văn bản tiêu đề: 4vw (máy tính để bàn), 30px (điện thoại)
- Chiều cao dòng tiêu đề: 1,4 em
- Cảnh sát cơ thể: Roboto
- Kích thước văn bản nút: 16px
- Màu văn bản nút: # 555555
- Nút nền: #ffffff
- Độ rộng đường viền nút: 0px
- Bán kính đường viền nút: 30 pixel
- Khoảng cách chữ cái nút: 3px
- Phông chữ: Roboto cô đọng
- Trọng lượng phông chữ: đậm
Kết quả
Bây giờ hãy kiểm tra kết quả trên trang trực tiếp với nội dung của lời kêu gọi hành động tại chỗ. Đây sẽ là một tiêu đề tuyệt vời cho Website !
Hãy nhớ rằng, bạn có thể dễ dàng thay đổi màu nền của đường thành bất kỳ màu nào bạn muốn. Mã sẽ tiếp tục chạy trong nền để tạo hoạt ảnh nền cho bạn.
Nếu bạn biết một chút CSS, bạn có thể điều chỉnh tốc độ và hướng của hoạt ảnh bằng cách thay đổi các giá trị của thuộc tính hoạt ảnh.
Tôi hy vọng bạn thấy hướng dẫn này hữu ích. Đừng ngần ngại chia sẻ ý kiến của bạn về nó.
