Tạo cửa sổ bật lên Elementor trong WooC Commerce

Tất cả chúng tôi đều là những người hâm mộ lớn của WooC Commerce. Nó rất đơn giản để thiết lập và tùy chỉnh. Các tính năng giúp việc tạo và quản lý một cửa hàng thương mại điện tử năng động và mạnh mẽ trở nên đơn giản được bao gồm trong gói.

Tuy nhiên, để tạo ra một trang thương mại điện tử thành công cần nhiều điều hơn là chỉ thêm các sản phẩm phổ biến. Tất cả các trang cũng phải hấp dẫn về mặt trực quan. Trang web của bạn càng hấp dẫn trực quan và thân thiện với người dùng thì khả năng thu hút nhiều khách hàng càng cao.

• Cấu hình cửa sổ bật lên
• Bạn cũng có thể tạo cửa sổ bật lên bằng trình tạo hình ảnh trong Elementor
• Tùy chọn xuất bản

Mặc dù WooC Commerce tạo giỏ hàng và trang thanh toán cho bạn khi bạn xây dựng trang web của mình, Elementor khiến chúng trở nên hấp dẫn hơn bằng cách tùy chỉnh chúng.

Bạn có tùy chọn thiết kế lại chúng hoặc bắt đầu lại từ đầu. Bạn có thể lặp lại quy trình cho tất cả các trang khác trên trang web của mình.

Bằng cách tạo trang Cảm ơn nồng nhiệt và cập nhật trang Tài khoản của tôi và Điều khoản dịch vụ, bạn có thể chiếm được trái tim và khối óc của khách hàng.

Chức năng kéo và thả của Elementor, kết hợp với hướng dẫn này, sẽ đảm bảo rằng bạn có trải nghiệm không gặp rắc rối khi tạo trang của mình.

Sau khi thiết lập cửa hàng WooC Commerce của mình, bạn có thể muốn làm cho nó hấp dẫn hơn đối với khách truy cập và khách hàng của mình. Việc thêm cửa sổ bật lên mang lại cho người dùng một ấn tượng khác và mong muốn mới ở lại cửa hàng của bạn.

 Để tạo cửa sổ bật lên, hãy đi tới Mẫu > Cửa sổ bật lên trong thanh menu. Bạn sẽ thấy một danh sách tất cả các cửa sổ bật lên của mình và nếu bạn chưa tạo một danh sách nào, bạn sẽ thấy một cái gì đó tương tự như sau:

Sau khi nhấp vào THÊM CỬA SỔ MỚI (khá dễ hiểu), bạn sẽ được yêu cầu đặt tên cho nó rồi chọn một mẫu từ các amp cũ được tạo sẵn được hiển thị. Có sẵn nhiều mẫu khác nhau cho nhiều mục đích; một số thích hợp để thông báo, một số khác để quảng cáo giảm giá, một số khác lý tưởng để khuyến khích người dùng đăng ký thứ gì đó. Thậm chí còn có amp để cảnh báo người dùng về việc sử dụng cookie hoặc các thông báo GDPR khác. Ngay sau khi bạn tìm thấy thứ gì đó mình thích, hãy nhấp vào nó để xem bản xem trước lớn hơn, sau đó nhấn nút Chèn.

Bạn sẽ được đưa tới trình tạo cửa sổ bật lên trong phần phụ trợ WordPress sau khi nhấp vào nút này.

Nếu trước đây bạn đã làm việc với Elementor, bạn sẽ cảm thấy quen thuộc với giao diện, các tùy chọn và cách mọi thứ được sắp xếp cho bạn. Về cơ bản, quy trình này giống như quy trình tạo mẫu trang Elementor trong WordPress.

Ở phía bên phải màn hình là khung vẽ chính, hiển thị bản xem trước những gì bạn đang làm. Bạn có thể chỉnh sửa và tùy chỉnh từng thành phần riêng lẻ bằng cách chọn thành phần đó và chọn Chỉnh sửa > Chỉnh sửa thành phần. Khi hoàn tất, bạn sẽ thấy các điều khiển và tùy chọn được hiển thị trong thanh bên ở bên trái, cùng với tùy chọn Xuất bản tác phẩm của bạn.

Cấu hình cửa sổ bật lên

 Đây là lúc bạn sẽ thấy bản xem trước cửa sổ bật lên của mình – có thể là một bảng trống hoặc mẫu bạn đã chọn.

Cài đặt cửa sổ bật lên, luôn mở theo mặc định, cho phép bạn tùy chỉnh cách hoạt động của khung vẽ bật lên. Chúng như sau:

