Sonraki Projeniz İçin Yeni Bir Divi Düzen Paketi Kullanmanın 10 Adımı

Elegant Themes Divi Design Initiative'in bir parçası olarak Kenny ve tasarım ekibi, her hafta yepyeni ÜCRETSİZ Divi düzen paketleri ile bizi şımartıyor. Düzen paketleri, her Pazartesi düzen paketini içeren blog gönderisinden indirilebilir. Birçoğunuz, normalde sizi harcayacağı zamanın çok küçük bir bölümünde yepyeni web siteleri oluşturmak için mizanpaj paketlerini kullandınız.

Bugünkü gönderide, bir sonraki projeniz için yeni bir Divi Düzen paketi kullanırken izlemeniz gereken 10 temel adım sunarak bu düzenlerden en iyi şekilde nasıl yararlanabileceğinizi göstereceğim. Bu düzenleri bir profesyonel gibi işlemek için pek bilinmeyen bazı ipuçlarını da ekledim.

Eğlence!

Not: Tüm adımlar gibi, bunlar da listelendikleri sırayla yapılmalıdır. Örneğin, önce varsayılan renk paletinizi ayarlamazsanız, varsayılan vurgu renginizi değiştirmeye gittiğinizde bu palet kullanılamaz.

Sonraki Projeniz İçin Yeni Bir Divi Düzen Paketi Kullanmanın 10 Adımı

Youtube Kanalımıza Abone Olun

#1 Düzenleri Önce Divi Kitaplığınıza aktarın

Divi Temanıza yeni düzenler eklemenin en iyi yolu, bunları önce Divi Kitaplığına aktarmaktır. Ardından, yeni bir sayfa oluştururken kitaplığınızdan yeni düzeni ekleyebilirsiniz.

Düzenleri web sitenize eklemeden önce, düzen paketini blog gönderisinden indirmeniz ve dosyayı açmanız gerekir.

WordPress Panonuzdan Divi > Divi Kitaplığı'na gidin ve sayfanın sol üst köşesindeki İçe ve Dışa Aktar düğmesini tıklayın. Açılan taşınabilirlik modunda, içe aktarma sekmesini seçin ve dosya seç'i tıklayın. Sıkıştırılmamış düzen paketi klasörünü bulun ve dosya adında “Tümü” olan json dosyasını seçin. Bu, her birini ayrı ayrı yapmak yerine tüm düzenleri kitaplığınıza bir kerede yükleyecektir. Örneğin moda düzeni paketini yüklemek istiyorsanız, düzen klasöründen Fashion_All.json adlı dosyayı seçersiniz. Ardından Divi Builder Düzenlerini İçe Aktar'a tıklayın.

#2 Yeni Sayfalara Düzen Ekleyin

Bu süreç oldukça basittir. WordPress Kontrol Panelinizden Sayfalar > Yeni Ekle'ye gidin. Oluşturmanız gereken sayfanın Başlığını girin. Divi Builder'ı kullanmak ve Visual Builder'ı dağıtmak için tıklayın. Sayfanın altındaki ayarlar menüsünü açın ve soldaki “Kütüphaneden Yükle” artı simgesine tıklayın. Açılan Kitaplıktan Yükle modunda, “Kitaplıktan Ekle” sekmesine tıklayın ve yeni düzeni yüklemek için listeden yeni düzeni seçin.

Her yeni sayfa için bu işlemi tekrarlayın, her birine yeni bir düzen ekleyin.

#3 Birincil menünüzü oluşturun

Bu yeni bir kurulumsa, bu yeni sayfaları üst başlıktaki birincil menü çubuğunuzda görmeye başlayacaksınız. Bunun nedeni, henüz oluşturulmuş bir birincil menünüz olmamasıdır, bu nedenle varsayılan olarak menünüz sitenize eklediğiniz tüm sayfalar ve gönderiler tarafından doldurulur.

Birincil menünüzü oluşturmak için WordPress panosuna gidin ve şunları yapın:

1. Görünüm > Menüler'e gidin.
2. Sayfanın üst kısmındaki "Yeni menü oluştur" bağlantısını seçin.
3. Bir menü adı girin.
4. Sayfalar altındaki sol geçişte menü öğelerinizi seçin.
5. Menüye Ekle'ye tıklayın
6. Menü öğelerinizi yerlerine sürükleyerek düzenleyin.
7. Sayfanın altındaki Ayarlar menüsü altında, görüntüleme konumu olarak “birincil menü”yü seçin.
8. Menüyü kaydet

#4 Varsayılan Renk Paletinizi Ayarlayın

Sık sık bu adımı atmayı unutuyorum ve her seferinde pişman oluyorum. Varsayılan renk paletinizi ayarlamak, Divi oluşturucuyu kullanarak renkleri düzenlemeyi gerçekten kolaylaştırır. Bir renk kodu bulmak veya geliştirici araçlarını kullanarak bir öğeyi incelemek veya göz damlası tarayıcı uzantımı kullanmak için başka bir modüle kaç kez geri dönmem gerektiğini söyleyemem. yeniden. Bunu kendine yapma!

WordPress Kontrol Panelinize gidip Divi > Tema Seçenekleri'ne giderek varsayılan renk paletini ayarlayabilirsiniz. Ve tam orada, genel sekmesinde listelenen seçeneği bulacaksınız. İhtiyacınız olan renkleri oraya ekleyin. Arka planı ve metni kolayca şekillendirmek için rengi beyaz (#ffffff) ve birkaç koyu renk (#333333 gibi veya koyu yazı tipi renginiz için ne ayarladıysanız) tutmak her zaman iyi bir fikirdir.

#5 Genel Vurgu Renginizi Ayarlayın

Muhtemelen yeni sitenizi özelleştirme sürecinizde Tema Özelleştiriciye giden yolu oldukça erken bulacaksınız. Bunu yaptığınızda, önce genel vurgu rengini değiştirmelisiniz.

Genel Vurgu Renginizi değiştirmek için Tema Özelleştirici'ye gidin ve Genel Ayarlar > Düzen Ayarları'na gidin ve alttaki Tema Vurgu Rengi seçeneğini bulun.

Tema Seçeneklerinizdeki varsayılan renk paletini güncellediğinizden, renk paletinde size sunulan yeni renklere dikkat edin.

Ardından, değiştirdikten sonra ayarlarınızı kaydedip yayınlayın ve sayfanızı yenileyin.

Güncellenen Tema Vurgu Rengi, yaklaşık 20 diğer öğeye otomatik olarak uygulanacaktır, bu nedenle önce bunu güncellemek önemlidir.

Otomatik olarak güncellenen öğelerden bazıları şunlardır:

Gövde Bağlantı Rengi
Widget Başlık Rengi
Widget Madde İşareti Rengi
Altbilgi Sosyal Simgeler Fareyle üzerine gelme rengi
Simgeler için varsayılan renk
Alt Bilgi Menüsü Etkin Bağlantı Rengi
İkincil menü arka plan rengi
İçeri Kaydır ve Tam Ekran Başlık Stili arka plan rengi
Mobil menü rengi için Hamburger Menü Simgesi
Birincil Menü Aktif Bağlantı Rengi
Açılır Menü Çizgi Rengi
İkincil Menü Arka Plan Rengi
İkincil Açılır Menü Arka Plan Rengi
İkincil Menü Arka Plan Rengi
Aktif Birincil Menü Bağlantı Rengi
Alt Bilgi Menüsü Etkin Bağlantı Rengi

Değişikliklerin bu öğeler üzerinde hemen etkili olduğunu görmüyorsanız, kaydedip özelleştiriciden çıkmanız, sayfayı yenilemeniz ve özelleştiriciye geri dönmeniz gerekebilir.

#6 Başlığınızı Stillendirin

Başlığınızı Tema Özelleştirici'den şekillendirebilirsiniz. Basitçe WordPress Kontrol Panelinize gidin ve Divi > Tema Özelleştirici > Başlık ve Gezinme'ye gidin.

Başlığınızı kesinlikle yeni düzenlerinize uyacak şekilde biçimlendirmeniz gerekecek. İlk önce istediğiniz başlık stiline karar verirdim (varsayılan, tam genişlik, ortalanmış vb.), ancak ne seçerseniz seçin, başlığınızın stilini yeni düzenlerinizle eşleştirdiğinizden emin olun. Ayrıca menünüzdeki öğelerin okunması ve gezinmesinin kolay olduğundan emin olun.

Birincil, ikincil ve sabit gezinme menüleriniz için seçenekleriniz vardır. Siteniz için geçerli olan her şeyi şekillendirmek için zaman ayırın.

