Divi Theme Builder'ı Kullanarak Mobilde Kenar Çubuğunu Optimize Etme

Bazı durumlarda, cep telefonunda bir kenar çubuğu tutmak biraz fazla abartı olabilir. Kullanıcılar, tabletlerinde ve telefonlarında ilgili bilgileri (bir noktaya kadar) kaydırmaktan mutluluk duyarlar. Ancak, sayfanın ana içeriğinden sonra önemli miktarda kenar çubuğu içeriğiniz olduğunda, kullanıcılar genellikle bazı önemli harekete geçirici mesajlardan oluşan altbilgiye asla ulaşmayabilir. Bu nedenle, kenar çubuğunu mobil cihazlarda optimize etmek önemlidir.

Bu eğitimde, mobil ekranda kenar çubuğunuzu optimize etmek için Divi Tema Oluşturucu'yu kullanmanın yollarını inceleyeceğiz. İşte bu makalede ele alacağımız şeylerden bazıları:

• Kenar Çubuğu ile Şablon Nasıl Oluşturulur
• Divi Modüllerini ve WordPress Widget'larını Kullanarak Kenar Çubuğu İçeriği Oluşturma
• Mobil cihazlarda belirli widget'ları gizlemek/göstermek için Çoklu Widget Alanlarını Kullanma
• Mobil cihazlarda Kenar Çubuğu İçeriği Arasındaki Boşluğu Kontrol Etme
• Mobilde Kenar Çubuğu İçeriğini Tamamen Gizleme
• Mobil Cihazda Bazı Kenar Çubuğu İçeriğini Gizleme
• Mobilde İçeriği En Aza İndirmek için Modüllerdeki Öğeleri Gizleme
• Metin boyutunu ve aralığını ayarlayarak Kenar Çubuğu İçeriğini Duyarlı hale getirme
• Mobil Cihazda Kenar Çubuğunun Yığın Sırası Nasıl Değiştirilir

Başlayalım.

Gizlice Bakış

İşte Masaüstündeki Kenar Çubuğu düzenine ve mobil görüntüleme için nasıl optimize edildiğine hızlı bir bakış.

Mobil Cihazda Optimize Edilmiş Kenar Çubuğu ile ÜCRETSİZ Şablonu İndirin

Bu eğitimdeki şablona el koymak için önce aşağıdaki düğmeyi kullanarak şablonu indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. Yeniden abone olmayacaksınız veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için Divi Temasını yüklemeniz ve etkinleştirmeniz gerekir. Divi'nin en son sürümüne sahip olduğunuzdan emin olun.

Sayfa içeriğinin gerçekten sonuçları göstermesi için test amacıyla oluşturulmuş bazı gönderilere/sayfalara da ihtiyacınız olacak.

Bundan sonra, gitmeye hazırsınız.

Divi Şablonunuzun Kenar Çubuğunu Mobil Cihazda Nasıl Optimize Edebilirsiniz?

Kenar çubuğumuzu mobil cihazlarda optimize etmeye başlamadan önce, çalışan bir model kurmamız ve çalıştırmamız gerekiyor. Divi Theme Builder'ı kullanarak bir sayfa şablonunda kenar çubuğumuzu oluşturacağız. Bu, Divi'de bir kenar çubuğu oluşturmaya nelerin dahil olduğunu daha iyi anlamamıza yardımcı olacak, böylece onu mobilde nasıl optimize edeceğimizi daha iyi anlayabiliriz.

Kenar Çubuğu ile Şablon Oluşturma

Divi Theme Builder Pack #3'ü İçe Aktarma

İşleri başlatmak için, site tasarımımızı hızlı bir şekilde başlatmak için Divi Theme Builder Pack #3'ü kullanacağız. Ardından, mobil için optimize edeceğimiz kenar çubuğunu eklemek için şablonlardan birini kullanacağız.

Paketi indirdikten sonra klasörü açın.

WordPress Kontrol Panelinden Divi > Tema Oluşturucu'ya gidin. Ardından, sayfanın sağ üst menüsündeki taşınabilirlik simgesine tıklayın. Taşınabilirlik modundan içe aktarma sekmesini seçin ve daha önce indirdiğiniz klasörden divi-theme-builder-pack-3-all.json dosyasını seçin. Ardından içe aktar düğmesini tıklayın.

