Làm thế nào để tạo popup thông báo trong Flatsome?

Để tạo popup thông báo trong Flatsome, bạn có thể sử dụng các phương pháp sau đây. Flatsome không có tính năng popup tích hợp sẵn, nhưng bạn có thể sử dụng plugin WordPress hoặc mã tùy chỉnh để đạt được điều đó.

1. Sử Dụng Plugin Popup

Có nhiều plugin WordPress giúp bạn tạo và quản lý popup. Dưới đây là hướng dẫn cho một số plugin phổ biến:

1.1. Popup Maker

1. Cài Đặt Plugin:
   • Vào Plugins > Add New trong WordPress Dashboard.
   • Tìm kiếm “Popup Maker” và nhấp vào Install Now và sau đó Activate.
2. Tạo Popup Mới:
   • Vào Popup Maker > Add Popup.
   • Nhập tiêu đề cho popup và nội dung bạn muốn hiển thị.
   • Tùy chỉnh các thiết lập như kích thước, hiệu ứng, và điều kiện hiển thị.
3. Thiết Lập Trigger (Kích Hoạt):
   • Chọn các tùy chọn để xác định khi nào popup sẽ xuất hiện, chẳng hạn như khi người dùng truy cập trang, cuộn xuống một phần của trang, hoặc nhấp vào một nút.
4. Nhúng Popup:
   • Sau khi cấu hình xong, nhấp vào Publish để lưu và kích hoạt popup.
   • Bạn có thể sử dụng shortcode hoặc các tùy chọn nhúng mà plugin cung cấp để hiển thị popup trên các trang hoặc bài viết cụ thể.

1.2. OptinMonster

1. Cài Đặt Plugin:
   • Vào Plugins > Add New trong WordPress Dashboard.
   • Tìm kiếm “OptinMonster” và nhấp vào Install Now và sau đó Activate.
   • Đăng ký tài khoản OptinMonster và kết nối với WordPress.
2. Tạo Campaign Mới:
   • Vào OptinMonster > Create Campaign.
   • Chọn loại popup bạn muốn tạo, chẳng hạn như popup thông báo, thanh trượt, hoặc thanh thông báo.
3. Thiết Lập Campaign:
   • Tùy chỉnh thiết kế và nội dung của popup theo nhu cầu của bạn.
   • Cấu hình các điều kiện hiển thị và hành động của người dùng.
4. Kích Hoạt Campaign:
   • Sau khi hoàn tất cấu hình, nhấp vào Publish để kích hoạt popup.

2. Sử Dụng Code Tùy Chỉnh

Nếu bạn muốn tạo popup bằng mã tùy chỉnh, bạn có thể làm theo các bước sau:

2.1. Thêm Mã JavaScript và CSS

1. Tạo Popup HTML:
   • Thêm mã HTML cho popup vào trang của bạn. Bạn có thể thực hiện điều này bằng cách vào Pages > Add New và chuyển đến Edit with UX Builder, sau đó chèn phần tử HTML hoặc Code Block.

<div id=”myPopup” class=”popup”>
<div class=”popup-content”>
<span class=”close”>&times;</span>
<p>Đây là thông báo của bạn!</p>
</div>
</div>

.popup {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
.popup-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;

}

Thêm JavaScript:

Thêm mã JavaScript vào Appearance > Customize và chọn Additional JavaScript (hoặc sử dụng plugin hỗ trợ thêm mã JavaScript).

document.addEventListener(‘DOMContentLoaded’, function() {
var popup = document.getElementById(‘myPopup’);
var close = document.getElementsByClassName(‘close’)[0];

// Hiển thị popup sau 5 giây
setTimeout(function() {
popup.style.display = ‘block’;
}, 5000);

// Đóng popup khi nhấp vào nút đóng
close.onclick = function() {
popup.style.display = ‘none’;
}

// Đóng popup khi nhấp ra ngoài popup
window.onclick = function(event) {
if (event.target === popup) {
popup.style.display = ‘none’;
}
}
});

Tùy Chỉnh Popup Trong UX Builder

1. Thêm Popup Vào Trang:
   • Mở trang hoặc bài viết mà bạn muốn thêm popup.
   • Sử dụng UX Builder để chèn phần tử HTML hoặc Code Block và thêm mã HTML, CSS, và JavaScript cho popup.
2. Tùy Chỉnh Bố Cục:
   • Tùy chỉnh bố cục và thiết kế của popup để phù hợp với giao diện trang web của bạn.

Bằng cách sử dụng các phương pháp trên, bạn có thể tạo và quản lý popup thông báo trên trang web của bạn với Flatsome.