WordPress Acemi: Orta Düzey Özelleştirme

Son WordPress Acemi blogumdaki basit temel bilgilerin ötesine geçmek için , son birkaç haftadır ProteusThemes demo sayfalarımızdan birini yeniden oluşturmaya çalışıyorum. Auto temasının demosu spesifik olacak. Tıpkı daha önce olduğu gibi, meslektaşlarım beni yoluma çıkarmak için adım adım görevler belirledi. Bunlar şimdiye kadar öğrendiğim en önemli dersler.

Simge Kutuları

Simge Kutusu widget'ları çok kullanışlı bir görsel dil parçasıdır. Açık görünebilir, ancak bir telefon simgesinin yanında şirketinizin telefon numarasının olması, sitenizin kullanıcı deneyimini iyileştirmenin basit ama etkili bir yoludur.

Benim görevim, ana sayfanın başlığına simge kutularını eklemekti. Bunu yapmak için, kontrol panelinizde Görünüm -> Widget'lara gitmeniz ve ardından ' Tema Kenar Çubukları ' içinde ' Başlık ' seçeneğini seçmeniz gerekir.

' Header'ı bulduktan sonra, dikkatinizi ekranın soluna yönlendirin, burada ' Kullanılabilir Widget'ların bir listesini göreceksiniz. ProteusThemes: IconBox , aradığınız widget'tır.

Şimdi iki seçeneğiniz var. Widget'ı ekranın sağına sürükleyip bırakabilir ve başlığa yerleştirebilirsiniz ya da widget'a tıkladığınızda ilgili konumlarının bir açılır menüsünü göreceksiniz, bundan sadece ' Başlık'ı seçebilirsiniz. listeleyin ve mavi ' Widget Ekle ' düğmesini tıklayın:

Widget içinde seçebileceğiniz birçok simge olduğunu göreceksiniz, bu alıştırmanın amacı için telefonu seçtim. Tek yapmanız gereken Simge Kutusuna bir başlık vermek ve yanında hangi bilgilerin görünmesini istediğinize karar vermek.

Widget menüsündeki tüm simgelerin altında ' bu widget'ı vurgula ' seçeneğini göreceksiniz. Simge Kutusundaki bilgiler çok önemliyse ve daha fazla öne çıkmasını istiyorsanız bu kutuyu işaretleyin.

Ön Sayfa Kaydırıcısı

Otomatik Demoyu yeniden oluşturmak için ana sayfada bir özellik olarak bir kaydırıcı eklenmesi gerekiyordu. Bunu yapmak için Sayfalar -> Tüm Sayfalar -> Ana Sayfa'yı seçin; Ana sayfanızın düzenleyicisine girdikten sonra, ekranın sağ tarafında ' Sayfa Özniteliği ' açılır menüsünü bulmanız gerekir. Bunu bulun ve ' Şablonu ' ' Kaydırıcılı Ön Sayfa ' olarak değiştirin.

' Slider ile Ön Sayfa ' olarak değiştirdiğinizde, ekranın alt kısmında ' Ön sayfa kaydırıcı ' başlıklı yeni bir meta olacak, kaydırıcıya resimlerinizi ve metninizi eklemek için buraya tıklayın:

Kısa kodlar

Ön sayfa kaydırıcısını yeniden oluşturmak, bizi güzel bir şekilde kısa kodlara getiriyor. Niye ya? Yeniden oluşturduğum Otomatik Demo'da , kaydırıcının içinde düğmeler var.

Bu noktada , önerilen eklentileri gerçekten yüklemeniz gerektiğini vurgulamak önemlidir. Yaptığım hata, ProteusThemes Kısa Kodlar eklentisini etkinleştirmeden kısa kodu 'slayt metnine' eklemekti. Eklentiyi etkinleştirmediyseniz, oluşturmaya çalıştığınız düğme yerine kodun kendisi kaydırıcıda görünecektir.

