Bạn có muốn tìm hiểu cách tạo một thẻ với tác dụng của một danh mục đầu tư không? Trong hướng dẫn mới này, chúng tôi sẽ chỉ cho bạn cách thực hiện với Elementor.
Nếu bạn không biết chúng tôi muốn nói về điều gì hôm nay, mời bạn xem video sau:
Sau đó, hãy trở lại lý do tại sao chúng ta ở đây.
Để 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 cũng: Cách hiển thị văn bản phía trên hình ảnh bằng 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 chọn cột ở giữa và thả vào cột này Tiện ích phần nội bộ. Tiện ích Phần bên trong được định cấu hình với 2 cột theo mặc định. Dưới 2 cột, hãy thả tiện ích con Tiêu đề với tiêu đề Nhà Hàng, lựa chọn H4 cho thẻ HTML và Trung tâm để căn chỉnh.
Trong tab tiên tiến của tiện ích Tiêu đề, Hãy nhập 30 vì Lề trên
Hãy một lần nữa chọn Phần nội bộ của chúng tôi. Trong bảng điều khiển, hãy sửa đổi Hauteur sur Chiều cao tối thiểu và Chiều cao tối thiểu hãy đặt con trỏ thành 380. Sau đó, hãy xóa cột bên phải hoặc bên trái của phần Nội bộ
Hãy thả nó xuống Tiện ích hình ảnh trong Phần nội bộ và chèn một hình ảnh từ thư viện của chúng tôi. hãy chọn Trọn vì Kích thước ảnh et Trung tâm vì Căn chỉnh.
NB: Nếu bạn muốn có các trang hoàn chỉnh như của chúng tôi, chúng tôi mời bạn chụp các trang với sự trợ giúp của tiện ích mở rộng Chrome GoFullPage nhưng bạn cũng có thể sử dụng một trang khác.
Khám phá thêm: Cách tạo thư viện hình ảnh với Elementor
Sau đó, trong Tab Phong cách, bấm vào PX de Chiều rộng, hãy đặt thanh trượt thành 260 et les tia biên giới sur 10
Tiếp theo, hãy sửa đổi Box Shadow bằng cách thay đổi Blur thành 40 và Diffuse thành -10.
Trong tab Nâng cao, trong phần định vị, lựa chọn tuyệt đối vì Chức vụ, Định hướng ngang sur Gauche, các décalage sur 0, L 'Định hướng dọc sur Bas.
Hãy nhân đôi tiện ích Hình ảnh của chúng tôi hai lần. Chắc chắn tất cả chúng sẽ được xếp chồng lên nhau. Hãy đưa Bộ điều hướng lên để chúng ta có thể truy cập vào các tiện ích khác bị ẩn bởi tiện ích đầu tiên.
Hãy thay thế hình ảnh của Widget thứ hai và trong Tab của nó tiên tiến, hãy sửa đổi chúng lợi nhuận dưới cùng et Gauche bằng cách nhập 30 cho mỗi. Bây giờ bạn sẽ thấy một chút độ trễ,
Thực hiện tương tự đối với Tiện ích hình ảnh thứ ba, nhưng áp dụng các lề của 60 cho lề Dưới và lề Trái. Bây giờ bạn sẽ có một cái nhìn tổng quan về cả 3 tiện ích Hình ảnh.
Hãy chọn tiện ích Phần nội bộ của chúng tôi, chuyển đến Tab của nó tiên tiến và trong phần Tùy chỉnh CSS, sao chép và dán đoạn mã sau:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Nếu bạn không có phần này thì bạn không có phiên bản Pro, nếu muốn tiếp tục bạn cần nâng cấp phiên bản của mình)
Bây giờ nếu bạn di chuột qua bản đồ của chúng tôi, bạn sẽ có một hoạt ảnh thu phóng
Hãy chọn Widget Hình ảnh đầu tiên của chúng ta (cái thấp nhất) và trong Tab của nó tiên tiến, hãy lấy phía trước-img vì Các lớp CSS.
Đối với Tiện ích hình ảnh thứ hai, hãy nhập giữa img cho các Lớp CSS.
Đối với Tiện ích hình ảnh thứ ba, hãy nhập hình ảnh cuối cùng cho các Lớp CSS.
Xem thêm: Cách tạo Thư viện hình ảnh theo tab bằng Elementor
Di chuột qua cột của chúng tôi bây giờ chúng ta sẽ thấy một hình ảnh động tuyệt đẹp của nội dung của Bộ phận Nội bộ của chúng tôi.
Hãy hiển thị trang của chúng ta ở chế độ máy tính bảng Chúng ta sẽ thấy rằng các hình ảnh sẽ không được hiển thị chính xác.
Chọn tiện ích Hình ảnh đầu tiên, trong tab Kiểu của nó, hãy sửa đổi chiều rộng bằng cách nhấp vào PC và sau đó nhập 150 làm chiều rộng. Hãy làm tương tự với 2 tiện ích Image còn lại.
Hãy chọn Phần nội bộ của chúng tôi, trong phần của nó Nội dung, hãy sửa đổi Chiều cao tối thiểu sur 225.
Chúng ta cũng hãy hiển thị trang của chúng tôi ở chế độ Điện thoại thông minh, ưu tiên nó không gây ra bất kỳ vấn đề nào. Tuy nhiên, nếu nó trình bày bất kỳ điều gì, hãy chọn Phần nội bộ của chúng tôi, trong phần của nó Nội dung, hãy sửa đổi Chiều cao tối thiểu.
Bây giờ, hãy nhân đôi cột giữa của chúng ta 2 lần, sau đó xóa 2 cột trống khác.
Hãy sửa đổi Tiêu đề của các cột này sau đó thay đổi hình ảnh
Bạn sẽ phải có một phần tuyệt vời mà sau đây là kết quả:
Như vậy, bạn vừa thực hiện nhiệm vụ này một cách dễ dàng.
Tải xuống Elementor Pro ngay!
Kết luận
Đây rồi! Đó là vì bài viết này sẽ hướng dẫn bạn cách tạo một thẻ với tác dụng của một danh mục đầu tư. 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.
...
