Kể từ khi các tùy chọn định cỡ mới của Divi đã được phát hành, có một số hướng dẫn chỉ cho bạn cách tạo hiển thị khi di chuột. Trong những hướng dẫn này, nội dung mặt nạ được đặt theo chiều dọc. Tuy nhiên, trong một số trường hợp, bạn có thể muốn tạo phần hiển thị theo chiều ngang. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách hiển thị hình ảnh bằng cách sử dụng lưới di chuột và các tùy chọn tràn. Divi. Làm công việc này đòi hỏi một cách tiếp cận hơi khác một chút. Chúng tôi sẽ sử dụng một hàng của một cột và đặt tất cả các mô-đun bên dưới cột kia. Khi di chuột, chúng tôi sẽ chuyển cột thành lưới ngang. Bạn cũng có thể tải xuống tệp JSON miễn phí!

Đi thôi.

khảo sát

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh nó trông như thế nào trên các kích thước màn hình khác nhau.

Divi image flyby previewHãy bắt đầu tái tạo!

Thêm một phần mới

Bắt đầu bằng cách thêm một phần thông thường mới vào trang bạn đang làm việc.

Lựa chọn phần diviThêm một dòng mới

Cấu trúc cột

Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:

Chèn một phần diviNền gradient mặc định

Không thêm nhiều mô-đun, mở các tham số dòng và thêm nền gradient sau:

  • Màu 1: #b1ffc4
  • Màu 2: #ffffff
  • Kiểu gradient: xuyên tâm
  • Hướng xuyên tâm: Trung tâm
  • Vị trí bắt đầu: 28%
  • Vị trí cuối: 28%

Cấu hình nền dòng Divi

Bay trên nền gradient

Thay đổi nền gradient bằng cách di chuột.

  • Màu 1: #b1ffc4
  • Màu 2: #ffffff
  • Kiểu gradient: xuyên tâm
  • Hướng xuyên tâm: trái
  • Vị trí bắt đầu: 5%
  • Vị trí cuối: 5%

Divi dòng điều chỉnh hướng tâmkhoảng cách

Chuyển đến cài đặt khoảng cách và sau đó thay đổi giá trị đệm và lề.

  • Đệm hàng đầu: 0px
  • Đệm dưới: 0px
  • Lề trên: 50px
  • Lề dưới: 50px

Điều chỉnh khoảng cách chia dòng thông số

Đường viền mặc định

Thêm bán kính đường viền của các pixel 50 ở góc trên bên phải và phía dưới bên phải.

Điều chỉnh độ sâu đường viền

Di chuột viền

Đưa các góc vào "0px" lơ lửng.

lưới quá sáng

Bóng mặc định

Sau đó thêm một bóng hộp tinh tế bằng cách sử dụng các tham số sau:

  • Lực lượng bóng mờ hộp: 50px
  • Màu bóng: rgba (0,0,0,0.09)

Cài đặt bóng dòng Divi

Hover Box Shadow

Loại bỏ bóng khỏi hộp khi bay qua, thay thế màu của bóng bằng màu hoàn toàn trong suốt.

  • Màu bóng: rgba (0,0,0,0)

Đường bóng nổi divi

Thêm một mô-đun văn bản vào một cột

Thêm nội dung H2

Đã đến lúc bắt đầu thêm mô-đun, bắt đầu bằng mô-đun văn bản. Nhập nội dung H2 tùy bạn chọn.

Tiêu đề bài viết mô-đun văn bản Divi

Cài đặt văn bản H2

Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản H2 cho phù hợp:

  • Tiêu đề Phông chữ 2: Acme
  • Tiêu đề Phong cách Phông chữ 2: Gạch chân
  • Tiêu đề 2 Màu gạch chân: #00ff3f
  • Tiêu đề 2 Màu văn bản: #000000
  • Tiêu đề 2 Kích thước văn bản: 3vw

Cấu hình phông chữ tiêu đề divi

khoảng cách

Sau đó thêm giá trị điền tùy chỉnh.

  • Đệm tốt nhất: 6vw
  • Đệm đáy: 7vw
  • Đệm trái: 2vw

Cấu hình ký quỹ Divi

Thêm mô-đun hình ảnh vào cột

Tải lên ảnh

Mô-đun thứ hai chúng ta cần trong cột này là mô-đun hình ảnh. Tải lên hình ảnh ngang mà bạn chọn.

Tải hình ảnh diviHộp đèn

Sau đó, kích hoạt tùy chọn hộp đèn trong cài đặt liên kết.

  • Mở trong trình xem: có

