Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Cách sử dụng tiện ích đăng nhập
1. Các tiện ích Widgets trong Elementor
Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.
Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:
- Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
- Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
- Advanced (Nâng cao): Các tùy chọn nâng cao như:
- Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
- Z-index: Thứ tự hiển thị của các lớp phần tử.
- CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
- Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
- Background: Màu nền, hình ảnh nền, gradient.
- Border: Đường viền.
- Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
- Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
- Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.
2. Cách sử dụng tiện ích đăng nhập
Tiện ích Đăng nhập (Login) trong Elementor là một công cụ tiện lợi để tạo các biểu mẫu đăng nhập tùy chỉnh trên trang web WordPress của bạn. Điều này đặc biệt hữu ích nếu bạn muốn thiết kế trang đăng nhập của riêng mình, thay vì sử dụng trang mặc định của WordPress, hoặc nếu bạn có các khu vực thành viên cần đăng nhập.
3. Các bước sử dụng tiện ích đăng nhập
I. Nội dung (Content)
Đây là nơi bạn thiết lập nhãn trường, kích thước đầu vào, nút đăng nhập và các tùy chọn bổ sung.
A. Form Fields (Các trường biểu mẫu)
- Label (Nhãn): Gạt nút sang phải để hiển thị nhãn cho các trường nhập liệu (ví dụ: “Username or Email Address”, “Password”).
- Kích thước đầu vào (Input Size): Điều chỉnh chiều cao của các trường nhập liệu (ví dụ: Nhỏ, Mặc định, Lớn).
B. Buttons (Các nút)
- Size (Kích thước): Điều chỉnh kích thước của nút “LOG IN”.
- Alignment (Căn chỉnh): Căn chỉnh nút đăng nhập (Trái, Giữa, Phải, Justified).
- Text (Văn bản): Nhập văn bản hiển thị trên nút đăng nhập (mặc định là “LOG IN”).
- Icon (Biểu tượng): Bạn có thể thêm một biểu tượng vào nút đăng nhập.
- Icon Position (Vị trí biểu tượng): Đặt vị trí của biểu tượng (Trước văn bản, Sau văn bản).
- Icon Spacing (Khoảng cách biểu tượng): Khoảng cách giữa biểu tượng và văn bản.
C. Tùy chọn bổ sung (Additional Options)
- Redirect After Login (Chuyển hướng sau đăng nhập): Gạt nút sang phải và nhập URL mà người dùng sẽ được chuyển hướng đến sau khi đăng nhập thành công.
- Redirect After Logout (Chuyển hướng sau đăng xuất): Gạt nút sang phải và nhập URL mà người dùng sẽ được chuyển hướng đến sau khi đăng xuất.
- Lost your password? (Quên mật khẩu của bạn?): Gạt nút sang phải để hiển thị liên kết “Lost your password?”.
- Register (Đăng ký): Gạt nút sang phải để hiển thị liên kết đăng ký tài khoản mới (chỉ hoạt động nếu đăng ký người dùng được bật trong cài đặt WordPress của bạn).
- Custom Labels (Nhãn tùy chỉnh): Cho phép bạn thay đổi các nhãn mặc định như “Username or Email Address”, “Password”, “Remember Me”, “Log In”, “Lost your password?”, “Register”.
- Logged in Message (Thông báo đã đăng nhập): Nhập thông báo hiển thị cho người dùng đã đăng nhập (thay vì biểu mẫu đăng nhập). Bạn có thể sử dụng shortcode [user_name] để hiển thị tên người dùng.
II. Kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của biểu mẫu đăng nhập.
A. Form (Biểu mẫu)
- Columns Gap (Khoảng cách cột): Điều chỉnh khoảng cách giữa các cột (nếu có các trường nằm cạnh nhau).
- Rows Gap (Khoảng cách hàng): Điều chỉnh khoảng cách giữa các hàng trường biểu mẫu.
Label (Nhãn):
- Color (Màu sắc): Màu chữ cho nhãn trường.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nhãn.
Field (Trường):
- Text Color (Màu văn bản): Màu chữ nhập liệu.
- Background Color (Màu nền): Màu nền của các trường nhập liệu.
- Border Color (Màu đường viền): Màu đường viền của trường.
- Border Width (Độ dày đường viền): Độ dày của đường viền.
- Border Radius (Bán kính bo tròn): Bo tròn góc của trường.
- Padding (Khoảng đệm): Khoảng đệm bên trong trường.
B. Button (Nút)
- Text Color (Màu văn bản): Màu chữ của nút “LOG IN”.
- Background Color (Màu nền): Màu nền của nút.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nút.
- Border Type (Loại đường viền): Thêm đường viền cho nút.
- Border Width (Độ dày đường viền): Độ dày của đường viền nút.
- Border Radius (Bán kính bo tròn): Bo tròn góc của nút.
- Padding (Khoảng đệm): Khoảng đệm bên trong nút.
C. Lost Password / Register (Quên mật khẩu / Đăng ký)
- Color (Màu sắc): Màu chữ cho các liên kết “Lost your password?” và “Register”.
- Hover Color (Màu khi di chuột qua): Màu chữ khi di chuột qua các liên kết.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho các liên kết.
III. Nâng cao (Advanced)
Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Đăng nhập.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Đăng nhập với các phần tử khác xung quanh.
- Padding (Khoảng đệm): Khoảng cách bên trong tiện ích.
- Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Đăng nhập.
- Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
- Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
- CSS ID & CSS Classes:
- Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.
- Hiệu ứng chuyển động (Motion Effects):
- Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Đăng nhập khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
- Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
- Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.
- Nền (Background):
- Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Đăng nhập.
- Đường viền (Border):
- Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.
- Mặt nạ (Mask):
- Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.
- Khả năng đáp ứng (Responsive):
- Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Đăng nhập trên các loại thiết bị khác nhau nếu cần.
- Thuộc tính (Attributes):
- Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.
- CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):
- Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.
