Cách vẽ văn bản SVG bằng Elementor Magic Scroll Global Addon

Trước khi chúng tôi xem phần hướng dẫn, bạn có thể hỏi Elementor Magic Scroll Addon là gì? Truy cập bài viết tài liệu này để tìm hiểu thêm về Global Addon mới này đã được xây dựng dành riêng cho Trình tạo trang phần tử.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách chúng ta có thể sử dụng Tiện ích vẽ SVG của Elementor để tạo hiệu ứng văn bản khi cuộn bằng cách sử dụng Tiện ích toàn cầu Magic Scroll cao cấp. Vậy hãy bắt đầu!

Thêm văn bản hoạt hình vào trang web Elementor bằng Magic Scroll Elementor Global Addon.

01. Thư viện đường dẫn phông chữ Google sang SVG

Đi và mở Đường dẫn phông chữ Google sang SVG thư viện sau đó, hãy bắt đầu tùy chỉnh phông chữ Google mà bạn muốn sử dụng trên trang web Elementor của mình.

• Phông chữ Google: Chọn từ một loạt các phông chữ của Google. Chọn một trong những phù hợp với bạn.
• Tải lên phông chữ: Hoặc, bạn có thể tải lên tệp phông chữ bạn chọn. Bạn nên sử dụng các phông chữ được liệt kê trong danh sách thả xuống Phông chữ của Google.
• Khác nhau: Đây là một danh sách thả xuống có thể thay đổi. Bạn sẽ thấy nó thay đổi theo phông chữ đã chọn. Nó cung cấp một danh sách kiểu phông chữ hoặc độ dày phông chữ, như đã đề cập, nó phụ thuộc vào Phông chữ Google mà bạn đã chọn.
• Chữ: Viết văn bản/nội dung sẽ được sử dụng trên trang web Elementor của bạn.
• Kích cỡ: Điều chỉnh kích thước phông chữ. GHI CHÚ* Bạn cũng có thể điều chỉnh kích thước phông chữ từ tiện ích SVG Draw Elementor.
• Đổ đầy: Bỏ chọn tùy chọn tô màu nếu bạn muốn áp dụng hiệu ứng văn bản giống như hiệu ứng được sử dụng trên trang demo Elementor Magic Scroll. Giữ nó được chọn nếu bạn muốn văn bản của mình có màu tô. GHI CHÚ* Nên sử dụng phông chữ nặng khi bỏ chọn tùy chọn Điền.
• Đột quỵ: Đặt màu nét cho văn bản của bạn khi tùy chọn màu tô không được chọn.
• Chiều rộng đột quỵ: Tùy chỉnh độ rộng nét văn bản của bạn.

Sổ tay* Hầu hết, bạn sẽ không cần điều chỉnh thêm các tùy chọn từ thư viện Google Font sang SVG Path ngoài các tùy chọn được liệt kê ở trên.

Sau khi hoàn tất, hãy sao chép mã SVG xuất hiện trong trường văn bản cuối cùng.

02. Sử dụng tiện ích vẽ Elementor SVG

Quay lại trang web của bạn và từ trình chỉnh sửa Elementor, kéo tiện ích Premium SVG Draw và thả nó vào phần bạn muốn.

• Loại SVG: Chọn “SVG tùy chỉnh”.
• Mã SVG: Dán mã SVG mà bạn đã sao chép từ thư viện Google Font sang SVG Path.
• Chiều rộng và chiều cao: Quản lý kích thước văn bản SVG của bạn bằng hai điều khiển đó.
• Căn chỉnh: Căn chỉnh văn bản SVG của bạn sang Trái, Giữa hoặc Phải.
• Sử dụng với cuộn ma thuật: Hãy chắc chắn để kích hoạt tùy chọn này.

Vẽ SVG > Kiểu: Từ tab Kiểu, bạn có thể tiếp tục điều chỉnh văn bản SVG theo nhu cầu thiết kế của mình bằng cách thêm Màu nét, Màu tô, điều chỉnh Độ dày đường dẫn và thêm Khoảng cách giữa các dấu gạch ngang nếu cần.

03. Tạo hiệu ứng văn bản bằng Elementor Magic Scroll

Chuyển đến tab Nâng cao của tiện ích, cuộn xuống cho đến khi bạn thấy Premium Magic Scroll, bật nó lên, sau đó nhấp vào “Thêm vật phẩm”. Từ mục lặp lại xuất hiện với bạn, hãy điều chỉnh cài đặt của nó như sau.

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

• Chọn Hoạt hình: Từ danh sách thả xuống, chọn “Vẽ SVG”.
• Áp dụng hoạt ảnh trên: Giữ nguyên “Elementor Container” được chọn.
• Hoạt hình ngược: Tùy chọn này được sử dụng để đảo ngược hướng hoạt ảnh.
• Điểm bắt đầu (%): Tùy chọn này chỉ định mức độ đường dẫn SVG sẽ được vẽ khi hoạt ảnh bắt đầu. Ví dụ: nếu nó được đặt thành 50% thì khi hoạt ảnh bắt đầu, một nửa đường dẫn SVG sẽ được vẽ sẵn.
• Điểm cuối (%): Tùy chọn này xuất hiện khi tùy chọn Reverse Animation được bật. Nó chỉ định điểm mà hoạt ảnh sẽ kết thúc tại đó.
• Tô màu sau khi vẽ: Kích hoạt tùy chọn này để làm cho văn bản có màu tô trên cuộn.
• Chọn màu: Thêm màu bạn muốn điền vào văn bả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?: Trong ví dụ của chúng tôi, 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 văn bản được lấp đầy hoàn toàn trước khi chuyển sang hiệu ứng Magic Scroll tiếp theo hoặc cảnh tiếp theo. Tìm hiểu thêm về các tùy chọn khác được liệt kê trong phần “Hoạt hình này nên hoạt động như thế nào?” và cách chúng thực sự hoạt động thông qua bài viết tài liệu.
• Thứ tự hoạt hình: Việc đặt tùy chọn này tùy 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à “1” vì chúng tôi muốn nó là hoạt ảnh Magic Scroll đầu tiên hiển thị trong cảnh này.
• Giảm tốc độ hoạt ảnh theo: Từ đây, bạn có thể điều chỉnh 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ữ nó ở mức “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!