Cách tạo Thanh cảnh báo trong WordPress (2 cách dễ dàng)

Bạn có muốn thêm thanh cảnh báo vào trang web WordPress của mình không?

Thanh cảnh báo hoặc thanh thông báo là một cách tuyệt vời để cho khách truy cập biết về các cập nhật quan trọng, ưu đãi đặc biệt, ra mắt sản phẩm mới, v.v.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo thanh cảnh báo trong WordPress bằng 2 giải pháp dễ dàng.

Tại sao nên tạo Thanh cảnh báo trong WordPress?

Thanh cảnh báo là một cách tuyệt vời để thông báo cho khách truy cập của bạn về bất kỳ điều gì quan trọng. Đó có thể là một sự kiện giảm giá đang diễn ra, thông tin cập nhật về thời gian mở cửa hoặc các thay đổi đối với dịch vụ của bạn.

Bạn cũng có thể sử dụng thanh cảnh báo để cho khách truy cập biết về ưu đãi đặc biệt, chẳng hạn như ưu đãi mua một tặng một . Đây là một lựa chọn tuyệt vời nếu bạn điều hành một cửa hàng trực tuyến .

Sử dụng một thanh cảnh báo tốt hơn là chỉ đưa một thông báo trên trang chủ của bạn . Thanh cảnh báo của bạn có thể xuất hiện nổi bật ngay trên đầu mỗi trang trên toàn bộ trang web của bạn.

Thật dễ dàng để tạo một thanh cảnh báo trong WordPress. Chúng tôi sẽ đề cập đến plugin thanh thông báo tốt nhất và phương pháp thủ công sử dụng mã HTML và CSS. Chỉ cần nhấp vào các liên kết bên dưới để chuyển thẳng đến từng tùy chọn:

Phương pháp 1: Tạo thanh cảnh báo bằng OptinMonster

OptinMonster là phần mềm tối ưu hóa chuyển đổi tốt nhất trên thị trường. Nó giúp bạn chuyển đổi nhiều khách truy cập trang web thành người đăng ký và khách hàng.

Nó đi kèm với cửa sổ bật lên hộp đèn đẹp mắt, thảm chào mừng, đồng hồ đếm ngược và các lớp phủ động khác giúp bạn tăng số người đăng ký và bán hàng cho trang web của mình.

Bạn cũng có thể sử dụng OptinMonster để tạo thanh cảnh báo cho trang web của mình. Đây là cái chúng ta sẽ tạo:

Thanh cảnh báo được tạo trong OptinMonster

Có rất nhiều mẫu dựng sẵn bên trong OptinMonster. Điều này giúp bạn dễ dàng tạo một thanh cảnh báo trông đẹp mắt trong vòng vài phút.

Trước tiên, bạn cần truy cập trang web OptinMonster và đăng ký tài khoản.

Tiếp theo, bạn cần cài đặt và kích hoạt plugin OptinMonster WordPress . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Plugin này cho phép bạn kết nối trang web WordPress của mình với phần mềm OptinMonster.

Sau khi kích hoạt, bây giờ bạn sẽ cần kết nối tài khoản của mình. Để bắt đầu, chỉ cần truy cập OptinMonster » Cài đặt từ bảng điều khiển WordPress của bạn.

Tiếp theo, hãy tiếp tục và nhấp vào nút ‘Kết nối tài khoản hiện có’.

Kết nối tài khoản OptinMonster của bạn

Bây giờ bạn sẽ thấy một cửa sổ bật lên yêu cầu bạn nhập địa chỉ email của mình. Chỉ cần chọn địa chỉ email của bạn và nhấp vào nút ‘Kết nối với WordPress’.

Nhấp vào nút Kết nối với WordPress

Giờ đây, bạn có thể làm theo lời nhắc trên màn hình để kết nối tài khoản OptinMonster của mình.

Sau khi kết nối OptinMonster, chỉ cần truy cập OptinMonster » Campaigns trong bảng điều khiển WordPress của bạn. Hãy tiếp tục và nhấp vào nút ‘Create Your First Campaign’.

Tạo một chiến dịch mới

Từ đây, bạn cần chọn ‘Thanh nổi’ làm Loại chiến dịch của mình để tạo thanh cảnh báo.

Chọn loại chiến dịch thanh nổi

