Cần tạo một bản đồ hex với hiệu ứng di chuột qua trang Builder Elementor ? Nếu vậy, hãy tìm hiểu trong bài viết này làm thế nào để đạt được điều đó.
Nếu bạn muốn có một cái nhìn tổng quan về những gì chúng tôi sẽ nói trong hướng dẫn này, chúng tôi mời bạn xem video sau:
Để hoàn thành hướng dẫn này, bạn sẽ cần phiên bản Pro của Elementor, bởi vì chúng tôi sẽ sử dụng mã CSS tùy chỉnh chỉ được hỗ trợ bởi phiên bản này củaElementor.
Cũng đọc hướng dẫn của chúng tôi về: Cách thêm Breadcrumbs vào trang web avec Elementor
Hãy tạo một phần mới với cấu trúc 3 cột, sau đó trong bảng điều khiển, hãy xác định Hauteur sur Chiều cao tối thiểu, và sau đó Chiều cao tối thiểu hãy nhấp vào VH và đặt thanh trượt thành 100.
Hãy thêm một Tiện ích phần nội bộ - Phần bên trong - ở cột giữa. Widget này được định cấu hình mặc định với 2 cột, hãy xóa một trong số chúng. Hãy cấu hình nó Hauteur sur Chiều cao tối thiểu và Chiều cao tối thiểu hãy xác định nó thanh trượt đến 400.
Trong tab Phong cách, hãy đặt hình nền bằng cách chọn một hình ảnh từ thư viện của bạn, sau đó đặt vị trí của nó thành Căn giữa cao cấp, Lặp lại vào Không lặp lại và Kích thước trên Trải ra.
Sur Lớp phủ nềnClick vào Giảm sút chất lượng cho Loại nền, chọn và thay đổi màu chính trên # 2299EF và vị trí trên 20, sau đó là màu phụ # 1917BC và vị trí trên 50, góc trên 140 và độ mờ trên 0.85
Sau đó, thêm một Tiện ích con tiêu đề trong l 'Phần bên trong và như Tiêu đề, Hãy đặt Tên, sau đó trong tab Kiểu của tiện ích Tiêu đề, hãy thay đổi màu thành # FFFFFF. Sau đó, thêm một Tiện ích trình soạn thảo văn bảnvà trong tab Phong cách Căn giữa văn bản và thay đổi màu thành # FFFFFF.
Xem thêm: Cách thêm hình ảnh vào widget bảng giá bằng Elementor
Chọn lại Phần bên trong, chuyển đến tab Nâng cao, trong phần Ký quỹ nội bộ, đi vào 25-2-2-2
Chọn lại Phần bên trong và chuyển đến tab Nâng cao và trong phần CSS tùy chỉnh, sao chép và dán mã sau:
/*Traçage Hexagone*/
selector{
clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
}
Tiếp theo, hãy thêm đoạn mã thứ hai bên dưới vào đoạn mã trước:
/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
Sau đó, hãy cũng dán đoạn mã bên dưới.
/*CSS d'effet de transition avec ombre*/
selector:hover{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.hexa-mom::before{
content: '';
position: absolute;
bottom: -70px !important;
width: 100%;
color: #fff;
height: 60px;
border-radius: 50%;
background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
display: block;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
z-index: 999;
}
.hexa-mom:hover::before{
opacity: 1 !important;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
Sau đó, hãy chọn cột giữa và trong tab tiên tiến, đi vào hexa-mẹ trên đồng ruộng Các lớp CSS.
Hãy nhân đôi cột này 2 lần và xóa 2 cột còn lại.
Hãy thay đổi hình nền của các vật dụng khác Phần bên trong, Tiêu đề và nội dung của trình soạn thảo văn bản cũng như màu sắc của độ dốc Lớp phủ nền. Bạn sẽ có một kết quả trông như thế này:
Đến đây bạn vừa hoàn thành nhiệm vụ này một cách dễ dàng. Chỉ cần xem trước hoạt động của máy tính bảng và điện thoại thông minh, cố gắng thay đổi lợi nhuận để phù hợp với từng thiết bị.
Tải xuống Elementor Pro ngay!
Kết luận
Cho nên ! Đó là nó cho bài viết này hướng dẫn bạn cách tạo một bản đồ hex với hiệu ứng. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến 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.
...
