Hướng dẫn tạo popup trong website Wordpress hoàn toàn miễn phí và đơn giản nhất

Cách thêm popup vào website WordPress đơn giản nhất và miễn phí

Khi ghé thăm một trang web, có bao giờ bạn thấy một hình ảnh, thông điệp nào đó bất thình lình hiện ra, “nhảy bổ” ra giữa màn hình máy tính của bạn chưa? Đó chính là popup hay cửa sổ thông báo trên trang web, một chiến lược quảng cáo phổ biến và hiệu quả mà các doanh nghiệp, chủ website hay dùng. Để tạo một popup như vậy trong WordPress, bạn có thể dùng plugin chuyên dụng, vừa nhanh chóng, đơn giản lại miễn phí. Kể cả khi bạn là dân không chuyên thì chỉ cần 10 phút làm theo các bước theo hướng dẫn dưới đây.

Lợi ích của việc dùng popup trong trang business

Dưới đây là ví dụ của một popup trong trang business. Trông rất đẹp mắt đúng không?

Popup giúp thông tin giảm giá của website thu hút hơn.

Ngoài tác dụng về mặt thẩm mỹ (nếu bạn thiết kế được một chiếc popup đẹp, phù hợp với website và đối tượng khách hàng), popup còn có nhiều lợi ích khác cho trang business như:

  • Giúp quảng bá thông tin quan trọng, chiến dịch sale, marketing, …
  • Kêu gọi người dùng hành động, tăng conversion rate (tỷ lệ chuyển đổi)
  • Giúp bạn thu thập lead

Thêm popup vào WordPress với plugin Popup Builder

Để thêm popup vào website, bạn có thể thuê một công ty làm web uy tín, một coder. Tuy nhiên, để tiết kiệm chi phí và thời gian, plugin là sự lựa chọn tốt nhất. Trong số các plugin chuyên dụng để tạo popup, Popup Builder có lẽ là plugin dễ dùng nhưng hiệu quả nhất.

Đây là plugin miễn phí nên bạn chỉ cần cài đặt và kích hoạt nó trong Dashboard như thường.

Popup Builder là plugin WordPress miễn phí giúp bạn thêm popup vào website của mình.

Sau khi cài đặt xong, hãy làm theo các bước sau đây:

Bước 1: Chọn loại popup và tạo một popup mới

Bây giờ ở trên thanh menu của Admin, bạn sẽ có thêm mục Popup Builder. Bạn đi tới đó, sau đó chọn Add New và chọn một trong 4 loại popup sau.

Plugin này hỗ trợ 4 loại popup khác nhau.

Để bạn dễ hình dung, thì dưới đây là hình ảnh hiển thị ngoài website của 4 loại popup mà Popup Builder hỗ trợ:

Minh họa hiển thị ngoài fontend của 4 loại popup mà Popup Builder hỗ trợ.

Sau khi chọn loại popup mong muốn, hãy thêm nội dung cho popup ở bước dưới đây.

Bước 2: Thêm nội dung cho popup

Trước hết hãy điền tên của popup để tiện quản lý nhé.

Đặt tên cho popup để dễ quản lý.

Tùy từng loại popup mà các nội dung bạn cần điền sẽ khác nhau như sau:

Thêm nội dung cho popup Facebook

Ở giao diện tạo popup Facebook, bạn cần điền các thông tin sau:

  1. Thông điệp sẽ xuất hiện ở popup này. Bạn nên viết một câu call-to-action để khuyến khích người đọc tương tác hoặc thêm hình ảnh, banner để popup đẹp mắt hơn
  2. Điền URL Facebook
  3. Chọn bố cục cho popup theo ý muốn. Về cơ bản, các bố cục này cũng không quá khác biệt nên bạn cứ thử và chọn theo ý thích
  4. Click vào đây để ẩn nút share nếu muốn
Điền thông tin cho popup facebook trên website của bạn.

Đây là kết quả của mình:

Popup facebook giúp tăng lượt tương tác cho website và mạng xã hội của bạn.

Thêm nội dung cho popup dạng hình ảnh

Ở đây, bạn chỉ cần tải ảnh lên hoặc gắn link ảnh vào đây. Các định dạng ảnh được hỗ trợ bao gồm JPG, PNG, và GIF:

Popup hình ảnh hỗ trợ 3 định dạng chính jpg, png và gif.

Đây là một chiếc banner xinh đẹp cho popup mà mình tự thiết kế cho chiến dịch Black Friday của trang nè:

Một banner popup cho chiến dịch giảm giá trên website bán hàng.

Thêm nội dung cho popup HTML

Phần này giống như việc bạn viết bài đăng trên WordPress Gutenberg editor vậy. Bạn có thể thêm ảnh, video, bảng, button, quote, … bất cứ nội dung nào WordPress editor hỗ trợ. Giao diện tương tự như Gutenberg editor nên khá thân thiện và native:

