Khi nói đến việc làm cho một trang web trông chính xác như bạn muốn, số lượng chủ đề WordPress khác nhau có sẵn là một lợi ích thực sự! Và nếu bạn dành đủ thời gian tìm kiếm, bạn có thể tìm thấy một chủ đề hoàn toàn hoàn hảo cho trang web của bạn. Tuy nhiên, có một cơ hội là trong khi bạn có thể tiến gần đến những gì bạn muốn, có lẽ bạn vẫn còn hơi lạc lõng. Rốt cuộc, một chủ đề được thiết kế trước có thực sự phù hợp với nhu cầu của một cá nhân lên đến T không? Giáo dục
Vậy phải làm gì nếu bạn đã tìm được một chủ đề gần với những gì bạn muốn nhưng vẫn cần thực hiện một số thay đổi? Vâng, nếu bạn có các kỹ năng cần thiết tất nhiên không có vấn đề gì – bạn có thể sửa đổi nó theo ý muốn. Nhưng điều gì sẽ xảy ra nếu bạn không đủ tự tin để thực hiện các thay đổi của riêng mình đối với các tệp cần thiết?
Hôm nay, tôi muốn giới thiệu cho bạn một plugin rất hữu ích: CSS Hero, một plugin cho phép bạn tự thực hiện các tùy chỉnh trực quan nhỏ, hoặc thậm chí tương đối lớn: mà không cần phải chạm vào một dòng mã!
Anh hùng CSS là gì?
CSS Hero là một plugin tùy biến chủ đề (xem các tính năng)
Như vậy, nó chiếm không gian tương tự như các plugin xây dựng trang kéo và thả. Tuy nhiên, khi các nhà xây dựng trang khuyến khích bạn tạo bố cục tùy chỉnh từ đầu, CSS Hero cho phép bạn điều chỉnh chủ đề WordPress hiện tại theo cách bạn muốn.
Điều này cho phép bạn chơi như một nhà phát triển, mà không nhất thiết phải sở hữu bất kỳ kỹ năng nào của nhà phát triển thường tham gia. Anh ta tiếp tục sử dụng chủ đề WordPress được thiết kế chuyên nghiệp của mình, bạn biết đấy, chủ đề được tạo bởi một chuyên gia, không phải ai đó khởi chạy các mô-đun ngẫu nhiên, plugin xây dựng trang, trong khi thực hiện các điều chỉnh nhỏ cho phù hợp với yêu cầu của bạn.
Không có mục nào trên trang web bị giới hạn – bạn có thể tùy chỉnh mọi thứ và mọi thứ. CSS Hero chuyển đổi các tùy chỉnh của bạn thành mã CSS có liên quan, sau đó được áp dụng cho biểu định kiểu CSS mới (biểu định kiểu gốc vẫn còn nguyên, tránh mọi sự cố trong tương lai).
CSS Hero cũng hoạt động với bất kỳ chủ đề WordPress nào. Những chủ đề đã được kiểm tra rộng rãi về tính tương thích được đặt tên, trong khi các chủ đề chưa được kiểm tra vẫn được hỗ trợ.
Giá cả
CSS Hero là một plugin cao cấp giá cả phải chăng. Để phản ánh sự cạnh tranh của bạn, đó là carillo ngang bằng với các plugin xây dựng trang phổ biến nhất.
Một giấy phép cơ bản có giá chỉ 29 đô la và cung cấp cho bạn quyền truy cập vào plugin CSS Hero đầy đủ (mặc dù bạn bị hạn chế sử dụng nó trên một trang web).
Nếu bạn muốn sử dụng CSS Hero trên nhiều trang web, các tùy chọn của bạn là:
Như bạn có thể tưởng tượng, giấy phép dành cho các cơ quan sáng tạo và nhà phát triển chuyên nghiệp. Cả giấy phép và giấy phép cũng đi kèm với quyền truy cập vào plugin cao cấp, Inspector Pro. Chúng tôi sẽ đề cập chi tiết hơn về điều này sau trên trang.
Tất cả ba giấy phép CSS Hero đều có giá trị trong một năm, cấp quyền truy cập vào các bản cập nhật và hỗ trợ trong một năm và đi kèm với bảo đảm hoàn lại tiền trong 30 ngày.
Bắt đầu
Sau khi mua hàng, bạn sẽ được chuyển đến bảng điều khiển CSS Hero. Từ đó, bạn sẽ có thể truy cập tài liệu mở rộng của plugin, bên cạnh Học viện anh hùng CSS ấn tượng. Học viện là một liên lạc tốt đẹp, với một loạt các video hướng dẫn cho người mới bắt đầu được thiết kế để giúp bạn tận dụng tối đa plugin mới của mình (tôi rất thích xem các plugin nâng cao khác để làm theo).
Bảng điều khiển thực hiện một chức năng quan trọng khác: đây là nơi bạn tải xuống CSS Hero và, tùy thuộc vào cấp độ giấy phép của bạn, các plugin Inspector Pro.
Với tải xuống đầy đủ, đăng nhập vào bảng điều khiển WordPress của bạn. Điều hướng đến >>, sau đó làm theo các hướng dẫn để tải các tệp zip plugin và kích hoạt plugin. Nếu bạn đã từng cài đặt một plugin WordPress trước đây, thì đây là điều rất quen thuộc với bạn.
Tuy nhiên, cài đặt CSS Hero yêu cầu một bước bổ sung: xác minh. Nhấp vào nút màu xanh, sau đó làm theo các hướng dẫn trong khi đăng ký một trong các giấy phép của bạn. Cho đến nay rất tốt.
CSS Hero hiện là một công cụ và như vậy việc chỉnh sửa được thực hiện ở mặt trước nơi bạn có thể thấy những thay đổi trong thời gian thực. Truy cập vào mặt trước của trang web của bạn và bạn sẽ thấy một biểu tượng màu xanh mới ở góc trên bên phải của màn hình. Nhấn vào đây để bắt đầu sử dụng plugin mới của bạn.
Trình chỉnh sửa CSS Hero
Sau khi nhấp vào biểu tượng màu xanh, bạn sẽ phải chờ vài giây để CSS Hero bật. Với plugin được kích hoạt, bây giờ bạn có thể bắt đầu thiết kế và tùy chỉnh trang web của mình.
Để bắt đầu, chỉ cần nhấp vào biểu tượng màu xanh ở đầu bảng tùy chọn. Nếu bạn không chắc chắn cách tiến hành, plugin sẽ cung cấp cho bạn các liên kết hữu ích bao gồm tất cả các điều cơ bản. Tuy nhiên, nếu bạn đã sẵn sàng để lặn ngay, bạn có thể bắt đầu nhắm mục tiêu và chỉnh sửa bất kỳ mục nào trên trang của mình.
Cuộn qua mục bạn muốn chỉnh sửa, sau đó nhấp (hãy bắt đầu bằng cách xem một đoạn nội dung tương đối cơ bản, như trong ảnh chụp màn hình bên dưới). Sau khi nhấp, CSS Hero sẽ khóa phần tử của bạn, điều đó có nghĩa là bạn có thể bắt đầu tùy chỉnh nó.
Để làm cho quá trình đơn giản nhất có thể, CSS Hero sẽ cung cấp cho bạn một danh sách các tùy chọn tùy chỉnh, tùy thuộc vào loại mặt hàng bạn đã chọn. Sau khi chọn một đoạn, các tùy chọn của tôi bao gồm thay đổi phông chữ, hình nền và đường viền và đặt phần tô màu xung quanh văn bản.
Chỉnh sửa các yếu tố rất dễ dàng, với mọi thứ được điều khiển từ thanh menu bên phải, cộng với các thay đổi được xem trước trong thời gian thực. Để bắt đầu, tôi đã quyết định tập trung vào các thuộc tính của văn bản. Với tùy chọn này được chọn, CSS Hero hiển thị tất cả các tùy chọn có sẵn để định cấu hình văn bản, bao gồm:
- Mặt phông chữ: với mọi phông chữ Google có sẵn để chọn
- Màu chữ
- Cỡ chữ
- Trọng lượng phông chữ
- Căn chỉnh văn bản
- Chuyển đổi văn bản – ví dụ chữ hoa
- Khoảng cách giữa các từ
- Chiều cao đường
Thực hiện các thay đổi bạn muốn và xem cách chúng áp dụng cho văn bản một phần của giây sau.
Sau đó, bạn có thể quay lại và đặt nền cho đoạn văn của bạn; Một lần nữa, CSS Hero cung cấp cho bạn toàn quyền kiểm soát. Bạn có thể tải lên một hình ảnh tùy chỉnh, chọn màu hoặc đặt một gradient để hiển thị làm nền.
Bạn cũng có các tùy chọn tương tự cho đường viền đoạn văn, với sự linh hoạt hoàn toàn về kiểu viền, chiều rộng và màu sắc.
Thậm chí còn có một số kiểu cấu hình sẵn tuyệt vời, ví dụ như biến văn bản thành nút hoặc hiển thị nền sẵn sàng trong các bố cục thú vị khác nhau.
Nếu bạn không muốn làm việc với các thay đổi tại một phần tại một thời điểm, bạn cũng có thể chọn tùy chọn liệt kê tất cả các tùy chọn tùy chỉnh trên một màn hình thuận tiện.
Hoàn tác thay đổi
Khi bạn thay đổi văn bản, CSS Hero sẽ áp dụng chúng cho phiên bản trực tiếp của trang web của bạn. Tuy nhiên, đừng lo lắng về việc thực hiện các thay đổi vĩnh viễn tại thời điểm này: trước khi áp dụng các thay đổi, bạn có tùy chọn xóa chúng bằng cách nhấp hoặc cam kết chúng bằng cách nhấn nút.
Tuy nhiên, ngay cả sau khi nhấn, bạn sẽ không bị kẹt với các thay đổi không mong muốn. Để quay lại bản gốc, hãy quay lại cấp cao nhất của menu CSS Hero, điều hướng đến phần và sau đó chọn tùy chọn.
Cũng có thể khôi phục một mục riêng lẻ về cài đặt mặc định của nhà sản xuất: chỉ cần nhấp vào mục bạn muốn khôi phục, sau đó nhấp vào biểu tượng nhỏ ‘đặt lại ở bên phải của menu. Báo chí xác nhận, và yếu tố nổi loạn của bạn sẽ được khôi phục lại vinh quang trước đây của nó.
Như tôi đã đề cập trước đó, tất cả các tùy chỉnh được áp dụng cho một biểu định kiểu. Nếu điều tồi tệ nhất xảy ra, biểu định kiểu gốc cho chủ đề của bạn sẽ vẫn còn nguyên. Điều này có nghĩa là bất kể thay đổi nào bạn thực hiện với CSS Hero, không có tác hại lâu dài nào có thể được thực hiện. Nếu tất cả các tùy chọn khôi phục khác không thành công, bạn có thể khôi phục chủ đề mặc định của mình và ngủ dễ dàng.
Chỉnh sửa bất kỳ mục nào
Một trong những điểm mạnh của CSS Hero là nó cho phép bạn chỉnh sửa bất kỳ yếu tố nào trên trang của mình, bất kể nó lớn hay nhỏ.
Bằng cách nhìn vào bức tranh lớn, bạn có thể chỉnh sửa hình nền, kiểu thanh bên và phần chân trang trên trang web của bạn.
Điều này được thực hiện bằng cách sử dụng cùng một quy trình chúng tôi đã sử dụng để chỉnh sửa đoạn văn của mình, nhưng nó cho thấy CSS Hero có thể được sử dụng để thực hiện các thay đổi cơ bản cho tính thẩm mỹ của trang web của bạn. Hãy nhìn vào ảnh chụp màn hình bên dưới, nơi tôi đã thay đổi nền của thanh bên, thay đổi kiểu tiêu đề widget và cũng cấu hình lại không gian. Đây là ảnh cơ bản:
Và đây là sự phù hợp của tôi: Tôi không phải là nhà thiết kế, tôi thừa nhận điều đó, nhưng điều này chỉ mất vài giây để hoàn thành.
Bạn cũng có thể tùy chỉnh các yếu tố nội dung nhỏ, chẳng hạn như hình ảnh, màu liên kết và kiểu danh sách. Danh sách kiểu đặc biệt thú vị, bởi vì bạn có thể chọn đạn tùy chỉnh từ phần dành riêng. Sáu viên đạn dựng sẵn thú vị được hỗ trợ, bao gồm hình vuông, số thập phân và chữ số La Mã hoặc bạn có thể tải lên các biểu tượng tùy chỉnh của riêng mình để tạo cảm giác cá nhân hơn.
Hy vọng rằng điều này sẽ cung cấp cho bạn một ý tưởng về cách bạn có thể xem xét thiết kế của trang web của bạn. Chủ đề WordPress của bạn cung cấp nền tảng, nhưng nhờ CSS Hero, bạn có thể điều chỉnh mọi pixel trên trang web của mình theo ý thích mà không cần chạm vào một dòng mã.
Các tính năng khác
CSS Hero có một số tính năng thú vị khác mà tôi muốn thu hút sự chú ý của bạn.
Đầu tiên là. Với sự nhấn mạnh ngày càng tăng vào thiết kế đáp ứng, điều quan trọng là trang web của bạn chạy trơn tru trên các thiết bị ở mọi hình dạng và kích cỡ. CSS Hero đi kèm với tính năng tích hợp cho phép bạn xem trang web của mình trên màn hình máy tính để bàn, máy tính bảng và thiết bị di động.
Chỉ cần chọn chế độ xem ưa thích của bạn từ thanh công cụ (tùy chọn thứ hai trở xuống) và để CSS Hero biến đổi màn hình của bạn thành kích thước phù hợp. Đây là một cách tuyệt vời để kiểm tra những thay đổi bạn đã thực hiện trên các thiết bị nhỏ hơn.
Tiếp theo, chúng tôi có các tính năng quan trọng. Mỗi lần bạn nhấn nút, CSS Hero sẽ lưu ảnh chụp nhanh trang web của bạn. Những ảnh chụp nhanh này có thể được xem và khôi phục chỉ bằng một nút bấm, điều đó có nghĩa là công việc khó khăn của bạn không bao giờ bị lãng phí, bạn chỉ cần nhảy qua lại kịp thời.
Cuối cùng, chúng ta có tùy chọn, có sẵn trong phần. Điều này cho bạn cơ hội xuất CSS đã chỉnh sửa của bạn để sử dụng trên một trang web khác hoặc chỉ cần tải nó lên màn hình để nghiên cứu những thay đổi bạn đã thực hiện (một trong những cách tốt nhất để tìm hiểu CSS).
Plugin Inspector Pro
Những người bạn đã nâng cấp lên các gói hoặc cũng có plugin CSS Hero Inspector Pro kèm theo giấy phép của bạn.
Được công bố vào tháng 5 năm 2015 và gần đây đã hết chế độ beta, Inspector Pro nhắm đến người dùng CSS cao cấp hơn. Mặc dù CSS Hero là một công cụ hoàn toàn không yêu cầu kỹ năng CSS, Inspector Pro đã được phát triển cho những ai muốn tùy chỉnh trang web của mình bằng cách điều chỉnh CSS trực tiếp.
Inspector Pro hiển thị CSS của chủ đề của bạn bên dưới bản xem trước trực tiếp. Bạn có thể chỉnh sửa mã này theo ý muốn và khi thực hiện, những thay đổi của bạn sẽ được phản ánh trong bản xem trước. Bằng cách cung cấp cho bạn khả năng chỉnh sửa CSS trực tiếp, plugin này cung cấp cho bạn quyền kiểm soát tuyệt đối đối với các tùy chỉnh của bạn, từng pixel theo pixel.
Tuy nhiên, Inspector Pro cũng cung cấp một số tính năng hữu ích, vì vậy bạn không bao giờ cô đơn. Ví dụ: bạn có thể chuyển đến một dòng cụ thể bằng chức năng tìm kiếm tiện dụng hoặc vô hiệu hóa các dòng kiểu cụ thể để các thành phần chồng chéo không bị cản trở.
Nếu bạn viết CSS từ đầu, bạn sẽ thích plugin này vì điều đó có nghĩa là bạn không còn phải đi từ cửa sổ này sang cửa sổ khác – bạn có thể thực hiện và xem tất cả các chỉnh sửa của mình trên một màn hình. Thực tế!
Hỗ trợ anh hùng CSS
Từ thời điểm bạn đăng nhập vào bảng điều khiển CSS Hero, bạn có thể thấy các nhà phát triển cố gắng giúp bạn tận dụng tối đa plugin của mình.
Tôi đã đề cập đến tài liệu mở rộng và Học viện anh hùng CSS (học viện đang ở giai đoạn đầu, nhưng có kế hoạch cụ thể để tiếp tục mở rộng).
Hai phần này rất toàn diện và học viện bao gồm các video hướng dẫn hữu ích. CSS Hero ban đầu có vẻ khó sử dụng, vì vậy những hướng dẫn bằng video ngắn này rất hữu ích cho tôi trong việc tìm kiếm đôi chân của mình, sau đó plugin cảm thấy tương đối đơn giản.
Ngoài ra còn có một phần tài liệu nâng cao hơn, được gọi là. Điều này nhằm vào các nhà phát triển plugin / chủ đề, những người thực hiện các bước cần thiết để đảm bảo các sản phẩm của họ hoàn toàn tuân thủ CSS Hero, tức là anh hùng đã sẵn sàng.
Đối với những người vẫn không thể giải quyết vấn đề của họ, mặc dù có tài liệu chi tiết, cũng có một diễn đàn hỗ trợ. Nhân viên hỗ trợ CSS Hero sẵn sàng trả lời bất kỳ câu hỏi nào, thường là trong vài giờ. Giấy phép cho phép bạn truy cập một năm vào diễn đàn và nhóm hỗ trợ.
Nhìn chung, CSS Hero không thể bị lỗi vì những nỗ lực hỗ trợ của nó. Các hướng dẫn được viết sẵn và ghi lại là thực sự hữu ích, và chúng được truyền tải trong suốt trải nghiệm người dùng tại những điểm mà chúng rất cần thiết.
Khi các plugin WordPress ngày càng tinh vi hơn, tôi muốn thấy nhiều nhà phát triển hơn theo ví dụ về CSS Hero, cung cấp hỗ trợ nâng cao ngay lập tức để người dùng thiếu kinh nghiệm không bao giờ cảm thấy xa tầm tay.
Suy nghĩ cuối cùng
Nhìn chung, tôi thực sự ấn tượng với CSS Hero. Với tiềm năng tùy chỉnh không giới hạn, plugin này có thể dễ dàng bị áp đảo; tuy nhiên, do giao diện thông minh và trực quan (và hướng dẫn hữu ích), nó luôn dễ sử dụng.
Các tùy chọn tùy chỉnh là vô tận, cho phép bạn sửa đổi chủ đề của mình theo bất kỳ cách nào bạn có thể tưởng tượng. Điều này cho phép bạn tạo ra một số thiết kế độc đáo và thú vị, sử dụng các kiến thức cơ bản về chủ đề của bạn và mọi thứ mà không làm bẩn tay với mã.
Tuy nhiên, CSS Hero không dành cho lập trình viên sở thích. Inspector Pro là một công cụ thú vị cho các nhà phát triển có kinh nghiệm muốn xây dựng một trang web từ đầu.
Plugin làm cho nó hoàn toàn khả thi khi bạn có thể xây dựng một trang web từ đầu, xem sáng tạo của bạn trở nên sống động khi bạn viết mã, từng dòng một. Tuy nhiên, thực tế hơn, nó đưa phỏng đoán ra khỏi việc tùy chỉnh chủ đề, tiết kiệm lượng thời gian lớn cho các nhà phát triển làm công việc của khách hàng.
Nhìn chung, CSS Hero là một plugin ưu việt và là một plugin thực sự thu hút người dùng WordPress ở mọi cấp độ kỹ năng. Nếu bạn chưa có, hãy kiểm tra nó!
(cập nhật – Ngày 16 tháng 3 – Kể từ khi viết bài đăng này, CSS Hero đã vui lòng cung cấp cho chúng tôi một đặc biệt mã phiếu giảm giá ủy quyền cho độc giả WinningWP Giảm giá 40% – Xem phiếu giảm giá).
