Bỏ qua đến nội dung chính

Cách tạo gradient hoạt hình trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Hoạt hình nền Gradient có thể là một kỹ thuật thiết kế tuyệt vời để mang lại màu nền cho trang web của bạn. Đó là một giải pháp hoàn hảo cho những ai muốn một cái gì đó thực tế hơn màu nền tĩnh mà không phải dùng đến nền video tải chậm. Ý tưởng cơ bản đằng sau hoạt hình nền gradient là sử dụng CSS để tạo phóng to và tạo hiệu ứng nền gradient để tạo ra các hiệu ứng chuyển màu 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 hình nền gradient trên Divi. Phương pháp này kết hợp một trích xuất CSS tùy chỉnh để tạo hiệu ứng cho các màu gradient được chọn trong các tham số tích hợp của Divi. 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.

Rõ ràng, điều kiện tiên quyết cho hướng dẫn này là bạn đã cài đặt chủ đề Divi và cập nhật.

Tạo hoạt hì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 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 với một hình ả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:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

  • Đệm: trên 12 vw

Sau đó thêm CSS tùy chỉnh sau vào thành phần chính của cột:

height: 40vw;

Cài đặt dòng

Nền Gradient

Bây giờ chúng ta có thể thêm nền gradient cho dòng. Hãy chắc chắn để làm cho các màu gradient bán 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:

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • 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 tôi đã sẵn sàng, chúng tôi cần thêm hình ảnh động 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 dòng cụ thể này.

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%;}}

Hãy chắc chắn để bọc mã trong <style></style>thẻ 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 mở rộng bằng 400% 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 thành thiết kế, hãy thêm mô-đun gọi hành động để trở thành một phần của nội dung.

Gọi để cài đặt 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 các thông tin sau:

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

  • 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ỗ. Nó sẽ là một tiêu đề tuyệt vời cho trang web của bạn!

Hãy nhớ rằng bạn có thể dễ dàng thay đổi màu nền của dòng thành bất cứ thứ gì bạn muốn. Mã sẽ tiếp tục chạy trong nền để tạo hiệu ứng nền cho bạn.

Nếu bạn quen thuộc với CSS, bạn có thể điều chỉnh tốc độ và hướng của hình động bằng cách thay đổi giá trị của các thuộc tính hình ảnh động.

Tôi hy vọng bạn đã tìm thấy hướng dẫn này hữu ích. Đừng ngần ngại chia sẻ ý kiến ​​của bạn ở trên.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
0 cổ phiếu
cổ phiếu
tweet
Enregistrer