• Đây là nơi bạn sẽ muốn dành nhiều thời gian nhất vì đó là nơi bạn có thể tạo các loại cửa sổ bật lên khác nhau. Nói cách khác, bằng cách điều chỉnh các cài đặt này, bạn sẽ có thể thực hiện các hiệu ứng sau:

• Cửa sổ bật lên phương thức là một loại cửa sổ phương thức.
• Các trang trình bày, thanh thông báo, v.v.

Ngoài ra, bạn có thể tùy chỉnh một số cài đặt quan trọng khác.

Các tùy chọn sau có sẵn trên Cài đặt :

• Thay đổi chiều cao và chiều rộng của hình ảnh.
• Thay đổi hướng dọc hoặc ngang của đối tượng (ví amp : bạn có thể cố định nó lên trên hoặc dưới để tạo thanh thông báo)
• Đưa ra quyết định về việc có nên sử dụng lớp phủ hay không (ví dụ: điều này cho phép bạn amp mờ nền khi cửa sổ bật lên đang hoạt động)
• Vô hiệu hóa nút đóng trên trình duyệt của bạn.
• Bao gồm một hình ảnh động cho lối vào.

Bạn có thể thực hiện những việc sau trên Kiểu :

• Bạn có thể thay đổi màu nền, chuyển màu hoặc sử dụng hình ảnh làm nền.
• Nếu lớp phủ được bật, hãy định cấu hình nó.
• Trong trường hợp bạn đã bật nút đóng, bạn phải cấu hình nó.

Cuối cùng, tab Nâng cao chứa một số cài đặt nhập linh hoạt cho phép bạn thực hiện những việc như sau:

• Hiển thị nút đóng hoặc để cửa sổ bật lên tự động đóng sau một khoảng thời gian nhất định.
• Bằng cách nhấp vào lớp phủ hoặc nhấn phím thoát, bạn có thể ngăn cửa sổ đóng.

• Vô hiệu hóa khả năng cuộn xuống trang.
• Tránh nhiều cửa sổ bật lên (nếu bạn đã nhắm mục tiêu nhiều cửa sổ bật lên vào cùng một trang, điều này sẽ khiến khách truy cập của bạn không cảm thấy khó chịu).

Để giúp bạn biết những cài đặt này sẽ ảnh hưởng như thế nào đến cửa sổ bật lên của bạn, đây là giao diện khi bạn thay đổi Vị trí thành góc dưới cùng bên phải của cửa sổ:

Hãy xem cách cửa sổ bật lên hiện được cố định vĩnh viễn ở góc dưới bên phải. Sử dụng trình kích hoạt cuộn kết hợp với hoạt ảnh lối vào, bạn có thể đạt được hiệu ứng trượt đẹp mắt, kín đáo.

Bạn cũng có thể tạo cửa sổ bật lên bằng trình tạo hình ảnh trong Elementor

Ngay sau khi bạn hoàn thành Cài đặt cửa sổ bật lên cơ bản, bạn có thể bắt đầu thiết kế nội dung thực tế của cửa sổ bật lên bằng cách kéo và thả các phần tử vào giao diện kéo và thả trực quan.

Bạn có thể sử dụng bất kỳ tiện ích Elementor nào bạn muốn, điều này mang lại cho bạn nhiều quyền kiểm soát đối với thiết kế cuối cùng. Tiện ích Biểu mẫu là thứ duy nhất bạn nhất định phải đưa vào vì đây là tiện ích duy nhất cho phép bạn tạo biểu mẫu đăng ký email của mình.

Với tiện ích Biểu mẫu, bạn có toàn quyền kiểm soát các trường bạn muốn cung cấp cũng như văn bản và hình thức của nút gửi. Ví amp :

Ngoài ra, tôi thực sự khuyên bạn nên làm quen với tất cả các tiện ích và tùy chọn thiết kế của Elementor.

Như đã nêu trước đây, bạn có nhiều quyền kiểm soát đối với giao diện trang web của mình và bạn cũng có quyền truy cập vào một số tiện ích hữu ích có thể giúp bạn tăng tỷ lệ chuyển đổi.

Tùy chọn xuất bản

Khi bạn hài lòng với những gì mình đã tạo, bạn sẽ muốn chia sẻ nó với mọi người. Sau khi nhấn nút XUẤT BẢN, bạn sẽ nhận được một loạt câu hỏi. Như một minh họa:

Có thể chỉ định các điều kiện mà bạn muốn cửa sổ bật lên xuất hiện không? Bạn có thể chọn những trang để bao gồm hoặc loại trừ khỏi kết quả tìm kiếm của mình. Bạn có thể có bao nhiêu điều kiện tùy thích.