Önemli: Web sitenizdeki canlı içeriği geçersiz kılmamak veya bir şeyi bozmamak için lütfen yeni bir Divi yüklemesine sahip bir test sitesi kullanın.

Tüm şablonların tema oluşturucuya aktarıldığını göreceksiniz.

Kategori Sayfası Şablonu İçinde Kenar Çubuğu Düzenini Oluşturma

Tüm Kategori Sayfaları Şablonunu bulun ve özel gövde düzenini düzenlemek için tıklayın.

Sayfanın mevcut düzeni, sayfanın ana içerik alanı için tek sütunlu bir satır kullanır. Bunu bir kenar çubuğu düzeni yapısına değiştirmemiz gerekecek. Bunu yapmak için, ikinci satırın satır menüsündeki “Düzen Seç” simgesine tıklayın ve üçte iki üçte bir sütun düzeni yapısını seçin.

Şimdi kenar çubuğunuz için sağ tarafta bir alanınız olacak.

DİKKAT: Bu kenar çubuğu düzeni için özel bir bölüm kullanmıyorum. Sayfanız için bir kenar çubuğu düzeni oluştururken özel bölümler gerekli değildir, ancak ana içerik alanı için ayrı satır işlevselliğini korumak istiyorsanız, bir özel bölüm kullanmak isteyeceksiniz.

Bu eğitimde modüllerin tam tasarımını yeniden oluşturmaya çok fazla konsantre olmayacağız. Bunun yerine, mobil cihazlarda kenar çubuğunu optimize etmeye yardımcı olacak unsurlara odaklanacağız.

Bununla birlikte, kenar çubuğu sütununa bir arka plan rengi ve dolgu eklememiz gerekiyor.

Kenar Çubuğu Sütun Ayarları

Kenar çubuğu için belirlenen sütunun ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka plan rengi: #f2f5f9
• Dolgu: 25 piksel üst, 25 piksel alt, 25 piksel sol, 25 piksel sağ

Divi Modülleri ve WordPress Widget'ları ile Kenar Çubuğu İçeriği Oluşturma

Kenar çubuğu içeriği, bir web sitesinin ihtiyaçlarına göre değişecektir. Ancak, bir blog sitesinden bahsediyorsak, genellikle aşağıdaki kenar çubuğu içerik öğelerinin bazı kombinasyonlarını bulacaksınız:

• Yazar Bilgisi (isim, resim, biyografi)
• Sosyal medya takip butonları
• E-posta kaydı
• Ürünlere ve/veya hizmetlere bağlantılar
• Reklamlar
• Kategoriler
• Son/Popüler gönderiler

Bu öğeleri Divi'de oluşturmak, Divi Modüllerinin bir kombinasyonu kullanılarak yapılabilir. Bu örnek için, Kenar Çubuğu İçeriğimizi oluşturmak için aşağıdaki Divi Modüllerini ekleyeceğiz.

1. Arama Modülü – Bu, arama formu görevi görecektir.
2. E-posta Tercih Modülü – Bu, e-posta tercih formu olarak hizmet edecektir.
3. Metin Modülü – Bu, Sosyal Medya Takip butonlarının başlığı olacaktır.
4. Sosyal Medya Takip Modülü – Bu, sosyal medya takip butonlarını gösterecektir.
5. Metin Modülü (bg resimli) – Bu, kenar çubuğu için örnek bir Reklam görevi görecektir.
6. Blurb Module (yazar içerikli) – Bu, kenar çubuğunun Yazar Bilgisi alanı olarak hizmet edecektir.
7. Metin Modülü – Bu, altındaki blog modülü için bir başlık görevi görecektir.
8. Blog Modülü – Bu, kenar çubuğunda yeni/özellikli gönderi içeriği olarak hizmet edecektir.

Kenar Çubuğu Modülünü Kullanarak WordPress Widget'larını Çekme

Henüz aşina değilseniz, Divi'de widget alanı içeriğini (veya widget'ları) Divi Kenar Çubuğu alanınıza çekmenize olanak tanıyan bir kenar çubuğu modülü vardır. Aslında, bu şablon, üzerinde çalıştığımız satırın hemen altındaki satırda zaten kenar çubuğu widget'ını kullanıyor.

