Việc chỉnh sửa CSS trên website của bạn chưa bao giờ là dễ dàng bởi vì nó yêu cầu hiểu biết về code. Tuy nhiên hiện nay nhiều công cụ ra đời giúp cho việc chỉnh sửa CSS trở nên dễ dàng hơn rất nhiều với plugin Css Editor.
Tôi là Tuấn Anh, tôi SEO leader đang phụ trách duyệt các bài viết và tối ưu SEO cho website của ABC Digi.
Tôi đã thử qua nhiều plugin hỗ trợ code, và trong bài viết này tôi sẽ giới thiệu plugin CSS Hero hỗ trợ bạn css editor website wordpress. Plugin CSS Hero này có giao diện thân thiện với người dùng, nên dù bạn là người mới chỉ cần biết code thì vẫn có thể tối ưu dễ dàng.
plugin CSS Hero là công cụ hỗ trợ tối ưu nội dung cho website wordpress. Vì vậy bạn cần có website mới có thể sử dụng.
[divi_library_shortcode id=”34977″]
CSS Hero là gì?
CSS Hero là trình chỉnh sửa theme WordPress trực tiếp, không cần code. CSS Hero là plugin WordPress hoàn hảo để dễ dàng tùy chỉnh giao diện website của bạn, với giao diện trỏ và nhấp chuột dễ dàng và trực quan. Nó sẽ cho phép bạn dễ dàng thay đổi màu sắc, phông chữ, hình nền, gần như bất kỳ thứ gì trên website của bạn.
Đặc điểm của CSS Hero
CSS Hero là một trình chỉnh sửa chủ đề WordPress trực tiếp hoạt động mà không sửa đổi bất kỳ tệp theme nào của bạn thuận tiện cho bạn, các chỉnh sửa của bạn cũng được lưu trữ dưới dạng dữ liệu trong cơ sở dữ liệu, trong một bảng cơ sở dữ liệu riêng biệt, thường là wp_csshero5.
Không tiêu tốn tài nguyên nào khác, không thêm tập lệnh nào khác, không có php, không có js, không bị tăng kích thước website của bạn.
Xem thêm: 10 Bước Tạo Tài Khoản Và Làm Website WordPress Miễn Phí
Tính năng của CSS Hero
1. Bộ chọn CSS & Chế độ nhắm mục tiêu
Bước đầu tiên khi làm việc với CSS Hero là chọn một phần tử trên khung vẽ mà bạn muốn nhắm mục tiêu. Trong CSS, điều này được gọi là ‘selector’.
Trong CSS, bạn có thể kết hợp một hoặc nhiều Bộ chọn CSS để nhắm mục tiêu các phần tử hoặc nhóm phần tử cụ thể.
CSS Hero giúp việc này trở nên dễ dàng, ngay cả khi bạn là Người mới sử dụng CSS.
Plugin bao gồm chế độ nhắm mục tiêu trực quan cho phép bạn trỏ và nhấp vào các phần tử ở mặt trước của website. Sau đó, bạn có thể chuyển sang chế độ xem ‘inspector’ được tích hợp sẵn, cho phép bạn tinh chỉnh nhắm mục tiêu của mình bằng cách xem HTML thô.
2. Tự động đề xuất bộ chọn
Nếu bộ chọn mặc định không phù hợp với bạn thì có một số cách khác:
- Bạn có thể sử dụng trình đơn thả xuống Selection Mode để giới hạn kiểu của mình ở ID trang hoặc lớp mẫu cụ thể.
- Bạn có thể sử dụng tính năng tự động đề xuất để xem các kết hợp bộ chọn khác nhau
Bạn truy cập có thể xem các bộ chọn thay thế bằng cách nhấp chuột phải vào phần tử trên khung vẽ, sau đó chọn Alternatives và cuộn qua danh sách đề xuất .
CSS Hero hoạt động rất tốt với tính năng tự động đề xuất nhưng nó không cung cấp nhiều kết hợp bộ chọn như bạn nhận được với Microthemer
Xem thêm: Hướng Dẫn Cài Đặt Và Sử Dụng Contact Form 7 Trên WordPress
3. Xem các phần tử được nhắm mục tiêu
Khi chỉnh sửa bộ chọn, bạn có thể thấy tất cả các thành phần trên trang áp dụng bộ chọn nhưng chỉ khi di chuột qua quy tắc bộ chọn hoặc nhấp vào nó. Điều này rất hữu ích để đảm bảo việc nhắm mục tiêu của bạn là chính xác.
Tôi rất vui vì tính năng này đã xuất hiện nhưng tôi thích cách triển khai của Microthemer hơn trong đó tất cả các thành phần đã chọn luôn được đánh dấu.
4. Thuộc tính CSS được hỗ trợ
CSS Hero hỗ trợ hơn 150 Thuộc tính CSS khác nhau, tất cả đều có thể truy cập dễ dàng từ bảng điều khiển bên cạnh khung vẽ của bạn.
Các thuộc tính này được sắp xếp theo danh mục để dễ tìm hơn.
Các danh mục bao gồm:
- Lý lịch
- kiểu chữ
- Biên giới
- Bán kính đường viền
- Khoảng cách
- chuyển đổi
- Bộ lọc
- Kiểu danh sách
- Trưng bàyTính năng bổ sung: bóng hộp, chuyển tiếp
- Số đo: các kích thước như width, max-width
- Vị trí: tuyệt đối, tương đối, cố định
Danh sách đầy đủ: Xem tất cả Thuộc tính CSS được hỗ trợ (CSS Hero)
Việc phân loại khá tốt nhưng có một số lựa chọn kỳ quặc. Ví dụ: tôi cảm thấy bán kính đường viền nên được giấu bên trong đường viền để đơn giản. Ngoài ra, việc ẩn quá trình chuyển đổi (rất phổ biến đối với hoạt ảnh di chuột) trong ‘Thêm’ không phải là tối ưu.
Tất nhiên, bạn sẽ nhanh chóng biết được nơi lưu giữ các thuộc tính thường dùng của mình, vì vậy đây không phải là vấn đề. Điều này đưa tôi đến tính năng yêu thích của tôi
5. Tìm kiếm thuộc tính CSS thời gian thực
Bạn có thể bắt đầu nhập tên thuộc tính và CSS Hero sẽ tự động tải cài đặt thuộc tính trực tiếp trong bảng thuộc tính của bạn. Tôi thích tính năng này và nó giúp tiết kiệm thời gian rất nhiều. Tuy nhiên, tôi có thể làm mà không cần có hoạt ảnh trượt bên cạnh, tuy nhiên, sau một thời gian, nó trông có vẻ cũ kỹ.
Xem thêm: 10 Bước Tạo Tài Khoản Và Làm Website WordPress Miễn Phí
6. Flexbox
Phiên bản mới nhất của CSS Hero bổ sung một tính năng rất cần thiết: Flexbox support.
Flexbox là một hệ thống bố cục cực kỳ tiện dụng giúp thiết kế và bố cục dựa trên cột/hàng đơn giản hơn nhiều trong CSS.
Nó cũng xử lý những việc như căn chỉnh các phần tử bên trong vùng chứa của chúng mà không cần tất cả các giải pháp thay thế thường được yêu cầu.
Cách sử dụng Flexbox
Cài đặt Flexbox nằm trong danh mục display trong bảng thuộc tính. Chỉ cần đặt phần tử của bạn thành display-flex và tất cả các phần tử con sẽ ngay lập tức trở thành các mục linh hoạt.
Sau đó, bạn có thể truy cập tất cả các cài đặt mục và mục gốc của flexbox thông thường dưới dạng:
- Nội dung biện minh
- Căn chỉnh các mục
- Flex-quấn
- Cơ sở linh hoạt
- Phát triển linh hoạt
- Co lại
Xem thêm: Hướng Dẫn Cài Đặt Và Sử Dụng Contact Form 7 Trên WordPress
7. Tính năng thiết kế bổ sung
Có một số tích hợp cung cấp chức năng bổ sung cho một số bộ chọn CSS được hỗ trợ.
Bao gồm các:
- Tích hợp Unsplash: tự động kéo hình nền từ unplash
- Hình nền video: Thư viện hình nền video miễn phí qua Coverr.co
- Hoạt ảnh cuộn: hoạt ảnh dựng sẵn bằng thư viện hoạt ảnh CSS nguồn mở
- Người kiểm tra: kiểm tra trực quan mã HTML và CSS của website của bạn
- Đoạn mã CSS: Sử dụng đoạn mã dựng sẵn hoặc cuộn đoạn mã của riêng bạn để tạo kiểu cho các phần tử được sử dụng thường xuyên (ví dụ: các nút)
- Trình tạo bảng màu: Trình tạo bảng màu tích hợp giúp tiết kiệm thời gian và phỏng đoán
8. CSS Variables( Biến CSS)
Biến CSS là một tính năng tuyệt vời của CSS3 và một khi bạn bắt đầu sử dụng chúng, bạn sẽ không bao giờ quay lại. Biến cho phép bạn xác định một thuộc tính một lần và lưu trữ nó trong một biến có thể được sử dụng lại giữa các phần tử, chỉ bằng cách tham chiếu biến đó.
Thậm chí tốt hơn, các biến có tính kế thừa phạm vi cho phép bạn ghi đè các biến trên các phần tử hoặc vùng chứa cụ thể mà không ảnh hưởng đến các phần tử khác.
CSS Hero hỗ trợ các biến ngay lập tức. Bạn có thể dễ dàng xác định và truy cập các biến từ bất kỳ phần tử hoặc thuộc tính nào. Giao diện người dùng cho tính năng này rất tuyệt vời, được tích hợp ngay trong đầu vào cài đặt cho từng thuộc tính.
Về mặt kỹ thuật, các biến bạn tạo trong CSS Hero là biến LESS, không phải biến CSS nhưng chúng có thể hoạt động giống nhau. Nó cũng sẽ tự động lấy bất kỳ biến CSS nào trong bảng định kiểu website của bạn.
9. Unsplash
Duyệt và tìm kiếm thư viện hình ảnh miễn phí unsplash trực tiếp từ giao diện CSS Hero. Bạn có thể sử dụng những hình ảnh này làm nền hoặc lớp phủ và CSS Hero sẽ tự động thêm nó vào Thư viện phương tiện của bạn.
10. Scroll Animations
CSS Hero được cài đặt sẵn một thư viện đầy đủ các ảnh động truy cập CSS (hiệu ứng cuộn). Hiệu ứng này có thể được áp dụng cho bất kỳ phần tử nào (và kích thước màn hình cụ thể) và sẽ kích hoạt khi phần tử đó đi vào khung nhìn.
Có một số phong cách hoạt hình khác nhau bao gồm: trượt, thu phóng, mờ dần và nảy.
Bạn cũng có thể tùy chỉnh độ trễ, thời lượng và lặp lại cho từng hoạt ảnh.
Xem thêm: 17 Tiêu Chí Quan Trọng Khi Lựa Chọn Hosting
11. Đoạn code CSS
Bạn có bao giờ thấy mình sử dụng đi sử dụng lại cùng một loại đoạn code CSS hoặc thiết kế không? Điều này xảy ra thường xuyên với tôi khi thiết kế các nút hoặc hộp chú thích.
CSS Hero bao gồm hàng tá đoạn code được tạo sẵn, là những khối code nhỏ có thể tái sử dụng cho các nút và các thành phần phổ biến khác.
Bạn cũng có thể xác định các đoạn code của riêng mình hoặc sao chép chúng từ các website lấy cảm hứng từ CSS như Free Frontend.
Điều này hữu ích cho bất kỳ nhóm thuộc tính nào mà bạn thường áp dụng cho các phần tử cùng nhau. Ví dụ: nếu bạn sử dụng lại cùng các cài đặt border, border-radius và box-shadow trên nhiều thành phần hoặc vùng chứa.
Chỉ cần lưu các thuộc tính đó dưới dạng đoạn code và áp dụng lại chúng ở nơi khác chỉ bằng một cú nhấp chuột.
12. Phông chữ của Google
Ngoài các phông chữ an toàn trên web, CSS Hero còn cho phép bạn truy cập vào thư viện Google Fonts hoàn chỉnh ngay từ phần Typography của bảng thuộc tính.
13. Trình tạo bảng màu
Bạn gặp khó khăn trong việc lựa chọn màu sắc phối hợp khi thiết kế? Bạn có dành những phút (hoặc giờ) quý giá để chọn màu trên các công cụ tạo màu như coolors.co không?
CSS Hero có một trình tạo bảng màu tích hợp sẽ tự động đề xuất các màu phối hợp cho bảng màu hiện tại của bạn.
Xem thêm: Yoast SEO Plugin – Cách Đọc Chỉ Số Của Một Trong Những Plugin Hỗ Trợ SEO Cho WordPress
14. Media Queries & Mobile Design
CSS Hero giúp dễ dàng xây dựng bố cục thân thiện với thiết bị di động. Bạn có thể xem trước canvas tại một số điểm dừng được đặt trước (máy tính để bàn, máy tính bảng, thiết bị di động nằm ngang, thiết bị di động) hoặc xác định điểm dừng tùy chỉnh của riêng bạn.
14.1. Điểm dừng tích hợp(Built-in Breakpoints)
Khi xem một điểm dừng cụ thể, tất cả các quy tắc mới trong chế độ xem đó sẽ được gói trong truy vấn phương tiện chỉ áp dụng cho kích thước màn hình đó.
Ngoài ra còn có một chỉ báo để hiển thị điểm dừng nào có quy tắc được đặt cho phần tử đó, điều này khá tiện dụng.
14.2. Điểm dừng tùy chỉnh
Bạn cũng có thể tạo các điểm dừng tùy chỉnh của riêng mình bằng cách sử dụng độ rộng pixel tối thiểu/tối đa. Sau đó, chúng sẽ được lưu dưới dạng truy vấn phương tiện chung cho dự án của bạn.
Xác định điểm dừng của riêng bạn trong dự án > cài đặt truy vấn phương tiện
15. Mã QR xem trước trên thiết bị di động
Quét mã QR để xem trước thiết kế của bạn trên điện thoại thông minh
Một trong những tính năng độc đáo yêu thích của tôi về CSS hero là bản xem trước trên thiết bị di động. CSS Hero tạo mã QR mà bạn có thể quét bằng điện thoại thông minh của mình và xem bản xem trước trực tiếp canvas trên điện thoại thông minh, thay vì chỉ sử dụng chế độ xem mô phỏng trên màn hình của bạn.
Xem thêm: Hướng Dẫn Cài Đặt Plugin Akismet – Công Cụ Chống Spam Hàng Đầu Trên WordPress
16. Lịch sử Phiên bản & Khôi phục
Tất cả các chỉnh sửa CSS và thay đổi thuộc tính được thực hiện trong CSS Hero đều được lưu trong ngăn lịch sử phiên bản. Bạn có thể dễ dàng hoàn tác/làm lại bất kỳ chỉnh sửa nào hoặc duyệt đến các phiên bản trước bằng cách nhấp vào nút Lịch sử ở thanh công cụ trên cùng.
Từ đó bạn có thể xem toàn bộ lịch sử thay đổi. Nhấp vào phiên bản trước sẽ hoàn nguyên khung vẽ về phiên bản đó (và khôi phục tất cả các thay đổi sau này).
Bạn cũng có thể thấy quy tắc kiểu chính xác được thay đổi cho từng phiên bản cụ thể. Theo mặc định, ngăn lịch sử chỉ hiển thị ngày và giờ chỉnh sửa.
Tôi rất thích cách triển khai của Microthemer trong đó tên và giá trị thuộc tính thực tế được hiển thị trong trình duyệt lịch sử. Điều đó nói lên rằng, tính năng khôi phục hoạt động hoàn hảo.
Ai nên sử dụng CSS Hero?
CSS Hero rất phù hợp nếu bạn thuộc bất kỳ danh mục nào sau đây:
- Hiểu CSS nhưng gặp khó khăn trong việc nhớ tên thuộc tính hoặc cú pháp
- Muốn học CSS và đấu tranh với mọi thứ (đặc biệt là bộ chọn và nhắm mục tiêu)
- Có kinh nghiệm với CSS nhưng muốn tăng tốc quy trình làm việc của bạn
- Có thể viết CSS trôi chảy nhưng thích thiết kế trực quan hơn
Nói cách khác, CSS Hero (và các trình soạn thảo CSS trực quan nói chung) hoàn hảo cho hầu hết mọi người muốn cải thiện thiết kế trang web của mình bằng CSS.
Giá plugin CSS Hero
CSS Hero có nhiều gói với các mức giá khác nhau để bạn thoải mái lựa chọn.
Xrem thêm: 04 Bước Và 11 Nguyên Tắc Tăng Tốc Độ & Hiệu Suất Website WordPress
0 Lời bình