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.
Hã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.
Thê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:
Nề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%
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%
khoả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
Đườ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.
Di chuột viền
Đưa các góc vào "0px" lơ lử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)
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)
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.
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
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
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.
Hộ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ó
kí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ó
Mô-đ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.
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.
Thê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
Di 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%
tầ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
Chuyể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
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;
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.
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
Thay đổ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!