Tùy chỉnh giao diện chưa bao giờ đơn giản đến thế

Sau một thời gian support trên TheDevKit một trong những vấn đề mình được hỏi nhiều nhất đó làm thể nào để chỉnh sửa giao diện, thường câu trả lời của mình là “Bạn có thể sử dụng CSS” hoặc sử dụng CSS Hero plugin.

Plugin này phù với những người “không biết code” “không biết CSS“, vậy làm thế nào để bạn có thể chỉnh sửa giao diện mà không cần sử dụng CSS hay code. Hôm nay Diều Hâu sẽ giới thiệu đến bạn một plugin giúp bạn tùy chỉnh giao diện mà không cần thành thạo CSS hay code đó là CSS Hero.

Mua Ngay CSS Hero License LifeTime chỉ với 250k

Review CSS Hero

CSS Hero là một plugin WordPress cao cấp cho phép chúng ta thiết kế giao diện WordPress của riêng mình mà không cần đụng vào bất kỳ dòng code nào (Không yêu cầu HTML hay CSS).

Người sử dụng hoàn toàn có khả năng quay lại các thay đổi, việc này sẽ rất hữu ích cho những người mới. Tất cả các thay đổi sẽ được lưu dưới dạng stylesheet, có nghĩa là bạn dễ dàng tùy chỉnh giao diện WordPress mà không lo tới việc rằng mình làm sai hay đơn giản rằng bạn chỉ đang muốn thử.

Điều này tương tự nút Ctrl+Z kì diệu vậy bạn có thể back lại bất cứ lúc nào.

Kể cả bạn là một web Desinger hoặc Developer, các bạn sẽ thấy CSS Hero thực sự rất tuyệt vời. Plugin hoạt động tốt với tất cả framework WordPress và các giao diện nổi tiếng nhất.

Chúng ta cũng dễ dàng thực hiện các thay đổi trên child theme, sau đó đưa giao diện này lên để sử dụng trên website của khách hàng.

CSS Hero sẽ giúp các bạn tiết kiệm rất nhiều thời gian và công sức khi thực hiện tuỳ chỉnh cho website WordPress.

Thông thường, mình khá nghi ngờ về kiểu tùy chỉnh point-and-click (chỉ cần click vào là tùy chỉnh được). Đa phần vì mấy kiểu này sẽ làm website bạn nặng và chậm hơn.

Tuy nhiên, CSS Hero thực sự làm mình ấn tượng ngay trong lần sử dụng đầu tiên.

Nếu các bạn yêu cầu mình đánh giá CSS Hero một cách trung thực, mình sẽ cho plugin này 5/5 sao.

Cách sử dụng CSS Hero để truỳ chỉnh thiết kế giao diện WordPress

Trước tiên, bạn cần cài đặt và kích hoạt plugin CSS Hero. Nếu đây là lần đầu tiền bạn cài plugin, hãy xem hướng dẫn chi tiết của mình về cách cài đặt plugin WordPress.

CSS Hero là một plugin WordPress cao cấp với mức giá cho gói thấp nhất là $29/năm/1 site (nói chung là cũng hợp lý với những gì nó mang lại cho bạn).

Nhưng đối với một số bạn mới học sử dụng WordPress hoặc chưa đủ điều kiện để mua chính thức từ nhà sản xuất.

Bạn có thể mua tại TheDevKit đang cung cấp CSS Hero Lifetime Pro chỉ với 250k (đang giảm giá 30%)

Lưu ý: là với plugin này bạn chỉ được sử dụng trên 1 domain duy nhất và được cập nhật suốt đời luôn).

Sau khi cài đặt và kích hoạt, nó sẽ yêu cầu bạn login vào tài khoản đã mua hàng từ nhà sản xuất. Bạn chỉ cần login và quay lại Dashboard và tiến hành sử dụng là được.

css-hero-login

