Cách tạo hình ảnh nhiều lớp bằng Elementor Magic Scroll

Trước khi chúng ta bắt đầu, hãy ghé thăm bài viết tài liệu này nếu bạn muốn tìm hiểu thêm về Addon phần thị sai cao cấp. Và nếu bạn thắc mắc, Elementor Magic Scroll là gì? Tốt, bài viết tài liệu này sẽ cung cấp cho bạn thông tin bạn cần biết để bạn có thể bắt đầu sử dụng nó.

Và bây giờ, trong hướng dẫn này, chúng ta sẽ khám phá cách bạn có thể tạo các hình ảnh có thể thay đổi nhiều lớp, giống hệt như ví dụ về micrô được đặt trong Trang cuộn ma thuật anh hùng bối cảnh chỉ sử dụng hai công cụ Elementor, Premium Parallax và Elementor Magic Scroll Global Addon. Về cơ bản, chúng tôi muốn thêm một số lớp hình ảnh lên trên nhau và thay đổi độ mờ của chúng từ 1 thành 0 khi cuộn. Vì vậy, hãy nhảy vào!

Nhận hiệu ứng có thể thay đổi nhiều lớp bằng tiện ích bổ sung toàn cầu Magic Scroll Elementor.

01. Chuẩn bị hình ảnh

Trong ví dụ của chúng tôi, chúng tôi đã chuẩn bị hình ảnh micrô ở dạng Photoshop. Các bước bên dưới mô tả quy trình chúng tôi đã thực hiện để chuẩn bị sẵn hình ảnh.

• Kích thước hình ảnh: Từ Photoshop, tạo một tệp mới có chiều rộng và chiều cao cụ thể, điều này tùy thuộc vào (các) hình ảnh bạn định sử dụng. Trong ví dụ của chúng tôi, kích thước hình ảnh micrô có chiều rộng 380 px x chiều cao 920 px.
• Lớp Photoshop: Trong cùng một tệp, chúng tôi đặt hình ảnh micrô, sau đó sao chép hình ảnh đó ba lần nữa, do đó, tổng số lớp – hình ảnh micrô – trở thành bốn.
• Điều chỉnh/Màu sắc: Chúng tôi xử lý màu sắc trong từng lớp/hình ảnh riêng biệt và áp dụng màu đó cho ba lớp đầu tiên nhưng lớp/hình ảnh thứ tư chủ yếu là thêm màu đỏ bên trong nút tắt tiếng. Vì vậy, bây giờ chúng ta có bốn hình ảnh khác nhau với cùng chiều rộng và chiều cao.
• Xuất hình ảnh: Đảm bảo xuất hình ảnh của bạn cho web bằng cách điều hướng đến Tệp > Xuất > Lưu cho Web trong Adobe Photoshop. Việc lưu hình ảnh của bạn dưới dạng JPEG hoặc PNG tùy thuộc vào thiết kế của bạn nhưng cuối cùng, bạn sẽ phải sử dụng một công cụ trực tuyến bổ sung để nén hình ảnh đã xuất để có hiệu suất trang web tốt hơn. Chúng tôi thường sử dụng Nén JPEG và Nén PNG. Hơn nữa, nếu bạn muốn có kích thước hình ảnh nhẹ hơn, bạn có thể nén JPEG và PNG sang WEBP bằng công cụ trực tuyến này.

02. Sử dụng tiện ích bổ sung Phần thị sai để thêm hình ảnh dưới dạng nhiều lớp

Trong giai đoạn này, hình ảnh của bạn được cho là đã sẵn sàng. Các bước sau đây sẽ hướng dẫn bạn cách sử dụng Thị sai cao cấp addon để thêm hình ảnh của bạn dưới dạng nhiều lớp.

