Tạo animated circle với text xoay trong Elementor

Tổng quan

Hiệu ứng animated circle với text xoay là kiểu element rất phổ biến trên các trang portfolio/agency hiện đại - dễ thu hút sự chú ý mà chi phí performance gần như bằng 0 (chỉ dùng CSS).

Tài nguyên này tổng hợp lại cách thực hiện trong Elementor một cách clean nhất:

Các bước thực hiện

1. Tạo Section mới trong Elementor, đặt height cố định (ví dụ 200px).
2. Kéo widget Heading vào, gõ text muốn xoay quanh vòng tròn.
3. Vào tab Advanced → Custom CSS và paste đoạn snippet CSS bên dưới.
4. (Optional) Thêm SVG path hoặc image vào giữa làm logo trung tâm.

CSS snippet

.circle-text {
  position: relative;
  width: 200px;
  height: 200px;
  animation: spin 20s linear infinite;
}

.circle-text span {
  position: absolute;
  left: 50%;
  font-size: 14px;
  letter-spacing: 4px;
  transform-origin: 0 100px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

Lưu ý khi áp dụng

• Trên mobile nên giảm width/height xuống ~120px để tránh tràn viewport.
• Nếu dùng nhiều element kiểu này trên cùng 1 page, gộp animation vào 1 stylesheet để giảm reflow.
• transform-origin phải bằng nửa chiều rộng của vòng tròn để text bám đúng path tròn.

Click button bên trên để xem hướng dẫn chi tiết kèm screenshot ở source gốc.

Bài viết liên quan

• Blog Hướng dẫn sử dụng Elementor để tạo website (phần 1)
• Blog WordPress là gì? Cách cài đặt WordPress đầy đủ từ A đến Z