Với những sự cạnh tranh ngày một khốc liệt trong cuộc chiến nhận diện thương hiệu trên các nền tảng mạng xã hội, các marketer và designer đều phải hướng đến những cách tiếp cận mới, giúp cho doanh nghiệp của mình phát triển được bộ nhận diện thương hiệu mới mẻ, ấn tượng, và quan trọng nhất, là hiệu quả. Người ta vẫn hay nói, một bức ảnh có thể thay thế cho hàng nghìn từ. Với cách hiểu như vậy, thì hình ảnh chuyển động (hay video) có giá trị bằng cả trăm nghìn từ. Chính vì việc truyền thông bằng thị giác ngày càng chứng tỏ được hiệu quả nhờ các thiết bị smart device, mà việc sử dụng animation hay hoạt hình ngày càng trở nên phổ biến trong các chiến dịch marketing hay branding. Do đó, việc sở hữu một logo với hiệu ứng animation là một điều không thể thiếu đối với bất kì doanh nghiệp nào. Hôm nay hãy cùng MMe khám phá cách tạo một Logo với hiệu ứng animation nhé!
1. Tùy chỉnh tệp SVG để sử dụng văn bản của riêng bạn
Để bắt đầu, bạn cần tùy chỉnh tệp SVG của mình để hiển thị văn bản mà bạn muốn tạo hiệu ứng chuyển động. Để thực hiện việc này, hãy tải xuống tệp SVG và mở tệp đó trong trình chỉnh sửa mã. Tốt nhất bạn nên sử dụng trình chỉnh sửa mã có đánh dấu mã, vì điều đó sẽ giúp chỉnh sửa mã dễ dàng hơn rất nhiều, ví dụ như Visual Studio Code và Atom hoặc Nova (mặc dù nó chỉ khả dụng cho macOs. Nếu trình soạn thảo mã của bạn không đánh dấu văn bản đúng cách, bạn có thể xem SVG dưới dạng tệp XML.
2. Thêm tệp SVG bằng Icon Widget
Tiếp theo, bạn cần thêm tệp SVG vào thiết kế Elementor của mình bằng Icon Widget, giả sử bạn đã thêm Background graphic mà bạn muốn thêm biểu tượng chuyển động của mình vào. Nếu bạn chưa thực hiện bước này, bạn có thể làm điều đó bằng Image widget.
Để thêm và tùy chỉnh tệp SVG bạn cần:
1. Kéo Icon widget mới lên trên đồ họa mà bạn muốn nhắm mục tiêu, nghĩa là thêm Icon widget lên trên Image widget.
2. Chuyển đến tab Advanced trong Icon settings, sau đó đặt CSS Classes bằng emblem.
3. Quay lại tab Content nhấp vào tùy chọn Upload SVG và tải lên tệp SVG mà bạn đã tạo ở bước trước.
4. Đi tới tab Style và chọn Primary Color cho văn bản của bạn.
5. Trong tab Style, hãy tăng Size. Bạn có thể bắt đầu với 160 nhưng bạn có thể cần phải thử với kích thước của nó để đạt được hiệu quả phù hợp. Đừng lo lắng nếu emblem text trông quá lớn bạn sẽ khắc phục được điều đó bằng CSS trong bước tiếp theo.
Lưu ý: nếu bạn gặp sự cố khi tải lên tệp SVG, bạn cần đảm bảo rằng tính năng tải lên tệp SVG đã được bật. WordPress tắt tải lên SVG theo mặc định, mặc dù vậy Elementor sẽ tự động bật tải lên SVG khi bạn sử dụng tính năng Upload trong Icon widget. Để đảm bảo rằng tải lên SVG đã được bật, hãy đi tới Elementor → Settings → Advanced và đảm bảo rằng Enable Unfiltered File Uploads đã được cài đặt ở trạng thái enable.
3. Tạo kiểu cho Emblem Text của bạn bằng CSS
Bây giờ, bạn cần tạo kiểu cho Emblem Text của mình bằng cách sử dụng một số CSS. Điều này sẽ khắc phục mọi sự cố bạn gặp phải sau khi tăng kích thước của Icon widget.
Để thực hiện việc này, hãy thêm CSS sau vào phần của bạn hoặc vào CSS chung cho thiết kế của bạn:
.emblem text { font-family: initial; font-size: 16px; font-weight: normal; letter-spacing: 0px; }
Nếu bạn không thấy bất kỳ thay đổi nào đối với Emblem Text ngay thì bạn có thể thực hiện hai bước sau để khắc phục sự cố:
- Đảm bảo rằng bạn đặt CSS class của Icon widget bằng emblem
- Làm mới trang để tải lại giao diện Elementor. Chỉ cần đảm bảo rằng bạn lưu các thay đổi của mình trước khi làm mới.
Nếu bạn không có nhiều văn bản, bạn có thể thêm các chữ cái vào một chút để cải thiện emblem effect của mình. Bạn có hai tùy chọn chính ở đây:
- Bạn có thể đặt độ đậm của phông chữ.
- Bạn có thể tăng khoảng cách giữa các chữ cái từ 0 px lên một số cao hơn – 3 px là một điểm khởi đầu tốt, nhưng bạn có thể thử tùy theo sở thích của mình
- Bạn cũng có thể cân nhắc chọn một phông chữ khác.
4. Sử dụng Absolute Positioning để di chuyển Icon widget
Ở bước này, bạn cần làm cho Icon widget xuất hiện trên đầu hình ảnh mục tiêu của bạn. Ngay bây giờ, nó được đặt ở trên và tách biệt với hình nền:
Để làm điều này, bạn có thể sử dụng Absolute Positioning, nó sẽ cung cấp cho bạn khả năng kiểm soát hoàn hảo từng pixel đối với vị trí của Emblem Text. Đầu tiên hãy mở cài đặt cho Icon widget. Sau đó, chuyển đến tab Advanced và tìm cài đặt Positioning. Định cấu hình chúng như sau:
- Width: Inline (Auto)
- Position: Absolute
- Horizontal Orientation: Right
- Offset (Horizontal): -16px
- Vertical Orientation: Top
- Offset (Vertical): -16px
Width: Inline (Auto)
Position: Absolute
Horizontal Orientation: Right
Offset (Horizontal): -16px
Vertical Orientation: Top
Offset (Vertical): -16px
Bạn có thể thử với các con số khác nhau để tìm những gì phù hợp nhất cho thiết kế và hình nền của bạn và thay đổi hướng ngang, dọc theo sở thích của mình.
Bạn cũng nên sử dụng cài đặt đáp ứng để điều chỉnh độ lệch cho các thiết bị di động và máy tính bảng. Đảm bảo đặt độ lệch ngang cho thiết bị di động bằng 0 để tránh các vấn đề với cuộn dọc.
5. Thiết lập hiệu ứng chuyển động cho logo
Để hoàn thành mọi thứ, bạn cần thiết lập hiệu ứng animation (chuyển động) cho logo của mình. Một lần nữa, bạn có hai lựa chọn:
- Bạn có thể tạo animation cho biểu tượng để nó quay khi người dùng cuộn xuống.
- Bạn có thể tự động tạo animation cho logo để nó quay mà không cần bất kỳ đầu vào của người dùng.
Có hai cách định cấu hình cả hai, tuy nhiên bạn chỉ nên chọn một trong hai phương pháp này.
Tùy chọn 1: Tạo biểu tượng animation trên cuộn
Để tạo animation cho biểu tượng khi người dùng cuộn xuống, bạn có thể sử dụng hiệu ứng chuyển động tích hợp của Elementor.
Mở Icon widget và chuyển đến tab Advanced, sau đó chọn Motion Effects →Scrolling Effects (bật nó lên) → Rotate (nhấp vào biểu tượng chỉnh sửa). Thao tác này sẽ mở một số cài đặt bổ sung – định cấu hình chúng như sau:
- Direction: To Right
- Speed: 4
Tùy chọn 2: Tự động tạo animation cho Emblem Text
Để tự động tạo hiệu ứng animation cho văn bản biểu tượng, bạn có thể sử dụng mã CSS sau. Bạn sẽ muốn thêm mã này ngoài CSS mà bạn đã thêm.
.emblem svg { animation-name: spinning_animation; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spinning_animation { from { transform: rotate(360deg); } to { transform: rotate(0); } }
Tùy chọn: Giảm chuyển động cho các mục đích trợ năng
@media (prefers-reduced-motion) { .emblem svg { animation-duration: 30s; } }
Phần mã này làm chậm tốc độ của animation đối với những người dùng đã đặt thiết bị của họ ở chế độ “giảm chuyển động” (ví dụ: giảm chuyển động trên MacOS hoặc giảm chuyển động màn hình trên iOS ).
Mặc dù về mặt kỹ thuật, bạn có thể xóa phần này của đoạn mã mà không làm thay đổi tác dụng của nó, nhưng bạn nên để nguyên đoạn mã đó vì bạn luôn nên tôn trọng sở thích của người dùng, đặc biệt là khi nói đến khả năng truy cập trang web . Một ví dụ khác về việc tôn trọng sở thích của người dùng là chế độ tối, giống như cách trình chỉnh sửa Elementor sẽ áp dụng chế độ tối nếu người dùng đã chọn chế độ đó trong tùy chọn hệ thống của họ.
Cụ thể, mã sẽ làm chậm hoạt ảnh từ 10 giây ( 10 giây ) xuống 30 giây ( 30 giây ) nếu người dùng đã đặt chuyển động giảm theo sở thích của họ.
Một tùy chọn khác là dừng hoàn toàn animation nếu người dùng đã đặt thiết bị của họ thành “giảm chuyển động”. Bạn có thể thực hiện điều này bằng cách thay thế đoạn mã tập trung vào khả năng tiếp cận bằng đoạn mã này:
@media (prefers-reduced-motion) { .emblem svg { animation-dur
Hiệu ứng animation cung cấp cho bạn một cách gọn gàng để tạo ra một thiết kế logo bắt mắt hơn với Elementor. Tất cả những gì bạn cần là một tệp SVG để kiểm soát văn bản, Icon widget và một chút CSS. Bạn sẽ sử dụng animation nào trong thiết kế Elementor? Hoặc bạn vẫn có bất kỳ câu hỏi nào về cách thức hoạt động của nó? Hãy liên hệ ngay với MMe nhé! Xin chào và hẹn gặp bạn trong bài viết tiếp theo. Nếu bạn có nhu cầu dịch vụ viết bài chuẩn SEO đăng web, hay muốn tìm đơn vị cung cấp dịch vụ SEO website uy tín, vui lòng liên hệ với chúng tôi nhé! Gọi ngay Hotline 094 456 1874 để được tư vấn thêm.
