İyi Bir Divi Düzen Paketi Yapan Nedir?

Haftalık ÜCRETSİZ düzen paketlerimiz Divi Tasarım Girişimimizin büyük bir parçası oldu ve şimdiye kadar büyük bir başarı elde ettiler. Divi düzen paketleri, Divi topluluğumuz için harika bir varlık haline geliyor! Bu girişim için nihai hedefimiz sizi (Divi Nation) web'deki en güçlü topluluk yapmaktır.

Tasarım ekibimizden size ücretsiz yerleşim paketleri sunmanın yanı sıra, iyi bir Divi yerleşim paketini neyin oluşturduğunu anlamanıza yardımcı olmak ve topluluğumuz için harika düzenler oluşturma bilgisiyle sizi daha da güçlendirmek istiyoruz. Bir tüketici olarak iyi bir yerleşim paketinin iç işleyişini bilmek de yararlıdır, böylece ne arayacağınızı ve yerleşim paketinden en iyi şekilde nasıl yararlanacağınızı bilirsiniz.

Bu yazıda, mizanpaj paketleri oluşturmak için bazı en iyi uygulama kılavuzları ve ayrıca mizanpaj paketlerinizi başka bir düzeye taşımanıza yardımcı olacak birkaç ipucu sunarak iyi bir Divi mizanpaj paketini neyin iyi yaptığına biraz ışık tutmayı umuyorum.

Peki, iyi bir Divi yerleşim paketi yapan nedir?

Bu düzenlerin yerine getirdiği en bariz ihtiyaç olan tasarımla başlayacağız.

Belirli Nişler için Gerçek Tasarım Sorunlarını Çözer

