Tạo hiệu ứng Marquee trong Elementor mà không cần dùng plugin

Tạo hiệu ứng Marquee trong Elementor mà không cần dùng plugin

Đôi khi chúng ta muốn làm cho Website của mình sinh động và đẹp hơn bằng những hiệu ứng hay phải không. Bài viết này mình sẽ hướng dẫn bạn cách thêm hiệu ứng Marquee trong Elementor mà không cần dùng plugin nào nửa nhé.

Link Demo: https://freelan01.khoweb.xyz/#marquee

Thêm code hiệu ứng marquee vào custom css

Đầu tiên thì bạn cần thêm đoạn code CSS này vào phần Css tùy biến của theme hoặc của elementor nhé.

.marquee-content {
white-space: nowrap;
display: flex;
width: 100000px;
transform: translateX(0px);
animation: marquee 22s linear infinite;
}
@keyframes marquee {

100% {transform:translateX(-2799.31px)
}

}

Cách thêm CSS vào CSS bổ sung (Custom CSS) của theme

Tại giao diện admin wordpress bạn vào Giao diện -> Tùy Biến -> CSS bổ sung. Sau đó thêm đoạn code trên vào nhé.

Cách thêm CSS vào CSS tùy chỉnh của Elementor

Khi bạn sửa 1 trang bằng Elementor, thì ở mỗi Container, widget nó đều có mục Nâng cao. Bạn vào đó và tìm đến mục cuối cùng Tùy chỉnh CSS. Đó chính là nới bạn thêm css vào, nhưng mục này chỉ dùng được nếu bạn dùng Elementor Pro nhé, bản miễn phí thì không dùng được.

Gắn class Marquee vào widget bạn cần hiệu ứng này

Ở widget bạn cần gắn hiệu ứng này, bạn chỉ cần vào phần Nâng Cao và gán class mới được code (marquee-content) vào phần Class CSS.

Như vậy là xong rồi nhé. Nội dung để Marquee thì tùy bạn chọn. Thường là bỏ các đoạn text vô để nó chạy. Cũng có thể chạy các hình ảnh cũng được.

Link Demo nhé: https://freelan01.khoweb.xyz/#marquee

Kết lại

Như vậy là với cách đơn giản này thì bạn có thể thêm một hiệu ứng hay cho Website WordPress rồi đó. Cũng không cần phải cài thêm plugin gì thêm, cứ làm theo hướng dẫn của mình để thêm hiệu ứng Marquee trong elementor nhé. Nếu cần hỗ trợ thì cứ nhắn Ngọc Nguyễn nhé.

Mình có bán các sản phẩm và cung cấp các dịch vụ sau, mong bạn dành ít phút để tham khảo, nếu thấy cần cái nào thì ủng hộ mình nhé:

  1. Shop Key License WordPress
  2. Kho Demo Website
  3. Dịch vụ Hosting tốc độ cao
  4. Dịch vụ thiết kế Website, diệt mã độc, tối ưu website
GROUP ZALO HỖ TRỢ WORDPRESS
Người thông minh giống như một dòng sông, càng sâu càng lặng lẽ.
Không vấp ngã trước cuộc sống, điều đó là rất tốt. Nhưng vấp ngã rồi đứng dậy mà đi lên càng tốt hơn.
Chúng ta chỉ thật sự thất bại một khi chúng ta từ bỏ mọi cố gắng.
Cách tốt nhất để có một ý tưởng xuất sắc là có thật nhiều ý tưởng.
Đừng bao giờ nói tất cả những gì bạn biết. Và đừng bao giờ tin tất cả những gì bạn nghe.
Chuyên Mục
Plugin - Theme
Bài Viết Mới
Mời 1 Ly Sinh Tố
momo qr

Ngân hàng: MB BANK

Tài khoản: NGUYỄN BẢO NGỌC

Số TK: 0396753543

Mình xin chân thành cảm ơn sự ủng hộ của các bạn. Những khoản donate của các bạn đã giúp mình có 1 khoảng để chi trả và duy trì blog của mình. Mình sẽ cố gắng update thêm nhiều kiến thức và tài nguyên hữu ích hơn nửa. Cám ơn rất nhiều !!!

Chat Facebook (8h-24h)
Chat Zalo (8h-24h)
0396.753.543 (8h-20h)
Chat Telegram t.me/jakengocnguyen
Group Zalo Hỗ Trợ Get Theme + Plugin + Support