Bạn có muốn tạo một nút nổi với chỉ mục Z trên không Elementor ?
Chúng tôi chắc rằng bạn đã quen với nút xuất hiện trước tất cả nội dung màn hình và thường có hình tròn và một biểu tượng ở trung tâm. Đó là nút hành động nổi.
Nút hành động nổi có thể kích hoạt một hành động hoặc đưa bạn đi đâu đó. Chẳng hạn như trình kích hoạt cho email, mạng xã hội, định hướng của khách để đăng ký một kênh và nhiều người khác.
trong Elementor, có hai phương pháp để tạo nút tác vụ nổi, chúng như sau:
- Bằng cách thiết lập Z-Index
- Bằng cách tạo một cửa sổ bật lên -Popup-
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một nút hành động nổi bằng cách thiết lập chỉ số Z. Và chúng tôi sẽ sử dụng phiên bản chuyên nghiệp để biến nó thành hiện thực.
Nhưng trước tiên, hãy tìm hiểu: Cách cài đặt Elementor trên WordPress
Cách tạo nút hành động nổi trong Elementor
Bạn có thể sử dụng phiên bản miễn phí củaElementor để tạo nút hành động nổi bằng phương pháp này. Tuy nhiên, bạn cần dán nút bạn đã thiết kế trên mỗi trang nơi bạn muốn nút hiển thị trên trang của mình. website.
với Elementor Pro, bạn cũng có thể truy cập tính năng CSS tùy chỉnh, mà chúng tôi sẽ sử dụng trong hướng dẫn này.
Chuyển đến trình soạn thảo Elementor của bạn; bạn có thể sửa đổi nội dung hiện có của mình (các trang, bài báo, v.v.) hoặc tạo một nội dung mới. Trong hướng dẫn này, chúng tôi sẽ sửa đổi một trang.
Đầu tiên, tạo một phần mới với một cột duy nhất. Chọn tiện ích Nút và kéo và thả nó vào vùng chỉnh sửa từ bảng widget. Sau đó, thay đổi nút Văn bản và liên kết.
Trong hướng dẫn này, chúng ta sẽ sử dụng nút này như một công cụ kích hoạt để nhấn nút khách để điều hướng Website Elementor. Sau đó, trên tùy chọn sự liên kết, đặt nó thành ngay et, Cuối cùng, thay đổi kích thước của nút Bật Rất lớn.
Như bạn có thể thấy trong GIF ở trên, nút này nằm yên trong phần. Tiếp theo, chúng ta sẽ làm cho nó di chuyển khi chúng ta cuộn trong khi vẫn giữ nó ở vị trí cũ.
Đi tới tab tiên tiến. Trong tham số Bố trí, đặt chiều rộng trên Nội tuyến (ô tô), xác định vị trí trên Cố định, đặt định hướng ngang trên ngay và điều chỉnh nó décalage như mong muốn.
Tiếp theo, chúng tôi sẽ xác định các yếu tố cần thiết trong phương pháp này. Trên đồng ruộng Z-Index, nhập số 9999 ; nó sẽ làm cho nút luôn ở phía trước (nổi).
Bây giờ là lúc để xoay nút hành động nổi. Luôn ở dưới tab tiên tiến, Truy cập lớp css từ khối Giao diện, sau đó viết rotate phía trong.
Xem thêm: Elementor: Giới thiệu Trình tạo trang WordPress tốt nhất
Sau đó đi đến khối Tùy chỉnh CSS , sau đó dán mã sau vào trường:
.rotate.rotate
{transform: rotate(90deg);}Bạn có thể thấy rằng núm vừa xoay, nhưng có một khoảng trống kỳ lạ giữa cạnh của màn hình. Vì vậy, hãy khắc phục nó bằng cách điều chỉnh décalage ở -92
Cuối cùng, chúng tôi sẽ thực hiện một lần chạm cuối cùng cho nút tác vụ nổi này. Truy cập khối Transformer, chọn nó TỔNG QUAT, truy cập tùy chọn Bù lại và đặt từng tùy chọn thành 7.
Có một số tùy chọn để đạt được một thứ nhất định trong Elementor. Khi nói đến nút nổi, có hai tùy chọn bạn có thể sử dụng. Ở đây chúng tôi chỉ đề cập đến một phương pháp, phương pháp còn lại sẽ là một hướng dẫn khác.
Đọc cũng: Elementor: Cách di chuyển một trang web WordPress
Nếu bạn muốn có nhiều tùy chọn tạo kiểu hơn, tạo nút hành động nổi bằng trình tạo của Cửa sổ bật lên sẽ là giải pháp thay thế tốt hơn vì bạn sẽ có các tùy chọn để tùy chỉnh nút cũng như hành vi, như thời gian đóng nút, thời lượng, hoạt ảnh nhập hoặc thoát, v.v. .
Bạn vừa hoàn thành nhiệm vụ này một cách dễ dàng. Chỉ cần xem trước hoạt động của máy tính bảng và điện thoại thông minh, cố gắng thay đổi lợi nhuận để phù hợp với từng thiết bị.
Tải xuống Elementor Pro ngay!
Kết luận
Cho nên ! Đó là vì bài viết này hướng dẫn bạn cách áp dụng hiệu ứng Thu phóng trên thẻ hồ sơ. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