Harika tasarımın yapılması son derece zordur ve çok zaman alabilir. Dolayısıyla, tasarım geçmişi olmayan bir işletme sahibiyseniz, tasarımın çoğunu (hepsini değilse de) sizin için yapan bir düzen arıyorsunuz. Daha spesifik olarak, kullanıcıları için çalışan bir tasarım arıyorlar. Bir sanatçı için bir fotoğraf galerisi, bir diş hekimi için bir açılış sayfası veya bir bağlı kuruluş sitesi için bir blog olsun, düzen paketi belirli bir tüketici için tasarlanmalıdır. Web sitesi olmayan bir kişinin sahip olduğu en büyük sorun, bir web sitesine sahip olmaması (web'de herkes birkaç sayfa atabilir) değil, etkili bir web sitesine sahip olmamasıdır. Belirli bir niş için tasarlanmış bir düzen paketi bu sorunu çözer.

Ayrıca, düzenlerin genel tasarımının olağanüstü olduğundan emin olun. Renkler birlikte harika çalışmalıdır. Görseller anlamlı ve güzel olmalıdır. Boşluk boyunca tutarlı olmalıdır. Yazı tipi seçimi de çok büyük. Devam edebilirim ama konuyu dağıtacağım çünkü bence tasarımı profesyonellere bırakmak her zaman en iyisidir. Ancak, kararlıysanız ve kısıtlı bir bütçeniz varsa, sizi doğru yöne yönlendirmek için blogumuzdaki bu son makaleleri göz önünde bulundurun.

Her Web Sitesi Kurulumunda Odaklanılacak 3 Önemli Tasarım Alanı

Tasarımcı Olmayanlar İçin 3 Etkili Web Tasarım İlkesi

Tasarım İçin Daha İyi Bir Göze Sahip Olmayı Öğrenmenin 3 Yolu

Şimdi, harika tasarımın, yerleşim paketlerinin belki de en önemli yönü olduğunu belirledik, şimdi iyi bir yerleşim paketine nelerin dahil edilmesi gerektiği hakkında konuşalım.

Her Web Sitesinin İhtiyaç Duyduğu Genel Sayfaları İçerir

Düzen “paket” dediğimizde, birden fazla sayfa düzeninin dahil edildiğini kastediyoruz. İdeal olarak, bu, bir web sitesinin hemen ayağa kalkması ve çalışması için ihtiyaç duyacağı her sayfayı içerecektir. Aşağıdaki sayfa düzenleri tüm düzen paketlerine dahil edilmelidir:

• Ev
• Hakkında
• Temas
• Blog
• İniş

Bu 5 sayfanın çoğu web sitesine dahil edildiğini söylemek güvenlidir. Ancak bunların tüm web sitelerinin ihtiyaç duyduğu tek sayfa olduğunu varsaymak aptalca olur.

Düzen Nişlerine Göre Belirli Sayfalar Ekler

Düzen paketinizle hedeflediğiniz sitenin türüne bağlı olarak, o belirli site nişi için gerekli olan bir veya iki sayfa eklemeniz gerekebilir.

İşte birkaç örnek:

• E-Ticaret Düzeni için Ürün Sayfası
• Sanatçı Düzeni için Galeri Sayfası
• Restoran Düzeni için Menü Sayfası

Mizanpajın belirli niş sayfalara ihtiyacı olup olmadığına karar verirken aşağıdaki soruları sormayı düşünün:

1. Sayfa, 5 standart sayfa düzeni kullanılarak kolayca oluşturulabilir mi? Eğer öyleyse, devam etmek ve inşa etmeyi kullanıcıya bırakmak isteyebilirsiniz. Her olası sayfayı bir düzen paketine dahil etmeniz gerekmez. İyi tasarlanmışsa, iyi bir düzen paketi, kullanıcılara kolayca ihtiyaç duyabilecekleri ek sayfalar oluşturmak için mevcut düzenlerin parçalarını karıştırıp eşleştirme konusunda kolayca ilham verir.

2. Sayfa açıkça gerekli mi? Sağduyulu davranın ve bir şirketin çalışır durumda olması için neye ihtiyacı olduğu konusunda biraz araştırma yapın. Bir sayfa, bölgedeki çoğu web sitesi için bariz bir ihtiyaç olarak öne çıkıyorsa, devam edin ve sayfa düzeni paketine ekleyin.

İyi Bir Düzen Paketi Divi Dostudur

Karşı değil, Divi ile düzen iş var. Divi, her türlü web sitesi oluşturmak için güçlü bir araçtır, bu nedenle düzeniniz Divi'nin zaten iyi yaptığını en üst düzeye çıkarmalıdır!

Layout Divi'nizi kullanıcı dostu hale getirirken göz önünde bulundurmanız gereken bazı ipuçları:

1. Bir modüldeki metne stil vermek için satır içi CSS eklemeyin (mümkünse)

   Geçmişte bunu yapmak için daha büyük bir ihtiyaç olabilirdi, ama şimdi değil. Tasarım sekmesi ayarları, herhangi bir gövde metnini, başlık metnini (h1, h2, h3, vb.) ve içerik kutusundaki herhangi bir bağlantıyı hedefleyebilir ve biçimlendirebilir. Metne html yoluyla satır içi CSS eklemek, sorunu karıştıracaktır.

   Bir istisna, bir metin bloğuna veya başlığa birden çok renk eklemek olabilir. Bu durumda, şöyle bir şey yapmaya meyilli olabilirsiniz:

   <h2>This text is black and <span style="color: #a00000;">This text is red</span></h2>
   

   Böyle şeyler yapmaktan kaçınmaya çalışın. Kullanıcının kafasını karıştıracak veya daha da kötüsü, onları nasıl kopyalayacakları hakkında hiçbir fikirleri olmayan bir özelleştirmeyle tanıştıracaktır. Bunun yerine, içeriğinizi farklı kılmak için modül ayarlarında başka bir yol düşünün. Bu seçeneklerle yaratıcı olmak için bolca yer var.

2. Mümkünse Özel Kod (Özel CSS, PHP veya Javascript) Eklemekten Kaçının.

   Mizanpajınızı diğerlerinden bir parça olarak ayarlamak için şişirilmiş özel CSS ve Javascript/PHP ekleme cazibesinden kaçının. Unutmayın, düzeninizi kullanmak isteyecek çok sayıda insan olacaktır. Yeni başlayanları toz içinde bırakmayın. Emin düzenleri kolayca özelleştirilebilir stil ve işlevselliği kontrol ettikleri ya da kendilerini özelleştirmek mümkün olmayacaktır ile kullanıcılara aşırı etkilemek için tasarım Görsel Builder ayarlarından yerine çalışırken inşa kullandığınızdan emin olun. Divi kullanıcıları, kod bilmek zorunda kalmadan sitelerini oluşturma üzerinde kontrol sahibi olmayı bekler.

3. Tema Seçeneklerinde javascript gibi özel kodlar kullanmaktan kaçının.

   Özel kod eklemeniz gerekiyorsa, mümkünse bunu düzen sayfasının bir parçası olarak bir kod modülüne eklemelisiniz. Bu, kodu bir sayfaya ayırmayı kolaylaştırır ve kullanıcı tarafından işlenmesi daha kolaydır.

4. Tema Özelleştiriciye veya Sayfa Ayarlarına Özel CSS Eklemeyin

   Evet, Tema Özelleştiriciyi ve Sayfa Ayarlarını dışa aktarabilirsiniz, ancak bu alanlara eklenen herhangi bir özel CSS, onunla birlikte dışa aktarılmaz.

   Özel CSS eklemeniz gerekiyorsa (ve zamanın %99'unda eklememelisiniz), seçenekleriniz şunlardır:

   Seçenek 1: Bunu , Genel Ayarlar altındaki Tema Seçenekleri altındaki Özel CSS'nize ekleyin ve ardından tema seçeneklerinizi dışa aktarın ve bu dosyayı düzen paketinize ekleyin. Ancak, bu tehlikelidir çünkü kullanıcınız tema seçeneklerini geçersiz kılmak istemeyebilir ve yanlışlıkla bunu yaparsa mutlu olmazlar.

   Seçenek 2: Stil vermek istediğiniz sayfadaki bir kod modülünün içine CSS'yi ekleyin. Bu, yukarıdakinden daha iyi bir seçenektir ancak ideal değildir, çünkü kullanıcı kodu özelleştirmede veya etkisini anlamada zorluk çekecektir.

   Seçenek 3 (önerilir): Her bölüm, satır ve modül içindeki ayarlarınızın Gelişmiş sekmesi altındaki özel CSS bloklarına ekleyin. Gerekirse CSS eklemek için en iyi seçenek budur.

Diğer Eklentiler için Aşamayı Ayarlıyor

Divi'nin bir web sitesi sunabileceği tüm harika ve güçlü araçlara rağmen, bazen bir üçüncü taraf eklentisine ihtiyaç duyulur. Bu nedenle Divi, bu harika WordPress eklentilerinin çoğunun Divi ile uyumlu olduğundan emin olmak için oluşturulmuştur. Bu nedenle, yerleşim paketlerini tasarlamak için kullanıldıkları siteyi tamamlamak için gereken tüm eklenti(ler) ile iyi bir şekilde entegre olacak şekilde hazırlamalısınız.

Eklenti entegrasyonu için düzeninizi hazırlamanın iki yolu:

1. Uygun Olduğunda Mağaza Modülünü önceden tasarlayın

   WooCommerce ile bir e-ticaret sitesi oluşturuyorsanız, kullanıcıların işleyen bir mağazaya veya ürün sayfasına ihtiyaç duyacağı açıktır, bu nedenle Divi'nin Mağaza Modülünü kullanarak bu sayfayı oluşturmak mantıklıdır. WooCommerce kuruluncaya ve ürünler eklenene kadar mağaza modülü görünmeyecek, ancak en azından kullanıcı için tasarım işini zaten yaptınız.

   WooCommerce ürünleri eklenmeden önce moda mağazası düzenimizde mağaza modülünün nasıl göründüğü aşağıda açıklanmıştır.

   

   Ancak mağaza modülünü önceden tasarlamak için zaman ayırdığımız için, ürünler eklenir eklenmez bu şekilde görünüyor.

   

2. Gelecekteki Entegrasyon için Eklenti Kısa Kodlarını Dahil Edin

   Çoğu insanın isteyeceği veya ihtiyaç duyacağı son derece yararlı bir şey eklemek için üçüncü taraf bir eklentiden veya kısa koddan yardıma ihtiyaç duyduğunuz zamanlar olabilir. Eklentiyi Divi ile entegre etme işini kullanıcıya bırakmak yerine, neden kullanıcı eklentiyi yüklediğinde etkin olacak modül, kısa kod veya snippet'i ekleyerek işlemi basitleştirmeyesiniz.

   

   Örneğin, bir e-ticaret yerleşim paketi oluşturduğunuzu varsayalım. Ödeme sürecini ve hesap bilgilerini işlemek için gerekli olacak woocommerce sayfalarını öngörerek, WooCommerce sayfalarınıza WooCommerce Kısa Kodlarını (WooCommerce Sayfaları için içerik oluşturmak için kullanılır) ekleyerek mizanpajınızı buna göre hazırlayabilirsiniz. Elbette, eklenti entegre edilmeden önce kısa kodlu sayfa düzenleri tam olarak çalışmayacaktır, ancak en azından kullanıcının üzerine inşa etmesi için aşamayı ayarlamışsınızdır.

   Aşağıda, belirli bir woocommerce sayfası için oluşturulmuş bir sayfa örneği verilmiştir.

   

   Gördüğünüz tüm içerik (başlık dışında) bir kısa kodla oluşturulur. Ancak Divi, modül ayarlarını kullanarak kısa kod tarafından oluşturulan metnin belirli öğelerine stil verebilir. Devam edin ve bu kısa kod içeriğini önceden özelleştirin, böylece kullanıcı woocommerce yüklediğinde, kısa kod oluşturulan içeriği otomatik olarak stilize eder.

   Ve WooCommerce, içeriği görüntülemek için kısa kodlar kullanan tek eklenti değil. Bu kısa kodu, yerleşim paketinin geri kalanıyla eşleşen harika bir tasarımla çerçevelemek için bu fırsatları arayın.

Boyunca Optimize Edilmiş Görüntüler Kullanır

Düzeninizde harika görüntülere sahip olmak bir zorunluluktur. Ancak, ne kadar güzel olursa olsun, herhangi bir görüntü, yüklenmesi sonsuza kadar sürerse sahip olmaya değmez. İyi bir düzen, Divi düzen paketi için görüntüleri optimize etmek için zaman ayırmayı gerektirir.

Bu optimizasyon şunlardan oluşur…

1. Dosya formatı. Bu genellikle jpg (fotoğraflar için en iyisi) ve png formatı (simgeler, düğmeler ve saydam bir arka plana ihtiyaç duyan diğer grafik öğeler için en iyisi) arasında bir seçimdir.
2. Görüntü boyutları. Tüm görüntüler için 16:9 veya 4:3 oranını korumanızı öneririm. Ardından oturacağı sütunun maksimum genişliğini belirleyin ve boyutlarınızı buna göre ayarlayın.
3. Dosya boyutu. Bu, bir fotoğraf düzenleyiciyi (Photoshop veya Gimp) veya Tinypng gibi bir çevrimiçi yazılımı kullanarak görüntüdeki gereksiz şişkinliği küçültmek veya çıkarmak için kullanılır.

Paketin bir parçası olarak Yüksek Çözünürlüklü Görüntüler İçerir

Düzende zaten yayınlanmış olan fotoğrafları optimize etmeniz önemlidir. Bununla birlikte, kullanıcıya aynı fotoğrafları gelecekte kullanmak üzere istedikleri şekilde özelleştirme olanağı da vermek istiyorsunuz. Bu, mükemmel bir değer sağlar ve yerleşim paketinizi diğerlerinden ayırır. Bu görselleri diğer web sitelerinde (hatta e-ticaret sitelerinde) kısıtlama olmaksızın kullanmalarına izin vermek de harika bir fikir. Bu, lisans ücreti ödemeden veya fotoğrafçıya atıfta bulunmadan fotoğrafları kullanabilecekleri anlamına gelir.

Bu görüntüleri paketteki düzenlerinizin yanında ayrı bir klasöre eklemekten çekinmeyin.

Uygun İthalat İçin Uygun Bir Şekilde İhraç Edilir

Her düzen paketi, kolay erişim için tek bir klasörde düzgün şekilde dışa aktarılan dosyaları içermelidir.

Gelecekteki kullanıcı içe aktarmaları için düzenleri düzgün bir şekilde dışa aktarma işlemi aşağıdaki adımları içerir:

1. Her düzen sayfasını yeni bir düzen olarak Divi Kitaplığına kaydedin.
2. Her bir düzen sayfası için ayrı bir json dosyası oluşturmak için her düzeni Divi Kitaplığından ayrı ayrı dışa aktarın.

   

3. Tüm düzenleri içeren tek bir dosya oluşturmak için tüm düzenleri Divi Kitaplığından toplu olarak dışa aktarın.

   

4. Yeni bir klasör oluşturun ve tek tek düzen sayfası json dosyalarınızı ve tüm düzen sayfalarını içeren tek json dosyanızı klasöre ekleyin.

   

5. Klasörü bir zip dosyasına sıkıştırın, böylece web sitenizden kullanıcıya kolayca indirilebilir.

Düzenleri yeni bir web sitesine Düzgün şekilde Aktarma Süreci aşağıdaki adımları içerir:

1. Düzen paketi zip dosyasını açın ve klasörü açın.
2. Divi Kitaplığına gidin ve içe/dışa aktar düğmesine tıklayın.
3. İçe Aktar'ı seçin
4. Tüm düzenleri içeren tek json dosyasını bulun ve içe aktar'ı tıklayın.

Düzen paketi içe ve dışa aktarma işlemlerinin en iyi şekilde nasıl yapılacağı hakkında daha fazla ayrıntı için, kendi Divi kitaplığı öğelerinizi oluşturmaya, dışa aktarmaya ve paylaşmaya yönelik bu ipuçlarını okuyun.

İyice Test Edildi

Bunu gözden kaçırmayın. İyi bir Divi Düzen Paketi, başkalarıyla paylaşmadan (veya satmadan) önce test edilmelidir. Düzeninizi dünyaya sunmadan önce göz önünde bulundurmanız gereken yararlı bir kontrol listesi (en iyi uygulama için, bu testleri yeni bir WordPress ve Divi kurulumunda yapmayı deneyin):

Genel Test

• Düzenler için optimize edilmiş resimler kullandığınızdan emin olun.
• Herhangi bir sorun olup olmadığını görmek için sayfaların her birinde performans testleri yapmak isteyebilirsiniz (büyük resimlerin sayfa yükleme süresini yavaşlatması gibi).
• Göze batan yazım hatalarını kontrol edin. Kullanıcının mizanpajları kullandıktan sonra içeriği güncellemesi gerekeceği doğrudur, ancak sayfa başlığındaki bir yazım hatası rahatsız edici olabilir.

İndirilen Dosya İçeriğini Kontrol Edin

• Tüm yerleşim dosyalarınızın yerleşim paketi klasörünüzde olduğundan emin olun.
• Her düzeni aynı anda içe aktaran bir "tümü" düzen dosyası eklediğinizden emin olun.
• Yüksek çözünürlüklü resimleriniz için ayrı bir klasör ekleyin.

Taşınabilirlik Sürecini Test Edin

• Paketinizdeki düzenlerin her birini ayrı bir Divi tema kitaplığına aktarın (farklı bir wordpress kurulumunda).
• Düzenlerin her biri için yeni bir sayfa oluşturun ve bölme oluşturucuyu kullanarak sayfaların her birine karşılık gelen düzeni ekleyin.
• Düzenlerin orijinal tasarıma benzediğinden ve hiçbir şeyin bozulmadığından emin olmak için sayfaları kontrol edin. (Bir şey bozulursa, ilk önce orijinal dosyayı tekrar dışa aktarır ve mizanpajın doğru sürümüne sahip olduğunuzdan emin olmak için tekrar içe aktarırdım.)
• Düzeniniz bir eklentiye bağlıysa, eklentiyi kurun ve yerleşimin doğru şekilde oluşturulup oluşturulmadığını kontrol edin.
• Kitaplığa yeni eklediğiniz paftaları silin ve “tüm” paftalar dosyasını kitaplığa aktarın.
• Ardından, düzenlerin iyi göründüğünden emin olmak için oluşturduğunuz sayfaların her birinde bu düzenleri test edin.

Düzenlerinizi Bir Sonraki Seviyeye Taşıyın

Düzen paketleri teknik olarak temalar olmasa da, Divi Teması ile kullanımlarını kolaylaştırarak düzen paketlerine değer katabilirsiniz. Kullanıcılar çabayı takdir edecek ve düzen paketleriniz başka bir mükemmellik düzeyine yükselecek. İşte sadece birkaç fikir.

Önceden Tasarlanmış Bölümleri, Satırları ve Modülleri ek kitaplık öğeleri olarak dahil edin, böylece kullanıcının bu öğelerle ek sayfalar oluşturması daha kolay olur.

Düzen paketinizi diğerlerinden ayırmanın iyi bir yolu, bir kullanıcının başka özel sayfalar oluşturmak için hangi bölümlere, satırlara veya modüllere ihtiyaç duyacağını düşünmek ve ardından bunları düzen paketine eklemektir. Bu öğelerden bazıları bir Fulwidth Başlık Modülü, içerik için bir metin modülü, bir düğmenin koyu ve açık bir sürümü veya bir harekete geçirici mesaj içerir. Bu küçük öğeleri eklemek için zaman ayırırsanız (yalnızca sayfa düzenleri yerine), kullanıcılarınızın işleri çok daha hızlı oluşturmasına olanak tanırsınız.

Tema Seçeneklerinde varsayılan renk paletini güncellemek için kullanılabilecek renk kodlu bir Renk Paleti ekleyin

Düzen paketlerinize ek değer katmanın bir başka yolu, kullanıcılara yeni sitede ayarlamalar yaparken kullanmaları için bir renk paleti vermektir. Bu, mizanpaj paketi klasöründeki renk kodlarıyla basit bir metin belgesi olabilir veya kolay başvuru ve çoğaltma için kullanılan tüm tasarım öğelerine sahip bir markalama mizanpaj sayfası bile tasarlayabilirsiniz.

Mizanpajınızı Divi'nin varsayılan vurgu rengini göz önünde bulundurarak tasarlayın.

Divi Temasını ve Düzen Paketlerini daha iyi birleştirmek için hala yer var. Genel vurgu rengini ayarlayarak hangi öğelerin değiştirilebileceğini göz önünde bulundurarak, düzeni oluştururken bu değişikliklere yer bırakabilirsiniz. Bu şekilde insanlar, bu öğelerin tasarımını sayfa sayfa değiştirmek yerine, site genelinde tasarımı değiştirmek için vurgu rengini değiştirme seçeneğine sahip olacaklar.

Bunlar aklıma gelen sadece üç fikir, ancak Düzen Paketlerine rekabetin ötesinde kalite katmanın birçok yolu olduğundan eminim.

Kapanışta

Umarım iyi (hatta harika) bir Divi Düzen Paketi yapan şey hakkında daha iyi bir fikriniz vardır. Bir şey olursa, umarım harika bir şey yaratmak için ilham alırsınız! Yeni düzen paketinizi yakında görmek için sabırsızlanıyorum.

O zamana kadar, yorumlarda ulaşmaktan çekinmeyin.

Şerefe!