Mục tiêu của CSS Hero là cung cấp giao diện WYSIWG (mọi thứ bạn thấy đều có thể chỉnh sửa được) để dễ dàng tùy chỉnh giao diện. Đơn giản chỉ cần đăng nhập vào Dashboard và bạn sẽ thấy nút “Customize with CSS Hero” trên thanh admin WordPress.

cach-dung-css-hero

Nhấp vào nút này sẽ sang kiểu live preview mà bạn hay thấy ở các plugin page builder. Bây giờ các bạn sẽ thấy thanh công cụ CSS Hero.

giao-dien-css-hero

Tiếp theo, chỉ cần nhấn vào bất kỳ chỗ nào bạn muốn chỉnh sửa trên website và CSS Hero sẽ hiển thị cho chúng ta các thuộc tính CSS cụ thể cho thành phần đó.

Ví dụ ở đây mình sẽ chỉnh sửa chữ “Diều Hâu

cac-thuoc-tinh-css-trong-css-hero

Ở đây sẽ bao gồm các thuộc tính CSS thường dùng nhất như background, typography, border, spacing,..v.. Các bạn cũng dễ dàng nhấn vào bất kỳ mục nào để mở rộng mục và sau đấy chỉnh sửa các thuộc tính CSS với một giao diện hết sức trực quan.

chinh-sua-background-trong-css-hero

Khi thực hiện các thay đổi, bạn sẽ thấy các đoạn css được hiện ở bên dưới. Nếu như đang học CSS bạn sẽ thấy chức năng này thực sự tuyệt vời, nó giúp bạn thấy được cách hoạt động của từng thuộc tính để hiểu rõ hơn.

chuc-nang-preview-trong-css-hero

Gặp khó khăn trong việc tìm kiếm hình ảnh bản quyền miễn phí cho website của mình? CSS Hero đi kèm với Build-in Unplash được tích hợp sẵn cho phép các bạn sử dụng, tìm kiếm và sử dụng những bức ảnh tuyệt vời cho website.

Kho-thu-vien-anh-trong-css-hero

Unplash là một cộng đồng nhiếp ảnh chia sẻ những hình ảnh chất lượng cao, bất kỳ ai cũng có thể sử dụng mà không lo vấn đề bản quyền.

CSS Hero cũng đi kèm với các snippet được tạo sẵn mà chúng ta dễ dàng áp dụng cho các thành phần trang khác nhau trên website. Chỉ cần chuyển sang tab Snippets ở bên phải.

Nó giống kiểu các template có sẵn trong page builder bạn chỉ cần chọn lưu lại.

css-hero-snippets

Khi tạo ra các thay đổi cho website, CSS Hero sẽ tự động lưu những thay đổi này nhưng sẽ không xuất bản chúng. Để áp dụng những thay đổi này trực tiếp cho website của mình, các bạn sẽ

cần nhấn vào nút Save and Publish.

Cách Undo các thay đổi trên CSS Hero

Một trong những tính năng hữu ích nhất của CSS Hero là khả năng undo các thay đổi mà chúng ta đã thực hiện. CSS Hero sẽ lưu giữ lịch sử của những thay đổi được thực hiện trên giao diện. Chỉ cần nhấp vào nút history trên thanh công cụ CSS Hero để xem danh sách các thay đổi.

csshero-history

Giống như chức năng revision trong WordPress vậy, nếu bạn chưa hiểu rõ về tính năng này có thể đọc bài disable Post Revision để tối ưu cơ sở dữ liệu.

Các bạn hãy nhấn vào date and time để xem hiện tại website của mình hiển thị như thế nào. Nếu muốn trở lại trạng thái trước đấy, chỉ cần lưu lại hoặc tiếp tục chỉnh sửa từ thời điểm này.

Thao tác này không có nghĩa là những thay đổi bạn thực hiện sau thời điểm đó sẽ biến mất. Chúng vẫn sẽ được lưu trữ và bạn cũng dễ dàng quay lại để sử đổi. Rất đơn giản phải không!

