Tùy chỉnh thiết kế WordPress dễ dàng

Mục lục

Nếu bạn là một trong số nhiều người mới bắt đầu muốn custom thiết kế website WordPress của mình mà không cần động đến CSS thì bạn thật may mắn.

Plugin CSS Hero dành cho WordPress cho phép bạn custom thiết kế mà không cần động đến một dòng code nào.

Trong bài đánh giá CSS Hero mới nhất này, WPBeginner Việt Nam sẽ chỉ cho bạn cách sử dụng CSS Hero để custom website của bạn và lý do tại sao WPBeginner Việt Nam tin rằng đây là một trong những plugin mà mọi người mới bắt đầu sử dụng WordPress nên thử.

Đánh giá CSS Hero, công cụ thiết kế web cho WordPress

Đánh giá CSS Hero của WPBeginner Việt Nam

CSS Hero là một plugin WordPress cao cấp cho phép bạn thiết kế theme WordPress của riêng mình mà không cần viết một dòng code nào (không cần HTML hoặc CSS).

Bạn có thể hoàn tác các thay đổi một cách nhanh chóng, điều này cực kỳ hữu ích cho người mới bắt đầu. Tất cả các thay đổi được lưu dưới dạng một bảng định kiểu bổ sung, do đó bạn có thể cập nhật theme WordPress của mình mà không lo mất các thay đổi.

Bạn sẽ thấy CSS Hero cũng tốt như vậy nếu bạn là nhà thiết kế hoặc developer. Nó hoạt động tốt với tất cả các theme và khung WordPress phổ biến. Bạn có thể nhanh chóng thay đổi theme hoặc theme con và xuất nó sang website của khách hàng.

CSS Hero có thể giúp bạn tiết kiệm thời gian và tránh phiền toái khi custom thiết kế.

CSS Hero so với WordPress Page Builders

CSS Hero là một công cụ thiết kế chứ không phải là giải pháp lý tưởng để tạo landing page hoặc tạo theme WordPress custom từ đầu.

Nó hoạt động với theme WordPress của bạn và cho phép bạn custom CSS mà không cần viết code CSS.

Mặt khác, plugin xây dựng trang WordPress cho phép bạn tạo landing page và custom layout bất kể bạn đang sử dụng theme WordPress nào.

Mẹo chuyên nghiệp: Nếu bạn muốn tạo landing page, trang bán hàng, trang sản phẩm, v.v., WPBeginner Việt Nam khuyên bạn nên sử dụng Hạt giống. Đây là plugin xây dựng trang WordPress tốt nhất, cho phép bạn thiết kế các trang đẹp và có tỷ lệ chuyển đổi cao cho website của mình một cách nhanh chóng.

Cách sử dụng CSS Hero để custom theme WordPress của bạn

Trước tiên, bạn cần cài đặt và kích hoạt plugin CSS Hero. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Đây là plugin WordPress cao cấp với mức giá khởi điểm từ 29 đô la cho một website (hoàn toàn xứng đáng với khoản đầu tư, khi xét đến thời gian và công sức mà nó sẽ giúp bạn tiết kiệm).

Bạn có thể sử dụng code giảm giá CSS Hero: NGƯỜI MỚI BẮT ĐẦU để được giảm giá đặc biệt 34%. Nếu bạn mua gói PRO, code này sẽ giúp bạn được giảm giá 40%.

Bạn sẽ được chuyển hướng để lấy code khóa cấp phép CSS Hero khi kích hoạt. Làm theo hướng dẫn trên màn hình và bạn sẽ được chuyển hướng trở lại website của mình chỉ sau vài cú nhấp chuột.

CSS Hero hướng đến mục tiêu cung cấp cho bạn giao diện WYSIWYG (những gì bạn thấy là những gì bạn nhận được) để chỉnh sửa theme của bạn.

Chỉ cần truy cập website WordPress của bạn sau khi đăng nhập và bạn sẽ thấy nút CSS Hero trên thanh quản trị WordPress.