Vậy thì sự kiện nào khiến cửa sổ bật lên xuất hiện? Bạn có thể chọn có hiển thị cửa sổ bật lên ngay lập tức khi tải trang, khi cuộn hoặc khi người dùng cuộn đến một phần tử cụ thể hay không, trong số các khả năng khác. Tất cả các tùy chọn này đều có cài đặt riêng, cho phép tùy chỉnh hoàn toàn.

Cuối cùng nhưng không kém phần quan trọng, bạn sẽ thấy một số quy tắc nâng cao, chẳng hạn như chỉ hiển thị cửa sổ bật lên cho khách truy cập quay lại, chỉ hiển thị cửa sổ bật lên theo số lần nhất định hoặc có thể chỉ hiển thị cửa sổ bật lên khi khách truy cập được giới thiệu đến trang web của bạn từ một địa chỉ cụ thể. URL. Ngoài ra còn có một số nữa. Các tùy chọn này có thể cải thiện đáng kể trải nghiệm người dùng đối với cửa sổ bật lên của bạn, cho phép bạn thiết kế nó với tính toàn vẹn và cân nhắc thực sự cho người dùng của mình.

Hoàn tất cài đặt theo cách bạn mong muốn, sau đó nhấp vào LƯU & ĐÓNG. Bạn sẽ được biết amp về giao diện cửa sổ bật lên của mình sau khi nhấp vào nút này.

Cửa sổ bật lên có thể được tùy chỉnh và nội dung động có thể được thêm vào chúng.

Chúng ta hãy nâng mọi thứ lên một tầm cao mới, phải không? Cho đến thời điểm này, chúng tôi đã chọn một mẫu và điều chỉnh một hoặc hai phiên bản, thế là xong. Hãy xem xét tình huống mà chúng tôi muốn tùy chỉnh thêm cửa sổ bật lên của mình.

Chúng tôi quay lại giai đoạn THÊM CỔNG POPUP MỚI của quy trình, nơi chúng tôi có thể chỉ định tiêu đề và chọn mẫu một lần nữa.

Sau đó, chúng ta có thể chọn nó, thực hiện bất kỳ thay đổi cần thiết nào đối với cài đặt cơ bản và nhấn XUẤT BẢN một lần nữa.

Được rồi, đây là lúc mọi thứ bắt đầu trở nên thú vị. Chúng tôi có thể sử dụng Elementor để tìm nạp dữ liệu động từ bản cài đặt WordPress của mình và chèn nó vào chính cửa sổ bật lên trong cửa sổ bật lên của chúng tôi. Chúng tôi có thể bao gồm thông tin như tên người dùng, tiêu đề trang, v.v.

Hãy xem xét tình huống sau: chúng tôi đang chạy WooC Commerce và chúng tôi muốn thông báo cho người dùng rằng có chương trình giảm giá cho sản phẩm cụ thể mà họ hiện đang xem. Để bắt đầu, hãy chọn một phần văn bản từ mẫu rồi nhấp vào Động trong thanh bên:

Chúng tôi có nhiều tùy chọn để lựa chọn, bao gồm Thông tin từ chính bài đăng, Thông tin từ toàn bộ trang web, thông tin phương tiện, thông tin tác giả và thậm chí cả Thông tin WooC Commerce. Chúng tôi sẽ chọn Tiêu đề sản phẩm và tiêu đề đó sẽ được thêm vào khối nội dung văn bản do lựa chọn của chúng tôi.

Giả sử các chi tiết cơ sở dữ liệu không được truy xuất đúng cách. Trong trường hợp đó, có thể chỉ định một số trước văn bản, một số sau văn bản và văn bản dự phòng (nếu chi tiết cơ sở dữ liệu không được truy xuất chính xác).

Vì vậy, hãy lặp lại quy trình này cho nút, nút này sẽ hiển thị giá của sản phẩm. Chúng ta có thể diễn đạt văn bản trước đó là MUA NGAY để cung cấp cho chúng ta lời kêu gọi hành động hấp dẫn:

Chúng tôi thậm chí có thể tiến thêm một bước nữa và sử dụng hình ảnh sản phẩm làm nền của chính cửa sổ bật lên.

Khi chúng tôi nhấn XUẤT BẢN, chúng tôi sẽ thấy cài đặt xuất bản một lần nữa, cho phép chúng tôi chỉ định rằng chúng tôi chỉ muốn cửa sổ bật lên xuất hiện trên các trang WooC Commerce. Chúng tôi sẽ đặt bộ hẹn giờ thành 15 giây không hoạt động để kích hoạt. Đây là cách nó diễn ra cuối cùng:

Mặc dù thiết kế có thể được cải thiện nhưng bạn có thể thấy rằng chúng tôi đang hiển thị tên sản phẩm, giá và hình ảnh của sản phẩm làm nền của cửa sổ bật lên. Xuất sắc!