Hướng dẫn sử dụng popup maker Informational năm 2024

With Analytics, you can build popups that perform well and collect real-time statistical data on impressions, conversions, and more.

Popup Analytics gives you power by providing real-time information on the effectiveness of your popups. Exactly why are popup analytics crucial? You cannot assess the effectiveness of your popups without the right data. Real-time, relevant data is essential for figuring out how to enhance their effectiveness.

The following statistical information about your popups is provided by Popup Analytics: frequency of opening, average duration of opening, conversions, length of average conversion, and more.

Conversion setup has never been simpler. Track form submissions, button or link clicks, or your own unique event triggers.

Trước khi mua sản phẩm, hãy đọc kỹ điều khoản sử dụng tại trang: https://taphoammo.vn/chinh-sach-bao-mat/

Tất cả sản phẩm các sản phẩm đều được miễn phí cập nhật trong vòng 1 năm kể từ ngày mua.

Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng đọc kỹ mục FAQ ở đường dẫn sau: https://taphoammo.vn/hoi-dap

Nếu như bạn không tìm được câu trả lời cho câu hỏi của bạn, xin vui lòng liên hệ với chúng tôi qua email [email protected], hoặc hệ thống hỗ trợ trực tuyến.

Mỗi sản phẩm bạn có thể sử dụng cho không giới hạn website.

*Lưu ý: Không dùng IDM để download sản phẩm, vì IDM sẽ gửi rất nhiều request lên server làm gây nhầm lẫn khiến bạn bị hết lượt tải giới hạn trong một ngày với Membership

– Hỗ trợ các ứng dụng email marketing nổi tiếng như Mailchimp, AWeber, InfusionSoft, GetResponse, Constant Contact, Mail Poet, Mad Mimi, Hubspot, Emma.

– Tất cả các popup đều hỗ trợ bản mobile responsive.

– Có thể tùy chọn các trang muốn hiển thị popup, thời gian chờ delay hiện popup, kích thước popup.

– Tùy chỉnh màu sắc, có sẵn nhiều theme popup đẹp để sử dụng luôn.

  1. Cài đặt: các bạn vào Plugins => chọn Add new rồi gõ từ khóa “popup maker”

Hướng dẫn sử dụng popup maker	Informational năm 2024

2 . Sử dụng plugin:

Tạo popup:

Hướng dẫn sử dụng popup maker	Informational năm 2024

sau đó sẽ hiện ra 1 bảng để chọn

Hướng dẫn sử dụng popup maker	Informational năm 2024

tại mục popup trigger hãy nhập phần nội dung, ở đấy mình dùng tạm contact form 7 để làm form đăng kí popup

Hướng dẫn sử dụng popup maker	Informational năm 2024

rồi bây giờ chúng ra trở lại với mục Popup settings:

  • Phần trigger chính là phần mà các bạn chọn cách mở popup theo kiểu nào.

+ Kiểu click open: cho phép chúng ta chọn css class rồi khi bấm vào sẽ hiện

Hướng dẫn sử dụng popup maker	Informational năm 2024

+ Kiểu Time Delay/ Auto Open : mỗi lần load trang hoặc bài viết,… sẽ hiện lên trong khoảng thời gian bao nhiêu lâu tính theo ms

Hướng dẫn sử dụng popup maker	Informational năm 2024

  • Đến tiếp đến phần Targeting: là phần mà chọn vị trí trang hiển thị popup

Hướng dẫn sử dụng popup maker	Informational năm 2024

  • Mục display : lựa chọn ngoại hình cho popup

Hướng dẫn sử dụng popup maker	Informational năm 2024

Bây giờ chúng ta test thôi, đầu tiên mình tạo 1 trang tên là Popup maker, với button class là hocwp, mình sẽ cấu hình trong phần popupmaker 2 yếu tố

  • Phần Popuptrigger : mình chọn class là hocwp
  • Phần Targeting: mình chọn là All trang.

Hướng dẫn sử dụng popup maker	Informational năm 2024

và đây là thành quả

Hướng dẫn sử dụng popup maker	Informational năm 2024