Genel vurgu renginizi ayarlarsanız, başlık rengi ayarlarından bazıları sizin için değiştirilir. Bu yüzden önce o rengi ayarlamak önemlidir.

#7 Alt Çubuğunuzu Stillendirin

Alt çubuğunuzu Tema Özelleştirici'den de şekillendirebilirsiniz. Basitçe WordPress Kontrol Panelinize gidin ve Divi > Tema Özelleştirici > Alt Bilgi > Alt Çubuk'a gidin.

Alt çubuk ihmal edilmemelidir. Sayfanızın üst kısmındaki Gezinme çubuğuyla birleştiğinde, tüm sayfayı çerçeveleyen gerekli bir kitap ayracı haline gelir. Elbette, varsayılan siyah arka plan herhangi bir sitede hemen hemen "işe yarayabilir", ancak bununla biraz daha deneme yapardım. Bazen alt çubuğa, doğrudan onun üzerinde oturan alt bilgi bölümünün arka plan renginin biraz daha koyu tonu olan bir arka plan rengi vermeyi seviyorum.

#8 Sayfa Düzeninizde Tasarım Değişiklikleri Yapmak için Kısayolları Kullanın

Düzenleriniz modüllerinizde yerleşik tasarım ayarlarıyla birlikte geldiğinden, tasarım ayarlarınızda küresel ölçekte (site genelinde) değişiklik yapmak biraz sıkıcı olabilir. Ancak süreci hızlandırmak için birkaç püf noktası var. Yeni başlayanlar için önce bir sayfa düzeninde değişiklik yapardım. Bu şekilde, tasarım değişiklikleri gerektiren diğer sayfalarınıza eklemek için düzenlenen sayfadaki öğeleri kaydedebilirsiniz. Belirli bir düzende tasarım değişiklikleri yapma sürecini hızlandırmak için bazı püf noktaları.

Sağ Tıklama Seçeneklerini Kullanma

Modül stilleri aynı modül tipi olduğu sürece bir modülden diğerine kopyalayıp yapıştırmak için sağ tıklama seçeneklerini kullanabileceğinizi unutmayın.

Varsayılanları Geri Yükle, böylece onları Tema Özelleştirici'yi kullanarak kontrol edebilirsin

Şu anda, tema özelleştirici tarafından özelleştirilemeyen modüller için belirli ayarlar mevcuttur (örneğin kutu gölgesi gibi). Genel bir kural olarak, Tema Özelleştirici, eğer bu ayar özelleştiricide mevcutsa, bir modül içindeki varsayılan ayara kalan her şeyi değiştirir. Ancak bazı modüller için, tema özelleştiriciden stili kontrol edebilmeniz için belirli tasarım ayarlarını varsayılanlarına geri yüklemeniz mantıklı olabilir.

Bunun için iyi bir kullanım örneği, gövde metni ve başlık metni ayarları olacaktır. Örneğin, düzeninizde özel bir yazı tipi, metin rengi ve metin boyutu olan bir metin modülünüz varsa, bu öğeleri varsayılan durumlarına geri yükleyene kadar tema özelleştiriciden değiştiremezsiniz.

Değiştirmek istediğiniz ayarları bulmak için arama kutusunu kullanın

Neyin varsayılan olarak ayarlandığını kolayca belirleyin

Değiştirmek istediğiniz seçenekleri ararken, bazı seçeneklerin yanında “varsayılanı geri yükle” simgesinin olduğunu fark edeceksiniz. Bu, varsayılandan değiştirildiği anlamına gelir.

Tek bir tıklamayla tüm tasarım ayarlarını varsayılana geri yükleyin

Görsel oluşturucuyu benim kadar sevenleriniz için, muhtemelen bu yararlı numarayı henüz keşfetmemişsinizdir. Arka uç oluşturucudaysanız, bir modülün ayarlarını düzenlemek için tıklayın ve ardından tasarım sekmesini seçin. Bir şey fark ettiniz mi? Sekme içinde bulunan küçük bir “Varsayılana Geri Yükle” simgesi/düğmesidir.

Buna tıklamak, bu ayarları kaybetmek istediğinizi onaylamanızı ister. Evet'i seçerseniz, tüm tasarım sekmesi ayarlarınız varsayılan durumlarına geri döner. Bu, elbette, gelecekte görsel oluşturucuya eklenecektir.

#9 Yeni Sayfalar veya Gönderiler Oluşturmak için Temel Öğeleri Kaydedin

