Xüsusi üslubları WordPress widgetlarına necə əlavə etmək olar

WordPress yan çubuğu vidjetlərinin əksəriyyəti ümumiyyətlə eyni görünür. Bütün vidjetlərinizin eyni dərəcədə əhəmiyyəti olsaydı yaxşı olardı, amma həqiqət budur ki, bəziləri saytınızın böyüməsi üçün digərlərindən daha vacibdir. Məsələn, bir e-poçt siyahısı abunə vidjeti əlbəttə ki, bir fayl vidjetindən daha vacibdir. Asanlıqla vacib widgetları başqa cür dizayn edə bilsəniz, yaxşı olmazmı? Bu yazıda WordPress widgetlarına xüsusi üslubları necə əlavə edəcəyinizi sizə göstərəcəyik.

WordPress widgetlarına xüsusi üslub əlavə etmək üçün bir plagindən istifadə etmək

Etdiyiniz ilk şey CSS Dərslər Widget plaginini quraşdırmaq və aktivləşdirməkdir. Aktivləşdirildikdən sonra sadəcə gedin Görünüş »Widjetlər və genişləndirmək üçün bir yan çubuğundakı hər hansı bir widgetı vurun.

Bir WordPress widget'a xüsusi üslub əlavə etmək üçün CSS sinfi əlavə edin

Yenisini görəcəksiniz CSS sinfi widgetlarınızın altındadır, buna görə hər bir widget üçün CSS sinifini asanlıqla təyin edə bilərsiniz. Məsələn, abunə sinifini abunə forması vidjetimizə əlavə etdik.

Artıq temanın tərz cədvəlinə gedə və orada stil qaydalarını əlavə edə bilərsiniz. Bunu xoşlayıram:

.subscribe { 
 background-color: #858585;
 color:#FFF;
 }
 

WordPress widgetlarına xüsusi üslub əlavə edin

İstədiyiniz hər hansı bir xüsusi CSS əlavə edə bilərsiniz, məsələn, fon əlavə etmək, sərhədləri dəyişdirmək, müxtəlif rənglərdən istifadə etmək və s.

Xüsusi üslubları WordPress widgetlarına əlavə edin

Bir plugin istifadə etmək istəmirsinizsə, WordPress vidjetlərinizə əl ilə xüsusi üslub əlavə edə bilərsiniz. Varsayılan olaraq, WordPress müxtəlif elementlərə, o cümlədən widgetlara CSS dərsləri əlavə edir.

Yan panelindəki hər bir widgetın nömrəli bir widget sinfi var. Widget kimi1widget2widget3və s. Google Inspect Element vasitəsi ilə Chrome, özelleştirmek istədiyiniz widget üçün CSS sinifini tapa bilərsiniz.

Element yoxlama vasitəsi ilə widget sinifini tapın Chrome

Yuxarıdakı ekran görüntüsündə gördüyünüz kimi, özəlləşdirmək istədiyimiz vidjetdə widget sinif var-2 əlavə WordPress. İndi temanın tərz cədvəlinə keçin və xüsusi üslub qaydalarını əlavə edin.

.widget-2 { 
 background-color: #858585;
 color:#FFF;
 }
 .widget-2 .widget-title { 
 font-weight:bold;
 }
 

Budur, ümid edirik ki, bu məqalə sizə WordPress widgetlarına xüsusi üslub əlavə etməyə kömək etdi. CSS ilə birlikdə oynayın və fərqli rənglərlə sınaq keçirin. Hansı üslubunuzun saytınız üçün ən uyğun olduğunu müəyyən etmək üçün A / B split testlərindən istifadə edin.

Ayrıca, çubuğundan abunə forması vidjetini vurğulamaq üçün daha asan bir yol istəyirsinizsə, OptinMonster'ə bir neçə plan, A / B testi və daha çox təklif etdiyi üçün bir cəhd verin.

Bu yazını bəyənmisinizsə, kanalımıza abunə olun YouTube WordPress tutorial video izləmək üçün. Bizi də tapa bilərsiniz Twitter və Google+.