Bạn có muốn tạo lưới với Divi linh hoạt khi di chuột?
Nếu bạn thích xây dựng các trang web có lưu ý đến sự tương tác của người dùng, bạn sẽ thích hướng dẫn này.
Hôm nay chúng tôi sẽ hướng dẫn bạn cách tạo một lưới trong suốt có hình nền được hiển thị ngay khi ai đó di chuột qua một trong các phần tử. Thiết kế ban đầu là đơn giản và sạch sẽ. Điều này dẫn đến một trải nghiệm di chuột tốt.
Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn từng bước quá trình tạo.
Đ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 kết quả trên các kích thước màn hình khác nhau.
Văn phòng
di động
Hãy bắt đầu quá trình tạo trong Divi
Thêm một phần mới
Màu nền
Thêm một phần mới vào trang bạn đang làm việc.
Xem thêm: Divi: Cách tạo chân trang tùy chỉnh
Đầu tiên, mở cài đặt phần và áp dụng màu nền trắng.
- Nền: #ffffff
Thêm dòng số 1
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt dòng, chuyển đến tab Thiết kế, kéo tùy chọn xuống Sizing và sửa đổi các thông số định cỡ như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Máng xối với: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó kéo tùy chọn xuống Khoảng cách và thay đổi các cài đặt sau:
- Đệm (Trên và Dưới): 0px
Biên giới
Trong tùy chọn Border, cũng thực hiện các thay đổi sau:
- Kiểu viền (Trên và dưới): 1px
- Màu viền (Trên và dưới): # d3d3d3
Cài đặt cột 1
Nền di chuột
Tiếp theo, hãy tùy chỉnh cài đặt cho cột 1. Áp dụng tô màu gradient cho di chuột.
- Màu 1: rgba (255,255,255,0)
- Màu 2: # 000000
- Loại Gradient: Tuyến tính
- Màu vị trí 1: 30%
- Đặt Gradient Trên Hình ảnh Gradient: CÓ
Hình nền khi di chuột
Cũng tải lên một hình nền sẽ xuất hiện khi di chuột.
- Kích thước ảnh nền: Bìa
- Hình nền Vị trí: Trung tâm
Lớp CSS
Và hoàn thành cài đặt cột bằng cách gán lớp CSS sau trong tab Nâng cao :
- Lớp CSS: hover-column
Thêm mô-đun Văn bản số 1 vào cột 1
Thêm văn bản kích thước H3 (Tiêu đề 3)
Đã đến lúc thêm mô-đun, bắt đầu với mô-đun Văn bản đầu tiên trong cột 1. Chèn văn bản bạn chọn.
Cài đặt văn bản H3
Sau đó chuyển sang tab Thiết kế của mô-đun và sửa đổi các tham số văn bản H3 như sau:
- Phông chữ: Oswald
- Trọng lượng phông chữ Trọng lượng phông chữ: siêu nhẹ
- Tiêu đề 3 Kiểu phông chữ: TT
- Màu văn bản: # 0a0a0a
- Tiêu đề 3 Kích thước văn bản:
- Máy tính để bàn: 3vw
- Máy tính bảng: 7vw
- Điện thoại: 14vw
- Tiêu đề 3 Khoảng cách chữ cái: -2px
kích thước
Thay đổi chiều rộng trên các kích thước màn hình khác nhau trong cài đặt định cỡ.
- Chiều rộng :
- Máy tính để bàn: 44%
- Máy tính bảng: 48%
- Điện thoại: 50%
khoảng cách
Hãy cũng thay đổi các thông số sau trong tùy chọn Khoảng cách.
- Biên (Dưới): 25vh
- Phần đệm (Trên và Dưới): 5%
- Phần đệm (Trái và Phải): 4%
Biên giới
Tiếp theo, chúng ta sẽ thêm đường viền vào bên phải và bên dưới.
- Chiều rộng đường viền (Bên phải và Dưới cùng): 1px
- Màu viền (Bên phải và Dưới cùng): # d3d3d3
Lớp CSS
Và chúng tôi cũng sẽ hoàn thành cài đặt mô-đun bằng cách gán lớp CSS sau cho mô-đun Văn bản:
- Lớp CSS: hover-title
Thêm mô-đun Văn bản số 2 vào cột 1
Thêm nội dung
Thêm một mô-đun Văn bản khác ngay bên dưới mô-đun văn bản trước đó bằng nội dung mô tả về sự lựa chọn của bạn.
Cài đặt văn bản
Chuyển tab mới Thiết kế của mô-đun và sửa đổi các tham số văn bản cho phù hợp:
- Phông chữ văn bản: Karla
- Màu văn bản: #ffffff
- Size:
- Máy tính để bàn: 0,8 vw
- Máy tính bảng: 2vw
- Điện thoại: 3.6vw
- Chiều cao dòng: 2,2 em
khoảng cách
Cũng áp dụng các giá trị ký quỹ tùy chỉnh.
- Phần đệm (Dưới cùng): 10%
- Phần đệm (Trái và Phải): 9%
Lớp CSS
Và hoàn thành các thông số mô-đun bằng cách sử dụng lớp CSS sau cho mô-đun:
- Lớp CSS: hover-text
Thêm mô-đun "Nút" vào cột 1
Thêm mô tả
Mô-đun tiếp theo và cuối cùng chúng ta cần là một mô-đun nút. Nhập mô tả của sự lựa chọn của bạn.
Cài đặt nút
Sửa đổi các thông số mô-đun như sau:
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Kích thước văn bản nút:
- Máy tính để bàn: 1vw
- Máy tính bảng: 2,5 vw
- Điện thoại: 4vw
- Chiều rộng đường viền nút: 0px
- Bán kính đường viền: 0px
- Phông chữ nút: Karla
- Hiển thị biểu tượng nút: CÓ
- Vị trí biểu tượng nút: Phải
- Chỉ hiển thị biểu tượng trên cho nút: KHÔNG
khoảng cách
Đồng thời thêm các giá trị khoảng cách tùy chỉnh.
- Ký quỹ (Dưới cùng): 8%
- Biên (Trái và Phải): 9%
- Phần đệm (Dưới cùng): 5%
- Phần đệm (Phải): 20%
bóng hộp
Tiếp theo, áp dụng một bóng hộp.
- Hộp Shadow Ngang Vị trí: 0px
- Box Shadow Vertical Vị trí: 2px
- Màu bóng: # 000000
Lớp CSS
Và hoàn thành cài đặt mô-đun bằng cách gán lớp CSS sau vào nút:
- Lớp CSS: nút di chuột
Sử dụng lại cột 1
Xóa cột 2, 3 và 4
Bây giờ chúng ta đã tạo xong cột đầu tiên, chúng ta có thể sử dụng lại nó. Điều đầu tiên chúng tôi sẽ làm là xóa các cột trống khỏi hàng của chúng tôi.
Sao chép cột 1 ba lần
Chúng tôi sẽ sử dụng lại cột 1 bằng cách sao chép nó ba lần.
Thay đổi hình nền khi di chuột qua các cột trùng lặp
Sau đó, thay đổi hình ảnh nền cột trùng lặp trong mỗi cột trùng lặp.
Chỉnh sửa nội dung trùng lặp
Đồng thời thay đổi nội dung của mô-đun trong mỗi cột trùng lặp.
Đường viền cột độc đáo
Cột 1
Chúng tôi sẽ cần áp dụng cài đặt đường viền duy nhất cho mỗi cột, bắt đầu với cột 1.
- Chiều rộng đường viền (Phải):
- Máy tính để bàn: 1px
- Máy tính bảng: 1px
- Điện thoại: 0px
- Màu (Phải): # d3d3d3
- Chiều rộng đường viền (Dưới cùng):
- Máy tính để bàn: 0px
- Máy tính bảng: 1px
- Điện thoại: 1px
- Màu viền (Dưới cùng): # d3d3d3
Cột 2
Tiếp theo chúng ta có cột 2.
Chiều rộng đường viền (Phải):
- Máy tính để bàn: 1px
- Máy tính bảng: 1px
- Điện thoại: 0px
Màu (Phải): # d3d3d3 Chiều rộng đặt hàng (Dưới):
- Máy tính để bàn: 0px
- Máy tính bảng: 1px
- Điện thoại: 1px
Màu viền (Dưới cùng): # d3d3d3
Cột 3
Và chúng tôi sẽ sử dụng các cài đặt đường viền sau cho cột 3:
- Chiều rộng đường viền (Phải):
- Máy tính để bàn: 1px
- Máy tính bảng: 1px
- Điện thoại: 0px
- Màu (Phải): # d3d3d3
- Chiều rộng đường viền (Dưới cùng):
- Máy tính để bàn: 0px
- Máy tính bảng: 1px
- Điện thoại: 1px
- Màu viền (Dưới cùng): # d3d3d3
Thêm CSS tùy chỉnh vào cài đặt trang
Mở cài đặt trang
Bây giờ toàn bộ thiết kế đã sẵn sàng, tất cả những gì còn lại là thêm một số mã CSS tùy chỉnh để giúp kích hoạt hiệu ứng di chuột trên các mô-đun. Để làm điều này, hãy mở cài đặt trang.
Cũng đọc hướng dẫn của chúng tôi về: Divi: Cách tạo footer dính với hiệu ứng "Reveal"
Thêm mã CSS
Và sao chép-dán các dòng mã CSS sau:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.
Văn phòng
di động
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách tạo một thiết kế di chuột đẹp.
Cụ thể, chúng tôi đã tạo một lưới cột bắt đầu đơn giản và rõ ràng. Ngay sau khi khách di chuột qua một mục lưới cụ thể, hình nền được hiển thị và kiểu mô-đun thay đổi.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
