Divi Düzenlerini Yeniden Kullanılabilir Tel Çerçevelere Dönüştürme

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi's Food Catering Layout Pack'i kullanarak mizanpajları yeniden kullanılabilir tel çerçevelere nasıl dönüştüreceğinizi göstereceğiz. Tel çerçeveler, bir web sitesi oluşturmaya başlama süreci için harikadır. Bir web sitesinin genel yapısına ve tasarım stiline karar vermenize yardımcı olurlar. Ayrıca, her şeyi önceden uyarlamak zorunda kalmadan müşterinin bir tasarım stili hakkında fikrini almasına yardımcı olabilirler.

Hadi hadi bakalım!

Ön izleme

Dalmadan önce, yaratacağımız sonuca bir göz atalım.

Düzeni Tel Çerçeveye Dönüştürün

Visual Builder ile Açık Yemek İkram Hizmetleri Açılış Sayfası

Devam edin ve Divi's Food Catering Düzen Paketini kullanarak oluşturduğunuz açılış sayfasını açın.

Bölüm ve Tam Genişlik Üstbilgi Arka Plan Resimlerini, Arka Plan Renklerini ve Gradyan Arka Planlarını Kaldır

Bir tel çerçeve oluşturmanın ilk adımı, sayfanızdaki bölümlerin tüm arka plan resimlerini, degrade arka planlarını ve arka plan renklerini ve kahraman bölümündeki Tam Genişlikli Başlık Modülünü kaldırmaktır.

Alternatif Bölümlere Yerine Gri Arka Plan Rengi Verin

Sayfa tasarımınızdaki farklı bölümleri belirlemeye yardımcı olması için devam edin ve değişen bölümlerin her birine bir '#f9f9fb' arka plan rengi verin. Daha sonra, bir sayfa oluşturmak için bir tel kafes kullandığınızda, renk paletini sayfanıza sorunsuz bir şekilde eklemek için Bul ve Değiştir özelliğini kullanabileceksiniz.

Değiştirilmiş Stiller Filtresini kullanarak Tasarım Öğelerindeki tüm Renkleri Kaldırın

Düğme Modülünde Değiştirilmiş Stiller Filtresini Etkinleştir

Kullanılan renk paletinden de kurtulacağız. Bu şekilde, bir sayfa oluştururken bundan etkilenmeyeceğiz. Sayfanızdaki Düğme Modüllerinden birini açın ve mevcut tüm ayarları görmek için Değiştirilmiş Stiller Filtresini etkinleştirin.

Düğme Modülüne Koyu Arka Plan ve Kenar Rengi Ver

Hem Düğme Arka Plan Rengini hem de Düğme Kenarlığı Rengini '#2b2b2b' olarak değiştirin.

Düğme Stillerini Kopyala ve Diğer Düğmelere Uygula

Düğme ayarlarına sağ tıklayarak ve 'Düğme Stillerini Kopyala' seçeneğine tıklayarak Düğme Stillerini kopyalayarak devam edin. Ardından, sayfada kalan Düğme Modüllerinin her birine Düğme Stillerini ekleyin.

Ekstra Tasarım Ayarlarını Kaldır (Kutu Gölgesi gibi)

Düğme Kutusu Gölgesini Kaldır

Kutu Gölgesi gibi ek öğeleri de kaldırıyoruz. Üzerinde çalıştığınız Düğme Modülünü açın ve kutu gölgesini tamamen kaldırın.

Düğme Modül Kutusu Gölge Ayarlarını Kopyala

Bu Düğme Modülünün Kutu Gölge Stillerini kopyalayın ve kalan Düğme Modüllerine de ekleyin.

Kahraman ve İletişim Bölümünde Kutu Gölgesini Manuel Olarak Kaldır

Box Shadow'un manuel olarak kaldırılması gereken iki düğme, Tam Genişlik Başlık Modülü ve İletişim Modülünde bulunan düğmelerdir. Bu düğmeler, çeşitli tasarım öğelerine sahip bir modülün parçasıdır, bu yüzden bunları manuel olarak kaldırmamız gerekiyor.

Vurgulanan Bölüme CTA'larla Aynı Arka Plan Rengini Ver

Ardından, 'vurgulanan' bölümle karşılaşana kadar aşağı kaydırın. Burada '#2b2b2b' bölümünün arka plan rengini kullanın. CTA'lar için aynı renk kullanıldı.

Görüntü Boyutlarını Belirleyin

Medya Kitaplığına Git

Düzenimizin düzen konusunu tamamen kaldırmak için, tüm Görüntü Modüllerini gerekli görüntü boyutlarını içeren yer tutucularla değiştireceğiz. Bu boyutları bulmak için Medya Kitaplığınıza gidin.

Kullanılmış Görüntüleri Tek Tek Açın

Sayfanızda bulunan resimlerin her birini ayrı ayrı açın.

Sayfadaki Görsellerin Farklı Boyutlarını Yazın

Bunu yaptıktan sonra, özellikle o görüntünün boyutlarını görebileceksiniz. Bir sonraki adıma geçmeden önce, ihtiyacınız olan tüm boyutları sayfanızda bir yere yazarak takip edin.

Boyutlarla Yer Tutucular Oluşturun

Photoshop'u açın

Yer tutucuları oluşturma zamanı! Photoshop'u veya başka bir görüntü düzenleme yazılımını açın.

