Bạn có muốn trình bày các chức năng hoặc sản phẩm của mình dưới dạng một tab không Divi với hiệu ứng di chuột?
Bạn đang tìm kiếm những cách sáng tạo mới để giới thiệu các tính năng và / hoặc sản phẩm trên các trang web của mình?
Nếu vậy, hãy tiếp tục đọc vì trong bài viết này, chúng tôi sẽ chỉ cho bạn cách hiển thị các tính năng trong tab khi di chuột chỉ bằng cách sử dụng các tùy chọn tích hợp của Divi. Khả năng bạn có với phương pháp này là vô tận và chúng chắc chắn sẽ cho phép bạn hiểu Divi ở mức độ sâu hơn.
Hiệu ứng di chuột qua tab sẽ chỉ xảy ra trên máy tính để bàn. Trên kích thước màn hình nhỏ hơn, chúng sẽ xuất hiện trên hình dạng bình thường của chúng.
Chúng ta hãy đi!
khảo sát
Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem kết quả mà chúng ta muốn đạt được.
Hãy bắt đầu quá trình tạo với Divi
Thêm một phần mới
Nền Gradient
Thêm một trang mới hoặc mở một trang hiện có và thêm một phần mới. Mở cài đặt phần và thêm nền gradient vào phần.
- Màu bên trái: # f2f2f2
- Màu phù hợp: #ffffff
- Hướng Gradient: 87 độ
- Vị trí bên trái: 20%
- Vị trí bên phải: 80%
khoảng cách
Tiếp theo, Thay đổi cài đặt giãn cách sau:
- Đệm (Trên và Dưới): 0px
Thêm một dòng mới
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:
Màu nền
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi màu nền.
- Màu nền: #ffffff
Định kích thước và căn chỉnh
Trong tab Thiết kế, kéo tùy chọn xuống Sizing và thay đổi các cài đặt sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: YESS
- Chiều rộng máng xối: 1
- Chiều rộng: 400px
- Căn chỉnh hàng: Trái
Kích thước di chuột
Thay đổi tùy chọn Chiều rộng trong cài đặt định cỡ khi di chuột. Điều này sẽ cho phép dòng mở rộng khi di chuột.
- Chiều rộng (Di chuột): 2 pixel
khoảng cách
Sau đó, chuyển đến cài đặt giãn cách trong tùy chọn Khoảng cách
- Đệm (Trên và Dưới): 0px
Viền (Máy tính để bàn)
Thêm '20px' vào góc trên cùng bên phải của dòng và cũng thêm đường viền bên trái vào dòng.
- Góc tròn (Máy tính để bàn): 20px (Góc trên bên phải)
- Chiều rộng đường viền trái: 20px
- Màu viền trái: # 6d44ff
Đường viền khi di chuột
Loại bỏ góc tròn trên cùng bên phải của '20px' khi di chuột bằng cách thêm '0px'.
Box Shadow (Máy tính để bàn)
Cuối cùng, thêm một bóng mờ.
- Độ mạnh của Box Shadow Blur: 80px
- Sức mạnh lan truyền của Box Shadow: -10px
- Màu bóng: rgba (0,0,0,0.11)
Hover Shadow
Và thay đổi màu bóng tối thành màu hoàn toàn trong suốt khi di chuột.
- Box Shadow: rgba (255,255,255,0)
Thêm mô-đun Blurb vào hàng
Thêm nội dung
Bây giờ chúng ta đã hoàn tất việc thay đổi tất cả các cài đặt hàng, chúng ta có thể tiếp tục và thêm mô-đun Blurb vào cột. Hãy thoải mái sử dụng bất kỳ mô-đun nào khác mà bạn lựa chọn.
Khi bạn đã thêm mô-đun, hãy thêm một số nội dung de Votere choix.
Chọn biểu tượng
Sau đó chọn một biểu tượng bạn chọn.
Cài đặt biểu tượng
Và thay đổi sự xuất hiện của biểu tượng trong cài đặt biểu tượng. Đi tới tab Thiết kế
- Màu biểu tượng: # 5323ff
- Vị trí Hình ảnh / Biểu tượng: Trên cùng
- Chiều rộng Hình ảnh / Biểu tượng: 50px
Cài đặt Tiêu đề Văn bản (Màn hình)
Sau đó, thay đổi cài đặt tiêu đề.
- Phông chữ tiêu đề: Poppins
- Căn chỉnh văn bản: căn giữa
- Màu văn bản tiêu đề: # 5323ff
- Kích thước văn bản tiêu đề: 25px
- Khoảng cách chữ cái: -1px
- Chiều cao dòng: 1 em
Di chuột cài đặt tiêu đề văn bản
Và thay đổi chiều cao của hàng tiêu đề khi di chuột.
- Chiều cao dòng tiêu đề: 1,5 em
Cài đặt văn bản nội dung (Màn hình)
Tiếp theo, hãy chuyển đến cài đặt văn bản nội dung và thực hiện một số thay đổi. Điều này bao gồm việc thay đổi kích thước văn bản thành '0px'. Điều này sẽ giúp chúng tôi làm cho văn bản nội dung chỉ xuất hiện khi di chuột.
- Phông chữ nội dung: Poppins
- Trọng lượng phông chữ cơ thể: nhẹ
- Căn chỉnh văn bản: căn giữa
- Màu văn bản nội dung: # 000000
- Kích thước văn bản nội dung: 0px (Máy tính để bàn), 15px (Máy tính bảng và điện thoại)
- Chiều cao dòng: 2,2 em
Cài đặt văn bản nội dung khi di chuột
Để đảm bảo rằng nội dung văn bản xuất hiện khi di chuột, hãy thay đổi kích thước văn bản di chuột.
- Kích thước văn bản nội dung: 15px
Khoảng cách (Máy tính để bàn)
Để cung cấp cho mô-đun một số không gian, chúng tôi sửa đổi các tham số khoảng cách sau:
- Đệm (Trên và Dưới): 80px
Khoảng cách di chuột
Chúng tôi sẽ thay đổi cài đặt giãn cách khi di chuột.
- Đệm (Trên và Dưới): 80px
- Đệm (Trái và Phải): 20vw
Sao chép hàng 3 lần
Khi bạn đã hoàn tất việc chỉnh sửa hàng đầu tiên và mô-đun Blurb của nó, bạn có thể tiếp tục và sao chép hàng đó nhiều lần tùy thích.
Chỉnh sửa Dòng và Mô-đun làm nổi bật # 2
Thay đổi màu đường viền
Hãy bắt đầu bằng cách thay đổi màu của đường viền bên trái của đường thẳng.
- Màu viền trái: # 00ffcc
Chỉnh sửa nội dung và biểu tượng nổi bật
Tiếp theo, mở cài đặt mô-đun Blurb và thay đổi biểu tượng.
Thay đổi màu biểu tượng mô-đun nổi bật
Với màu biểu tượng.
- Màu biểu tượng: # 00eda6
Thay đổi màu tiêu đề
Và màu sắc của văn bản tiêu đề.
- Màu văn bản tiêu đề: # 00eda6
Chỉnh sửa dòng và mô-đun Burb # 3
Màu đường viền
Hãy thay đổi màu viền của đường bên trái.
- Màu viền trái: #afebff
Chỉnh sửa nội dung và biểu tượng nổi bật
Chúng ta cũng hãy thay đổi biểu tượng và nội dung của văn bản trình bày.
Thay đổi màu biểu tượng mô-đun nổi bật
Đồng thời thay đổi màu biểu tượng.
- Màu biểu tượng: # 68d9ff
Thay đổi màu văn bản tiêu đề
Và cả màu sắc của văn bản tiêu đề.
- Màu văn bản tiêu đề: # 68d9ff
Chỉnh sửa Dòng và Mô-đun làm nổi bật # 4
Thay đổi màu đường viền
Trong mô-đun tiếp theo và cuối cùng, cũng thay đổi màu của đường viền bên trái của đường.
- Màu viền trái: # dd87cf
Chỉnh sửa nội dung và biểu tượng nổi bật
Mở mô-đun Blurb trong hàng và thay đổi biểu tượng và nội dung môđun du.
Thay đổi màu biểu tượng mô-đun nổi bật
Với màu biểu tượng.
- Màu biểu tượng: # dd6aca
Thay đổi màu văn bản tiêu đề
Và cả màu sắc của văn bản tiêu đề.
- Màu văn bản tiêu đề: # dd6aca
khảo sát
Bây giờ chúng ta đã xem qua phần hướng dẫn, hãy xem lại kết quả lần cuối.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã chỉ cho bạn cách sử dụng các tùy chọn tích hợp của Divi chỉ để tạo các tab có sẵn khi di chuột.
Cách tiếp cận này sẽ giúp bạn chia sẻ nội dung về tính năng hoặc sản phẩm một cách tương tác.
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.
...
