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
Những gì bạn cần để bắt đầu
Để bắt đầu, bạn cần những điều sau đây:
- Le Chủ đề Divi đã cài đặt và hoạt động
- 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
Đố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.
Sau đó, 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
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.
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ị.
- 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
Kết quả
Bây giờ hãy xem kết quả.
Tạ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
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.
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.
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;
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.
Đó 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.
Tôi tin rằng phiên bản đã thay đổi quá nhiều kể từ hướng dẫn này và không thể tự hào về bài viết của bạn nữa
Vâng, tôi cũng nghĩ vậy. Chúng tôi sẽ cập nhật nó.
Bonjour,
Cảm ơn bạn về hướng dẫn này, nó chính xác là những gì tôi cần!
Tuy nhiên, tôi đã thực hiện chính xác cùng một cấu hình trên dòng và mô-đun nhưng tiếc là nó không hoạt động hoặc có thể nhiều hơn.
Đây cũng là trường hợp?
Cảm ơn bạn trước cho sự trở lại của bạn.
Alexis v
Cảm ơn bạn về hướng dẫn này, siêu rõ ràng và chính xác. Làm tốt !