Cách thêm hiệu ứng điểm vào một cột trong Elementor

Bạn muốn thêm hiệu ứng điểm vào một cột trong Elementor?

Elementor là hoàn hảo cho tạo một trang web, trong đó điểm nhấn là thiết kế. Trong Elementor, bạn có thể thêm các hiệu ứng hoạt hình để làm cho trang web của bạn tương tác hơn.

Một trong những hiệu ứng hoạt hình mà bạn có thể thêm vào trang hỗ trợ Elementor là hiệu ứng điểm. Bạn có thể thêm hiệu ứng điểm vào một phần, cột hoặc tiện ích con.

Bài viết này sẽ hướng dẫn bạn cách thêm điểm vào một cột trong Elementor. Nhân tiện, nếu bạn mới làm quen với Elementor, bạn có thể tham khảo bài viết trước của chúng tôi để tìm hiểu cách cài đặt Elementor.

Cách thêm hiệu ứng điểm vào một cột trong Elementor

Trong Elementor, cột là một phần tử bắt buộc. Đây là nơi bạn có thể thêm các widget - các yếu tố thiết kế thực tế để tạo trang của bạn. Như với các loại phần tử khác trong Elementor, bạn cũng có thể tùy chỉnh một cột để làm cho nó thanh lịch.

Bạn có thể thêm nền màu đồng nhất, nền hình ảnh, bóng đổ, cho hiệu ứng di chuột. Hiệu ứng di chuột tích hợp của Elementor cho phép bạn sử dụng nền khác, đường viền khác và bóng đổ khác khi trỏ.

Để bắt đầu thêm hiệu ứng điểm vào cột trong Elementor, trước tiên hãy nhấp vào tay cầm của cột bạn muốn thêm hiệu ứng điểm để chuyển sang bảng cài đặt cột.

Trong bảng cài đặt (bảng ở bên trái), hãy chuyển đến tab Phong cách và mở khối Lý lịch. Trong phần sau, bạn có thể mở tab AU TỔNG QUAT để đặt một nền khác trên trạng thái trỏ.

Bạn có thể sử dụng nền màu đồng nhất, nền màu chuyển sắc hoặc nền hình ảnh. Bạn cũng có thể đặt thời lượng chuyển đổi (chuyển từ trạng thái bình thường sang trạng thái trỏ) trong tùy chọn Thời lượng chuyển đổi.

Để đặt một đường viền khác và một bóng hộp khác trên trạng thái trỏ, bạn có thể mở khối Biên giới. Bấm vào tab TỔNG QUAT  của khối đó và đặt kiểu đường viền, kích thước đường viền, màu đường viền, bán kính đường viền và bóng vùng cho trạng thái trỏ.

Thêm hiệu ứng di chuột nâng cao vào một cột trong Elementor

Không giống như Người xây dựng DiviElementor không sử dụng biến đổi CSS cho hiệu ứng di chuột của nó. Do đó, bạn chỉ có thể thêm các hiệu ứng di chuột cơ bản. Nhưng giống như Elementor (phiên bản chuyên nghiệp) bạn cho phép bạn thêm CSS tùy chỉnh, bạn có thể sử dụng CSS tùy chỉnh để thêm biến đổi CSS để thêm hiệu ứng di chuột nâng cao.

Hiệu ứng cuộn qua được tạo bằng cách sử dụng chuyển đổi CSS. Để thêm một chuyển đổi CSS vào một cột, trước tiên hãy chuyển đến tab Nâng cao và mở khối Tùy chỉnh CSS (đảm bảo rằng bảng cài đặt ở chế độ bảng cài đặt cột). Thêm mã CSS sau.

Mật mã :

selector: hover {chuyển tiếp: all-in-out dễ dàng .2s; biến đổi: scale (1.1); con trỏ: trỏ; z-index: 1; }

• Matrix
• Dịch
• Quy mô
• Quay
• Nghiêng

Mã CSS ở trên sử dụng phép chuyển đổi tỷ lệ. Bạn chỉ cần thay thế nó bằng bất kỳ kiểu biến đổi nào mà bạn thích.

đọc trang cette để tìm hiểu thêm về chuyển đổi CSS.

1. Đặt phòng nhà hàng trực quan

Tạo hệ thống Đặt phòng trực tuyến của trang web nhà hàng hoặc quán cà phê của bạn, nhờ vào plugin WordPress cao cấp tuyệt vời này. Với cái thứ hai, bạn sẽ có khả năng tự tạo bàn và chỗ ngồi trên lưới mà plugin này cung cấp và cho phép khách hàng của bạn đặt trước những cái miễn phí, đây là tính năng chính của plugin này và điều làm cho nó trở nên khác biệt so với các plugin khác trong danh sách này.

Sử dụng Kéo & Thả, bạn có thể kéo các loại bàn khác nhau vào lưới của nhà hàng và tính toán số lượng chỗ ngồi tối đa cho mỗi bàn cũng như số lượng bàn. Khách đến nhà hàng của bạn có thể chọn hình dạng của bảng mà họ thích và vị trí của bảng so với các bảng khác trong lưới.

Ở đây cho bạn Các plugin 5 WordPress để tối ưu hóa các mô tả và nhãn danh mục

Các khách hàng của nhà hàng của bạn sẽ rất vui mừng khi đưa ra lựa chọn này trực tiếp trên internet thay vì đi du lịch. Với plugin này, họ sẽ có thể có được một ý tưởng về những gì sẽ chờ đợi họ ngày hôm nay.

Trong số các tính năng khác, nó cung cấp: Hỗ trợ kéo và thả, 3 loại hệ thống đặt phòng, một xử lý khá trực quan, tùy chỉnh hoàn toàn bố cục của nó, và nhiều hơn nữa.

Tải về | Bản demo | Web hosting

• Sự khác biệt giữa blog và trang web là gì?
• Cách sao chép và dán văn bản trong WordPress mà không gặp vấn đề về định dạng
• Điểm chuẩn SEO: Phân tích cạnh tranh
• 5 plugin WordPress chấp nhận thanh toán PayPal