Cách ẩn một phần của trang trong một khoảng thời gian

Bạn đang tập hợp trang bán hàng VSL của mình và chỉ muốn hiển thị video trong vài phút? Bạn muốn ẩn nút mua hoặc một số thành phần trang trong một thời gian? Trong bài viết này, chúng tôi sẽ trình bày một giải pháp đơn giản.

Thật không thể tin được là thật khó để tìm thấy một thứ gì đó đơn giản như vậy trên internet, có lẽ do không diễn đạt được thuật ngữ chính xác. Đôi khi chúng tôi bắt gặp các plugin hoặc mã khổng lồ để thực hiện điều gì đó rất đơn giản.

Điều chúng tôi muốn ở đây là ẩn phần tử CSS và chỉ hiển thị phần tử đó sau một khoảng thời gian. Điều này có thể dễ dàng được tạo bằng một Javascript đơn giản dưới 4 dòng.

Làm cách nào để ẩn một phần tử trong vài phút?

Điều đầu tiên bạn cần hiểu là bạn sẽ ẩn phần tử nào. Nếu bạn muốn ẩn gần như toàn bộ trang, chỉ để lại video, chỉ cần tạo DIV bằng HTML, đặt một lớp CSS bạn chọn và đóng nó ở cuối trang.

.classname {display:none;}

Nếu bạn đang sử dụng trình chỉnh sửa khối WordPress, bạn cũng có thể dễ dàng ẩn các phần tử bằng cách đi tới cài đặt nâng cao của từng khối và đặt lớp CSS.

Sau khi chọn lớp CSS và thêm nó vào các phần tử muốn ẩn, bạn cần thêm Javascript vào Header. Tất cả điều này phụ thuộc vào chủ đề hoặc plugin bạn đang sử dụng.

Thêm mã sau vào Tiêu đề:

<script>setTimeout(function() {
  $('.classname').show()
}, 400000);
</script>

Trong ClassName, bạn đặt tên của lớp mà bạn muốn ẩn. Trong số 400000, bạn xác định thời gian chờ để phần tử hiển thị. Đó là khoảng mili giây.

Cứ 1000, chúng ta có tổng cộng 1 giây. Vì vậy, 400000 được tìm thấy trong mã bằng khoảng 6 phút. Bạn có thể sử dụng thông tin này để tính toán thời gian mong muốn của mình.

Bạn có thấy việc ẩn một phần tử hoặc một nửa trang trong một khoảng thời gian đơn giản như thế nào không? Một mã đơn giản, hoàn hảo để tạo VSL, trang bán hàng hoặc bất kỳ thứ gì khác mà bạn muốn tập trung vào.