Lời kết

Hy vọng phần hướng dẫn cách Tạo Popup WordPress với Popup Maker

Nếu các bạn thấy hay có thể theo dõi chuyên mục thủ thuật wordpress để biết thêm nhiều kiến thức mới nha.

Popup Maker giúp bạn tạo Popup cho WordPress, với giao diện dễ tùy biến và nhiều điều kiện hiển thị khác nhau.

Mình sẽ hướng dẫn cách cài đặt, tạo popup và thiết lập điều kiện hiển thị Popup cho WordPress.

1. Truy cập vào Plugin > Cài mới > Gõ popup maker > Bấm Enter > Cài đặt

Hướng dẫn sử dụng popup maker	Informational năm 2024

2. Kích hoạt

Hướng dẫn sử dụng popup maker	Informational năm 2024

3. Bạn có thể truy cập và tạo Popup ở Popup Maker > Add Popup

Hướng dẫn sử dụng popup maker	Informational năm 2024

Hướng dẫn tạo Popup cho WordPress

Để tạo Popup cho WordPress trong Popup Maker, bạn cần:

  • Thiết lập giao diện Popup (hay còn gọi là Popup Theme)
  • Tạo nội dung Popup
  • Thiết lập điều kiện hiển thị Popup (hay còn gọi là Trigger)

Thiết lập giao diện chung Popup (Popup Theme)

Popup Maker đã tạo sẵn một số mẫu giao diện. Bạn có thể sử dụng luôn hoặc chỉnh sửa. Bạn cũng có thể tạo giao diện mới.

Mình đề nghị nên chọn một giao diện, rồi sửa lại. Nó sẽ nhanh và dễ hơn là tạo mới

1. Truy cập vào Popup Maker > Popup Themes

Hướng dẫn sử dụng popup maker	Informational năm 2024

Và đây là những theme có sẵn cho Popup. Bấm vào Default Theme để bắt đầu sửa

Hướng dẫn sử dụng popup maker	Informational năm 2024

Theme gồm 2 phần

  • Bên trái: các thiết lập cho giao diện
  • Bên phải: phần xem trước, cho biết popup sẽ hiển thị bên ngoài website như thế nào

Hướng dẫn sử dụng popup maker	Informational năm 2024

2. Overlay

Overlay là lớp phủ phía sau Popup.

  • Color: màu sắc của lớp phủ
  • Opacity: độ trong suốt của lớp phủ, tính theo %. Càng thấp thì lớp phủ càng trong suốt và bạn sẽ thấy phía sau web.

Như hình dưới có Color là màu đen, và độ trong suốt là 31%, bạn sẽ thấy nội dung phía sau (so với ảnh phía trên là màu trắng và Độ trong suốt là 100%, nên không thấy gì)

Hướng dẫn sử dụng popup maker	Informational năm 2024

3. Container

Container là phần nội dung của Popup. Container bao gồm:

  • Container: khoảng cách, bo tròn các góc
  • Background: màu nền
  • Border: đường viền
  • Drop Shadow: bóng đổ cho popup

Với Container, bạn có thể điều chỉnh khoảng cách giữa nội dung Popup và viền (Padding), và bo tròn 4 góc (Border Radius).

Hướng dẫn sử dụng popup maker	Informational năm 2024

Với Background, là màu nền của Popup. Bạn có thể thiết lập Màu nền (Color) và Độ trong suốt của nền (Opacity).

Nếu Opacity là 0. Bạn sẽ thấy Popup gần như bị ẩn, và có thể thấy nội dung phía sau web.

Hướng dẫn sử dụng popup maker	Informational năm 2024

Với Border, bạn có thể thiết lập đường viền bao quanh Popup

  • Style: None (không viền), Solid (nét liền), Dotted (chấm chấm), Dashed (nét đứt ngắn), Double (hai viền song song), Các giá trị khách bạn hãy thử để biết chúng là gì nhé!
  • Color: Màu sắc đường viền
  • Thickness: độ dày đường viền

Hướng dẫn sử dụng popup maker	Informational năm 2024