Việc thêm nội dung cho popup html tương tự với việc thêm nội dung cho các post, page trên WordPress.

Và đây là popup HTML của mình ngoài website:

Minh họa popup HTML mình đã cài đặt.

Thêm nội dung cho popup Subscription

Ở đây có khá nhiều nội dung cần điền và tùy chỉnh cho form subscription của bạn. Tuy nhiên, bạn cần quan tâm nhất đến các field của form như First name, Last name, Email và tùy chỉnh Placeholder, Required field của chúng.

Bạn có thể tùy chỉnh nhiều field trong popup subcription của mình.

Sau đó, hãy kéo xuống dưới và tùy chỉnh phần hiển thị của form như Form background options, Inputs’ style, Submit button styles cho form đẹp mắt và hợp với trang web.

Đặc biệt, ở phần After successful subscription, hãy chọn thông điệp, nội dung bạn muốn hiển thị sau khi người dùng subscribe sao cho phù hợp và khéo léo. Ví dụ như hiển thị lời cảm ơn, hiển thị coupon, quà tặng, gift card, … cho những subscriber này. Việc này sẽ ảnh hưởng khá nhiều đến ấn tượng và trải nghiệm của người dùng đấy.

Bạn có thể cài đặt hiển thị các thông điệp, quà tặng ở popup subscription sau khi khách hàng đăng ký.

Ví dụ, đây là popup subscription email của mình. Sau khi submit thì mình sẽ hiển thị một thông báo về chiến dịch sale Black Friday nhằm kích thích người dùng mua hàng:

Thông tin hiển thị sau khi đăng kí ở popup subscription có thể là thông tin giảm giá đang diễn ra.

Còn để quản lý các subscriber, bạn vào Popup Builder > All Subscriber:

Vào All Subscriber để quản lý thông tin những người đã đăng ký qua popup subscription.

Thậm chí bạn có thể gửi mail cho các subscriber ở phần Newsletter.

Bạn còn có thể gửi mail thông báo các chương trình khác cho người đăng ký qua Newsletter.

Sau khi thêm xong nội dung cho popup, hãy kéo xuống dưới. Bạn sẽ thấy ở giao diện tạo popup còn có nhiều settings khác. Mình sẽ hướng dẫn từng phần ở các bước 4,5,6 dưới đây.

Bước 3: Cài đặt vị trí và điều kiện hiển thị của popup

Cài đặt vị trí hiển thị popup

Ở phần Popup Display Rules, chúng ta cần tùy chỉnh xem popup sẽ hiển thị / không hiển thị ở đâu.

Bạn có thể chọn Everywhere để hiển thị popup ở mọi trang, bài viết, tag, hoặc tùy chọn xem popup sẽ hiển thị ở các trang, bài viết, tag cụ thể nào đó theo ý muốn. Để hiểu hơn về các mục, bạn click vào tooltip hình dấu “?” nhé.

Dưới đây là ví dụ của mình: chọn vị trí hiển thị là một trang cụ thể, chọn hiển thị popup (chọn “is”), và chọn trang hiển thị là “Home”. Ngoài ra, bạn có thể thêm các vị trí hiển thị khác bằng cách chọn Add.

Bạn có thể cài đặt hiển thị popup ở 1 trang nhất định hoặc mọi trang.

Cài đặt điều kiện để hiển thị popup

Ở phần Popup Events, hãy chỉnh xem khi nào popup xuất hiện ví dụ như sau khi trang load được vài giây, khi người dùng click vào đâu đó, … Plugin Popup Builder hỗ trợ các điều kiện sau:

  • On load: Popup sẽ tự động hiển thị sau bao nhiêu giây (bạn thêm số giây đó vào phần Delay) kể từ khi trang được tải xong.
Chế độ onload hiển thị popup sau một thời gian website được tải xong.
  • Set by CSS class: cho phép người dùng click vào một thành phần nào đó để bật popup lên. Thành phần đó sẽ được quyết định bằng ID của popup này. Phần này hơi phức tạp và liên quan đến kỹ thuật một chút nên bạn hãy đọc kỹ hướng dẫn từ tác giả plugin.
Chế độ Set by CSS class cho phép popup hiện lên khi người dùng click vào một vị trí nào đó.
  • On Click: tương tự như mục Set by CSS class nhưng bạn không cần dùng đến ID của popup để cài đặt “công tắc” bật popup lên.

Thay vào đó, nếu bạn chọn Default ở mục Options, plugin sẽ tạo một class mặc định cho popup ở phần Default Class như dưới đây.

Khi bạn chọn Default, plugin sẽ tạo class mặc định để quản lý các popup.

Còn nếu chọn Custom CSS, hãy điền class mà bạn tự tạo vào mục Custom Class:

