Chữ hoa văn bản cung cấp một hộp văn bản cuộn cho Website thu hút người đọc bằng những trích đoạn hữu ích từ nội dung. Chúng còn được gọi là mã đánh dấu (hoặc mã đánh dấu tin tức) và thường được sử dụng để hiển thị dòng cập nhật tin tức ổn định ở đầu hoặc cuối trang. . Thông thường, hoạt ảnh cuộn được thực hiện bằng một dòng nội dung trong một vòng lặp để thông tin được hiển thị nhiều lần. thật không may <marquee>Vì thẻ html đã lỗi thời, chúng tôi dựa vào CSS và JavaScript để tạo các nhãn hiệu ngày nay. Tuy nhiên, với Divi, bạn có thể tạo một hình chữ nhật lựa chọn đơn giản mà không cần lo lắng về mã tùy chỉnh.

Trong hướng dẫn này, chúng tôi sẽ giải thích việc tạo một văn bản lựa chọn đơn giản với Divi dễ dàng như thế nào. Chúng tôi thậm chí sẽ xem cách tạm dừng hoạt ảnh cuộn văn bản khi di chuột và cách thêm văn bản cuộn lớn làm yếu tố thiết kế độc đáo cho tiêu đề của bạn.

Chúng ta hãy bắt đầu.

khảo sát

Bản xem trước hoạt ảnh Divi

Những gì bạn cần để bắt đầu

Để bắt đầu, bạn cần những điều sau đây:

  1. Le Chủ đề Divi đã cài đặt và hoạt động
  2. Một trang mới được tạo để xây dựng từ đầu trên front-end (hàm tạo trực quan)

Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.

Bắt đầu thụ thai

Bản xem trước hoạt ảnh DiviĐối với ví dụ đầu tiên này, chúng tôi sẽ tạo một hình chữ nhật văn bản đơn giản cho một dòng văn bản. Để làm điều này, chúng tôi sẽ cung cấp cho một hàng có chiều rộng tối đa với phần tràn bị ẩn. Tiếp theo, chúng ta sẽ thêm hoạt ảnh trượt vòng lặp vào mô-đun văn bản chứa dòng văn bản để nó liên tục trượt vào dòng, giống như một hình chữ nhật.

Đây là cách để làm điều đó.

Bắt đầu bằng cách tạo một phần thông thường với một hàng cột.

Xác định một hàng diviSau đó, trước khi thêm mô-đun, hãy cập nhật hàng với chiều rộng cố định, hộp bóng và bán kính, như sau:

  • Chiều rộng tối đa: 200px
  • Upholstery: 10px ở trên cùng, 10px ở phía dưới
  • Góc tròn: 10px
  • Box Shadow: xem ảnh chụp màn hình
  • Tràn ngang: ẩn
  • Tràn dọc: ẩn

Cấu hình kiểu dòng Divi

Thêm mô-đun văn bản

Khi dòng hoàn thành, thêm một mô-đun văn bản mới vào dòng.

Thêm mô-đun văn bản

Sau đó cập nhật nội dung của nội dung bằng một dòng văn bản. Hiện tại, hãy đảm bảo dòng văn bản không bị chia thành dòng khác.

  • Thân bài: "Đây là một câu"

Thiết kế mô-đun văn bản

Cập nhật các tham số thiết kế mô-đun văn bản như sau:

  • Ký quỹ: -100% ở bên trái, 100% ở bên phải

Điều này đặt mô-đun văn bản bên ngoài bên trái của dòng. Vì khả năng hiển thị ẩn của dòng bị ẩn, mô-đun sẽ bị ẩn cho đến khi chúng tôi thêm hoạt ảnh để hiển thị.

Sửa đổi căn chỉnh divi

  • Phong cách hoạt hình: Trang trình bày
  • Hướng hoạt ảnh: Phải
  • Thời lượng hoạt ảnh: 5000ms
  • Cường độ hoạt ảnh: 100%
  • Hoạt ảnh bắt đầu opacity: 100%
  • Hoạt hình của đường cong tốc độ: tuyến tính
  • Lặp lại hình ảnh động: Vòng lặp

Cấu hình hoạt ảnh mô-đun văn bản Divi

Kết quả

Bây giờ hãy xem kết quả.

Kết quả hoạt hình divi 1Tạo các dòng văn bản dài hơn

Trong thiết kế văn bản lựa chọn đơn giản ở trên, chúng tôi đã giới hạn chiều rộng của dòng văn bản bằng chiều rộng của dòng. Tuy nhiên, nếu chúng ta muốn tạo một dòng văn bản dài hơn với cùng chiều rộng, chúng ta sẽ cần phải tinh chỉnh cài đặt một chút.

Đầu tiên, trên mô-đun văn bản và thay thế phần thân của văn bản bằng cách sau:

Đây là giai đoạn có liên kết

Câu có liên kết divi

Thêm nhiều chiều rộng và lề để vừa với dòng văn bản dài nhất

Như bạn có thể nhận thấy, văn bản được chia thành ba dòng thay vì một dòng.

Divi cụm từ wordpress

Do đó, chúng ta cần điều chỉnh lề và cường độ của hoạt ảnh.

  • Chiều rộng: 207%
  • Ký quỹ: -207% ở bên trái, 207% ở bên phải
  • Cường độ hoạt ảnh: 75%

Mẹo ở đây là tăng chiều rộng và cập nhật các giá trị lề sao cho chỉ còn lại đủ khoảng trống cho một dòng văn bản. Sau đó, điều chỉnh cường độ của hoạt ảnh để không có sự phá vỡ lớn giữa hoạt ảnh lặp lại.

Kết quả

Đây là kết quả cuối cùng.

Kết quả hoạt hình divi 2

Tạm dừng hoạt ảnh văn bản lựa chọn khi di chuột

Vì vùng chọn này bao gồm một liên kết nên người dùng sẽ khó nhấp vào liên kết trong khi di chuyển. Tuy nhiên, chúng tôi có thể thêm một đoạn mã css nhỏ vào mô-đun văn bản sẽ tạm dừng hoạt ảnh khi di chuột.

Thêm đoạn mã CSS để tạm dừng hoạt ảnh khi di chuột

Để thêm đoạn mã css, hãy mở cài đặt mô-đun văn bản và thêm mã CSS tùy chỉnh sau vào phần tử chính dưới tab di chuột :

hoạt hình-play-state: tạm dừng;

Divi hover tùy chỉnh hoạt ảnh

Kết quả cuối cùng

Bây giờ hãy kiểm tra kết quả cuối cùng. Lưu ý rằng hoạt ảnh văn bản dừng khi con trỏ di chuột qua văn bản, cho phép người dùng nhấp vào liên kết.

Kết quả hoạt ảnh divi hoạt ảnh bị gián đoạn

Đó là tất cả cho hướng dẫn này, tôi hy vọng nó đã dạy bạn cách thêm văn bản cuộn trên Divi.