Cách tạo hoạt ảnh cho băng chuyền khi cuộn bằng cách sử dụng Magic Scroll Elementor Addon
[ad_1]
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách bạn có thể tạo băng chuyền hoạt động khi cuộn lên hoặc xuống trên trang web Elementor của mình bằng cách sử dụng Elementor Magic Scroll Global Addon trong plugin Premium Addons Pro dành cho Elementor, nhưng trước khi chúng ta đi sâu hơn vào hướng dẫn , bạn nên biết những công cụ bạn sắp sử dụng để xây dựng một cảnh đáp ứng đầy đủ như cảnh được làm rõ bên dưới.
Đầu tiên, hãy chắc chắn rằng bạn có Trình tạo trang phần tử, Tiện ích bổ sung cao cấp cho ElementorVà Tiện ích bổ sung cao cấp PROtất cả đều được cài đặt và kích hoạt trên trang web WordPress của bạn.
Các phần tử Elementor được sử dụng để xây dựng cảnh băng chuyền là:
- Tiện ích bổ sung toàn cầu Magic Scroll Elementor cao cấp.
- Tiện ích phần tử băng chuyền cao cấp.
- Tiện ích phần tử biểu ngữ cao cấp.
- Tính năng phần tử điều kiện hiển thị cao cấp.
01. Nội dung băng chuyền: Tạo mẫu phần tử
Bắt đầu bằng cách tạo/thêm nội dung bạn muốn hiển thị trong tiện ích Băng chuyền cao cấp. Trong ví dụ của chúng tôi, chúng tôi muốn hiển thị 3 hàng biểu ngữ kêu gọi hành động, vì vậy, chúng tôi đã xây dựng 3 mẫu Elementor, mỗi mẫu sẽ thực sự được hiển thị dưới dạng một hàng bằng tiện ích Băng chuyền.
Phản hồi băng chuyền
Mỗi mẫu Elementor sẽ cần được điều chỉnh trên màn hình phản hồi. Để làm điều đó, hãy làm theo các bước được liệt kê dưới đây.
- Sao chép phần Elementor mà bạn đã tạo cho màn hình máy tính để bàn.
- Điều chỉnh số lượng cột trong cột trùng lặp. Trong ví dụ của chúng tôi, chúng tôi đã giảm số cột xuống còn 3 thay vì 4 để hiển thị trên màn hình thiết bị di động và/hoặc iPad.
- Sử dụng Điều kiện hiển thị đặc biệt để hiển thị phần trùng lặp trên màn hình thiết bị di động và/hoặc iPad. Ngoài ra, hãy sử dụng Điều kiện hiển thị để ẩn phần đầu tiên trên các thiết bị phản hồi.
NOTE* It’s highly recommended to use the Display Conditions Elementor feature to show or hide any Elementor content based on a specific device. Using it will make the hidden Elementor content not readable, the same as if it is not existing at all on the Elementor page which will save the page weight by making it lighter.
02. Tùy chỉnh tiện ích băng chuyền cao cấp
Sau khi bạn hoàn tất việc thêm/tạo các mẫu bạn muốn chèn vào tiện ích Băng chuyền, hãy quay lại trang Elementor của bạn, sau đó kéo và thả tiện ích Băng chuyền cao cấp. Sau đó, hãy làm theo các bước được liệt kê bên dưới.
- Từ cài đặt Băng chuyền, chọn “Bộ lặp” làm loại nội dung.
- Nhấp vào “Thêm mục”, sau đó từ mục lặp lại, đi và chọn mẫu bạn đã tạo từ danh sách thả xuống tồn tại trong tùy chọn “Chọn mẫu hiện có”.
NOTE* Here, we need to mention that you already have two options to display an Elementor template within the Carousel widget. The first one is all about creating the Elementor using the Elementor Live Editor tool, while the second one is all about calling an already existing Elementor template by selecting it from the “Select Existing Template” option.
Cài đặt băng chuyền
Ở bước này, dự kiến bạn đã hoàn tất việc thêm nội dung băng chuyền thông qua các mục lặp lại. Vì vậy, chúng ta sẽ bắt đầu điều chỉnh tiện ích Carousel. Các bước được liệt kê bên dưới sẽ hướng dẫn bạn cách bạn có thể có được giao diện giống hệt nhau trên trang web Elementor của mình.
- Chọn “Ngang” làm “Loại” băng chuyền.
- Chọn “Tất cả hiển thị” cho tùy chọn “Giao diện” của băng chuyền.
- Thêm giá trị “1” vào Màn hình nền, Tab và Trang trình bày trên thiết bị di động.
- Bật tùy chọn “Sử dụng với Magic Scroll”.
03. Cài đặt cuộn ma thuật Elementor
Ở đây, chúng tôi sẽ tùy chỉnh Tiện ích bổ sung toàn cầu Elementor Magic Scroll để chúng tôi có thể có được băng chuyền di chuyển chính xác khi cuộn. Hãy làm theo các bước được liệt kê bên dưới để tìm hiểu các cài đặt cần áp dụng để đạt được hiệu ứng này mà không gặp rắc rối nào.
Từ tiện ích “Băng chuyền”, hãy điều hướng đến tab “Nâng cao”. Cuộn xuống cho đến khi bạn nhìn thấy “Premium Magic Scroll”, sau đó kích hoạt nó. Sau khi thực hiện việc đó, bạn có thể áp dụng cài đặt Elementor Magic Scroll như được sắp xếp bên dưới.
A. Cài đặt mục lặp lại
- Nhấp vào “Thêm mục”, sau đó đi và chọn tùy chọn “Loại băng chuyền” làm loại “Hoạt hình”.
- Thêm “-300px” làm giá trị cho tùy chọn “Dịch X”. GHI CHÚ* Bạn nên sử dụng các giá trị âm cho điều khiển này. Nhấn vào đây để biết thêm chi tiết.
B. Cài đặt cuộn ma thuật
- Hoạt hình này nên hoạt động như thế nào?: Chúng tôi đã chọn “Chỉ phát hoạt ảnh khi hiển thị”, điều đó có nghĩa là hoạt ảnh sẽ chỉ bắt đầu hoạt động khi phần tử hiển thị trong khu vực khung nhìn.
- Bù lại: Đặt giá trị offset là “50%”. Truy cập bài viết này để tìm hiểu thêm về điều khiển “Offset”.
- Giảm tốc độ hoạt ảnh theo: Tùy chọn này sẽ cho phép bạn kiểm soát tốc độ hoạt động của hoạt ảnh nhanh hay chậm. Chúng tôi đã giữ giá trị mặc định ở mức “1”.
- Chà: Tùy chọn này giúp hoạt ảnh hoạt động trơn tru. Trong ví dụ của chúng tôi, chúng tôi đã sử dụng “1.5” làm giá trị “Scrub”.
Chúc mừng!
Bây giờ, bạn phải có hiệu ứng tương tự do “BẠN” tạo ra trên trang web Elementor của bạn. Thành thật mà nói, chúng tôi tin rằng bạn sẽ đạt được hiệu ứng hoạt hình tốt hơn nhiều so với hiệu ứng chúng tôi cung cấp và chúng tôi thực sự vui mừng khi thấy nó. Đừng ngần ngại chia sẻ công việc của bạn trên nhóm Facebook của chúng tôi và khiến chúng tôi được truyền cảm hứng!
[ad_2]