Kenar çubuğu modülünü satırdan sürükleyin ve e-posta tercih modülünün hemen altına yerleştirin.

Ardından kenar çubuğu modülü ayarlarını açın. WordPress'te varsayılan kurulumunuz varsa, modülün aşağıdaki gibi görünmesi gereken kenar çubuğu widget alanını çektiğini göreceksiniz.

Birden Çok Widget Alanı Kullanma

Kenar Çubuğu pencere öğesi alanında birden çok pencere öğesi bulunduğundan, şu anda "Kenar Çubuğu" pencere öğesi alanı birden çok pencere öğesi görüntülüyor. Ancak, tek bir pencere öğesi içeren birden çok pencere öğesi alanı kullanarak Divi'nizin kenar çubuğu tasarımı üzerinde daha fazla kontrol sahibi olabilirsiniz. Birden çok widget alanı kullanmak, widget'larınızın tasarımı ve mobil cihazlarda widget'ların görünürlüğü üzerinde size daha fazla kontrol sağlayacaktır.

Birden çok widget oluşturmak için yeni bir sekme açın ve WordPress Panosuna gidin. Görünüm > Widget'lar'a gidin.

Bir ad girerek ve Oluştur düğmesine tıklayarak yeni bir Widget Alanı oluşturun. Bu widget alanı, Kategoriler widget'ını eklediğimiz yer olacağından, alana “Kategoriler” adını verelim. Widget alanını görmek için sayfayı yenileyin. Ardından Kategoriler pencere aracını Kategoriler Pencere Öğesi Alanına sürükleyin.

“Arşivler” adlı yeni bir pencere öğesi alanı oluşturmak için işlemi tekrarlayın. Ardından Arşivler Pencere Öğesini Arşivler pencere öğesi alanına sürükleyin.

Kenar çubuğu düzeninizle Kategori Sayfaları Şablonuna geri dönün ve Kategoriler pencere öğesi alanını görüntülemek için Kenar Çubuğu Modülü içeriğini güncelleyin.

Kenar çubuğu modülünü çoğaltın (tasarımı korumak için)

Arşivler Widget Alanı'nı çekmek için yinelenen kenar çubuğu modülünü güncelleyin.

Kenar Çubuğu Modülleri Arasındaki Boşluğu Kontrol Etmek

Şu anda kenar çubuğunu içeren Satır, 2'lik bir oluk genişliği değerine sahiptir. Bu, kenar çubuğunun içindeki her modül arasında varsayılan alt kenar boşluğu/boşluk olacağı anlamına gelir. Bu boşluk üzerinde daha fazla kontrol elde etmek için, kenar çubuğu sütunundaki tüm modülün alt kenar boşluğunu silebiliriz. Bunu yapmak için arama modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Alt Kenar Boşluğu: 0px (masaüstü), 15px (tablet)

Ardından, kenar boşluğu seçeneğindeki Diğer Ayarlar simgesine (veya sağ tıklama menüsü) tıklayın. Ardından “Marjı Genişlet”i seçin.

Stilleri Genişlet Modülünde, “Bu Sütun”da kenar boşluğunu “Tüm Modüller”e genişletme seçeneklerini güncelleyin.

Daha sonra bölücü modülleri kullanarak modüller arasına boşluk ekleyebiliriz.

Kenar Çubuğunu Mobil Cihazda Optimize Etme

Mobilde Kenar Çubuğunu Gizleme

Bazen, kenar çubuğunu mobil cihazlarda tamamen gizlemek isteyebilirsiniz. Bunu yapmak için, tablet ve telefonda kenar çubuğunu içeren sütunun görünürlüğünü devre dışı bırakmanız gerekir.

Satır ayarlarını açın ve kenar çubuğu için belirlenen sütunun ayarlarını açın. Ardından görünürlüğü aşağıdaki gibi güncelleyin:

• Devre Dışı Bırakma Açık: Tablet, Telefon

Bu, tüm kenar çubuğunu tablet ve mobil ekranda gizleyecektir.

Mobil Cihazda Kenar Çubuğu İçeriğinin Bazılarını Gizleme