Tiếp theo, bạn sẽ thấy lựa chọn các mẫu chiến dịch. Đơn giản chỉ cần chọn một mẫu mà bạn muốn sử dụng. Bạn chỉ cần di chuột qua nó và nhấp vào nút ‘Sử dụng Mẫu’ để chọn nó.

Chúng tôi sẽ sử dụng mẫu ‘Quảng cáo’ cho thanh cảnh báo của mình.

Chọn một chủ đề cho thanh cảnh báo của bạn

Tiếp theo, bạn sẽ được nhắc đặt tên cho mẫu của mình. Khi bạn đã đặt tên cho chiến dịch của mình, hãy nhấp vào nút ‘Bắt ​​đầu xây dựng’.

Nhập tên cho chiến dịch của bạn

Bây giờ, bạn sẽ thấy trình chỉnh sửa chiến dịch. Đây là nơi bạn có thể thiết kế chiến dịch của mình.

Theo mặc định, bạn sẽ thấy thanh cảnh báo xuất hiện ở cuối màn hình. Để di chuyển nó lên đầu màn hình, nhấp vào ‘Cài đặt nổi’ ở phía bên tay trái.

Thay đổi cài đặt nổi cho thanh cảnh báo của bạn

Tiếp theo, chỉ cần nhấp vào thanh trượt để di chuyển thanh nổi lên đầu trang.

Thanh nổi hiện được đặt ở đầu trang

Để thay đổi văn bản trên thanh nổi, chỉ cần nhấp vào khu vực bạn muốn thay đổi và nhập bất kỳ văn bản nào bạn muốn.

Chỉnh sửa văn bản của thanh cảnh báo của bạn

Bạn cũng có thể thay đổi phông chữ, kích thước và màu sắc của văn bản, v.v.

Để thay đổi đồng hồ đếm ngược, chỉ cần chọn đồng hồ đếm ngược trên mẫu rồi nhấp vào tab Đồng hồ đếm ngược từ menu bên trái. Sau đó, hãy tiếp tục và nhập ngày và giờ kết thúc mong muốn của bạn.

Chỉnh sửa đồng hồ đếm ngược cho thanh cảnh báo của bạn

Bạn cũng có thể đặt bộ đếm thời gian hoạt động như bộ đếm ngược thường xanh thay vì bộ đếm ngược tĩnh, nếu muốn. Bộ đếm ngược thường xanh được đặt riêng cho từng khách truy cập vào trang web của bạn.

Hãy tiếp tục và thực hiện bao nhiêu thay đổi đối với thanh cảnh báo tùy thích. Khi bạn hài lòng với nó, đừng quên nhấp vào nút ‘Lưu’ ở đầu màn hình của bạn.

Đang lưu chiến dịch OptinMonster của bạn

Tiếp theo, bạn cần chuyển đến tab ‘Quy tắc hiển thị’ để chọn thời điểm và vị trí thanh cảnh báo sẽ hiển thị trên trang web của bạn. Quy tắc mặc định là để thanh cảnh báo của bạn hiển thị sau khi khách truy cập đã ở trên trang được 5 giây.

Chúng ta sẽ thay đổi điều này thành 0 giây để thanh cảnh báo xuất hiện ngay lập tức. Để làm điều đó, chỉ cần thay đổi đếm ngược ‘giây’ thành 0.

Thay đổi quy tắc hiển thị cho thanh cảnh báo của bạn

Sau đó, nhấp vào nút ‘Bước tiếp theo’ để thay đổi cài đặt Hành động. Bạn có thể để cài đặt ‘hiển thị chế độ xem chiến dịch’ cho Optin và chọn xem bạn có muốn phát hiệu ứng âm thanh khi thanh cảnh báo xuất hiện hay không.

Thay đổi thanh cảnh báo của bạn Cài đặt hành động

Sau khi bạn đã thực hiện các thay đổi, hãy tiếp tục và nhấp vào nút ‘Bước tiếp theo’ một lần nữa và bạn sẽ thấy một bản tóm tắt.

Tóm tắt các quy tắc hiển thị

Khi bạn hài lòng, chỉ cần nhấp vào nút ‘Lưu’ ở đầu màn hình.

Sau đó, bạn có thể chuyển đến tab Xuất bản ở trên cùng và thay đổi Trạng thái Xuất bản thành ‘Xuất bản’.

Thay đổi Trạng thái Xuất bản

Bước cuối cùng là kích hoạt chiến dịch trên chính trang web của bạn.