Bazen farklı bir düzen gerektiren ek sayfalar veya gönderiler oluşturmanız gerekebilir. Belki üst bilgi, içerik bölümü ve alt bilgi bölümü olan daha genel bir sayfa düzeni istiyorsunuz. Veya daha ayrıntılı bir açılış sayfası oluşturmak isteyebilirsiniz. Blog gönderileriniz için özel bir gönderi düzeni bile oluşturabilirsiniz. Bunu başarmanın en kolay yolu, yenilerini oluşturmak için zaten sahip olduğunuz mizanpajların öğelerini kullanmaktır. Ve tasarımınızı sitenin tamamında tutarlı tutmanın en etkili yoludur. Ek sayfa düzenleri oluşturmak için kullanmayı düşünmeniz gereken birkaç temel öğenin üzerinden geçelim.

Sayfa Başlığı

Bu çok kolay. Her sayfanın bir başlığa ihtiyacı vardır. Kitaplığınız için kesinlikle bir başlık bölümü kaydederdim. Herhangi bir sayfa türüne uyması için başlıklarınızın daha genel bir sürümünü bulmanızı öneririm. Genellikle iletişim sayfası düzeni bunun için iyi bir adaydır çünkü genellikle temel ortalanmış bir başlık, alt başlık ve arka plan rengine sahiptir.

Bölüm Başlıkları

Bölüm başlıklarınızın bir versiyonunu kaydetmek de iyi bir fikirdir. Bu şekilde, yeni sayfalarınıza daha fazla içerik eklediğinizde, stilize edilmiş ve kullanıma hazır yeni bir başlığınız olur.

İçerik Bölümü

Çoğu durumda, bunun için ihtiyacınız olan tek şey beyaz arka plana sahip basit bir metin modülüdür, ancak bazen yeni mizanpajlarınızın benzersiz içerik bölümleri olabilir. Bu, kutu gölgeli bir metin modülü veya benzersiz bir şekilde tasarlanmış birden çok tanıtıcı modül olabilir. Tutarlılığı korumak için, ihtiyacınız olanı ileride kullanmak üzere kitaplığa kaydedin.

Düğmeler (hem açık hem de koyu)

Yeni sayfalar oluştururken muhtemelen daha fazla düğme eklemeniz gerekecektir. Düğmenizin koyu ve açık bir versiyonunun kitaplığınızda bulunması son derece uygundur. Hem koyu hem de açık sürümler için bir düğme modülü kaydetmenizi öneririm.

Altbilgi Bölümü

Her düzen genellikle, sayfanızın alt çubuğunun hemen üzerinde bulunan hoş bir alt bilgi bölümü ile birlikte gelir. Bazı düzenler bu altbilgi bölümünün farklı sürümlerine sahiptir. Bu bölümler genellikle iletişim bilgilerini, e-posta tercihlerini ve diğer önemli bilgileri içerir. Kullanmak istediğinizi bulun ve ileride kullanmak üzere kitaplığınıza kaydedin.

Artık ne zaman yeni bir sayfa oluşturmak istersen, aralarından seçim yapabileceğin bu bölümler, satırlar ve modüller olacak.

#10 Küresel Öğeleri Ayarla

Global, sitenizde gelecekteki düzenlemeler yaparken harika bir zaman tasarrufu sağlayabilir, ancak biraz öngörü gerektirir. Sitenizde hangi yerleşim öğelerinin sıklıkla kullanılacağını ve daha tekdüze güncellemeler gerektireceğini belirlemeniz gerekir. Global öğeler için iyi adaylar, sitenizde dağıtılmaları gerektiği, ancak aynı tek tip stil ve içeriği gerektirdiği için Altbilgi bölümleri, Harekete Geçirici Mesaj Modülleri, Düğme Modülleri ve E-posta Seçenekleri olacaktır. Bu şekilde birini güncellemek hepsini güncelleyecektir.

Son düşünceler

Umarım bu adımları faydalı bulmuşsunuzdur. Bu gönderideki amacım, yeni bir web sitesi oluşturmak amacıyla bu düzenleri yeni bir kurulumda içe aktarırken bazı genel yönergeler veya en iyi uygulamalar sağlamaktı. Bu adımları sırayla takip etmek sizi zaman kaybetmekten alıkoyacak ve üzerine inşa edebileceğiniz iyi bir temel oluşturacaktır.