Mở trong trình xem divikích thước

Và buộc toàn bộ chiều rộng trên hình ảnh trong cài đặt định cỡ. Điều này sẽ đảm bảo rằng hình ảnh vẫn nhạy cảm ở mọi kích thước màn hình.

  • Buộc toàn băng thông: Có

Sửa đổi kích thước hình ảnh DiviMô-đun hình ảnh nhân bản hai lần

Khi bạn đã hoàn thành mô-đun hình ảnh đầu tiên, bạn có thể sao chép nó hai lần.

Sao chép mô-đun hình ảnh hai lần

Thay đổi hình ảnh

Thay đổi hình ảnh trong hai bản sao. Đảm bảo hình ảnh bạn tải lên có cùng kích thước với hình ảnh đầu tiên.

Chỉnh sửa hình ảnh diviThêm hiệu ứng di chuột qua hàng

kích thước

Bây giờ chúng ta đã hoàn thành cài đặt hàng và nhóm cơ bản, đã đến lúc tạo hiệu ứng di chuột! Chúng tôi sẽ bắt đầu bằng cách thay đổi chiều cao và chiều rộng của dòng và ẩn các phần tràn. Mở cài đặt định cỡ hàng và thực hiện các thay đổi sau:

  • Sử dụng chiều rộng máng tùy chỉnh: Có
  • Chiều rộng máng xối: 1
  • Chiều rộng: 20%
  • Chiều rộng tối đa: 100%
  • Chiều cao: 15.9vw

Cài đặt mô-đun dòng DiviDi chuột

Giảm chiều rộng xuống "100%" khi di chuột. Điều này sẽ cho phép các hình ảnh hiển thị khi dòng được di chuột qua.

  • Chiều rộng: 100%

Thay đổi chiều rộng khi di chuộttầm nhìn

Chuyển sang tab nâng cao tiếp theo và ẩn phần tràn. Điều này sẽ đảm bảo rằng các hình ảnh được che trước khi khách di chuột (máy tính để bàn) hoặc nhấp (máy tính bảng/thiết bị di động) trên mô-đun văn bản.

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn

Cấu hình tràn DiviChuyển tiếp

Chúng tôi cũng đang thay đổi thời gian chuyển đổi trong các tham số chuyển đổi.

  • Thời lượng của quá trình chuyển đổi: 0ms

Chuyển đổi giữa các hoạt ảnh divi

Phần tử cuộn qua cột chính

Để tạo lưới di chuột, chúng ta sẽ mở cài đặt cột, chuyển đến tab Tùy chọn nâng cao và đặt các dòng mã CSS sau vào phần tử di chuột chính:

hiển thị: lưới; cột lưới-mẫu-cột: 20% 25% 25% 25%; khoảng cách lưới: 10px;

Điều chỉnh cột Divilưới quá sáng

Nhân bản dòng hai lần

Khi bạn đã hoàn thành hàng đầu tiên, bạn có thể sao chép nó bao nhiêu lần tùy thích. Đối với ví dụ thiết kế cụ thể này, chúng tôi sao chép hàng hai lần.

Sao chép mô-đun hàng nhiều lần

Sửa đổi nền gradient của dòng 1

Thay đổi màu của gradient đầu tiên trong nền gradient của dòng thứ hai.

  • Màu 1: # ffdc96

Sửa đổi trùng lặp dòng DiviThay đổi nền gradient của dòng 2

Làm tương tự cho hàng thứ ba.

  • Màu 1: # b7c7ff

Thay đổi bản sao của mô-đun văn bản và màu gạch chân của hai bản sao

Tiếp tục bằng cách thay đổi màu gạch chân của các bản sao của mô-đun văn bản với bản sao và bạn đã hoàn tất!

  • Màu được gạch chân # 1: # ffaa00
  • Màu gạch chân # 2: # 0037ff

cuối cùng suy nghĩ

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách hiển thị hình ảnh trong lưới di chuột ngang bằng cách sử dụng các tùy chọn tràn. Divi. Hình ảnh được hiển thị khi di chuột trên máy tính để bàn và nhấp vào máy tính bảng/điện thoại. Mặc dù chúng tôi đã tiết lộ hình ảnh nhưng bạn có thể tiết lộ nội dung theo lựa chọn của bạn bằng cách sửa đổi các tham số trong trình tạo. Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn để tạo ra các thiết kế lưới di chuột thay thế của riêng bạn! Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy nhớ để lại nhận xét trong phần bình luận bên dưới!