Divi'nin Verimlilik Özelliklerini Kullanarak Yeni Bir Tasarım Stilini Başka Bir Sayfaya Aktarma

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, size Divi's Furniture Store Layout Pack'i kullanarak yeni bir tasarım stilini başka bir sayfaya nasıl aktaracağınızı göstereceğiz. Çıkan tüm yeni düzen paketleriyle, yeni düzen paketinin stilini kullanarak mevcut bir sayfanın stilini değiştirmek istemiş olabilirsiniz. Tüm sayfayı değiştirmek yerine Divi'nin verimlilik özelliklerini kullanarak tasarım stilini de aktarabilirsiniz. Visual Builder'da bulunan en yeni seçeneklerden biri, sayfalar arası kopyalama ve yapıştırma özelliğidir. Bu, bir tasarım öğesinin ayarlarına dokunmadan düzen boyunca birçok değişiklik yapmanıza olanak tanır.

Ancak elbette her düzen benzersizdir, bu da bazı manuel değişiklikleri de uygulamanız gerektiği anlamına gelir. İyi haber şu ki, bu manuel ayarları tek bir tıklamayla sayfadaki benzer öğelere genişletebilirsiniz. Bu yazı umarım bir tasarım stilini aktarırken belirli bir yapıyı takip etmenize yardımcı olur.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım.

Yaklaşmak

Sayfa yapıları birbirinden farklıdır, bu nedenle bir tasarım stilini tek tıklamayla tamamen aktarmak zordur. Ancak Divi ile süreci hızlandırmak için verimlilik özelliklerini kullanabilirsiniz. Sayfa yapısını değiştirmek zorunda kalmadan bir tasarım stilini mevcut bir sayfaya aktarırken zamandan tasarruf etmek için sayfalar arası kopyala-yapıştır özelliğini, stilleri genişletme özelliğini ve bul ve değiştir özelliğini birleştireceğiz.

Bölüm 1: Yanyana İki Sayfa Açmak

Yan yana iki sayfa açarak başlayacağız. Mevcut sayfa ve uygulamak istediğimiz tasarım stilini içeren yeni sayfa. Mobilya Mağazası Düzen Paketinin açılış sayfasını (mevcut sayfaya uygulamak istediğimiz tasarım stili) ve Hosting Şirket Düzen Paketinin açılış sayfasını (değiştirmek istediğimiz sayfa) alacağız.

Bölüm 2: Belirli Bölüm Ayarlarını Sıfırlama

İkinci kısım, belirli bölüm ayarlarının sıfırlanmasıyla ilgili olacaktır. Sıfırlamanız gereken ayarlar düzenden düzene değişir ancak genellikle arka plan ayarlarını ve ayırıcı ayarlarını içerir.

Bölüm 3: Kahraman Bölümü için Divi'nin Sayfalar Arası Kopyala-Yapıştır ve Stilleri Genişlet Özelliklerini Kullanma

Ardından, bir şeyleri değiştirmeye başlamak için Divi'nin sayfalar arası kopyala-yapıştır özelliğini kullanmaya başlayabiliriz. Yapılacak en doğal şey kahraman bölümlerinden başlamaktır. Kahraman bölümündeki her bir tasarım öğesini, yeni tasarım stilinin ayarlarını kopyalayıp mevcut sayfaya yapıştırarak yeni tasarım stiliyle değiştireceğiz. Bunu yaptıktan sonra, bu stilleri sayfadaki benzer öğelere genişleteceğiz.

Bölüm 4: Manuel Değişiklikler Yapın (Düzene Göre) & Verimlilik Özelliklerini Kullanın

Daha önce de belirtildiği gibi, her düzen benzersizdir. Bu nedenle mevcut sayfada manuel değişiklikler yapmak da gereklidir. Birkaç değişiklik yapıldıktan sonra, stili genişletebilir veya sayfadaki benzer öğelere uygulamak için bul ve değiştir özelliğini kullanabilirsiniz.

Bölüm 5: Tasarım Özellikleri Ekleyin

Son olarak, mevcut sayfaya belirli tasarım özelliklerini de ekleyebilirsiniz.

Bölüm 1: Yanyana İki Sayfa Açmak

Mobilya Mağazası Düzen Paketinin Açılış Sayfasını Kullanarak Düzeni Kullanarak Yeni Sayfa Oluşturun