Tüm temalarımızın belgelerinde , ekleyebileceğiniz düğmenin stili ve işlevselliği için size birçok seçenek sunan bir 'Kısa Kodlar' bölümü vardır. Tek yapmanız gereken bu kodu kopyalayıp kaydırıcının 'slayt metni' bölümüne yapıştırmak. Düğmenin metnini kod içinde ihtiyaçlarınıza göre düzenleyin ve kullanıma hazır.

Elbette kısa kodları sadece kaydırıcıdan başka yerlerde de kullanabilirsiniz. Örneğin, bir şeyi denemek ve satmak için bir içerik pazarlaması yazdıysanız, blog gönderinizin altında etkili bir CTA düğmesi oluşturmak için kısa kodları kullanın.

Sayfa Oluşturucu

SiteOrigin'in Sayfa Oluşturucu eklentisini kavramak, Otomatik Demoyu yeniden oluştururken kesinlikle kritikti . Kullanmam gereken ilk iş, ana sayfanın başlığının altındaki Popover'lı bu IconBox bölümünü oluşturmaktı:

Bunu yapmak için düzenlemek istediğiniz sayfaya gidin, benim durumumda ana sayfa. Ardından , sayfa oluşturucu menüsünü bulmanız gerekir, şöyle görünür:

Buradan ' Satır Ekle'yi seçin. Daha sonra bu satırdaki sütunlarla ilgili seçenekleri göreceksiniz. Kaç tane sütun istediğinizi, bunların boyut oranını ve bunların soldan sağa mı yoksa tam tersi yönde mi sıralanmasını istediğinizi seçebilirsiniz. IconBox Popover'ım için eşit boyutta 3 sütun seçtim.

Artık sütunlarınız hazır olduğuna göre, widget'lar ekleyerek onlara işlevsellik eklemeye başlayabilirsiniz. Bunu eklemek istediğiniz sütuna tıklayarak yapın, sütun seçildikten sonra yukarıdaki menüden ' Widget Ekle ' düğmesine tıklayın.

Seçtiğiniz widget'a bağlı olarak, sütuna daha fazla işlevsellik ekleyebilirsiniz. Örneğin, ' Açılış Saatleri ' IconBox Popover'ımda, ilgili bilgilerin sütun tıklandığında açılır pencerede gösterilebilmesi için IconBox Popover'a ProteusThemes Açılış Zamanı widget'ını eklemek gerekliydi.

Bu IconBox açılır pencereleri satırını oluşturduktan sonra karşılaştığım bir sorun, satırın Otomatik Demo ile aynı renkte olmaması ve sayfamın tüm genişliğini kapsamamasıydı. Bu tür sorunları çözmek kolaydır. Önce imlecinizi satırınızın üzerindeki küçük İngiliz anahtarı simgesinin üzerine getirin, ardından ' Satırı Düzenle 'yi seçin. Rengi değiştirmek için bir sonraki adım, ' Row Styles ' menüsünden ' Design ' seçeneğini seçmektir, buradan renk ve diğer tasarım seçeneklerini değiştirebilirsiniz.

Satırınızın boyutunu değiştirmek için önce ' Satır Stilleri ' menüsünden ' Düzen ' öğesini seçin. Bu size satıra dolgu ekleme seçeneği sunar. Ardından, satırın sayfanızın tüm genişliğine yayılmasını istiyorsanız, ' Satır Düzeni ' açılır menüsünü seçin ve ' Tam Genişlik ' seçeneğini belirleyin.

Bu öne çıkan sayfa sütunlarını oluşturmak için Sayfa Oluşturucu'yu tamamen aynı şekilde kullandım:

Bunun için Iconbox with Popover widget'ını sütuna eklemek yerine ProteusThemes: Featured Page widget'ını seçtim. Sayfa oluşturucunun sizin için ne kadar yararlı olacağına dair gerçekten bir fikir edinmek için sütunlara farklı widget'lar koyarak iyi bir oyun oynamalısınız.

Şimdilik bu kadar olacak. Daha temel ipuçları için önceki gönderime bir göz atın. Bültenimize abone olmak ve bu tür içerikleri ve çok daha fazlasını doğrudan gelen kutunuza ulaştırmak için aşağıya tıklayın…

ŞİMDİ ABONE OL