Nút CSS Hero trong thanh công cụ quản trị WordPress

Nhấp vào nút sẽ chuyển đổi website của bạn thành bản xem trước trực tiếp.

Bây giờ bạn có thể thấy trình chỉnh sửa CSS Hero. Nó có thanh công cụ ở trên và dưới, cột bên trái và bản xem trước trực tiếp website của bạn.

Giao diện người dùng CSS Hero

Tiếp theo, di chuột đến phần tử mà bạn muốn chỉnh sửa và CSS Hero sẽ đánh dấu phần tử đó để cho bạn biết vị trí bạn đang chỉnh sửa.

Nhấp vào đó sẽ chọn phần tử đó và hiển thị các thuộc tính của nó ở cột bên trái.

Thuộc tính bạn có thể chỉnh sửa cho một phần tử

Chúng sẽ bao gồm các thuộc tính CSS chung cho phần tử được chọn, như nền, kiểu chữ, đường viền, khoảng cách, v.v.

Bạn có thể nhấp vào bất kỳ mục nào để mở rộng mục đó và sau đó chỉnh sửa các thuộc tính CSS bằng giao diện người dùng đơn giản.

Thuộc tính nền

Khi bạn thực hiện thay đổi, code CSS custom sẽ tự động xuất hiện bên dưới.

Nếu bạn đang học CSS, bạn sẽ thấy hữu ích khi xem cách áp dụng các thay đổi CSS khác nhau với kết quả trong bản xem trước trực tiếp.

Xem trước code CSS

Bạn đang gặp khó khăn trong việc tìm hình ảnh miễn phí bản quyền cho website của mình?

CSS Hero còn tích hợp sẵn Unsplash, cho phép bạn duyệt, tìm kiếm và sử dụng những bức ảnh đẹp vào thiết kế website của mình.

Tích hợp Unsplash

CSS Hero cũng đi kèm một số đoạn code có sẵn mà bạn có thể áp dụng cho các thành phần khác nhau trên website của mình.

Chuyển sang tab ‘Snippets’ ở cột bên trái và bạn sẽ thấy một loạt các thành phần phổ biến được liệt kê ở đó.

Sử dụng đoạn trích

Bạn có thể nhấp để chọn một phần tử và CSS Hero sẽ hiển thị cho bạn nhiều kiểu dáng khác nhau.

Nhấp vào nút ‘Đặt tham số’ để chỉnh sửa kiểu bạn thích, sau đó nhấp vào nút ‘Áp dụng’ để thêm vào theme của bạn.

Áp dụng kiểu đoạn trích

Khi bạn thực hiện thay đổi trên website của mình, CSS Hero sẽ tự động lưu những thay đổi đó nhưng không xuất bản chúng.

Để áp dụng những thay đổi này cho website trực tiếp của bạn, hãy nhấp vào nút ‘Lưu và Xuất bản’ ở góc dưới bên phải của màn hình.

Lưu và xuất bản những thay đổi của bạn

Cách hoàn tác các thay đổi trong CSS Hero

Một trong những tính năng tốt nhất của CSS Hero là khả năng hoàn tác mọi thay đổi bạn thực hiện bất cứ lúc nào.

CSS Hero lưu lại lịch sử của tất cả các thay đổi bạn thực hiện đối với theme của mình. Chỉ cần nhấp vào nút lịch sử trên thanh công cụ CSS Hero để xem danh sách các thay đổi. Nút này trông giống như một chiếc đồng hồ nhỏ.

Sửa đổi lịch sử

Bạn có thể nhấp vào ngày và giờ để xem website của bạn trông như thế nào vào thời điểm đó. Nếu bạn muốn quay lại trạng thái đó, hãy lưu hoặc tiếp tục chỉnh sửa từ thời điểm đó.

Điều 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ữ; bạn cũng có thể quay lại thời điểm đó. Không có gì đơn giản hơn thế.

