Bạn đã bao giờ muốn trình bày tạo một thẻ sản phẩm với Elementor ?
Đây là những gì chúng tôi sẽ chỉ cho bạn trong hướng dẫn này. Để có một ý tưởng khá chính xác về những gì chúng ta sẽ nói đến hôm nay, mời các bạn xem video sau:
Hướng dẫn này là về cách giới thiệu các sản phẩm là giày bằng cách làm nổi bật kích cỡ, màu sắc của chúng và nút mua của mỗi sản phẩm. Khi bạn di chuột qua từng thẻ, thông tin này sẽ xuất hiện. Dưới đây là một bản tóm tắt ngắn gọn về những gì chúng tôi sẽ làm.
Để làm theo hướng dẫn này, chúng tôi mời bạn tìm hình ảnh của đôi giày và phiên bản Pro của Elementor. Nếu bạn chưa có nó, hãy nhấp vào liên kết này để lấy nó.
Nhưng chúng ta hãy quay lại với những gì chúng ta ở đây để làm gì.
Hãy tạo một trang và sửa đổi nó với Elementor.
Trong cái này, chúng ta hãy chọn một cấu trúc có 3 cột. Hãy giải quyết nó chiều cao sur chiều cao tối thiểu , chiều cao tối thiểu trên VH và đặt con trỏ thành 100.
Trong tab Kiểu, chọn màu nền để #130640
Ở cột giữa, hãy chèn một Tiện ích hình ảnh bằng cách chọn một hình ảnh giày từ thư viện của bạn.
Chuyển đến tab Kiểu và trong thuộc tính hình ảnh, đặt chiều rộng thành 80
Sau đó kéo một Tiện ích tiêu đề và nhập tiêu đề giày Nike - Đây là một ví dụ, nó có thể là một thương hiệu hoàn toàn khác -
Đọc cũng: Cách tối ưu hóa bố cục trang web của bạn với Elementor
Đặt Thẻ HTML thành H3 và căn giữa
Chuyển đến tab Kiểu và thay đổi màu văn bản thành màu trắng
Thay đổi cả kiểu chữ
Sau đó kéo một Tiện ích phần bên trong bên dưới Tiện ích tiêu đề mà bạn đã chèn ở trên.
Theo mặc định, widget này sẽ cung cấp cho bạn 2 cột, hãy xóa một trong số chúng. Trong này Tiện ích phần bên trong, Chèn một Tiện ích tiêu đề.
Đặt nó như một tiêu đề Cắt : và đặt Thẻ HTML thành nhịp cầu.
Trong tab Kiểu, thay đổi màu Tiêu đề, Kích thước thành 15 và Chất béo thành 300
Trong tab Nâng cao, chỉ đặt Lề phải thành 5 và trong thuộc tính định vị lựa chọn Nội tuyến (Tự động).
Thêm vào Phần bên trong cùng một tiện ích Nút cho Văn bản 8 và khoảng cách biểu tượng trên 0.
Đọc cũng: Cách cuộn qua hình ảnh dài của danh mục đầu tư bằng Elementor
Trong tab Kiểu, thay đổi màu văn bản và màu nền của nút tương ứng thành Đen và Trắng và trong Lề trong, hãy nhập 6-10-6-10 tương ứng cho các lề Trong trên-Phải-Dưới-Trái.
Trên tab Nâng cao, chỉ đặt lề trái thành 5 và trong thuộc tính Định vị, hãy chọn Nội tuyến (Tự động).
Nhân đôi nút này 3 lần và thay đổi văn bản của 3 nút cuối cùng thành 9,10,11 - bạn cũng có thể thực hiện việc này bằng cách sử dụng các chữ cái S, M, L, XL, XXL-
Nhấp vào chỉnh sửa phần và đặt Căn chỉnh theo chiều ngang thành Căn giữa
Sau đó, sao chép phần Nội bộ này -Phần bên trong- và sửa đổi Kích thước theo Màu sắc, loại bỏ 3 nút và trên một nút vẫn sẽ xóa văn bản nút.
Trong tab Nội dung của Nút, chọn biểu tượng Vòng tròn từ thư viện biểu tượng, nhấp vào Chèn để thêm vào nút.
Trong tab Kiểu, đặt kích thước 24 cho kiểu chữ và liên kết Lề bên trong và nhập 0. Trong màu nền, hãy đặt độ trong suốt thành min và sau đó bạn có thể thay đổi màu của văn bản thành màu xanh lam chẳng hạn.
Sau đó nhân đôi nút này 3 lần và thay đổi màu của hai nút kia thành màu vàng và đỏ. Sau đó nhấp vào phần bên trong để chỉnh sửa nó và trên tab Nâng cao, đặt lề Trên và dưới thành -5 và 10.
Bây giờ chúng ta sẽ thêm một tiện ích Nút bên dưới Tiện ích Phần bên trong thứ hai, hãy nhập dưới dạng văn bản Mua ngay và Căn chỉnh với Trung tâm. Trong tab Kiểu, đặt nút thành Trắng và văn bản nút thành Đen, sau đó đặt tất cả bán kính đường viền thành 20.
Chọn cột chính mà chúng tôi đã làm việc và đặt căn chỉnh Theo chiều dọc sur milieu, trong tab Kiểu, hãy chọn Kiểu nền là Giảm sút chất lượng và như Kiểu chọn Xuyên tâm sau đó trên màu chính đặt độ trong suốt và vị trí thành 94. Đối với màu thứ hai, hãy đặt vị trí thành 77 và bán kính của các cạnh trên 10.
Trên tab Nâng cao, đặt lề thành 0-35-0-35 và lề trong thành 50-20-50-20.
Sau đó, bạn có thể ẩn bảng điều khiển để xem tác phẩm của mình trông như thế nào. Bạn sẽ thấy rằng thẻ của bạn rất đẹp, nhưng chúng tôi sẽ làm cho nó trở nên sống động bằng cách tạo hoạt ảnh cho một số phần nhất định. Và đối với điều đó, chúng tôi sẽ tạo hiệu ứng cho Kích thước, Màu sắc và nút mua.
Xem thêm: Cách thay đổi tiêu đề khi cuộn trang trên Elementor
Đầu tiên hãy xem phần Nội bộ đầu tiên hiển thị kích thước của sản phẩm và trên tab Nâng cao, xác định Làm mờ dần như Hiệu ứng chuyển động - Hoạt ảnh đầu vào và độ trễ hoạt ảnh bật 300.
Hãy làm tương tự với phần bên trong hiển thị màu sắc nhưng có độ trễ hoạt ảnh là 800. Đối với nút mua, độ trễ của nó sẽ là 1000
Bây giờ chúng ta sẽ chỉ định lớp trốn trước Phần bên trong và nút Mua. Chọn Phần bên trong đầu tiên, trong tab Nâng cao và trong thuộc tính Nâng cao, hãy nhập ẩn đầu tiên vào trường Lớp CSS. Làm tương tự đối với Phần bên trong khác và đối với nút mua.
Do đó, chúng tôi sẽ thêm mã CSS sẽ tạo hoạt ảnh cho toàn bộ cột. Sao chép mã sau:
bộ chọn {
chiều cao: 400px;
hiển thị: flex;
}
/ * CSS để Hiển thị / Ẩn * /
bộ chọn .hide-first {
display: none;
}
bộ chọn: di chuột .hide-first {
display: block;
}
/ * Chuyển đổi hình ảnh * /
bộ chọn img {
chuyển tiếp: dễ dàng .5s;
}
bộ chọn: hover img {
biến đổi: dịch (-20px, -40px) xoay (-25deg) scale (1.4);
}
/ * Tổng quan về thiết bị di động * /
@media (max-width: 767px) {
bộ chọn: hover img {
biến đổi: dịch (-20px, 0px) xoay (-10deg) scale (1);
}
bộ chọn {
lề: 50px 10px;
}
}
Chọn cột để sửa đổi và chuyển đến tab Nâng cao và trong trường CSS tùy chỉnh, hãy dán mã này.
Lưu ý: Bạn nên biết rằng tùy chọn này chỉ khả dụng nếu bạn có phiên bản Pro củaElementor.
Nếu hoàn tất, bản đồ của bạn sẽ hoạt ảnh khi di chuột qua trong khi theo mặc định ẩn kích thước, màu sắc và nút mua.
Về phần giải thích code, phần comment đưa ra cái nhìn tổng quan. Nhưng bằng cách sửa đổi các giá trị, bạn sẽ hiểu mỗi lệnh dùng để làm gì.
Xem thêm: Cách thêm hai nút cạnh nhau trong cùng một cột với Elementor
Nếu mọi thứ hoạt động bình thường, hãy nhân đôi cột này hai lần và xóa các cột trống khác.
Tất cả những gì bạn sẽ phải làm là thay thế hình ảnh và tiêu đề của các khối khác và cuối cùng là xem trước tác phẩm của bạn.
Bạn vừa tạo ra một thẻ sản phẩm đẹp mắt.
Tải xuống Elementor Pro ngay!
Kết luận
Cho nên ! Đó là nó cho hướng dẫn này chỉ cho bạn cách tạo thẻ sản phẩm với Elementor. 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 ý 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.
...