Masaüstünde, kenar çubuğu içeriğinin çoğunu (veya tamamını) içerikten çok fazla dikkat dağıtmadan tutmak için yeriniz olabilir. Ancak mobilde, kullanıcının görmekle çok az ilgilenebileceği birçok kenar çubuğu içeriğini kaydırması gerekir. Bu nedenle, Divi Tema Oluşturucu'da kenar çubuğunuzu oluştururken, mobil ekranda bazı kenar çubuğu öğelerini devre dışı bırakmak için görünürlük seçeneklerinden yararlanın. Ayrıca, kenar çubuğu içeriği için WordPress widget'ları kullanıyorsanız, belirli widget'ları mobilde de tasarlamaya ve gizlemeye yardımcı olacak birden çok widget alanı oluşturun.

Modülleri mobil cihazlarda gizlemek için tel kafes görünüm modülünü açın, ardından tablet ve telefonda gizlemek/devre dışı bırakmak istediğiniz tüm modülleri seçmek için Divi'nin çoklu seçim özelliğini kullanın. Ardından, seçilen modüllerden birinin ayarlarını açın ve aşağıdakileri güncelleyin:

• Devre Dışı Bırak: Telefon, Tablet

Bu çizimde, tablet ve telefon ekranındaki iki kenar çubuğu modülü (kategorileri ve arşiv widget'larını içeren) ve metin modülü (Reklamı içeren) dışındaki tüm modülleri (bölücüler dahil) gizledik. Başka bir deyişle, mobil cihazlarda yalnızca kategoriler, arşivler ve reklam gösterilecektir.

Sonuçları Bir Blog Sayfasında Önizleme

Canlı sayfada sonuçları görmeden önce sitenin blog sayfasına atayalım. Bunu yapmak için şablonun üzerindeki dişli simgesine tıklayın, listeden Blog'u seçin ve kaydedin.

Görünüm > Okuma altında bir gönderiler sayfanızın seçili olduğundan emin olun.

Sonuçlar

İşte masaüstü kenar çubuğu ile mobil kenar çubuğu arasındaki fark. Mobil kenar çubuğunun nasıl ders içeriğine sahip olduğuna dikkat edin.

Mobilde Yinelenen Kenar Çubuğu ve Alt Bilgi İçeriğinden Kaçınma

Masaüstünde, kenar çubuğunuza ve altbilginize yinelenen içerik eklemekten kurtulabilirsiniz. Aslında bu, dönüşümleri artırmanın iyi bir yoludur. Örneğin, masaüstünde, bu yanı sıra yazının sonunda yazının içeriği okurken kullanıcıların e-posta optin görebilmesi için kenar çubuğunun üst kısmında ve altbilgi içindeki modül optin bir e-posta dahil etmek mantıklı. Ancak, mobil cihazlarda bir kenar çubuğu düzeni yoktur. Her şey bir sütunda (belki iki) görüntülenir. Sağ kenar çubukları yazı/sayfa içeriğinin altında ve sol kenar çubukları yazı/sayfa içeriğinin üstünde yığılır. Bu nedenle, eğer bir kenar çubuğu e-posta tercih modülü yazı/sayfa içeriğinin altına yığılırsa, kullanıcı birden fazla e-posta tercih modülü (biri kenar çubuğunda ve biri altbilgide) arasında gezinebilir. Ayrıca, sağ kenar çubuğunun altında ve altbilginin üst kısmında bir e-posta seçeneği varsa, kullanıcı mobil cihazlarda ardışık iki e-posta seçeneği arasında gezinecektir.

Mobilde İçeriği En Aza İndirmek için Modüllerdeki Öğeleri Gizleme

Tüm bir modülü mobilde gizlemenin gerekli olmadığına karar verebilirsiniz. Bunun yerine, yalnızca mobil ekranda belirli öğeleri gizleyerek modül içeriğini en aza indirebilirsiniz.

Örneğin, masaüstü kenar çubuğunda öne çıkan görseli ve öne çıkan gönderilerin alıntılarını göstermek isteyebilirsiniz. Ancak mobilde, içeriğin küçültülmüş bir sürümünü oluşturmak için öne çıkan görseli ve alıntıyı gizleyebilirsiniz.

Kenar Çubuğu İçeriğini Duyarlı Yapma

Tüm kenar çubuğu içeriğini mobil ekranda tutmaya karar verebilirsiniz. Neden olmasın? Kullanıcıların takdir edeceğini bildiğiniz değerli bilgileriniz varsa, elbette saklayın. Ancak, kenar çubuğu içeriğinin duyarlı olduğundan emin olmak için adımlar atmak isteyeceksiniz. Yani, daha küçük ekranlara sığdırmak için öğelerin boyutunu ve aralığını ayarlamak isteyeceksiniz. Bu, sayfanın kaydırma mesafesini kısaltacak ve içeriğin okunmasını kolaylaştıracaktır.

Mobilde Metin Boyutunu Ayarla

Dikey aralığı en aza indirmenin ve mobil cihazlarda okunabilirliği artırmanın kolay bir yolu, kenar çubuğundaki modül içeriğinin metin boyutunu ayarlamaktır. Örneğin, başlık metnini masaüstünde 24 pikselden mobilde 14 piksele ayarlayabilirsiniz.

Mobilde Aralığı/Bölücüleri Ayarlayın

Bu örnekte, alan yaratmak için modüller arasına ayırıcılar ekledik. Ancak, bu bölücülerin boşluklarını mobil cihazlarda ayarlamak için Divi's Divider ayarlarını kullanabiliriz. Bu, kaydırma sırasında boşa harcanan alanı azaltacaktır.

Örneğin, Bölücünün üst ve alt kenar boşluğunu tablet ve telefonda 30 pikselden 15 piksele değiştirebilirsiniz.

Mobil Cihazda Kenar Çubuğunun Yığın Sırasını Değiştirme

İstifleme düzeni, kenar çubuklarında yaygın bir sorundur. Bu özellikle sol kenar çubukları için geçerlidir. Daha önce de belirttiğim gibi, sağ kenar çubukları yazı/sayfa içeriğinin altında (veya sonrasında) ve sol kenar çubukları yazı/sayfa içeriğinin üstünde (veya öncesinde) yığılır. Bu, mobil cihazlarda sol kenar çubuğu olan bir sayfayı görüntülediğinizde, kullanıcının göreceği ilk şey, yazının/sayfanın ana içeriği yerine kenar çubuğu içeriğidir. Bu UX için iyi değil. Bunu düzeltmek için, kenar çubuğunu tamamen gizleyebilir veya yığınlama sırasını, mobil cihazlarda sol kenar çubuğu yazı/sayfa içeriğinin altına düşecek şekilde değiştirebilirsiniz.

Bir sol kenar çubuğunun yığın sırasını, mobil cihazlarda sayfa içeriğinin altında (veya sonrasında) yığınlanacak şekilde değiştirmek için, kenar çubuğu düzenini içeren satırın satır ayarlarını açın. Ardından aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Ardından, kenar çubuğu olarak belirlenen sütunun sütun ayarlarını açın ve Ana Öğe Tablet ekranına aşağıdaki özel CSS'yi ekleyin:

order: 2;

Tahmin etmediyseniz, bu küçük snippet, sırayı varsayılan değerden (“1”) “2” değerine değiştirir, bu da tüm sütunun/kenar çubuğunun ana içeriği içeren sütunun altında/sonrasında yığılmasına neden olur.

Son düşünceler

Kenar çubukları, bir sayfanın ana içeriğiyle etkileşime girerken yardımcı ikincil içerik sağlayan kullanıcılar için tanıdık bir alan olmaya devam ediyor. Ancak, mobil cihazlarda aynı kenar çubuğu içeriği dikkatinizi dağıtabilir. Umarım bu gönderi, tabletlerde ve telefonlarda kenar çubuklarınıza hak ettikleri ilgiyi göstermeniz için size ilham vermiştir. Bu, kenar çubuğunu tamamen gizlemeniz, yalnızca bazı kenar çubuğu içeriğini göstermeniz veya mevcut içeriği özellikle mobil görüntüleme için optimize etmeniz anlamına gelebilir.

Bu öğreticide şablon için oluşturulan kenar çubuğu, 3 numaralı tema oluşturucu düzen paketinde bulunan mevcut tasarım öğeleri kullanılarak tasarlanmıştır. Kenar çubuklu bu şablonun tasarımını beğendiyseniz, daha yakından bakmak için yukarıdan indirmekten çekinmeyin.

Daha fazla bilgi için Divi Theme Builder ile kenar çubuklarını kullanma kılavuzuna bakın.

Yorumlarda sizden haber bekliyorum.

Şerefe!