Cách thêm kiểu tùy chỉnh vào widget WordPress

Hầu hết các tiện ích thanh bên WordPress thường trông giống nhau. Sẽ thật tuyệt nếu tất cả các vật dụng của bạn có tầm quan trọng như nhau, nhưng sự thật là một số quan trọng đối với sự phát triển của trang web của bạn hơn những thứ khác. Ví dụ, tiện ích đăng ký danh sách email chắc chắn quan trọng hơn tiện ích tệp. Sẽ không tốt sao nếu bạn có thể dễ dàng thiết kế các vật dụng quan trọng khác nhau? Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm kiểu tùy chỉnh vào widget WordPress.

Sử dụng plugin để thêm kiểu tùy chỉnh vào widget WordPress

Điều đầu tiên bạn nên làm là cài đặt và kích hoạt plugin CSS Classes Widget. Khi kích hoạt, chỉ cần đi đến Ngoại hình »Widgets và nhấp vào bất kỳ widget nào trong một thanh bên để mở rộng.

Thêm một lớp CSS để thêm các kiểu tùy chỉnh vào một tiện ích WordPress

Bạn sẽ nhận thấy một cái mới Lớp CSS bên dưới các widget của bạn, vì vậy bạn có thể dễ dàng xác định một lớp CSS cho mỗi widget. Ví dụ: chúng tôi đã thêm lớp đăng ký vào tiện ích biểu mẫu đăng ký.

Bây giờ bạn có thể đi đến trang mẫu của chủ đề của bạn và thêm quy tắc phong cách của bạn ở đó. Tôi thích điều này:

.subscribe { 
background-color: #858585;
color:#FFF;
}

Thêm kiểu tùy chỉnh vào widget WordPress

Bạn có thể thêm bất kỳ CSS tùy chỉnh nào bạn thích, như thêm nền, thay đổi đường viền, sử dụng các màu khác nhau, v.v.

Thêm thủ công các kiểu tùy chỉnh vào các widget WordPress

Nếu bạn không muốn sử dụng plugin, bạn có thể tự thêm các kiểu tùy chỉnh vào các tiện ích WordPress của mình. Theo mặc định, WordPress thêm các lớp CSS vào các yếu tố khác nhau, bao gồm các widget.

Mỗi widget trong thanh bên của nó có một lớp widget được đánh số. Là phụ tùng-1phụ tùng2phụ tùng3, Vân vân. Với công cụ Google Chrome Inspect Element, bạn có thể tìm thấy lớp CSS cho tiện ích bạn muốn tùy chỉnh.

Tìm lớp tiện ích với công cụ kiểm tra mục của Chrome

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, tiện ích mà chúng tôi muốn tùy chỉnh có lớp tiện ích con-2 được thêm bởi WordPress. Bây giờ hãy chuyển đến biểu định kiểu của chủ đề của bạn và thêm quy tắc kiểu tùy chỉnh của bạn.

.widget-2 { 
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title { 
font-weight:bold;
}

Đó là nó, chúng tôi hy vọng bài viết này đã giúp bạn thêm các kiểu tùy chỉnh vào các widget WordPress. Chơi xung quanh với CSS và thử nghiệm với các màu sắc khác nhau. Sử dụng thử nghiệm phân tách A / B để xác định kiểu tùy chỉnh nào hoạt động tốt nhất cho trang web của bạn.

Ngoài ra, nếu bạn muốn một cách dễ dàng hơn để làm nổi bật tiện ích biểu mẫu đăng ký từ thanh bên, hãy dùng thử OptinMonster vì nó cung cấp nhiều bố cục, thử nghiệm A / B và nhiều hơn nữa.

Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter và Google+.