Nhưng nếu bạn chỉ muốn khôi phục những thay đổi đã thực hiện đối với một mục cụ thể thì sao?

Trong trường hợp đó, bạn không cần sử dụng công cụ lịch sử. Nhấp vào phần tử bạn muốn khôi phục về phiên bản trước đó rồi nhấp vào nút ‘Đặt lại’.

Đặt lại chỉnh sửa cho một phần tử

Thao tác này sẽ thay đổi mục trở về cài đặt mặc định được xác định bởi theme WordPress của bạn.

Tùy chỉnh website của bạn cho thiết bị di động trong CSS Hero

Khía cạnh thách thức nhất của thiết kế web là khả năng tương thích với thiết bị. Bạn cần đảm bảo website của mình trông ấn tượng như nhau trên mọi thiết bị và kích thước màn hình.

Các nhà thiết kế web sử dụng nhiều công cụ khác nhau để kiểm tra khả năng tương thích của trình duyệt và thiết bị. May mắn cho bạn là CSS Hero có công cụ xem trước tích hợp sẵn.

Chỉ cần chọn từ thiết bị di động, máy tính bảng và máy tính để bàn trong thanh công cụ trên cùng. Khu vực xem trước sẽ thay đổi thành thiết bị bạn đã chọn. Bạn cũng có thể chuyển đổi giữa chế độ ‘Chỉnh sửa’ và ‘Điều hướng’ để ẩn các thanh công cụ khác.

Xem trước trên các thiết bị khác nhau

Chuyển sang chế độ ‘Chỉnh sửa’ sẽ cho phép bạn chỉnh sửa website của mình trong khi xem trước cho thiết bị di động. Công cụ này rất tiện lợi để điều chỉnh thiết kế theme của bạn cho thiết bị di động và máy tính bảng.

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

Trang web chính thức của CSS Hero có danh sách các theme tương thích ngày càng tăng. Danh sách này bao gồm nhiều theme WordPress miễn phí tốt nhất.

Nó cũng có các theme cao cấp phổ biến nhất từ ​​các cửa hàng như Astra, Divi, CSSIgniter, Themify, StudioPress, v.v.

Thế còn những theme không có trong danh sách tương thích của theme thì sao?

CSS Hero đi kèm với một tính năng gọi là Tự động phát hiện chế độ Rocket. Nếu bạn sử dụng một theme không có trong danh sách tương thích của theme, thì CSS Hero sẽ tự động bắt đầu sử dụng Chế độ Rocket.

Rocket Mode cố gắng đoán các bộ chọn CSS từ theme của bạn. Điều này hoạt động hoàn hảo hầu hết thời gian. Nếu theme của bạn tuân theo các tiêu chuẩn code hóa WordPress, thì bạn sẽ có thể chỉnh sửa hầu hết mọi thứ.

Bạn cũng có thể muốn liên hệ với developer theme 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 khả năng tương thích với các plugin WordPress hàng đầu.

Bao gồm các plugin form liên hệ, trình xây dựng trang phổ biến, WooCommerce và nhiều plugin khác.

Nếu bạn đang sử dụng plugin WordPress tạo ra đầu ra không thể chỉnh sửa bằng CSS Hero, thì bạn có thể yêu cầu tác giả plugin sửa lỗi đó. Họ không cần phải làm gì nhiều để cung cấp khả năng tương thích với CSS Hero.

Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách yêu cầu hỗ trợ WordPress đúng cách và nhận được hỗ trợ.

Chúng tôi hy vọng bạn thấy bài đánh giá CSS Hero của WPBeginner Việt Nam hữu ích. Bạn cũng có thể muốn xem hướng dẫn cuối cùng của WPBeginner Việt Nam về cách cải thiện tốc độ và hiệu suất WordPress cho người mới bắt đầu và so sánh các page builder WordPress tốt nhất để thiết kế theme và website của bạn mà không cần sử dụng CSS.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên TwitterFacebook.

5/5 - (113 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập