WordPress site tasarımınızı CSS’e dokunmadan özelleştirmek isteyen birçok yeni başlayanlardan biriyseniz, şanslısınız.
WordPress için CSS Hero eklentisi, tek bir kod satırına dokunmadan tasarımı özelleştirmenize olanak tanır.
Bu güncellenmiş CSS Hero incelemesinde, web sitenizi özelleştirmek için CSS Hero’yu nasıl kullanacağınızı ve neden her WordPress acemisinin denemesi gereken eklentilerden biri olduğuna inandığımızı göstereceğiz.
CSS Kahramanımız İncelemesi
CSS Hero, tek bir satır kod yazmadan (HTML veya CSS gerekmez) kendi WordPress temanızı tasarlamanıza olanak tanıyan premium bir WordPress eklentisidir.
Yeni başlayanlar için son derece yararlı olan değişiklikleri hızlı bir şekilde geri alabilirsiniz. Tüm değişiklikler ek bir stil sayfası olarak kaydedilir, böylece değişiklikleri kaybetme endişesi olmadan WordPress temanızı güncelleyebilirsiniz.
Eğer bir tasarımcı ya da geliştirici iseniz CSS Hero’yu eşit derecede iyi bulacaksınız. Tüm popüler WordPress temaları ve çerçeveleri ile iyi çalışır. Bir temayı veya alt temayı hızlı bir şekilde değiştirebilir ve müşterinin web sitesine aktarabilirsiniz.
CSS Hero, tasarım özelleştirmeleri yaparken size zaman ve hayal kırıklığı kazandırabilir.
CSS Hero vs. WordPress Sayfa Oluşturucuları
CSS Hero bir tasarım aracıdır ve açılış sayfaları oluşturmak veya sıfırdan özel bir WordPress teması yapmak için ideal bir çözüm değildir.
WordPress temanızla birlikte çalışır ve CSS kodu yazmadan CSS’yi özelleştirmenize olanak tanır.
Öte yandan, bir WordPress sayfa oluşturucu eklentisi, hangi WordPress temasını kullandığınızdan bağımsız olarak açılış sayfaları oluşturmanıza ve düzenleri özelleştirmenize olanak tanır.
Profesyonel İpucu: Açılış sayfaları, satış sayfaları, ürün sayfaları ve daha fazlasını yapmak istiyorsanız SeedProd kullanmanızı öneririz. Web siteniz için hızlı bir şekilde yüksek dönüşümlü ve güzel sayfalar tasarlamanıza olanak tanıyan en iyi WordPress sayfa oluşturucu eklentisidir.
WordPress Temanızı Özelleştirmek için CSS Hero Nasıl Kullanılır?
Öncelikle CSS Hero eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Tek bir site için 29$’dan başlayan fiyatlara sahip premium bir WordPress eklentisidir (size kazandıracağı zaman ve zahmet düşünüldüğünde bu yatırıma kesinlikle değer).
CSS Hero kupon kodunu kullanabilirsiniz: WPBEGINNER %34’lük özel bir indirim elde etmek için. PRO planını satın alırsanız, aynı kod size %40 indirim sağlayacaktır.
Etkinleştirmenin ardından CSS Hero Lisans anahtarınızı almak için yönlendirileceksiniz. Ekrandaki talimatları izleyin ve birkaç tıklamayla sitenize geri yönlendirileceksiniz.
CSS Hero, temanızı düzenlemeniz için size bir WYSIWYG (ne görüyorsanız onu alırsınız) arayüzü sağlamayı amaçlamaktadır.
Giriş yaptıktan sonra WordPress web sitenizi ziyaret ettiğinizde WordPress yönetici çubuğunda CSS Hero düğmesini göreceksiniz.
Düğmeye tıkladığınızda siteniz canlı bir önizlemeye dönüştürülecektir.
Şimdi CSS Hero editörünü görebileceksiniz. Üst ve alt araç çubuğuna, sol sütuna ve web sitenizin canlı önizlemesine sahiptir.
Ardından, farenizi düzenlemek istediğiniz bir öğenin üzerine getirin; CSS Hero nerede olduğunuzu belirtmek için öğeyi vurgulayacaktır.
Üzerine tıklandığında o öğe seçilir ve özellikleri sol sütunda gösterilir.
Bunlar, seçilen öğe için arka plan, tipografi, kenarlıklar, boşluk ve daha fazlası gibi yaygın CSS özelliklerini içerecektir.
Genişletmek için herhangi bir öğeye tıklayabilir ve ardından basit bir kullanıcı arayüzü kullanarak CSS özelliklerini düzenleyebilirsiniz.
Siz değişiklik yaptıkça, özel CSS sihirli bir şekilde aşağıda görünür.
CSS öğreniyorsanız, canlı önizlemedeki sonuçla birlikte farklı CSS değişikliklerinin nasıl uygulandığını görmeyi yararlı bulacaksınız.
Web siteniz için telifsiz görseller bulmakta zorlanıyor musunuz?
CSS Hero ayrıca, web sitenizin tasarımında güzel fotoğraflara göz atmanıza, bunları aramanıza ve kullanmanıza olanak tanıyan yerleşik bir Unsplash entegrasyonuna sahiptir.
CSS Hero ayrıca web sitenizdeki farklı öğelere uygulayabileceğiniz bazı hazır parçacıklarla birlikte gelir.
Sol sütundaki ‘Parçacıklar’ sekmesine geçin ve orada listelenen bir dizi ortak öğe göreceksiniz.
Bir öğeyi seçmek için tıklayabilirsiniz ve CSS Hero size farklı stil varyasyonları gösterecektir.
Beğendiğiniz bir stili düzenlemek için ‘Parametreleri Ayarla’ düğmesine tıklayın ve ardından temanıza eklemek için ‘Uygula’ düğmesine tıklayın.
Siz web sitenizde değişiklikler yaptıkça CSS Hero bu değişiklikleri otomatik olarak kaydedecek ancak yayınlamayacaktır.
Bu değişiklikleri canlı web sitenize uygulamak için ekranın sağ alt köşesindeki ‘Kaydet ve Yayınla’ düğmesine tıklayın.
CSS Hero’da Değişiklikler Nasıl Geri Alınır?
CSS Hero’nun en iyi özelliklerinden biri, yaptığınız değişiklikleri istediğiniz zaman geri alabilmenizdir.
CSS Hero, temanızda yaptığınız tüm değişikliklerin bir geçmişini tutar. Değişikliklerin listesini görmek için CSS Hero araç çubuğundaki geçmiş düğmesine tıklamanız yeterlidir. Bu düğme küçük bir saate benziyor.
Sitenizin o sırada nasıl göründüğünü görmek için bir tarih ve saate tıklayabilirsiniz. O duruma geri dönmek istiyorsanız, kaydedin veya düzenlemeye o noktadan devam edin.
Bu, o noktadan sonra yaptığınız değişikliklerin kaybolacağı anlamına gelmez. Hala saklanmaya devam edeceklerdir; ayrıca o zamana geri dönebilirsiniz. Bundan daha basit olamaz.
Peki ya yalnızca belirli bir öğede yaptığınız değişiklikleri geri almak istiyorsanız?
Bu durumda, geçmiş aracını kullanmanıza gerek yoktur. Daha önceki bir sürüme geri döndürmek istediğiniz öğeye tıklayın ve ardından ‘Sıfırla’ düğmesine tıklayın.
Bu, öğeyi WordPress temanız tarafından tanımlanan varsayılan ayarlara geri döndürecektir.
CSS Hero ile Sitenizi Mobil Cihazlar için Özelleştirme
Web tasarımının en zorlu yönü cihaz uyumluluğudur. Sitenizin tüm cihazlarda ve ekran boyutlarında eşit derecede etkileyici görünmesini sağlamanız gerekir.
Web tasarımcıları tarayıcı ve cihaz uyumluluğunu test etmek için çeşitli araçlar kullanır. Şanslısınız ki CSS Hero yerleşik bir önizleme aracıyla birlikte geliyor.
Üst araç çubuğundan mobil, tablet ve masaüstü cihazlar arasından seçim yapmanız yeterlidir. Önizleme alanı seçtiğiniz cihaza göre değişecektir. Ayrıca diğer araç çubuklarını gizlemek için ‘Düzenle’ ve ‘Gezin’ modları arasında geçiş yapabilirsiniz.
‘Düzenle’ moduna geçmek, sitenizi mobil cihazlar için önizlerken düzenlemenize olanak tanır. Bu araç, temanızın tasarımını mobil cihazlar ve tabletler için ayarlamak için kullanışlıdır.
CSS Hero Tema Uyumluluğu
Resmi CSS Hero web sitesi sürekli büyüyen uyumlu temalar listesine sahiptir. Bu liste en iyi ücretsiz WordPress temalarının çoğunu içerir.
Ayrıca Astra, Divi, CSSIgniter, Themify, StudioPress ve daha fazlası gibi mağazalardan en popüler premium temalara sahiptir.
Tema Uyumluluk Listesinde Olmayan Temalar Ne Olacak?
CSS Hero, Roket Modu Otomatik Algılama adı verilen bir özellikle birlikte gelir. Tema uyumluluk listesine dahil olmayan bir tema kullanırsanız, CSS Hero otomatik olarak Roket Modunu kullanmaya başlayacaktır.
Roket Modu, temanızdaki CSS seçicilerini tahmin etmeye çalışır. Bu çoğu zaman mükemmel çalışır. Temanız WordPress kodlama standartlarını takip ediyorsa, neredeyse her şeyi düzenleyebileceksiniz.
Ayrıca tema geliştiricinizle iletişime geçip CSS Hero ile uyumluluk sağlamalarını isteyebilirsiniz.
Hangi Eklentiler CSS Hero ile Uyumludur?
CSS Hero, uyumluluk açısından en iyi WordPress eklentileriyle düzenli olarak test edilir.
Bunlar arasında iletişim formu eklentileri, popüler sayfa oluşturucular, WooCommerce ve diğerleri yer alır.
CSS Hero tarafından düzenlenemeyen bir çıktı oluşturan bir WordPress eklentisi kullanıyorsanız, eklenti yazarından bunu düzeltmesini isteyebilirsiniz. CSS Hero ile uyumluluk sağlamak için fazla bir şey yapmalarına gerek yoktur.
Daha fazla ayrıntı için WordPress desteğini nasıl düzgün bir şekilde isteyeceğiniz ve alacağınız hakkındaki kılavuzumuza bakın.
CSS Hero incelememizi faydalı bulduğunuzu umuyoruz. Ayrıca yeni başlayanlar için WordPress hızını ve performansını artırmaya yönelik nihai kılavuzumuzu ve temanızı ve web sitesi sayfalarınızı CSS kullanmadan tasarlamak için en iyi WordPress sayfa oluşturucuları karşılaştırmamızı görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
THANKGOD JONATHAN says
Thank you the post. You have made it really simple with this plugin to customize WordPress site. I will really try CSS Hero sometime.
Ralph says
I had 3 websites for over 10 years on wordpress and I never touched CSS. I tried as I had to fix something that i couldn’t do in theme builder but that never turned around good. All tutorials were super complex and didn’t really help people who are not familiar with coding.
Good to know there are alternatives now that can help less tech savy people to do what they just want to do, without learning new skill just to fix few small thing.
WPBeginner Support says
Glad we could share this plugin with you
Yönetici
Frank Biganski says
I have nearly ten years’ experience with WordPress and somewhat knowledgabe with CSS. I cannot write it but I can implement it with help.
I purchased the CSS Hero plugin as they state it will work with LearnPress LMS plugin. However, after giving it a go, I found the plugin does not work with the LMS.
I spoke with my very experienced theme developer (WPExplorer) and he stated, in short terms, the LearnPress plugin is complexly and somewhat poorly written, which will make the CSS Hero plugin not function properly.
CSS Hero states a 30 day money back guarantee however after contacting them twice, and two weeks later, I still have not heard back from anyone at CSS Hero.
Just beware about the warranty as it seem I will have to try and contact my credit card company and try to cancel.
WPBeginner Support says
Thank you for sharing your experience, just to be safe please be sure that any messages they may have sent are not caught in your spam folder.
Yönetici
Claire Smith says
Hi there,
Does CSS Hero work with the Simple Membership plugin do you know? Many thanks
WPBeginner Support says
You would want to check with CSS Hero for any questions about current conflicts.
Yönetici
Richard says
I just started up a new website and have been crazy frustrated with the inability to customize themes very much. A lot of the controls are locked behind paying for a theme, but I’m not even sure if I like the theme enough to risk paying for it because I can’t edit everything enough. Will CSS Hero let me sidestep buying themes and edit the free versions?
WPBeginner Support says
It would depend on the customizations you are looking for, CSS hero will certainly help you customize your site without the need for a paid theme. You may want to take a look at their demo page on their site to see what the plugin is able to do.
Yönetici
Michael says
Amazing how good this is in the review. Maybe it’s got something to do with all of the affiliate links that you’ve got peppered throughout it to make referral money from it?
I’m not saying that the plugin isn’t good, but these sort of reviews are hard to take seriously. If it was really good you could say so, but saying that it’s good on the same page as trying to make money from selling it makes it seem like a very big paid editorial advertisement for this plugin.
WPBeginner Support says
Hi Michael,
At WPBeginner, we only recommend products that we have used and tested. Please see our disclaimer page to learn more about how we make money on this website.
Yönetici
Art says
I’m a little confused as to why you would use CSS Hero with a theme builder like Elementor or Divi other than seeing the code that is use for a certain element. Am I missing something?
Jon Seager says
Hi thanks for letting me be the first questiner. Still have broblems showing them w/o the image box on the main page but on the single product page I was able to ditch the image then sqoosh the placehold off the screen to the left. It didn’t really squoosh but it did allow the text to start at a more respectable starting point.
I would still love to speak to someone that has enough free time to allow me to hire on a task based relationship. I could use some help making a better searchbar with to and from date and then some plus much more work to do and could use a partner to divie up the tasks and work together.
Samuel Lin says
Hi, found wpbeginner is really helpful for beginner as I am.
One of the subsite under my multisite had installed with Affinity theme which we love very much.
But when we added Buddypress plugin, the display of buddypress group admins and mods is wasting a lot of space especially on mobile
Can we modify the layout of BP under Affinity using CSS Hero?
Thanks,
Sam
WPBeginner Support says
Hi Samuel,
We are not sure, please contact the plugin author to learn if someone has tried it with BuddyPress and Affinity.
Yönetici
Erik says
Hello there,
is this plugin compatible with Slider revolution (5.4) and Visual Composer?
It could be a faster way in working with this – than with the others… in some cases.
Love to hear from you!
Erik
Louis says
Can’t find CSS HERO in the plugins
WPBeginner Support says
Hey Louis,
CSS Hero is a paid plugin available from its own website.
Yönetici
AnnaD says
Hello
I’ve perchased this plugin but can’t use it: CSS Hero isn’t active
but I can’t finf the way where can I activate it …
Enn says
Hi,
Very nice overview and the plugin itself looks really useful. I have downloaded the CSS Hero, but not able to start it up on my computer. Is this plugin meant for Mack only?
Regards,
Enn
WPBeginner Support says
Hi Enn,
No, it is a WordPress plugin and would work on any WordPress installation.
Yönetici
Jerry says
I just recently discovered WPB. Though I have been a WP site maintainer for several years i find that I am learning something new every time i view one of your tutorials. Thanks. I appreciate your efforts.
WPBeginner Support says
Hi Jerry,
Thank you for kind words. Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Yönetici
Al says
Will this plug in remove the menus on a Pavillioin theme, one of the standard WordPress themes? I see how it is kind of like firebug in that you can identify the part of the code you want to change but this plug in will actually allow you to change it without knowing code, right? But will it remove the menu instead of changing color or location or whatever.
Thanks
Anthony says
Hi,
I purchased a wordpress theme from theme forest and uploaded the theme to my wordpress builder. The site is being hosted by inmotion hosting. My question is, since i am using the wordpress site builder to work on my site, after I install the plug in for CSS Hero, will that button still appear on the top right of my site so i can edit the content when im using the wordpress web builder? or do i have to host my site to have that capability? i dont think it matters if someone else is hosting my site correct? as long as im using the wordpress builder? little ignorant to this and so im learning as I go. Thanks
WPBeginner Support says
Hi Anthony,
If your theme follows the standard WordPress coding best practices then you will be able to use it with CSS Hero without any problems. If you cannot, then please contact your theme’s support.
Yönetici
Derek says
I have have just returned to a wordpress site to update but the CSSHERO plugin does not work even though it is visible on the page. Nothing happens when I hover over content even though CSSHero seems to be active. The plug in active (V 2.1) but I noticed that the current version is 2.3 but no notice to update?
WPBeginner Support says
Hi Derek,
Please contact the plugin’s support team. For a quick work around, you can manually upload the plugin’s zip file.
Yönetici
THE VIP says
Isn’t it is same as Chrome Dev Tools….I didn’t found any considerable differences b/w CDT n CSS hero….
BTW coupon code is not working for me too ???
Jitka Hruzova says
I have Yuuta free theme. atm, I need this to be able to modify size, of my logo on the website ( using jetpack is terrible, it inserts the logo but it is a small and I can modify size or anything) is it going to work for me?
Phermiki Phawa says
How to make my blog become friendly with mobiles?
Bhaskar Dhiman says
sir how we can compress the theme coding manually ? i am using newspaper 7.
Darshan Gajara says
Wow! It’s a real hero.
Andy V. says
Can CSS Hero be used with premium themes purchased on WordPress.com?
WPBeginner Support says
No it cannot be used on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Yönetici
Juergen | webbeetle says
I followed the link and came to page with “Pricing Plans”… A big no-no for me! I understand that this is the most efficient way for any business to make money, but I have no plans to subscribe to any “plan” – other than my website hosting (where I stopped to be a “loyal customer” when the service and load times aren’t right).
CSS Hero says
There is no automatic subscription – you can renew every year if you want plugin updates – but the product WILL continue to work where it was installed – without paying each year.
Tom says
Purchased your plugin, the first site i tried it on WordPress Stella Magazine Theme……didn’t fly.
I’m disappointed
What can we do ?
WPBeginner Support says
Please contact CSS Hero support.
Yönetici
Tom Tortorici says
If you’re changing the properties of, say, h2, can you change it for just one instance or one page, or can it only change all the h2’s throughout the site?
WPBeginner Support says
It can do both. For example you can create a custom class for h2 tags on a particular page.
Yönetici
Juliette says
Amazing! It’s really what I need.
Working like a charm with DIVI and GENESIS!
Monnie says
Hi, the discount code doesn’t seem to be working.
Editorial Staff says
I just tried it, and it seems to be loading just fine. Can you please try again
Yönetici
Louise Findlay says
Yes. I have been looking for something like this for a while.
Saurabh Chatterjee says
Is it free ? if not, is there is any other visual css editor like this , which is free of cost ?
Editorial Staff says
This is not free as stated in the article. No you will not find any free visual editor like this one.
Yönetici