Şimdi bu yazının yaklaşım kısmını geçtiğimize göre, Divi'yi kullanmaya başlayalım! Mobilya Mağazası Düzen Paketi'nin açılış sayfasını kullanarak yeni bir sayfa ekleyin.

Barındırma Şirketi Yerleşim Paketinin Açılış Sayfasını Kullanarak Yeni Sayfa Oluşturun

Hosting Company Layout Pack'in açılış sayfasını da kullanarak başka bir sayfa oluşturun. Bu mizanpajın tasarım stilini, Furniture Store Layout Pack'in açılış sayfası tasarımıyla değiştireceğiz.

Bölüm 2: Belirli Bölüm Ayarlarını Sıfırlama

Barındırma Şirketi Açılış Sayfasının Sıfırlama Bölümüne Özel Ayarları

Kahraman Bölümünü Aç

Her iki düzeni de yakınınızda bulundurduğunuzda, barındırma şirketi açılış sayfasının kahraman bölümü ayarlarını açarak devam edin.

Bölüm Arka Planını Sıfırla ve Tüm Bölümlere Uzat

Arka plan ayarlarına gidin ve sağ tıklayıp Arka Planı Sıfırla'ya tıklayarak seçenekleri sıfırlayın. Bunu yaptıktan sonra, sayfanızdaki hiçbir bölümün arka plan öğeleri içermediğinden emin olmak için bu arka plan stillerini sayfadaki tüm bölümlere genişletebilirsiniz.

Bölücüleri Sıfırla ve Tüm Bölümlere Uzat

Sayfadaki tüm bölüm ayırıcıların kaybolduğundan emin olmak için bölüm ayırıcılar için de aynı şeyi yapın.

Bölüm 3: Kahraman Bölümü için Divi'nin Sayfalar Arası Kopyala-Yapıştır ve Stilleri Genişlet Özelliklerini Kullanma

Sayfalar Arası Kopyala-Yapıştır Kahraman Bölümü Öğeleri

Bölüm Ayarları

Sayfalar arası kopyala-yapıştır seçeneğini kullanmaya başlama zamanı! Kahraman bölümündeki her tasarım öğesini değiştireceğiz. Mobilya mağazası açılış sayfasındaki kahraman bölümü stillerini kopyalayarak başlayın. Ardından, barındırma şirketi açılış sayfasına geri dönün ve kopyalanan bölüm stillerini yapıştırın.

Satır Ayarları

Aynı şeyi sıra için de yapın.

Başlık Metin Modülü

Metin Modülü başlığının modül stillerini de kopyalayın ve barındırma şirketi açılış sayfasının başlığına uygulanmasını sağlayın.

Gövde Metni Modülü

Sonraki Metin Modülü açıklamasını açın ve metin stillerini kopyalayın. Bunu yaptıktan sonra, barındırma şirketi sayfasındaki Metin Modülüne uygulanmasını sağlayın.

Stilleri Genişlet

Yeni metin stillerini uyguladıktan sonra devam edin ve bu stilleri sayfadaki tüm modüllere genişletin.

Geri Metin Yönlerini Gerektiği Yerde Ortaya Değiştir

Sol metin yönlendirmesinin sayfa boyunca tüm tasarım öğelerine uygulanacağını fark edeceksiniz. Bu şekilde tutabilir veya metin yönünü manuel olarak değiştirebilirsiniz.

Düğme Ayarları

Kahraman bölümünde yeni modül stilleri uygulamanız gereken son modül Düğme Modülüdür.

Düğme Ayarları için Stilleri Genişlet

Tüm Düğme Modülü stillerini genişletmek yerine, belirli düğme ayarlarını genişleteceğiz.

Aralık için Stilleri Genişlet

Boşluk ayarları ile birlikte.

Kutu Gölgesi için Stilleri Genişlet

Ve kutu gölge ayarları da.

Kalan Öğeleri Bir Kez Kopyala-Yapıştır + Stili Genişlet

bölücü

Ayrıca Divider Module stillerini kopyalayıp yapıştırmamız ve bunları barındırma şirketi açılış sayfasındaki ayırıcılara uygulamamız gerekecek.

Stilleri Genişlet

Yine, bu modülün stillerini tüm sayfa boyunca genişletin.

Bölüm 4: Manuel Değişiklikler Yapın (Düzene Göre) & Verimlilik Özelliklerini Kullanın

Düzene Özgü Değişiklikler

Başlık Yazı Tipini Bul ve Değiştir

