Aklınızda Tutmanız Gereken 7 Divi UX En İyi Uygulaması

Sanırım hepimiz Divi'nin çok yönlü olduğu konusunda hemfikir olabiliriz. Oluşturduğunuz herhangi bir web sitesini özelleştirmek ve kişiselleştirmek için pek çok olasılık var. İş verimliliğinizi artırmak istiyorsanız, bu sizin için ideal bir gönderi olabilir. Aşina olabileceğiniz veya olmayabileceğiniz en iyi 7 Divi UX uygulamasını ele alacağız. Paylaşacağım 7 ipucu, kişisel olarak çok kullandığım ve Divi ile günlük olarak çalışırken yararlandığım bazı ipuçları.

Hadi hadi bakalım!

1. Mikro Animasyonları Kullanma

Aklınızda bulundurmak isteyebileceğiniz ilk Divi UX en iyi uygulaması, aşırı animasyonlar yerine mikro animasyonlar kullanmaktır. Eskiden bir web sitesi ne kadar çok animasyona sahipse, halka o kadar 'daha özelleştirilmiş' veya 'gelişmiş' görünüyordu. Ancak, o zamanlar bitti. Gerçekten süslü görünmenin yanı sıra, aşırı animasyonlar, insanların web sitenizde sahip olduğu genel kullanıcı deneyimine katkıda bulunmaz. Aslında, ziyaretçilerin dikkatini gerçekten önemli olan şeylerden uzaklaştırabilirler. Bunun yerine mikro animasyonları seçmek, gitmenin yoludur. Divi'nin animasyon seçenekleri, eklediğiniz herhangi bir animasyonun hızını ve yoğunluğunu özelleştirmenize olanak tanır. Mikro animasyonlar oluşturmanın anahtarı, biraz daha uzun bir animasyon süresi ile düşük bir animasyon yoğunluğu kullanmaktır.

Bir Tasarım Öğesinin Tasarım Sekmesine Git

Seçtiğiniz herhangi bir tasarım öğesini açın ve gelişmiş sekmeye gidin. Orada animasyon seçeneklerini bulacaksınız.

Küçük Miktarlarda Animasyon Yoğunluğu Kullanın

Herhangi bir animasyon türünü seçebilir ve animasyon yoğunluğunu azaltabilirsiniz. Ne kadar aşağı inerseniz, animasyon o kadar incelikli hale gelir. Animasyon süresini artırarak, animasyonun gözden kaçmamasını sağlarsınız.

2. Duyarlılığı Manuel Olarak Optimize Etme

Divi'nin en büyük avantajlarından biri, oluşturduğunuz herhangi bir düzeni duyarlı hale getirmenin de kolay olmasıdır. Aslında işin çoğunu zaten sizin için Divi yapıyor. Oluşturduğunuz her şey, eklediğiniz andan itibaren duyarlı hale gelir. Bu noktadan sonra geriye kalan tek şey tasarım öğelerinde manuel olarak değişiklik yapmaktır. Bu, örneğin, paylaştığınız kopyanın metin boyutunu ekran boyutuna göre değiştirmeyi içerir.

Artık satırlar ve sütunlar, ekran boyutuna göre değişen, yerleşik olarak önceden tanımlanmış bir kenar boşluğu değerine sahiptir. Ancak bu varsayılan değerlerle gitmek zorunda değilsiniz. Örneğin, birçok popüler web sitesinin daha küçük ekran boyutlarında daha az sol ve sağ kenar boşluğu kullandığını buldum. Bu şekilde, yatay olarak daha fazla içerik sığdırabilirsiniz, bu da daha az dikey kaydırma gerektiği anlamına gelir.

Daha küçük ekran boyutlarında kullanılan varsayılan sol ve sağ kenar boşluğu 40 pikseldir. Daha küçük ekran boyutlarının tüm genişliğinden yararlanmak için bu değeri 25 piksel ile değiştirmenizi öneririm.

Süreci adım adım inceleyelim.

Satır Boyutlandırmasını Değiştir

Yapmanız gereken ilk şey, satırın boyutlandırma ayarlarında aşağıdaki seçenekleri etkinleştirerek bölümler, satırlar ve modüller arasındaki tüm boşluğu kaldırmaktır:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Bölüm VEYA Satır Dolgusu Ekle

Şimdi, bölüm ve satır arasında hala yeterli boşluk olmasını istiyoruz. Üzerinde çalıştığınız satıra veya bölüme sol ve sağ özel dolgu eklemek isteyip istemediğinizi seçebilirsiniz. Satıra eklenmesi, bölümdeki diğer satırları etkilemez. Ancak diğer yandan, onu bölümlere uygulamak, kaç satır eklerseniz ekleyin, bu kenar boşluklarının tüm bölüm boyunca aynı kalmasını sağlayacaktır.

• Sol Dolgu: 23vw (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sağ Doldurma: 23vw (Masaüstü), 30px (Tablet), 25px (Telefon)

Sütun Dolgusu Ekle

Sütunlar ve modüller arasındaki boşluk da önemlidir. Bu değerleri farklı ekran boyutlarına göre özelleştirebilirsiniz.

• Sütun 1 Sağ Dolgu: 1vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sütun 2 Sol Dolgu: 1vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sütun 2 Sağ Doldurma: 1vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sütun 3 Sol Dolgu: 1vw (Masaüstü), 0vw (Tablet ve Telefon)

Metin Boyutlarını Azalt

Daha küçük ekran boyutlarında elde ettiğiniz yatay genişliği %100 kullanmak ister misiniz? Gövde metni boyutu için 13 piksel, bir dizüstü bilgisayar açısından küçük görünse de, genellikle bir mobil cihaz için fazlasıyla yeterlidir. Yukarıdaki adımlarla birlikte cep telefonunuzdan 13 piksellik bir gövde metni boyutunu görüntülemeyi deneyin; neden bahsettiğimi göreceksiniz!

3. Piksel Yerine Görüntü Alanı Birimlerini Kullanma

Bu, önceki adımda da yaptığımız şeylerden biridir. Web sitenizin tüm masaüstü ekran boyutlarında yanıt vermeye devam etmesini sağlamak için piksel yerine görüntü alanı birimleri kullanmanız önerilir. Bu, 27" masaüstü monitörlerde bile web sitenizin harika ve tam olarak tasarladığınız şekilde görünmesini sağlayacaktır.

Öte yandan, daha küçük ekran boyutları, 15 inç ve 27 inç masaüstü ekranı kadar farklı olma eğiliminde değildir. Dikey örtüşmeler oluştururken görüntü alanı birimlerinin kullanılmasına yardımcı olabilir, ancak sol ve sağ dolgu/kenar boşluğu için piksellerle yapıştırmanın herhangi bir zararı olmaz.

4. Metin Yönlendirme Stilini Genişletme

İnsanların bilinçaltında bile olsa web sitenizde çabucak fark edeceği şeylerden biri, oluşturduğunuz tasarımda ne kadar tutarlı olduğunuzdur. Bu, sayfalarınız boyunca kullandığınız metin yönlendirmesini içerir, ancak bununla sınırlı değildir. Divi'nin en iyi UX uygulamalarından biri, metin yönünü kontrol ederek bir tasarımı bitirmektir. İyi düşünülmüş ve oynanmışsa, bir sayfada farklı metin yönlerini birleştirebilirsiniz. Ancak, belirli bir bölümde farklı metin yönelimlerini birleştirdiğinizde bu daha da zorlaşır. En iyi senaryo; sayfanız boyunca bir metin yönünü korursunuz. Ancak daha fazla deneme yapmak istiyorsanız, bölüm başına en azından bir tür metin yönlendirmesi tutmaya çalışın. Bunu, tüm farklı tasarım öğelerine bir göz atarak yapabilir veya Divi'nin işi sizin için yapacak verimlilik özelliklerinden birini kullanabilirsiniz.

Yalnızca birkaç adımda, sayfanızın veya bölümünüzün tamamında aynı metin yönünü ve tutarlılığını kullandığınızdan emin olabilirsiniz.

Hadi o adımlardan geçelim.

Metin İçeren Herhangi Bir Modülü Açın

Sayfanızda metin içeren herhangi bir modülü açın ve metin ayarlarına gidin.

Sağ Tık Metin Yönlendirme Seçeneği

Metin ayarlarında bulabileceğiniz Metin Yönü seçeneğine sağ tıklayın ve 'Stilleri Genişlet' seçeneğini seçin.

Metin Yönlendirmesini Bölüm veya Tüm Sayfa Boyunca Genişletin

Artık, sayfanız boyunca metin yönlendirmesinin ne kadar tutarlı olmasını istediğinize bağlı olarak, seçtiğiniz metin yönlendirmesini tüm mizanpaj veya belirli bir bölüm boyunca genişletmeyi seçebilirsiniz.

5. Görsel Oluşturucu ve Tel Kafes Modu Arasında Geçiş Yapma

Divi's Visual Builder ile ilgili harika şeylerden biri, arka uçta veya ön uçta bir şeyi düzenlemek arasında seçim yapmak zorunda bile kalmamanızdır. Her ikisi arasında geçiş yapmak, kelimenin tam anlamıyla bir saniyeden az sürer. Her ikisini de birleştirirseniz, en iyi üretkenlik ve genel bakış seviyesini elde edebileceğiniz kanaatindeyim. Özellikle mizanpajınızda birden fazla çakışmayla uğraşıyorsanız, tel kafes moduna geçmek, değişiklikleri hızlı bir şekilde yapmanıza yardımcı olabilir. Veya belirli bir tasarım öğesini sayfanın başka bir yerine sürükleyip bırakmak istiyorsanız, tel kafes moduna geçerek ve o belirli öğeyi sonsuz kaydırmaya gerek kalmadan sürükleyerek bunu kolaylaştırabilirsiniz.

Bir tasarım öğesinin kipini açabileceğinizi ve kipi açıkken Görsel Oluşturucu ve Tel Çerçeve Modu arasında geçiş yapabileceğinizi biliyor muydunuz? Bu, tasarımınızın arka ucunda değişiklik yapmanıza ve istediğiniz zaman yeni tasarım ayarlarınızın yerine oturmasını izlemenize olanak tanır.

6. Düzeni Doğrudan Sayfada İçe/Dışa Aktarın

Şimdiye kadar hepimiz önceden hazırlanmış düzenlere, kaydedilmiş düzenlere ve genel olarak Divi Kütüphanesine alıştık. Ancak, yerel bir ana bilgisayarda belirli bir sayfa üzerinde çalıştığınızı ve tamamlandıktan sonra, aşağıdakilerle uğraşmadan canlı bir web sitesine yüklemek istediğinizi varsayalım:

• Düzeni Divi Kitaplığınıza kaydetme
• Divi Kitaplığınıza gitme ve JSON dosyasını dışa aktarma
• Canlı web sitenizin Divi kitaplığına gitme
• JSON dosyasını yükleme
• Canlı web sitenizin sayfasına gitme
• Kaydedilmiş düzenlerinizden JSON dosyasını yükleme

Ardından, sayfanızda bulunan içe/dışa aktarma seçeneğini kullanabilirsiniz. Bu, Divi Kitaplığına hiç erişmenize gerek kalmadan bir JSON dosyası oluşturmanıza olanak tanır.

Düzeni dışa aktardığınız gibi, düzeni de yeni sayfanıza aktarabilirsiniz. Ancak bu yaklaşımı seçtiğinizde, düzeni canlı web sitenizdeki Divi Kitaplığınıza aktaramayacağınızı bilin. Yalnızca doğrudan bir sayfaya.

7. Perspektifi Korumak İçin 'Uzaklaştır' Seçeneğini Düzenli Olarak Kullanma

Bu muhtemelen benim en sevdiğim Divi UX özelliklerinden biridir. Eminim hepsini daha önce yaptık; yaptığımız bir sayfanın sonucunu görmek için yeni bir normal sekme veya gizli pencere açın. Ardından, bir Chrome uzantısı veya Firefox eklentisi kullanarak tüm sayfanın bir baskı ekranı alındı. Tüm bunlar, üzerinde çalıştığınız düzen hakkında kendinize yeni bir görünüm kazandırmak ve her şeyin genel sayfa yapısına uyup uymadığını görmek için.

Bunu ara sıra yapmanızı tavsiye etsem de, kısa bir süre içinde birden çok kez yapmanız gerekmeyecek. Bunun yerine, Visual Builder'ınızda tam orada bulunan uzaklaştırma seçeneğini kullanın. Bu size sadece aradığınız bakış açısını kazandırmakla kalmayacak, aynı zamanda sayfadan ayrılmak zorunda kalmadan hızlı değişiklikler yapmanıza da yardımcı olacaktır.

Son düşünceler

Bu gönderide, Divi ile web siteleri oluştururken üretkenliği artırmanıza yardımcı olacak 7 farklı Divi en iyi uygulamasını gösterdik. Bu ipuçları, herhangi bir web sitesi oluştururken kesinlikle kullanışlı olacaktır! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Öne Çıkan Görsel aurielaki / Shutterstock.com