Muốn tạo tab với hiệu ứng di chuột từ các hàng với Divi ?
Các tab chắc chắn hữu ích để cung cấp thông tin quan trọng trong một lĩnh vực ngắn gọn của Website. Điều này làm giảm nhu cầu người dùng phải cuộn qua nội dung của một trang dài. Mô-đun tab Divi rất dễ sử dụng và lý tưởng để duyệt một nội dung đơn giản chỉ bằng một cú nhấp chuột.
Nhưng trong hướng dẫn này chúng tôi sẽ chỉ cho bạn cách chuyển đổi hàng Divi được gắn thẻ và xuất hiện khi di chuột.
Chúng tôi cũng sẽ hướng dẫn bạn cách tạo tab ngang và dọc. Điều này sẽ mở khóa sức mạnh của Divi để tạo bố cục hoàn chỉnh với nhiều mô-đun cho từng khu vực nội dung chuyển hướng.
Không cần plugin!
Chúng ta hãy bắt đầu.
khảo sát
Dưới đây là tổng quan về các tab mà chúng ta sẽ cùng nhau tạo trong hướng dẫn này.
Tải xuống DIVI ngay bây giờ !!!
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 các tab di chuột ngang bằng "Divi Rows"
Trong phần mặc định hiện tại, hãy thêm một hàng hai cột.
Nền đường, điền vào hộp và bóng
Trước khi thêm mô-đun của mình, trước tiên hãy tùy chỉnh cài đặt hàng một chút. Mở Cài đặt Dòng và cập nhật những điều sau:
- Màu Gradient Trái: # 284f91
- Màu Gradient Phải: # 4646c4
- Đệm: 50px (Trên và Dưới), 50px (Trái và Phải)
- Box Shadow: xem ảnh chụp màn hình
- Màu hộp bóng: rgba (70,70,196,0.66)
Thêm nội dung vào hàng
Bây giờ chúng tôi sẽ thêm nội dung giữ chỗ vào hàng của chúng tôi. Trong cột 1, thêm hình ảnh bạn chọn bằng mô-đun Hình ảnh. Ở đây, chúng tôi đã sử dụng một hình ảnh từ gói bố cục « Gói bố cục hội nghị thiết kế« .
Trong cột bên phải, hãy thêm một mô-đun Kêu gọi hành động và cập nhật những điều sau:
- URL liên kết nút: # (chỉ để hiển thị nút bây giờ)
- Sử dụng màu nền: KHÔNG
- Căn chỉnh văn bản: trái
- Phông chữ tiêu đề: Lato
- Kích thước văn bản tiêu đề: 60px (máy tính để bàn), 50px (điện thoại)
Tạo tab
Để tạo tab thực tế mà người dùng sẽ di chuột qua để hiển thị nội dung của hàng đó, chúng ta cần tạo mô-đun Văn bản và đặt nó ở trên cùng bên phải với một số CSS tùy chỉnh.
Hãy tiếp tục và thêm một mô-đun văn bản mới bên dưới hình ảnh trong cột 1 và cập nhật những điều sau:
- Nội dung: "Tab 1"
- Nền: # 284f91 (màu này phải khớp với màu gradient bên trái của đường)
- Căn chỉnh văn bản: căn giữa
- Màu văn bản: #ffffff
- Chiều rộng: 100px
- Chiều cao: 50px
- Lề: -100px (Trên cùng), -50px (Trái)
- Đệm: 14px (Trên cùng)
Cuối cùng, thêm css tùy chỉnh sau vào phần tử chính để tạo cho nó một vị trí tuyệt đối ở đầu dòng.
position: absolute !important;
top: 0;
Chiều cao và khoảng cách của phần
Bây giờ, hãy mở cài đặt phần và cập nhật những thứ sau:
- Chiều cao tối thiểu: 500px (Máy tính để bàn), 900px (Máy tính bảng), 750px (Điện thoại)
- Lề: 100px (Trên cùng và Dưới cùng)
- Padding: 0px (Top và Bottom)
Tạo dòng thứ hai
Để tạo hàng thứ hai, hãy sao chép hàng bạn đã tạo trước đó. Di chuyển mô-đun văn bản sang cột 1 và hình ảnh sang cột 2. Sau đó cập nhật hình ảnh mới. Điều này sẽ giúp bạn biết nội dung khác nhau trông như thế nào trên mỗi tab.
Sau đó, mở cài đặt mô-đun Văn bản được sử dụng để tạo tab trong cột 1 và di chuyển tab sang bên phải để nơi hàng này chồng lên hàng trên, bạn có thể nhìn thấy tab ngay bên phải tab của dòng đầu tiên.
- Lề: 50px (Trái)
Đã thêm hiệu ứng di chuột
Mở Cài đặt hàng và thêm bộ lọc sau:
- Độ mờ: 70% (mặc định), 100% (di chuột)
Sau đó, thêm thời lượng chuyển tiếp và đường cong tốc độ cho hiệu ứng di chuột của bộ lọc độ mờ.
- Thời gian chuyển đổi: 500 ms
- Đường cong tốc độ chuyển tiếp: Tuyến tính
Tạo tab thứ ba
Bây giờ chúng tôi có thể thêm tab cuối cùng của chúng tôi. Để làm điều này, hãy nhân đôi dòng thứ hai mà bạn vừa tạo. Sau đó, di chuyển mô-đun văn bản sang cột 1 và hình ảnh sang cột 2. Và cập nhật mô-đun hình ảnh với một hình ảnh mới.
Cập nhật cài đặt đường với gradient nền mới.
- Màu gradient nền bên trái: # 333333
- Màu gradient nền bên phải: # 4646c4
Sau đó, mở cài đặt mô-đun Văn bản được sử dụng để tạo tab trong cột 1 và cập nhật màu và lề.
- Nền: # 333333
- Lề: 150px (Trái)
Đây là trang của bạn sẽ trông như thế nào trước khi chúng tôi đặt các dòng của mình chồng lên nhau.
Các dòng chồng chéo với vị trí tuyệt đối
Để chồng chéo các đường của chúng ta, chúng ta cần sử dụng định vị tuyệt đối. Đầu tiên, hãy cập nhật chiều cao của cả ba hàng lên 100%.
- Chiều cao: 100%
Sau đó, thêm CSS tùy chỉnh sau vào phần tử chính của cả ba dòng:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Đây là giao diện của các tab của chúng tôi vào lúc này.
Thay đổi thứ tự hàng khi di chuột với chỉ mục Z
Tại thời điểm này, bạn có thể nhận thấy rằng hàng / tab thứ ba ở phía trước. Vì vậy, chúng ta cần sắp xếp lại các hàng bằng cách sử dụng Z Index để tab đầu tiên hiển thị trước cho đến khi bạn di chuột qua tab khác.
Đọc cũng: Cách tạo lớp phủ hình ảnh tùy chỉnh trong Divi
Để thực hiện việc này, hãy mở cài đặt hàng đầu tiên và cập nhật chỉ mục z như sau:
Chỉ số Z: 10
Sau đó đưa chỉ số Z của hai dòng còn lại vào di chuột.
Chỉ số Z: 11 (Di chuột)
Nó được thực hiện! Hãy xem kết quả cuối cùng.
Kết quả cuối cùng
Tải xuống DIVI ngay bây giờ !!!
Tạo các tab dọc
Nếu bạn muốn thêm các tab dọc vào các hàng, đây là những gì cần làm.
Tiếp tục và sao chép phần chứa các tab di chuột mà chúng tôi vừa tạo để bạn có một thiết kế mới để làm việc.
Sau đó, mở cài đặt phần và cập nhật những điều sau:
- Phần đệm: 10% (Trái và Phải)
Cập nhật các cài đặt sau cho cả ba dòng của phần trùng lặp với các cài đặt sau:
- Chiều rộng: 70% (Máy tính để bàn), 70% (Máy tính bảng), 80% (Điện thoại)
- Chiều rộng tối đa: 980px
Tiếp theo, cập nhật hướng gradient thành 90 độ cho cả ba dòng.
- Hướng Gradient: 90 độ
Bây giờ đã đến lúc đặt các tab mô-đun Văn bản của chúng ta ở bên trái các hàng của chúng ta để có được các tab dọc mong muốn.
Xem thêm: Cách tạo menu bánh xe quay khi di chuột trong Divi
Mở cài đặt tab mô-đun văn bản trong dòng đầu tiên và cập nhật phần sau:
- Lề (Máy tính để bàn): -50px (Trên cùng), -150px (Trái)
Tiếp theo, mở cài đặt tab mô-đun Văn bản Dòng thứ 2 và cập nhật những điều sau:
- Lề (Máy tính để bàn): 0px (Trên cùng), -150px (Trái)
Và đối với tab cuối cùng trong hàng thứ ba, hãy cập nhật thông tin sau:
- Lề (máy tính để bàn): 50px trên cùng, -150px bên trái
Kết quả cuối cùng
Bây giờ hãy xem kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Với một chút sáng tạo và sức mạnh của Divi, bạn có thể tạo một số tab tùy chỉnh khá thú vị bằng cách sử dụng các dòng Divi. Có một số hạn chế đối với những gì bạn có thể hiển thị.
Ví dụ: với cấu hình này, tất cả các hàng phải có cùng chiều cao với phần. Tuy nhiên, để không cần sử dụng plugin, đây là một giải pháp tuyệt vời.
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.
...
