Bạn có muốn tùy chỉnh giao diện của các biểu mẫu WordPress của mình không?
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm các lớp CSS tùy chỉnh để tạo kiểu cho các phần tử biểu mẫu cụ thể, cũng như cách thêm bất kỳ CSS tùy chỉnh nào vào trang web WordPress của bạn
- Lớp CSS là gì?
- Thêm các lớp CSS tùy chỉnh trong WPForms
- Thêm các lớp CSS vào các trường biểu mẫu riêng lẻ
- Thêm các lớp CSS vào Bộ chứa biểu mẫu hoặc Nút gửi
- Tạo và thêm các kiểu CSS cho trang web của bạn
- Tạo kiểu CSS
- Thêm CSS vào trang web WordPress của bạn
Ghi chú. Nếu bạn chưa quen với CSS, thì hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách tạo kiểu cho biểu mẫu bằng CSS là nơi tốt nhất để bắt đầu
Lớp CSS là gì?
Các lớp CSS là một cách nhắm mục tiêu các phần tử mà bạn muốn tạo kiểu trên trang web của mình
Trong WPForms, các trường được tự động gán một số lớp CSS. Chẳng hạn, nếu một trường được đặt thành Kích thước trường lớn, thì nó sẽ được gán lớp CSS wpforms-field-large
Bằng cách thêm một lớp CSS tùy chỉnh, bạn có thể dễ dàng nhắm mục tiêu một trường biểu mẫu cụ thể hoặc áp dụng cùng một kiểu cho nhiều trường
Thêm các lớp CSS tùy chỉnh trong WPForms
Trong WPForms, bạn có thể thêm các lớp CSS tùy chỉnh của riêng mình vào các trường biểu mẫu riêng lẻ, nút gửi hoặc vùng chứa xung quanh biểu mẫu của bạn
Thêm các lớp CSS vào các trường biểu mẫu riêng lẻ
Để thêm lớp CSS tùy chỉnh vào trường biểu mẫu, bạn cần tạo biểu mẫu mới hoặc chỉnh sửa biểu mẫu hiện có
Trong bảng xem trước của trình tạo biểu mẫu, nhấp vào trường để mở Tùy chọn trường của nó. Sau đó, mở tab Nâng cao và tìm trường có nhãn Lớp CSS
Khi đặt tên cho một lớp CSS, bạn chỉ có thể sử dụng các chữ cái hoặc số và không được phép có khoảng trắng. Tên lớp phân biệt chữ hoa chữ thường, vì vậy bạn nên sử dụng chữ thường. Nếu bạn muốn tên lớp chứa nhiều hơn một từ, hãy bao gồm dấu gạch nối [-] hoặc dấu gạch dưới [_] thay vì khoảng trắng
Để tránh gặp phải bất kỳ sự cố nào, hãy luôn bắt đầu tên lớp của bạn bằng một chữ cái
Đối với ví dụ này, chúng tôi sẽ đặt tên cho lớp CSS của chúng tôi là wpf-blue-background
Bằng cách thêm wpf- vào đầu các lớp học của chúng tôi, chúng tôi ít có khả năng thêm tên lớp đã được sử dụng bởi chủ đề trang web của chúng tôi. Điều này sẽ giúp tránh xung đột về kiểu và giúp các kiểu của chúng ta có nhiều khả năng được áp dụng thành công hơn
Khi bạn đã sẵn sàng, hãy thêm lớp CSS wpf-blue-background vào trường Lớp CSS
Nếu muốn, bạn cũng có thể thêm các lớp bổ sung vào trường này. Để làm điều đó, chỉ cần thêm một dấu cách giữa mỗi tên lớp. Ví dụ
wpf-blue-background wpf-bold-font wpf-xl-margin
Ghi chú. Trường Lớp CSS cũng có thể được sử dụng để hiển thị các trường biểu mẫu trong bố cục nhiều cột và dưới dạng bố cục một cột trên thiết bị di động
Thêm các lớp CSS vào Bộ chứa biểu mẫu hoặc Nút gửi
Đối với một số kiểu, có thể hữu ích khi nhắm mục tiêu vùng chứa của biểu mẫu hoặc nút gửi của biểu mẫu
Ví dụ: bạn có thể muốn các nút gửi cho tất cả các biểu mẫu đăng ký trên trang web của mình được tạo kiểu theo một cách và các nút gửi trong bất kỳ biểu mẫu liên hệ chung nào được tạo kiểu theo một cách khác. Một cách dễ dàng để thực hiện điều này là thêm cùng một lớp CSS vào bất kỳ nút gửi nào mà bạn muốn được tạo kiểu theo cùng một cách
Để thêm tên lớp CSS tùy chỉnh cho một trong hai tùy chọn, hãy mở trình tạo biểu mẫu và đi tới Cài đặt »Chung. Từ đây, đi tới phần Nâng cao và bạn sẽ có thể thấy các trường dành cho Lớp CSS biểu mẫu và Lớp CSS nút gửi
Nếu bạn muốn thêm nhiều tên lớp, chỉ cần tách từng tên bằng dấu cách
Ghi chú. Nếu muốn, bạn có thể sử dụng lớp CSS biểu mẫu tích hợp sẵn để hiển thị biểu mẫu của mình trên một dòng
Tạo và thêm các kiểu CSS cho trang web của bạn
Bây giờ bạn đã thêm một lớp CSS tùy chỉnh vào một trường trong biểu mẫu của mình, bạn có thể tạo các kiểu bạn muốn áp dụng
Tạo kiểu CSS
CSS là một công cụ mạnh mẽ với nhiều tùy chọn kiểu dáng có sẵn. Để biết hướng dẫn về cách bắt đầu tạo CSS, vui lòng xem Hướng dẫn CSS cho người mới bắt đầu của chúng tôi
Ví dụ của chúng tôi, chúng tôi chỉ cần thêm nền màu xanh lam vào bất kỳ trường nào với lớp wpf-blue-background. Khi nhắm mục tiêu tên lớp trong CSS, tên đó phải luôn bắt đầu bằng dấu chấm [. ], ví dụ .wpf-blue-background
Vì nhiều kiểu đã được áp dụng cho biểu mẫu của bạn, bạn cũng nên làm cho CSS của mình cụ thể hơn. Để làm điều đó, chỉ cần thêm .wpforms-form trước tên lớp tùy chỉnh của bạn
Đây là CSS ví dụ của chúng tôi
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
Nếu kiểu tùy chỉnh của bạn không được áp dụng thành công, bạn có thể bao gồm. quan trọng trước dấu chấm phẩy
Ghi chú. sử dụng. quan trọng là chỉ cần thiết nếu phong cách của bạn không được áp dụng khác. Hướng dẫn của chúng tôi về khắc phục sự cố CSS chứa nhiều chi tiết hơn
Thêm CSS vào trang web WordPress của bạn
Một cách nhanh chóng và dễ dàng để thêm CSS tùy chỉnh vào trang web của bạn là sử dụng Trình tùy chỉnh chủ đề WordPress. Đây là một tùy chọn phổ biến vì nó có sẵn trong hầu hết các chủ đề và có khu vực xem trước trực tiếp
Nếu bạn muốn xem các phương pháp bổ sung, vui lòng xem hướng dẫn của WPBeginner về cách thêm CSS tùy chỉnh vào WordPress
Để truy cập khu vực CSS của Công cụ tùy chỉnh chủ đề, hãy chuyển đến Giao diện » Tùy chỉnh rồi chọn tab có nhãn CSS bổ sung
Tiếp theo, hãy tiếp tục và thêm đoạn mã CSS tùy chỉnh của bạn. Khi bạn đã sẵn sàng, hãy nhấp vào Xuất bản
Đây là cách biểu mẫu ví dụ của chúng ta hiện có với lớp CSS và các kiểu CSS được áp dụng
Ghi chú. Các kiểu tùy chỉnh của bạn không hiển thị?
Đó là nó. Giờ đây, bạn có thể thêm các lớp CSS tùy chỉnh để tạo kiểu cho các khu vực cụ thể trong biểu mẫu của mình
Bạn có muốn xem và sửa đổi các kiểu biểu mẫu tích hợp sẵn của chúng tôi không?