Nhưng nếu các bạn chỉ muốn undo các thay đổi đã thực hiện cho một mục cụ thể thì sao?

Trong trường hợp này, chúng ta không cần sử dụng công cụ history. Chỉ cần nhấn vào thành phần trang mà bạn muốn hoàn tác, sau đấy nhấn vào nút reset.

csshero-reset-property

Thao tác này sẽ thay đổi item trở lại cài đặt mặc định ban đầu của giao diện WordPress.

Tuỳ chỉnh giao diện website trên thiết bị di động trong CSS Hero

Việc khó khăn nhất của website desinger là khả năng tương thích của các thiết bị. Bạn sẽ cần đảm bảo rằng website hiển thị tốt trên các kích thước màn hình khác nhau. Các website designer sử dụng nhiều công cụ để kiểm tra khả năng tương thích của trình duyệt và thiết bị. Rất hay là CSS Hero cũng đi kèm với một công cụ xem trước trên thiết bị di động.

csshero-live-preview-tren-cac-thiet-bi-mobile

Chỉ cần nhấn vào biểu tượng desktop trong thanh công cụ và sau đấy nhấp vào loại thiết bị. Chúng ta dễ dàng chọn thiết bị di động, máy tính bảng hay máy tính để bàn. Khu vực xem trước sẽ thay đổi thành thiết bị đã lựa chọn.

Bây giờ bạn sẽ dễ dàng chỉnh sửa website trong khi xem trước cho các thiết bị di động. Công cụ này vô cùng hữu ích để tùy chỉnh giao diện cho các thiết bị di động và máy tính bảng.

Khả năng tương thích giao diện của CSS Hero

Website chính thức của CSS Hero có một danh sách rất nhiều các giao diện tương thích. Danh sách này bao gồm các giao diện WordPress miễn phí tốt nhất. Danh sách cũng có các giao diện cao cấp phổ biến nhất như CSSIgniter, Themify, StudioPress, v…v. Xem thêm tại đây.

Thế còn những giao diện không có trong danh sách giao diện tương thích?

CSS Hero đi kèm với một tính năng gọi là Rocket Mode Auto-detection. Nếu như đang sử dụng một giao diện không có trong danh sách tương thích, CSS Hero sẽ tự động bắt đầu sử dụng chế độ rocket.

Chế độ này sẽ cố gắng tự đoán các đoạn CSS từ giao diện của các bạn. Thường thì chức năng này hoạt động rất tốt. Nếu giao diện của các bạn được code tuân theo các tiêu chuẩn WordPress, thì chúng ta sẽ dễ dàng chỉnh sửa hầu hết mọi thứ.

Các bạn cũng nên liên hệ với nhà phát triển giao diện của mình và yêu cầu họ cung cấp khả năng tương thích với CSS Hero.

Những Plugin nào tương thích với CSS Hero

CSS Hero thường xuyên được kiểm tra với các plugin WordPress phổ biến nhất về khả năng tương thích. Việc này bao gồm contact form, page builder, WooCommerce và các plugin khác. Bạn có thể xem dạnh sách đó tại đây.

Nếu các bạn đang sử dụng plugin WordPress không tương thích với CSS Hero, thì các bạn hãy yêu cầu nhà cung cấp khắc phục điều này. Họ thực sự không cần phải chỉnh sửa nhiều để tương thích với CSS Hero.

Mình hy vọng rằng bạn thấy bài review CSS Hero này sẽ giúp bạn tùy chỉnh giao diện dễ dàng hơn. Các bạn hãy muốn xem qua hướng dẫn của mình về việc tăng tốc độ và hiệu suất WordPress cho người mới sử dụng nhé.

Lưu ý khi mua trên TheDevKit:

  • Bạn sẽ cần cung cấp tài khoản đăng nhập để mình vào kích hoạt cho bạn.
  • Mỗi key chỉ áp dụng cho 1 tên miền duy nhất
  • Bảo hành trọn đời

Source link

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *