ev borcu WordPress sitesi
Divi Web İçeriğinizi Optimize Etmek için 4 Düzen Tasarım İpuçları
Mizanpaj tasarımı, sayfanıza metin ve resim eklemek ve en iyisini ummak kadar basit değildir. Yıldız düzeni, görüntüleyenlerin ilgisini çekmenize ve onları içeriğinizin en önemli bölümlerine yönlendirmenize yardımcı olabilir. Neyse ki, tasarım sürecini kolaylaştırmak için uygulayabileceğiniz birçok strateji var.
Bu makalede, beyaz boşluk kullanmak ve önemli tasarım öğelerini tekrarlamak gibi web siteniz için dengeli bir düzen oluşturmaya yönelik dört ipucu sunacağız. Ayrıca, bazı unsurları hayata geçirmek için Divi'nin işlevselliğini nasıl kullanabileceğinizi de anlatacağız. Başlayalım!
Sayfa Düzeniniz Neden Önemli?
Sayfa düzeniniz, web sitenizden neredeyse anında ayrılan veya içeriğinizi okumak için etrafta dolaşan insanlar arasındaki fark olabilir. Özetle, doğru düzen ziyaretçileri çekebilir, onları en önemli içeriğe yönlendirebilir ve sitenizde kalmaya teşvik edebilir.
Tabii ki, insanlar zamanlarını sade bir şey yerine güzel tasarlanmış bir web sitesine bakarak geçirmeyi tercih ederler. Oldukça basit, çekici olmayan bir web sitesi, ziyaretçi etkileşimini kaybetmek için yeterlidir.
Web sitesi ziyaretçileri kazanmak bir şey olsa da, geldiklerinde belirli bir şekilde davranmalarını sağlamak tamamen başka bir şeydir. Sonuç olarak, en önemli içeriğinizin tüketilmesini ve Harekete Geçirici Mesajlarınızın (CTA'lar) takip edilmesini istiyorsunuz. Aslında, insan zihni aslında bir CTA bekler ve ister – bu yüzden tek yapmanız gereken okuyucuyu doğru düzen ile doğru yöne yönlendirmek.
Web İçeriğinizi Optimize Etmek için 4 Düzen Tasarım İpuçları
Bu makaledeki ipuçları, başlamanıza yardımcı olacak sayısız tasarım öğesini kapsayacak olsa da, düzen ilhamı bulmanıza yardımcı olacak çok sayıda web sitesi de var. Awwwards gibi siteler harika, yüksek kaliteli örnekler sergiliyor ve Pinterest bile bir ilham kaynağı olabilir. İpuçlarına gelince, bir göz atalım!
1. Bir Izgara Sistemi Kullanın
Web tasarımı bağlamında, bir ızgara, içeriğinizi düzenlemenize ve düzenlemenize yardımcı olmak için kılavuz görevi gören görünür veya hayali yatay ve dikey çizgiler kümesidir. Izgara sisteminizi çizerken, odak noktası kullanımı ve üçte bir kuralı gibi diğer tasarım tekniklerini de dahil edebilirsiniz.
İyi bir odak noktası, ister bir görüntünün parçası isterse bir metin bloğu olsun, okuyucunun dikkatini çekmeye hizmet etmelidir. Genellikle sayfanın ortasına veya tablonuzun orta bölümüne yerleştirilir.
Üçler kuralı, sayfayı dikey ve/veya yatay olarak üçe bölme kavramına dayanmaktadır. Ancak bu, ayrı içerik bölümlerinin üç sütunda görünmesi gerektiği anlamına gelmez ve bazıları iki sütuna yayılabilir. Örneğin, blogumuz gibi birçok web sayfasında, sağdaki üçte birlik kısmı alan bir kenar çubuğu bulunurken, ana metin sol ve ortadaki üçte birlik kısmı kapsar.
Divi Builder'ı kullanmak, bir öğe ızgarası oluşturmayı kolaylaştırır. Örneğin, üçte birler kuralını tam anlamıyla uygulamak için, her biri üç sütunlu üç satır oluşturabilirsiniz:
Bu ızgarayı oluşturmak için önce Divi Builder'a gidin ve Sütun(lar) Ekle'ye tıklayın :
Açılır pencerede üç sütun seçeneğini seçin:
Ardından, kopyala düğmesine iki kez tıklayın ve içeriğiniz için hazır olan üçe üç ızgaraya sahip olacaksınız:
Tabii ki, bu harika bir düzenin tek unsuru değil. Okuyucuyu nereye yönlendirdiğiniz de çok önemlidir.
2. İçeriğinizi 'Z Modeli' veya 'F Modeli'nde Yapılandırın
Görüntülediğiniz içeriğin türüne bağlı olarak, çoğu kişi web sayfalarını belirli bir şekilde okur. Isı haritalarını kullanan göz izleme çalışmaları, en yaygın modellerin F-kalıpları ve Z-biçimleri olduğunu göstermiştir. Okuyucuyu sayfanın en önemli alanlarına yönlendirmek için bu bilgiyi kendi yararınıza kullanabilirsiniz.
Bir okuyucu sitenizin üstünü soldan sağa taradığında, ardından sayfanıza yukarıdan aşağıya baktığında, bu bir F modelidir. Genellikle blog gönderileri gibi daha fazla metin ağırlıklı sayfalar için geçerlidir ve içeriğinizde alt başlıklar kullanmanın önemini gösterir.
Buna karşılık, sitenizin üstünü soldan sağa, çapraz olarak aşağıya ve sonra tekrar soldan sağa tarayan okuyucuların Z-biçiminde okuduğu söylenir. Daha basit sayfalar için, özellikle de CTA'sı olanlar için geçerlidir. Bu nedenle, genellikle CTA'nızı sayfanın sağ alt köşesine yerleştirmeniz önerilir. Tabii ki, sayfanızın altındaki diğer bilgiler de okuyucuyu CTA'yı tıklamaya ikna etmek için yeterli bilgiyi sunmalıdır. Quick Sprout ana sayfası iyi bir örnektir:
Logo ve gezinme menüsü sizi sayfanın en üstüne götürür. Daha sonra göz, sayfanın ortasındaki kalın metin ve yüz resmine çekilir ve bu, sizi satış metnini okumaya ikna eder. Son olarak, parlak beyaz URL çubuğu sizi ana içeriğin alt kısmından CTA düğmesine yönlendirir.
Divi'de modüler sistem, F-desenleri ve Z-desenleri oluşturmayı basitleştirir. Genel düzeninizi ve içeriğinizi oluşturmak için Divi Builder'da başlayabilir, ardından Visual Builder'ı kullanarak gerçek zamanlı olarak ince ayar yapabilirsiniz.
Tabii ki, CTA'nın kendisinin tıklanabilir olması da önemlidir. Divi CTA modülümüz, okuyucularınızı tıklamaya ikna etmeye yardımcı olabilir:
Bu modülde inanılmaz CTA'lar oluşturmak için neredeyse sonsuz seçeneğiniz var. Diğer seçeneklerin yanı sıra boyutları, yazı tiplerini ve renkleri kontrol edebilir ve hatta kalıcı olarak yerlerinde kalmaları için onları yapışkan hale getirebilirsiniz.
3. Önemli Tasarım Öğelerini Tekrar Edin
Öğelerin tekrarı, tasarımlarımıza genellikle düşünmeden eklediğimiz bir şeydir. Alt başlıklar için aynı yazı tipini ve boyutunu korumak veya bir parça boyunca aynı madde işareti stilini kullanmak, öğe tekrarının yaygın örnekleridir. Bununla birlikte, görüntülere, grafiklere, renklere, uzamsal ilişkilere ve aklınıza gelebilecek hemen hemen her tasarım bileşenine genişletilebilir.
Öğe tekrarı, düzeninize tutarlılık katar ve daha uyumlu ve çekici bir tasarım oluşturmak için ayrı bileşenleri birleştirir. Ayrıca okuyucunun sayfada en az kafa karışıklığı ile gezinmesine yardımcı olabilir. Örneğin, Buffer'ın ana sayfasını alın:
Bu, ekranın odak görüntüsü içinde tekrarlanan logoyu gösterir. Kağıt uçaklar ayrıca logoda yer alan kağıda benzer, tüm sayfanın anlamlı ve daha uyumlu görünmesini sağlar.
Divi'deki öğeleri çoğaltmak çok kolaydır. Divi Builder'da seçtiğiniz öğeye gidin ve öğeyi çoğaltmak için kopyala düğmesini tıklayın. Buradan, öğeyi sayfanızda başka bir yere sürükleyip bırakabilir ve orijinalinizi etkilemeden ince ayar yapabilirsiniz:
Benzer şekilde, sitenizde tutarlılık oluşturmak için gelecek için düzenleri kaydedebilirsiniz – biraz sonra bu konuda daha fazla bilgi vereceğiz.
4. Beyaz Alanı Uygun Şekilde Kullanın
Beyaz boşluk – alternatif olarak negatif boşluk olarak adlandırılır – bir sayfanın içerik tarafından işgal edilmeyen boş kısımlarıdır. Beyaz boşluk kullanımı genellikle göz ardı edilir. Pek çok tasarımcı, mümkün olduğunca fazla bilgi toplamaya çalışmayı cazip buluyor. Ancak, konu izleyici katılımını sürdürmek olduğunda, daha azının gerçekten daha fazla olabileceği ve beyaz alanın uygun şekilde kullanılmasının anahtar olduğu görülüyor.
Beyaz alanı uygun şekilde kullanmak için bazı ipuçları:
- Kopya çevresindeki kenar boşluklarını ayarlayın. Kenar boşluğu boyutunu artırmak, kopya bölümlerini ayırmaya yardımcı olabilir. Bu, sayfanın daha az dağınık görünmesini ve metnin okunmasını kolaylaştırır.
- Paragraflar arasına boşluk ekleyin. Paragraflar arasındaki boşluğu artırmak, metni bölebilir ve daha uzun makalelerin daha az korkutucu görünmesini sağlayabilir.
- Satır yüksekliğini ve harf aralığını ayarlayın. Metninizin mümkün olduğunca okunabilir olduğundan emin olmak için satırlar ve harfler arasındaki boşluğu ayarlayabilirsiniz.
- Odak noktanızı beyaz boşlukla çevreleyin. Görüntü veya başlık gibi bir odak noktasının etrafına eklenen beyaz boşluk, onu daha da öne çıkarabilir.
Gerçek dünyadan bir örnek için, Google ana sayfası diğerleri kadar iyi bir örnektir – aslında, işleri aşırıya kaçar:
Apple, çok sayıda beyaz alanla çevrili odak noktalarını (genellikle bir ürün resmi ve başlığı) kullanan başka bir şirkettir:
Divi, bölümleriniz, satırlarınız ve modülleriniz içindeki kenar boşluklarını ve dolguyu ayarlamanıza olanak sağlayarak tam olarak doğru miktarda beyaz alan oluşturmanıza yardımcı olabilir. Örneğin, bir satırı ayarlamak için, ihtiyacınız olan sayısız seçeneği görüntüleyen Menü düğmesine tıklayın:
Bir modülde metniniz olduğunda, genellikle satır yüksekliğini ve metin aralığını ayarlama seçeneği vardır. Örneğin, bir Metin modülünde Gelişmiş Tasarım Ayarları ekranına gidin ve özellikler arasında yükseklik ve boşluk seçeneklerine sahip olduğunuzu göreceksiniz:
Onları mutlu olana kadar buna göre ayarlayabilirsiniz. Değişikliklerinizin gerçek zamanlı olarak nasıl görüneceğini görmek için Visual Builder'ı kullanarak bu değişiklikleri yapmayı da seçebilirsiniz.
Son olarak, daha fazla boşluk için bir Bölücü modülü kullanabilirsiniz. Bu, sayfanın hemen hemen her yerinde ayrı modüller arasında bir satır veya biraz boşluk oluşturmanıza olanak tanır.
Divi, Mizanpaj Tasarımınızı Tutarlı Tutmanıza Nasıl Yardımcı Olabilir?
Mükemmel düzeni oluşturduktan sonra, muhtemelen sadece bir kez kullanmak istemeyeceksiniz. Düzeninizi kaydetmeniz, onu sitenizdeki birden çok sayfa için kullanabileceğiniz anlamına gelir. Bu yalnızca zamandan ve emekten tasarruf etmekle kalmaz, aynı zamanda sayfalarınızda bir birlik ve aşinalık duygusu yaratır, bu da okuyucunun deneyimine yardımcı olur.
Divi'de bunu yapmak kolaydır. Düzeninizden memnun kaldığınızda Divi Builder'ın sol üst köşesindeki Kitaplığa Kaydet'i seçin:
Açılır pencerede, yeni tasarımınız için kullanmak istediğiniz adı girin ve Kaydet'e basın :
Düzeninizi ileride kullanmak üzere almak için Divi Builder'da Kitaplıktan Yükle'yi seçin…
…ardından Kitaplıktan Ekle sekmesine gidin ve kullanmak istediğiniz düzeni seçin:
Düzenlerinizi düzenlemek için bunlara WordPress kontrol panelinizden erişebilirsiniz. Divi'yi seçin ve kayıtlı düzenlerinizin bir listesini görmek için Divi Kitaplığı'na tıklayın.
Çözüm
Düzen seçiminiz, sitenizin genel tasarımının oldukça önemli bir bileşenidir. Bununla birlikte, özellikle bir plan yapmadan dalarsanız, ciddi şekilde bunaltıcı bir görev olabilir.
Neyse ki, bu alan geniş çapta incelenmiştir ve üstün bir sonuç elde etmek için uygulayabileceğiniz birçok strateji vardır. Bu makale, web siteniz için mükemmel düzen tasarımını oluşturmanıza yardımcı olacak dört ipucu sağlamıştır. Bunları hızlıca tekrarlayalım:
- Bir ızgara sistemi kullanın.
- İçeriğinizi Z deseninde veya F modelinde yapılandırın.
- Önemli tasarım öğelerini tekrarlayın.
- Beyaz alanı uygun şekilde kullanın.
Sayfa düzeninizi optimize etmek için başka ipuçlarınız var mı? Aşağıdaki yorumlar bölümünde bize bildirin ve sohbeti takip edebilmek için abone olmayı unutmayın!
Atibodyphoto / Shutterstock.com'dan makale küçük resmi.