Bazı manuel değişiklikler yapmaya başlama zamanı! Yapacağımız ilk şey yazı tipini eşleştirmek. Sayfada bir Metin Modülü açın ve sayfa boyunca kullanılan Rubik yazı tipini bulun. Ardından Bul ve Değiştir'e tıklayın ve yazı tipini Montserrat ile değiştirin.

Başlık Yazı Tipi Ağırlığını Bul ve Değiştir

Yazı tipi ağırlığı için de aynı şeyi yapın. Medium'u kullanmak yerine Light'ı seçin.

Yuvarlatılmış Köşeleri Bul ve Değiştir

Ayrıca Bul ve Değiştir'i kullanarak ve sayfa boyunca köşelerin her birine '0px' uygulayarak sayfa boyunca yuvarlatılmış köşe kenarlıklarını kaldırıyoruz.

CTA Arka Plan Ayarlarını Sıfırla ve Bölümdeki Stili Genişlet

Sayfada Harekete Geçirici Mesaj Modüllerini bularak devam edin ve ilk modülün arka plan ayarlarını sıfırlayın. Ardından, bu stilleri bölümdeki tüm Harekete Geçirici Mesajlara genişletin.

Bölümde CTA Arka Plan Rengini Bul ve Değiştir

Bunu yaptığınızda, varsayılan arka plan rengi görünecektir. Bu rengi bulun ve değiştirin ve bölüm boyunca '#1a2545' olarak değiştirin.

Bölümde CTA Metin Rengini Bul ve Değiştir

Metin Rengini de bölüm boyunca 'Işık' ile değiştirin.

Fiyatlandırma Tablosu Düğme Ayarlarını Değiştir

Ardından sayfadaki fiyatlandırma tablolarına gidin ve düğme ayarlarını değiştirin:

• Düğme Arka Plan Rengi: #ef6f49
• Düğme Kenar Genişliği: 8px
• Düğme Kenar Rengi: #ef6f49
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 2px (Varsayılan), 1px (Vurgulu)
• Düğme Yazı Tipi: Montserrat
• Yazı Ağırlığı: Yarı Kalın
• Yazı Tipi Stili: Büyük Harf
• Düğme Hizalama: Sol

Fiyatlandırma Tabloları ve CTA Modülleri için Stilleri Genişletin

Yeni düğme ayarını sayfa boyunca tüm fiyatlandırma tablolarına ve Harekete Geçirici Mesaj Modüllerine genişletin.

Bölüm 5: Tasarım Özellikleri Ekleyin

Bölüm Arka Plan Rengi #1

Bu öğreticinin son bölümünde, bazı tasarım özelliklerini manuel olarak ekleyeceğiz. Bu, arka plan ayarlarını içerir ancak bunlarla sınırlı değildir. Aşağıdaki yazdırma ekranında işaretli bölümü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f7f3ec

Bölüm Arka Plan Rengi #2

Aşağıdaki bölüm için de aynı şeyi yapın.

• Arka Plan Rengi: #f7f3ec

Bölüm Gradyan Arka Planı #1

Ardından, aşağıdaki yazdırma ekranındaki bölümü bulun ve bir degrade arka planı ekleyin.

• Renk 1: #ffffff
• Renk 2: #1a2545
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %55
• Bitiş Konumu: %55

Bölüm Gradyan Arka Planı #2

Aşağıdaki bölüm için başka bir degrade arka planı kullanın:

• Renk 1: rgba(210,218,228,0,38)
• Renk 2: #ffffff
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45

Bölüm Gradyan Arka Planı #3

Son olarak, sayfadaki son bölüme de doğrusal bir gradyan arka planı ekleyin.

• Renk 1: #ffffff
• Renk 2: #f7f3ec
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

Ön izleme

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.

Son düşünceler

Bu yazıda, Divi'nin verimlilik özelliklerini kullanarak bir mizanpajın tasarım stilini nasıl aktarabileceğinizi gösterdik. Bu öğretici, yeni Visual Builder'ın bir parçası olan yeni sayfalar arası kopyala-yapıştır özelliğinden yararlanır. Bu eğitim, her hafta tasarım araç kutunuza fazladan bir şey koymaya çalıştığımız devam eden Divi tasarım girişimimizin bir parçasıdır. Herhangi bir sorunuz veya öneriniz varsa, aşağıya bir yorum bölümü bıraktığınızdan emin olun!