Để làm điều đó, bạn có thể đóng trình chỉnh sửa chiến dịch và sau đó truy cập OptinMonster » Chiến dịch . Bạn sẽ thấy chiến dịch của mình được liệt kê ở đây và Trạng thái của chiến dịch sẽ là Đang chờ xử lý.

Hãy tiếp tục và nhấp vào trạng thái Đang chờ xử lý để thay đổi thành ‘Xuất bản’ từ menu thả xuống.

Thay đổi trạng thái chiến dịch từ đang chờ xử lý sang xuất bản

Bây giờ, chỉ cần truy cập bất kỳ trang nào trên trang web của bạn và bạn sẽ thấy chiến dịch của mình đang hoạt động.

Thanh cảnh báo được tạo trong OptinMonster

Phương pháp 2: Tạo thanh cảnh báo theo cách thủ công bằng HTML/CSS tùy chỉnh

Nếu bạn không muốn sử dụng OptinMonster thì sao? Trong phương pháp này, chúng tôi sẽ chỉ cho bạn cách tạo thanh thông báo bằng mã HTML và CSS .

Lưu ý: Chúng tôi không khuyến nghị phương pháp này cho người mới bắt đầu. Nếu bạn mới sử dụng WordPress hoặc không cảm thấy tự tin khi thêm mã vào trang web của mình, thì chúng tôi khuyên bạn nên sử dụng phương pháp trên.

Trước tiên, bạn cần sao chép và dán một số mã CSS tùy chỉnh cho thanh cảnh báo. Chỉ cần truy cập trang Giao diện » Tùy biến trong bảng điều khiển của bạn, sau đó nhấp vào tab ‘CSS bổ sung’ ở dưới cùng.

Nhập CSS bổ sung trong tùy biến chủ đề

Bây giờ, hãy tiếp tục sao chép và dán mã CSS này vào ô đó:

Sau khi bạn sao chép mã đó, nó sẽ trông như thế này. Chỉ cần nhấp vào nút Xuất bản ở đầu trang để lưu mã CSS của bạn.

CSS bổ sung như được hiển thị trong tùy biến chủ đề

Tiếp theo, bạn cần thêm mã HTML cho văn bản thanh cảnh báo vào trang web của mình.

Cách tốt nhất để làm điều này là cài đặt và kích hoạt plugin WPCode miễn phí .

Lưu ý: WPCode là một trong những plugin riêng của WPBeginner. Chúng tôi đã tạo ra nó để giúp bạn dễ dàng thêm tập lệnh, mã HTML, v.v. vào các trang trên trang web của mình. Nó đi kèm với các tính năng như thư viện đoạn mã tích hợp, logic có điều kiện, pixel chuyển đổi, v.v.

Sau khi kích hoạt plugin, hãy truy cập Code Snippets » Headers & Footer trong quản trị viên WordPress của bạn. Chỉ cần sao chép và dán dòng mã HTML sau vào hộp ‘Nội dung’:

Đây là cách mã đó sẽ trông như thế nào trong hộp ‘Nội dung’ của WPCode:

Thêm mã HTML bằng plugin WPCode

Tất nhiên, bạn có thể thay đổi văn bản cảnh báo thành bất kỳ thứ gì khác mà bạn thích. Đừng quên nhấp vào nút ‘Lưu thay đổi’ ở đầu trang sau khi bạn hoàn tất.

Bây giờ, bạn có thể truy cập trang web của mình để xem thanh cảnh báo. Nó sẽ xuất hiện ở đầu mỗi trang, như thế này:

Thanh cảnh báo CSS trực tiếp trên trang web

Mẹo: Trong một số chủ đề WordPress , thanh cảnh báo của bạn có thể chồng lên menu của bạn. Bạn có thể thay đổi chiều cao của thanh thành 40px hoặc 30px để tránh điều này. Bạn cũng sẽ cần giảm chiều cao của dòng cho phù hợp để văn bản của bạn được căn giữa theo chiều dọc của thanh.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo thanh cảnh báo trong WordPress. Bạn cũng có thể thích so sánh của chúng tôi về trình tạo trang kéo và thả WordPress tốt nhất để giúp bạn tùy chỉnh thêm trang web của mình mà không cần viết bất kỳ mã nào và danh sách plugin WooCommerce tốt nhất của chúng tôi để tăng doanh số cửa hàng của bạn.

Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
xem truyen kệ sắt v lỗ code learn