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

Tất cả chúng tôi đều là những người hâm mộ lớn của WooCommerce. Thậ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 này.

Tuy nhiên, có nhiều điều để tạo ra một trang thương mại điện tử thành công 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 hình ảnh. Trang web của bạn càng hấp dẫn về mặt hình ảnh và thân thiện với người dùng thì khả năng thu hút được nhiều khách hàng hơn.

• Cấu hình của 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 trực quan trong Elementor
• Xuất bản Tùy chọn

Mặc dù WooCommerce 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 làm cho chúng 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 các 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 sự cố khi tạo các trang của mình.

Sau khi thiết lập cửa hàng wooCommerce, bạn có thể muốn làm cho cửa hàng này trở nên hấp dẫn hơn đối với khách truy cập và khách hàng của mình. 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à một 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 chuyển đến Mẫu> Cửa sổ bật lên trong thanh menu. Bạn sẽ thấy 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, bạn sẽ thấy một cái gì đó tương tự như sau:

Khi bạn đã nhấp vào THÊM POPUP MỚI (khá dễ hiểu), bạn sẽ được yêu cầu đặt tên cho nó và sau đó chọn một mẫu từ ex amp les được tạo sẵn được hiển thị. Nhiều mẫu khác nhau có sẵn cho nhiều mục đích; một số thích hợp cho việc thông báo, một số khác để quảng cáo giảm giá, một số khác lại lý tưởng để khuyến khích người dùng đăng ký một thứ gì đó. Thậm chí còn có các ex amp les để 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ứ mình thích, hãy nhấp vào nó để xem bản xem trước lớn hơn, rồi nhấn nút Chèn.

Bạn sẽ được đưa đến 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 bạn đã làm việc với Elementor trong quá khứ, bạn sẽ cảm thấy như ở nhà 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ư quá trình tạo các mẫu trang Elementor trong WordPress.

Ở phía bên phải của màn hình là khung chính, hiển thị bản xem trước của những gì bạn hiện đang làm. Bạn có thể chỉnh sửa và tùy chỉnh từng phần tử riêng lẻ bằng cách chọn phần tử đó và chọn Chỉnh sửa> Chỉnh sửa phần tử. 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 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 - một phương tiện chặn 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 cửa sổ 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.
• Slide-in, 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 tab 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 (đối với ex amp le, bạn có thể sửa nó ở trên cùng hoặc dưới cùng để tạo thanh thông báo)
• Đưa ra quyết định về việc có hay không sử dụng lớp phủ (điều này cho phép bạn, cho ex amp le, màu xám ra nền khi popup đang hoạt động)
• Tắt 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 tab Kiểu :

• Bạn có thể thay đổi màu nền, tạo độ dốc 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 định cấu hình nó.

Cuối cùng, tab Nâng cao chứa một số cài đặt nhập linh tinh 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 đến cùng một trang, điều này sẽ ngăn khách truy cập của bạn khó chịu).

Để cung cấp cho bạn ý tưởng về cách các cài đặt này sẽ ảnh hưởng đến cửa sổ bật lên của bạn, đây là giao diện của nó khi bạn thay đổi Vị trí ở 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 vào đẹ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 trực quan 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ỳ widget Elementor nào bạn muốn, điều này cho phép bạn kiểm soát rất nhiều đối với thiết kế cuối cùng. Tiện ích Biểu mẫu là thứ duy nhất bạn hoàn toàn phải bao gồm vì nó là tiện ích duy nhất cho phép bạn tạo biểu mẫu chọn tham gia 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. Đối với ex amp le:

Ngoài ra, tôi thực sự khuyên bạn nên làm quen với tất cả các vật dụng 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 của mình.

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

Khi bạn hài lòng với những gì mình đã tạo ra, 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ẽ được đưa ra 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ó nhiều điều kiện như bạn muốn.

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 hiển thị hoặc không 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ể, 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 của chú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 những khách truy cập trở lại, chỉ hiển thị cửa sổ bật lên một 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 URL. Có một số khác 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ế cửa sổ bật lên với tính toàn vẹn và sự cân nhắc thực sự cho người dùng của bạn.

Hoàn thành cài đặt theo cách bạn muốn, sau đó nhấp vào LƯU & ĐÓNG. Bạn sẽ được đưa đến như amp le về những gì popup của bạn sẽ trông giống 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.

Đưa mọi thứ lên cấp độ tiếp theo, phải không? Cho đến thời điểm này, chúng tôi đã chọn một mẫu và chỉnh sửa một hoặc hai trang web, và đó là về nó. 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 ta đang quay lại giai đoạn THÊM POPUP MỚI của quy trình, nơi chúng ta có thể chỉ định tiêu đề và chọn một mẫu một lần nữa.

Sau đó, chúng tôi 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 ta có thể sử dụng Elementor để tìm nạp dữ liệu động từ 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 ta. 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 WooCommerce và chúng tôi muốn thông báo cho người dùng rằng có một khoản chiết khấu dành 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 và sau đó 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ừ trang web nói chung, thông tin phương tiện, thông tin tác giả và thậm chí cả Thông tin WooCommerce. Chúng tôi sẽ chọn một Tiêu đề sản phẩm và nó sẽ được thêm vào khối nội dung văn bản do chúng tôi lựa chọn.

Giả sử 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à một văn bản dự phòng (nếu chi tiết cơ sở dữ liệu không được truy xuất đúng cách).

Vì vậy, hãy nhân bản quá trình này cho nút, nút này sẽ hiển thị giá của sản phẩm. Chúng tôi có thể đặt cụm từ văn bản trước là MUA NGAY ĐỂ cung cấp cho chúng tôi 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 hình nền của chính cửa sổ bật lên.

Khi chúng tôi nhấn PUBLISH, chúng tôi sẽ được hiển thị 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 WooCommerce. Chúng tôi sẽ đặt bộ đếm thời gian 15 giây không hoạt động để làm trình kích hoạt. Cuối cùng thì đây là cách nó xảy ra:

Mặc dù thiết kế có thể được cải thiện, bạn có thể thấy rằng chúng tôi đang hiển thị tên sản phẩm, giá của sản phẩm 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!