Với Drop Shadow, bạn có thể đổ bóng cho Popup.

  • Color: màu sắc của bóng đổ
  • Opacity: độ trong suốt của bóng
  • Horizontal Position: bóng đổ theo chiều ngang. Số DƯƠNG sẽ dịch qua PHẢI. Số ÂM sẽ dịch qua TRÁI
  • Vertical Position: bóng đỏ theo chiều dọc. Số DƯƠNG sẽ dịch xuống DƯỚI. Số ÂM sẽ dịch lên TRÊN.
  • Blur Radius: Độ mờ của bóng
  • Spread: bán kính bóng, số DƯƠNG thì bóng càng TO. Số ÂM thì bóng càng nhỏ

Hướng dẫn sử dụng popup maker	Informational năm 2024

4. Title

Bạn có thể điều chỉnh tên Popup ở Title. Bạn có thể sửa Font và Bóng đổ.

Font:

  • Color: màu chữ
  • Font Size: cỡ chữ
  • Line Height: độ cao chữ
  • Font Family: Kiểu font, Use Your Theme là sử dụng Font mặc định của Theme
  • Font Weight: độ đậm của chữ
  • Style: Bình thường (Normal), hoặc In nghiêng (Italic)
  • Alignment: Căn lề. Trái (Left), Phải (Right), Giữa (Center), Hai bên (Justify)

Text Shadow: tương tự với Box Shadow ở bước phía trên.

Hướng dẫn sử dụng popup maker	Informational năm 2024

5. Content

Content là nội dung bên trong Popup. Content bao gồm:

  • Color: màu sắc của chữ
  • Font Family: Kiểu font. Use Your Theme là font mặc định của Theme. Một số Font đẹp bạn có thể chọn như Nunito, Open Sans, Tahoma,…
  • Font Weight: độ đậm của chữ. 600 – 700 thường là đậm. Dưới 500 thường là nhạt.
  • Style: Bình thường (Normal), In nghiêng (Italic)

Hướng dẫn sử dụng popup maker	Informational năm 2024

6. Nút tắt Popup

General

Close Button Text: Để mặc định là CLOSE hoặc sửa lại thành Đóng, Tắt, Thoát,….

Position Outside Container: Nút tắt sẽ nằm phía ngoài Popup. Như hiện tại là nó nằm ở một góc của Popup.

Location: Vị trí nút tắt.

Top: vị trí nút tắt tính từ phía trên, tính theo đường viền của Popup.

Right: vị trí nút tắt tính từ bên phải, tính theo đường viền của Popup.

Hướng dẫn sử dụng popup maker	Informational năm 2024

Size

Padding: khoảng cách giữa chữ CLOSE so với 4 phía của nút

Height: chiều cao nút

Width: chiều rộng

Border Radius: bo tròn 4 góc nút CLOSE

Hướng dẫn sử dụng popup maker	Informational năm 2024

Background

Color: màu nền của nút CLOSE

Opacity: độ trong suốt

Hướng dẫn sử dụng popup maker	Informational năm 2024

Font

Color: màu chữ CLOSE

Font Size: cỡ chữ

Line Height: chiều cao chữ

Font Family: kiểu font

Font Weight: độ đậm

Style: Bình thường (Normal), In nghiêng (Italic)

Hướng dẫn sử dụng popup maker	Informational năm 2024

Border, Box Shadow, Text Shadow

Tương tự Phần 3 (Container) và 4 (Title)

Sau đó bấm Cập nhật để lưu lại

Tạo nội dung Popup

Popup Maker cho phép chèn Văn bản, Hình ảnh, Video, Form đăng ký, Form liên hệ…và rất rất nhiều thứ vào nội dung.

1. Truy cập và tạo nội dung Popup ở Popup Maker > Add Popup

Hướng dẫn sử dụng popup maker	Informational năm 2024

2. Điền thông tin

  • Tên Popup: điền gì cũng được
  • Title Popup: sẽ hiển thị ở trong Popup
  • Nội dung Popup

Và bấm nút Đăng

