Bạn có muốn có nội dung được hiển thị khi di chuột qua các tab góc mở rộng trong Divi ?
Thật thú vị khi khám phá những cách mới và sáng tạo để tương tác với người dùng bằng hiệu ứng di chuột. Một cách tuyệt vời để làm điều này là tiết lộ nội dung khi di chuột bằng các tab góc có thể mở rộng. Điều này cho phép người dùng di chuột qua tab ở góc cột hoặc hình ảnh để mở rộng lớp phủ bằng một nội dung thêm tiện ích cho người dùng.
Trong hướng dẫn này, chúng tôi sẽ tạo một bố cục Divi hoàn toàn độc đáo sẽ hiển thị nội dung khi di chuột bằng các tab góc có thể mở rộng. Trên thực tế, chúng tôi sẽ chỉ cho bạn cách thiết kế một góc vát có thể mở rộng cho cả bốn góc của cột trong Divi.
Hãy bắt đầu!
khảo sát
Dưới đây là một cái nhìn nhanh về bố cục của các tab góc có thể mở rộng mà chúng ta sẽ cùng nhau xây dựng. Lưu ý rằng các hiệu ứng di chuột và nội dung đối xứng đẹp mắt như thế nào.
Tạo một trang mới với Divi Builder
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Tạo bố cục lớp phủ nội dung có thể mở rộng trong Divi
Thiết kế một rãnh góc có thể mở rộng từ vị trí phía dưới bên phải
Để bắt đầu, hãy thêm một hàng hai cột vào phần thông thường.
Trước khi thêm một mô-đun, hãy cập nhật các thông số dòng như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng máng xối: 4
Đối với phần tử đầu tiên được hiển thị này, chúng tôi sẽ tạo một hình nền cột sẽ có một tab ở góc (sử dụng mô-đun lời quảng cáo) ở dưới cùng bên phải của cột mở rộng và bao phủ toàn bộ cột / hình ảnh khi di chuột.
Cũng đọc hướng dẫn của chúng tôi về Divi: Cách tạo lưới cột chất lỏng khi di chuột
Hãy bắt đầu bằng cách thêm một mô-đun Blurb.
Thêm mô-đun nổi bật vào cột 1
Cài đặt cột 1
Khi vùng ngoại ô đã sẵn sàng, hãy mở cài đặt hàng, cập nhật những điều sau:
- Hình nền [chèn hình ảnh]
- Kích thước hình nền: Kích thước thực
LƯU Ý: Đối với ví dụ này, chúng tôi đang sử dụng hình ảnh bia nền trong suốt được lấy từ gói bố cục «Nhà máy bia“. Chúng có kích thước 128 pixel x 359 pixel, đó là lý do tại sao chúng tôi sử dụng kích thước hình ảnh thực tế.
Đường viền của cột 1
- Góc tròn: 10px dưới cùng bên phải
- Chiều rộng đường viền (Bên phải và Dưới cùng): 2px
- Màu viền (Bên phải và Dưới cùng): # e94558
CSS tùy chỉnh và phần bổ sung
Trong tab nâng cao, thêm CSS tùy chỉnh sau vào phần tử chính:
height: 400px;
Tùy chọn thả xuống 'Hiển thị' và thực hiện các thay đổi sau:
- Tràn ngang: Ẩn
- Tràn dọc: Ẩn
Thêm nội dung vào mô-đun Blurb
Bây giờ chúng tôi đã sẵn sàng để bắt đầu tùy chỉnh mô-đun Blurb bên trong cột 1. Mở cài đặt mô-đun và cập nhật những điều sau:
- Tiêu đề: Mango IPA
- Thân hình :
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>- Hình ảnh: Thêm hình ảnh tương tự được sử dụng cho nền cột
Tùy chỉnh mô-đun Blurb
Cung cấp cho màu nền nổi bật khi di chuột như sau:
- Nền (Máy tính để bàn): trong suốt
- Máy tính để bàn (Di chuột): rgba (255,255,255,0.9)
Dưới tab Thiết kế, cập nhật những điều sau:
- Vị trí Hình ảnh / Biểu tượng: Bên phải
- Phông chữ tiêu đề: Oswald
- Độ đậm phông chữ: Bán đậm
- Kiểu phông chữ: TT
- Kích thước văn bản: 40px
- Màu văn bản nội dung (Máy tính để bàn): trong suốt
- Màu văn bản nội dung (Di chuột): # 121212
- Chiều rộng hình ảnh / biểu tượng: 100px (máy tính để bàn), 64px (điện thoại)
- Chiều rộng nội dung: 100%
- Chiều cao: 100%
- Phần đệm (Máy tính để bàn): 15% (Trên cùng và Dưới cùng), 8% (Trái và Phải)
- Padding (Di chuột): 8% (Trên cùng, Dưới cùng, Trái và Phải)
- Góc tròn (Máy tính để bàn): 20px trên cùng bên trái
- Góc tròn (Di chuột): 10px trên cùng bên trái
- Chiều rộng đường viền (Trên và Trái): 4px (Màn hình), 2px (Di chuột)
- Màu viền (Trên và Trái): # e94558
Tùy chọn chuyển đổi (Máy tính để bàn)
- Tỷ lệ chuyển đổi (X và Y): 50%
- Chuyển đổi Dịch
- Trục Y: 50%
- Trục X: 30%
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"
- Biến đổi Nguồn gốc: dưới cùng và bên phải
Tùy chọn chuyển đổi (di chuột)
- Tỷ lệ chuyển đổi (Y và X) (Di chuột): 100%
- Chuyển đổi Dịch (Y và X) (Di chuột): 0%
Để lật hình ảnh nổi bật ở phía bên phải, hãy thêm CSS tùy chỉnh sau vào khu vực Nội dung sai lệch :
direction: rtlLƯU Ý: “rtl” là viết tắt của "Phải sang trái", thay đổi thứ tự nội dung mặc định (từ trái sang phải).
Kết quả
Hãy xem kết quả cuối cùng của tab góc mở rộng từ vị trí dưới cùng bên phải. Lưu ý cách nó mở rộng để lấp đầy toàn bộ cột khi di chuột.
Thiết kế một rãnh góc có thể mở rộng từ vị trí phía dưới bên trái
Cột trùng lặp
Để tạo tab góc mở rộng từ vị trí phía dưới bên trái, chúng ta có thể khởi chạy lại thiết kế bằng cách sao chép toàn bộ cột. Mở cài đặt hàng và sao chép cột 1. Sau đó, xóa cột thừa để bạn chỉ có hai bản sao chính xác.
Cập nhật cài đặt cột 2
Tiếp theo, mở cài đặt cột 2 và cập nhật những thứ sau:
- Góc tròn: 10 px dưới cùng bên trái
- Chiều rộng đường viền (Phải): 0px
- Chiều rộng đường viền (Trái): 2px
- Màu: # e94558
Cập nhật các tham số của mô-đun Blurb
Tiếp theo, cập nhật cài đặt Blurb như sau:
- Căn chỉnh văn bản: phải
- Góc tròn (Máy tính để bàn): 20px trên cùng bên phải
- Góc tròn (Di chuột): 10px trên cùng bên phải
- Chiều rộng đường viền trái: 0px
- Chiều rộng đường viền phải: 4px (máy tính để bàn), 2px (di chuột)
- Màu viền phải: # e94558
- Chuyển đổi Dịch (Trục X) (Máy tính để bàn): -30%
- Transform Origin (Máy tính để bàn): dưới cùng bên trái
Sau đó, đảm bảo xóa CSS tùy chỉnh trong khu vực nội dung Blurb.
Kết quả
Đây là kết quả. Chú ý cách cái này đối xứng với cái đầu tiên và phát triển từ vị trí dưới cùng bên trái của cột.
Thiết kế một rãnh góc có thể mở rộng từ vị trí phía trên bên phải
Bây giờ chúng tôi đã sẵn sàng để bắt đầu hai thiết kế góc mở rộng cuối cùng của chúng tôi. Để có một khởi đầu thuận lợi, hãy sao chép toàn bộ hàng có chứa phần nổi bật mà chúng tôi đã thiết kế.
Cập nhật cài đặt cột 1
Sau đó, mở cài đặt cho hàng trùng lặp, sau đó mở cài đặt cho cột 1 và cập nhật những thứ sau:
- Góc tròn: 10px trên cùng bên phải
- Chiều rộng đường viền dưới cùng: 0px
- Chiều rộng đường viền trên cùng: 2px
- Màu viền trên: # e94558
Cập nhật các tham số của mô-đun Blurb
Tiếp theo, mở cài đặt mô-đun Blurb và cập nhật các nội dung sau:
- Góc tròn (Máy tính để bàn): 20px dưới cùng bên trái
- Góc tròn (Di chuột): 10px dưới cùng bên trái
- Chiều rộng đường viền trên cùng: 0px
- Chiều rộng đường viền dưới cùng: 4px (Máy tính để bàn), 2px (Di chuột)
- Chiều rộng đường viền dưới cùng: # e94558
- Chuyển đổi Dịch (trục Y) (Máy tính để bàn): -50%
- Transform Origin: trên cùng bên phải
CSS tùy chỉnh
Ngay bây giờ chúng ta chỉ có thể thấy phần dưới bên trái của mô-đun bản trình bày, phần này không hiển thị tiêu đề của chúng ta như hai bản trình bày khác ở hàng trên. Để hiển thị tiêu đề trong tab, chúng ta cần đặt lại tiêu đề ở phía dưới bên trái của vùng nền bằng CSS tùy chỉnh.
Thêm CSS tùy chỉnh sau vào khu vực Tiêu đề nổi bật :
position: absolute;
bottom: 0;
left: 15px;Sau đó, thêm CSS sau vào vùng nội dung Nội dung sai lệch :
direction: rtl;
height: 100%;
Thiết kế một rãnh góc có thể mở rộng từ vị trí trên cùng bên trái
Đối với hiệu ứng di chuột qua tab góc mở rộng thứ tư và cuối cùng của chúng tôi, chúng tôi sẽ đặt nó ở góc trên cùng bên trái để hoàn thành thiết kế đối xứng của toàn bộ bố cục lưới.
Cập nhật cài đặt cột 2
Trong cài đặt hàng, hãy mở cài đặt cột 2 và cập nhật các cài đặt sau:
- Góc biên giới: 10 px trên cùng bên trái
- Chiều rộng đường viền dưới cùng: 0px
- Chiều rộng đường viền trên cùng: 2px
- Màu viền trên: # e94558
Cập nhật các tham số của mô-đun Blurb
Tiếp theo, mở cài đặt văn bản mô-đun Blurb trong cột 2 và cập nhật những điều sau:
- Góc tròn (Máy tính để bàn): 20px dưới cùng bên phải
- Góc tròn (Di chuột): 10px dưới cùng bên phải
- Chiều rộng đường viền trên cùng: 0px
- Chiều rộng đường viền dưới cùng: 4px (máy tính để bàn), 2px (di chuột)
- Màu viền dưới: # e94558
Sau đó, cập nhật các tùy chọn chuyển đổi:
- Chuyển đổi Dịch (Trục Y) (Máy tính để bàn): -50%
- Nguồn gốc chuyển đổi: trên cùng bên trái
CSS tùy chỉnh
Sau đó, thêm CSS tùy chỉnh sau vào khu vực Tiêu đề nổi bật :
position: absolute;
bottom: 0%;
right: 0%;Đồng thời thêm CSS sau vào hộp Nội dung sai lệch :
height: 100%;
Hoàn thành thiết kế bố cục
Màu nền của phần
Thêm màu nền của phần như sau:
- Nền: #efefef
Thêm tiêu đề
Để tạo tiêu đề, hãy thêm một dòng vào một cột ở giữa hai dòng
Sau đó, thêm một mô-đun Văn bản.
Thêm nội dung: "Theo mùa".
Sau đó cập nhật các cài đặt sau:
- Phông chữ: Merriweather
- Độ đậm phông chữ: Bold
- Phong cách: TT
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản: # 999999
- Kích thước: 50px (Máy tính để bàn), 30px (Máy tính bảng), 24px (Điện thoại)
- Khoảng cách chữ: 1em
- Padding (Trái): 50px (Máy tính để bàn), 30px (Máy tính bảng), 24px (Điện thoại)
Kết quả cuối cùng
Kiểm tra kết quả cuối cùng của bố cục với các tab góc mở rộng.
Và đây là thiết kế trên di động.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Các tab góc được hiển thị trong hướng dẫn này chắc chắn sẽ hoạt động cho bất kỳ loại nội dung nào bạn muốn hiển thị trên Website Divi.
Bạn cũng không cần phải sử dụng tất cả bốn góc. Ví dụ: bạn có thể tạo bố cục lưới cho hình ảnh chỉ bằng cách sử dụng các tab ở góc trên bên phải để hiển thị nội dung khi di chuột.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
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.
...