• Truy cập trang web Elementor của bạn, sau đó mở trình chỉnh sửa Elementor.
• Từ tab “Bố cục” của Elementor, cuộn xuống cho đến khi bạn thấy Thị sai. Sau đó, đi và kích hoạt nó.
• Chọn “ Thị sai nhiều lớp” làm loại thị sai, sau đó nhấn vào “Thêm mục”.
• Mở mục bộ lặp xuất hiện với bạn, sau đó giữ nguyên “Hình ảnh” được chọn làm loại mục bộ lặp.
• Tải lên hình ảnh đầu tiên của bạn và điều chỉnh “Ngang” và “Căn dọc” của nó. Nếu bạn muốn đặt căn chỉnh cụ thể thay vì Trái, Giữa và Phải hoặc Trên, Giữa và Dưới, thì bạn có thể chọn “Tùy chỉnh” để đặt vị trí tùy chỉnh cho cả hai.
• Điều chỉnh kích thước hình ảnh bằng tùy chọn “Kích thước” và thêm giá trị Z-Index vào đó nếu cần.
• Cung cấp cho nó một ID CSS duy nhất vì điều này sẽ cần thiết khi chúng ta chuyển sang giai đoạn tiếp theo là tạo hoạt ảnh cho nó bằng cách sử dụng Ảo thuật Cuộn Tiện ích bổ sung toàn cầu.
• Lặp lại các bước trên theo số lượng hình ảnh bạn đã có hoặc bạn muốn thêm vào trang web Elementor của mình. GHI CHÚ* Điều quan trọng là đừng quên đặt ID CSS duy nhất cho mỗi lớp.

03. Tạo hoạt ảnh cho hình ảnh thị sai nhiều lớp bằng tiện ích bổ sung Magic Scroll Global

Vì Thị sai là một tiện ích bổ sung của phần Elementor chứ không phải một tiện ích có thể được quản lý từ tab “Nâng cao” của Elementor, nên chúng tôi sẽ cần bật Magic Scroll bằng cách sử dụng cài đặt cột.

Here, we will need to mention that, the Magic Scroll is working with Elementor Widgets and Columns except for the Elementor Sections and Inner-Sections.

Nhấp vào cài đặt cột – bạn có thể sử dụng bất kỳ cột nào trong phần chính Elementor của mình – và điều hướng đến tab “Nâng cao”. Cuộn xuống cho đến khi bạn thấy Premium Magic Scroll thì hãy kích hoạt nó. Sau đó, bắt đầu bằng cách nhấp vào “Thêm mục”. Khi bạn làm điều đó, hãy làm theo các bước được liệt kê bên dưới để bạn có thể nhận được hiệu ứng chính xác tương tự như trên cảnh anh hùng của Magic Scroll.

A. Cài đặt mục lặp lại

1. Trong tùy chọn (Chọn Hoạt ảnh), hãy chọn “Độ mờ” làm loại hoạt ảnh.
2. Chọn “Bộ chọn CSS tùy chỉnh” được đặt trong tùy chọn (Bật áp dụng hoạt hình).
3. Bạn sẽ nhận thấy trường (Bộ chọn CSS) xuất hiện. Tại đây, bạn sẽ thêm ID CSS mà bạn đã cung cấp cho các hình ảnh nhiều lớp được sử dụng trong Tiện ích bổ sung Phần thị sai. GHI CHÚ* Bạn nên thêm dấu thăng (#) trước ID CSS.
4. Độ mờ: Đặt mức độ mờ thành “0” vì chúng tôi muốn độ trong suốt của mỗi lớp tăng từ 0% lên 100% khi cuộn.

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 đã sử dụng “Khóa trang cuộn cho đến khi hoạt ảnh kết thúc” vì chúng tôi muốn hiệu ứng hình ảnh nhiều lớp xuất hiện trước hiệu ứng Magic Scroll sắp tới hoặc trước khi chuyển sang cảnh tiếp theo. Phần “Hoạt hình này nên hoạt động như thế nào?” tùy chọn có thêm 3 cơ chế cuộn, hãy đảm bảo ghé thăm bài viết này nếu bạn muốn tìm hiểu thêm về họ.
• Thứ tự hoạt hình: Tùy chọn này hoàn toàn phụ thuộc vào nhu cầu thiết kế của bạn. Trong ví dụ của chúng tôi, chúng tôi đặt nó là “2” vì chúng tôi muốn nó là hoạt ảnh Magic Scroll thứ hai hiển thị trong cảnh này.
• Giảm tốc độ hoạt ảnh theo: Từ đây, bạn có thể đặt tốc độ hoạt động/hoạt động của hoạt ảnh nhanh hay chậm. Trong ví dụ của chúng tôi, chúng tôi giữ giá trị mặc định là “1”.

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!