Hướng dẫn sử dụng popup maker	Informational năm 2024

Thiết lập giao diện riêng từng Popup

Sau khi đã có nội dung Popup, bạn chọn giao diện đã tạo ở bước trên ở Display > Appearance > Popup Theme

Hướng dẫn sử dụng popup maker	Informational năm 2024

Ngoài ra bạn có thể tùy chỉnh thêm một chút cho Popup đang tạo.

Size

Size: Kích thước Popup (tính theo %), so với chiều rộng của màn hình máy tính

Min Width: Chiều rộng tối thiểu của Popup (nên tính theo %)

Max-Width: Chiều rộng tối đa của Popup (nên tính theo %)

Hướng dẫn sử dụng popup maker	Informational năm 2024

Animation

Tạo hiệu ứng chuyển động cho Popup

Animation Type: kiểu chuyển động, thử từng cái để biết cụ thể nó là gì nhé

Animation Speed: tốc độ chuyển động

Hướng dẫn sử dụng popup maker	Informational năm 2024

Position

Vị trí Popup

Location: Vị trí popup. Chọn vào các vị trí khác nhau sẽ hiển thị thêm các tùy chọn khác bên dưới. Thử để biết.

Top: khoảng cách so với phía trên màn hình

Position from Trigger: khoảng cách từ Trigger (sẽ nói trong bài viết sau)

Hướng dẫn sử dụng popup maker	Informational năm 2024

Advanced

Một số thiết lập cao cấp khác

Disable Overlay: Tắt lớp phủ phía sau Popup

Stackable: chịu 😀 vẫn đang mò coi nó là gì

Disable Repositioning: Nếu bật, Popup sẽ không tự co giãn kích thước trên máy tính bảng và điện thoại

Popup Z-Index: Để mặc định. Dùng cho trường hợp Popup gặp lỗi hiển thị phía sau thành phần nào đó trên web.

Hướng dẫn sử dụng popup maker	Informational năm 2024

Thiết lập điều kiện hiển thị Popup (Trigger)

Popup Maker cho thiết lập rất nhiều điều kiện hiển thị Popup (Trigger). Chúng ta sẽ đề cập chi tiết trong một bài riêng.

1. Để tạo một Trigger đơn giản, kéo xuống dưới cùng ở trang Popup đang tạo (ở bước trên) > Bấm Triggers > Add New Trigger.

Hướng dẫn sử dụng popup maker	Informational năm 2024

Hai loại Trigger của Popup là:

Click Open: bấm vào vị trí xác định và sẽ bật ra Popup

Time Delay/Auto Open: Popup tự động bật ra sau một thời gian được chỉ định

Hướng dẫn sử dụng popup maker	Informational năm 2024

2. Mình sẽ chọn là Time Delay / Auto Open.

Delay: sau bao lâu thì Popup sẽ hiện ra. 1 giây = 1000 ms

Rồi bấm Add

Hướng dẫn sử dụng popup maker	Informational năm 2024

Và kết quả như sau.

Hướng dẫn sử dụng popup maker	Informational năm 2024

3. Giờ đây, khi ai đó vào website, Popup sẽ hiện ra sau 5 giây (tức là 5000 ms). Và nó sẽ hiển thị liên tục khi họ tải lại trang. Hoặc đọc bài viết bất kỳ trên web.

Để Popup chỉ hiển thị 1 lần hoặc một số lần. Bạn cần thiết lập Cookies.

4. Nếu bạn muốn Popup chỉ hiển thị trên một số trang nhất định, hãy truy cập vào Targeting

  • Choose a condition to target your popup to specific…: bấm vào Choose a condition và bạn có thể chọn rất nhiều vị trí hiển thị
  • Disable this popup on mobile devices: tắt popup trên điện thoại
  • Disable this popup on tablet devices: tắt popup trên máy tính bảng

Hướng dẫn sử dụng popup maker	Informational năm 2024

Thiết lập tắt Popup

Mặc định bấm vào chữ CLOSE, popup sẽ tắt đi, nhưng chúng ta có thể thiết lập những cách khác để người dùng tắt Popup.