Boyutlar için Yeni Projeler Oluşturun

Sayfanızdaki her boyut kümesi için yeni bir proje oluşturun. Bizim durumumuzda, aşağıdaki boyutların her biri için ayrı bir projeye ihtiyacımız olacak:

• 800 x 1029
• 400 x 400
• 48 x 48

Gri Renk Seç

Renginiz olarak '#e7e8ed'i seçin.

Arka Plan Katmanının Kilidini Aç

Arka Plan katmanınızın da kilidini açın.

Boya Kovası Aracını Seçin ve Katmana Renk Ekleyin

Ardından, tuvalinizi griye boyamak için Paint Bucket Tool'u kullanın.

Boyutlu Metin Ekle

Görüntü boyutlarını takip etmenize yardımcı olması için boyutları yer tutucunuzun ortasına da ekleyebilirsiniz. Bu şekilde, değiştireceğiniz resimleri düzenlerken sayfanız için hangi resim boyutlarına ihtiyacınız olacağını bileceksiniz.

Web için Kaydet

İşiniz bittiğinde, web için resim yer tutucunuzu kaydedin.

Sayfadaki Görüntü Boyutlarının Her Biri İçin Tekrar Edin

Sayfanızdaki her bir boyut kümesi için bu adımları tekrarlayın. Bu sayfa için toplamda üç farklı sete ihtiyacınız olacak:

• 800 x 1029 (hakkımızda bölümü
• 400 x 400 (galeri bölümü)
• 48 x 48 (simgeler)

Resimleri Yer Tutucularla Değiştirin

Tüm görüntü yer tutucularınızı dışa aktardıktan sonra devam edin ve görüntüleri değiştirin.

Tel Çerçeveyi Kolayca Yeniden Kullanılabilir Hale Getirmek

Bilgisayarda Tel Çerçeve Haritası Oluşturun

Tel kafes oluşturmayı bitirdikten sonra, görünümünü bir yere kaydetmeniz önerilir. Bilgisayarınızda bir yerde yeni bir klasör oluşturun.

Ekran Yakalama Düzeni ve Yerel Olarak Kaydet

Ardından, sayfanızı yakalamak için ekran yakalama eklentinizi/uzantınızı kullanın. Aşağıdaki resimlerde Mozilla Firefox için FireShot eklentisini kullandık. Ekran görüntünüzü kaydederken ona uygun bir ad verdiğinizden emin olun.

Düzeni Aynı Adla Kitaplığa Kaydet

Tel çerçeve düzenini Divi Kitaplığınıza kaydetmek için ekran görüntünüz için kullandığınız adı kullanın. Bu, sayfalarınızdan birine yüklemeden önce bilgisayarınızdaki tel kafese bir göz atmanızı sağlar.

Kişiselleştirilmiş Tel Çerçeve için Tasarım Ayarlarını Değiştirin

Bölüm Bölücüler Ekle

Sayfa başına bir tel kafes oluşturmakla sınırlı değilsiniz. Yeni tel çerçeveler oluşturmak için tasarım ayarlarını kolayca değiştirebilirsiniz. Örneğin, benzersiz tasarımlar oluşturmak için bölüm ayırıcılarla oynayabilirsiniz.

Tipografi ile Oynayın

Başlık Yazı Tipinde Bul ve Değiştir'i Etkinleştir

Veya tipografi ile de oynayabilirsiniz. Kahraman bölümünüzde Tam Genişlik Başlık Modülünü açın ve Başlık Yazı Tipine sağ tıklayın. Bul ve Değiştir özelliğini etkinleştirerek devam edin.

Yazı Tipini Değiştir

Sayfanızda kullanılan yazı tipini başka bir yazı tipiyle değiştirin ve yepyeni bir tel çerçeveye sahip olun!

Kategorileri Kullanarak Ayrı Tasarım Öğelerini Kaydetme

'Kütüphaneye Ekle' Simgesine tıklayın

Yapabileceğiniz başka bir şey, belirli tasarım öğelerini sayfanıza ayrı ayrı kaydetmektir. Örneğin, bir kahraman bölümleri koleksiyonu oluşturmak istediğinizi varsayalım, kahraman bölümünüzü Divi Kitaplığınıza kolayca ekleyebilirsiniz.

Yeni Kategori Ekle ve Tasarım Öğesine Bir Ad Ver

Daha düzenli bir yapıya sahip olmak için, seçtiğiniz kahraman bölümünü kolayca bulabilmeniz ve mağazadaki tüm tasarımları keşfedebilmeniz için 'Kahraman Bölümleri' adlı yeni bir bölüm kategorisi ekleyerek devam edin.

Ön izleme

Artık tüm adımlardan geçtik, şimdi sonuca son bir göz atalım.

Son düşünceler

Bu kullanım örneği blog gönderisinde, Divi düzenlerini yeniden kullanılabilir tel çerçevelere nasıl dönüştüreceğinizi gösterdik. Düzenleri tel çerçevelere dönüştürmek, bir web sitesi yapısının nasıl görünmesini istediğinize ilişkin genel görünümü korumanıza yardımcı olur. Ayrıca, web sitesi oluşturma sürecinin ilk aşamasında bir müşteriye tasarım stilini anlatmak için mükemmeldirler. Herhangi bir sorunuz veya öneriniz varsa, yorum bölümünde bir yorum bıraktığınızdan emin olun!