Nếu sử dụng Custom CSS, bạn cần thêm class cho popup thủ công.

Sau đó, bạn hãy thêm class của popup này vào CSS của thành phần mà bạn muốn.

Ví dụ, ở trong bài viết, mình tạo một button và thêm class của popup mình cần vào mục Additional CSS classes:

Ví dụ khi mình đã thêm class của popup vào Addition CSS classes.

Khi ra ngoài website, đây là kết quả:

Đây là kết quả hiển thị popup trên website của mình.
  • Hover Click: khi hover chuột vào một thành phần nào đó thì popup sẽ hiện ra. Cách làm tương tự như ở mục On Click.
Chế độ Hover Click giúp popup hiển thị khi bạn di chuột tới một thành phần nào đó.

Bước 4: Tùy chỉnh hiển thị của popup

Sau bước 3 thì bạn đã có được một chiếc popup cơ bản rồi. Nhưng muốn tùy chỉnh để cho popup đẹp hơn, hãy kéo xuống dưới mục Design. Ở đây, bạn có thể chỉnh các yếu tố như giao diện, overlay, background của popup cho đẹp và hoàn thiện hơn.

Bạn hoàn toàn có thể tùy chỉnh các yếu tố ngoại hình như màu sắc, kích thước... cho popup của mình.

Ngoài ra ở mục Dimensions, hãy chỉnh kích cỡ độ dài, rộng của popup theo ý thích bằng cách chọn Custom mode, hoặc chọn Responsive mode để kích thước của popup tự động khớp với nội dung của nó.

Chế độ Responsive mode giúp popup của bạn tự động có kích thước phù hợp với nội dung.

Bước 5: Tùy chỉnh các cài đặt nâng cao khác

Các cài đặt nâng cao này cho phép bạn thiết lập một cách chi tiết và tỉ mỉ hơn cho việc hiển thị, tương tác với popup, …

Ví dụ như bạn có thể chọn cách đóng cửa sổ popup ở mục Close Settings. Có các cách để người đọc đóng popup như ấn nút Esc, hiển thị một nút “close” để đóng, … Hãy chọn một, hoặc thậm chí áp dụng nhiều cách thức tùy ý.

Bạn có thể chọn cách đóng cửa sổ popup ở mục Close Settings.

Nếu muốn tạo các hiệu ứng đóng, mở popup, hay điều chỉnh số lần xuất hiện của nó đối với cùng một người đọc, … hãy xuống phần Popup Options. Các thao tác rất đơn giản, chỉ việc tick vào các ô bạn muốn thôi.

À, lưu ý rằng khi sử dụng plugin Popup Builder miễn phí, các mục có ghi Unlock Option màu vàng như này là tính năng của bản pro. Bạn phải mua thêm các extension của Popup Builder để sử dụng chúng.

Plugin Popup Buider có nhiều tính nắng premium giúp bạn cài đặt nhiều yếu tố cho popup hơn.

Cuối cùng, ở thanh bên, bạn có 1 tùy chọn rất hay đó là tạo một nút cố định trên trang web để khi click vào, popup sẽ xuất hiện. Nút floating này rất tiện, cho phép người dùng xem popup mọi lúc mọi nơi, thiết kế cũng rất dễ chịu, không tạo cảm giác làm phiền hay khó chịu.

Bạn có thể cái đặt nút floating để người dùng có thể xem popup mọi lúc mọi nơi khi đọc website của bạn.

Đây là nút floating ở trang web:

Nút floating này có thể ở mọi vị trí trên website WordPress.

Hoặc bạn cũng có thể tắt popup đó đi bằng cách click vào “công tắc” Disable.

Chọn Disable khi bạn không muốn các popup hiển thị ra ngoài website nữa.

Cuối cùng, hoàn thành xong thì bạn chỉ cần ấn Publish.

Như vậy là sau 6 bước, bạn đã hoàn thiện popup với đầy đủ các cài đặt từ cơ bản đến nâng cao rồi đó.

Thêm popup vào trang WordPress và cái kết

Như bạn thấy đấy, phần phức tạp nhất khi thêm cửa sổ thông báo vào WordPress là tùy chỉnh điều kiện hiển thị của nó thôi. Còn lại các thao tác đều rất đơn giản đúng không? Còn lại là tùy vào sự sáng tạo của bạn thôi.

Ngoài popup ra, có rất nhiều yếu tố để tăng tỷ lệ chuyển đổi của website mà bạn có thể áp dụng. Nếu đang muốn tạo một landing page hiệu quả, ngoài việc sử dụng một popup tối ưu thì hãy tham khảo thêm bài viết về cách tạo landing page convert của chúng mình, hoặc đọc thêm về cách tạo trang sản phẩm nhé.

Chúc các bạn thành công!