Divi's Architecture Firm Layout Pack ile Zarif Bir Süreç Sayfası Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi yerleşim paketi sunuyoruz. Her düzen paketiyle birlikte, 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'nin Mimari Firma Düzen Paketini kullanarak nasıl zarif bir süreç sayfası oluşturacağınızı göstereceğiz. Bu sayfayı oluşturmak için, yerleşim paketinde zaten mevcut olan öğeleri yeniden kullanacağız ve bu sırada bunları değiştireceğiz. Ayrıca adımlar arasında bir bağlantı oluşturacak ve ziyaretçilerinizin süreci takip etmesine yardımcı olacak dikey bir 'bölücü' veya 'zaman çizelgesi' oluşturacağız. Bu yöntemi kullanarak işleminiz için ihtiyaç duyduğunuz kadar adım oluşturabilirsiniz. Başlayalım!

Ön izleme

Kullanım örneği eğitimine geçmeden önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım:

Bölüm 1: Mimarlık Firması Açılış Sayfasını Kullanarak Yeni Sayfa Oluşturun

1. Adım: Yeni Sayfa Oluşturun ve Visual Builder'a geçin

Yeni bir sayfa oluşturarak, sayfanıza bir başlık vererek ve Visual Builder'a geçerek başlayın.

Adım 2: Mimarlık Firması Açılış Sayfasını Yükleyin

Süreç sayfasını oluşturmak için Architecture Firm Layout Pack'in açılış sayfasını kullanıyoruz. Aynı stili korumamıza yardımcı olacak ve ayrıca bize çok zaman kazandıracak. Önceden hazırlanmış düzenlerinize gidin, Architecture Firm Düzen Paketi ile karşılaşana kadar aşağı kaydırın ve açılış sayfası düzenini kullanın.

3. Adım: Gereksiz Bölümleri Kaldırın

Bu açılış sayfası epeyce bölüm içeriyor. Devam edin ve gerekli olmadığını düşündüklerinizi silin. Aşağıdaki bölümleri mizanpajımızdan sildik:

Bölüm 2: İşlem Adımı Bölümünü Değiştirin

Adım 1: Kullanacağımız ve Değiştireceğimiz Bölümü Bulun

Bu eğitim sırasında kesinlikle yeniden kullanacağımız bölüm şudur:

2. Adım: Bölüm Aralığını Değiştirin

Bu bölümün ayarlarını açarak başlayın ve alt dolgusuna '0px' ekleyin.

3. Adım: Görüntü Modülünü Kaldırın

Sonraki ilk sütundaki Görüntü Modülünü çıkarın.

Adım 4: Sütun Yapısını Değiştirin

Ve sütun yapısını yalnızca bir sütunlu bir satıra değiştirin.

Adım 5: Satır Aralığını Değiştirin

Satır ayarlarını açın ve aşağıdaki özel dolguyu ekleyin:

• Üst ve Alt Dolgu: 60px
• Sol ve Sağ Dolgu: 50 piksel (Yalnızca Tablet ve Telefon)

Adım 6: Satıra Kutu Gölgesi Ekle

Ayrıca derinlik oluşturmak için satırımıza bir kutu gölgesi ekleyeceğiz. Bu öğreticide, varsayılan ayarlarını değiştirmeden ilk kutu gölgesini etkinleştirdik.

Adım 7: Metin Modülü #1 Metin Hizalamasını Değiştirin

İlk Metin Modülünden başlayarak bu satırın tüm modüllerini ortalamak istiyoruz. Ayarlarını açın ve orta Metin Yönlendirmesini etkinleştirin.

Adım 8: Bölücü Modülün Negatif Sol Dolgusunu Kaldırın

Daha sonra Bölücü Modülün ayarlarını açın ve bunun yerine '0px' ekleyerek boşluk ayarlarındaki negatif sol dolguyu kaldırın.

9. Adım: Bölücü Modül için Merkez Modül Hizalamasını Kullanın

Bu Bölücü Modül için merkez Modül Hizalamasını da kullanacağız.

Adım 10: Metin Modülü #2'nin Metin Yönünü Değiştirin

Ardından, tüm bilgileri içeren Metin Modülünü açın ve merkezi Metin Yönlendirmesini kullanın.

Adım 11: Metin Modülü #2'nin Boyutlandırmasını Değiştirin

Ayrıca, aşağıdaki ayarları kullanarak bu Metin Modülünün genişliğini masaüstünde küçülteceğiz:

• Genişlik: %54 (Masaüstü), %99 (Tablet ve Telefon)
• Modül Hizalaması: Merkez

Adım 12: Düğme Modülü için Merkez Modül Hizalamasını Kullanın

Sıranızdaki son modül olan Düğme Modülü de orta Düğme Hizalamasına ihtiyaç duyar. Bu noktada tüm modülleriniz ortalanır ve bir sonraki bölüme geçebiliriz.

Bölüm 3: Dikey 'Bölücü' Ekle

Adım 1: Mevcut Bölüme Yeni Tek Sütunlu Satır Ekleme

Bu öğreticinin sonraki bölümü, farklı adımları birbirine bağlamaya odaklanır. Bunun için bir Metin Modülü kullanacağız ve onu bir önceki düzenlediğimiz satırın hemen altına yeni bir satıra yerleştireceğiz. Bunun için aşağıdaki sütun yapısını seçin:

2. Adım: Satır Aralığını Değiştirin

Herhangi bir modül eklemeden önce, satır ayarlarını açın ve bu satırın üst ve alt dolgusuna '0px' ekleyin.

Adım 3: Metin Modülünü Yeni Satıra Ekleme

Bu satırın sütununa bir Metin Modülü ekleyerek devam edin. Düzenlemeyi bitirdikten sonra dikey bir çizgi olarak görünecek içerik kutusunda aşağıdaki karakterleri kullanacağız:

|
|
|
|
|

4. Adım: Metin Ayarları

Bu Metin Modülünün satırları çakıştırmasını sağlamanıza yardımcı olacak özellikle bir şey var. Metin Satırı Yüksekliğinden bahsediyoruz. Varsayılan değer, çok büyük bir Metin Boyutu söz konusu olduğunda içeriğinizi bir araya getirir. Bu nedenle, Metin Satırı Yüksekliği değerini değiştirmeyin ve bunun yerine aşağıdaki metin ayarlarını kullanın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Rengi: rgba(194,171,146,0.04)
• Metin Boyutu: 600px
• Metin Yönü: Merkez

Bölüm 4: Bölümü Gerektiği Sıklıkta Klonla

Adım 1: Bölümü Klonla

İlk işlem adımını bitirdik! Bir bölüm gerekli tüm öğeleri içerir. Devam edin ve bu bölümü istediğiniz kadar kopyalayın (işlemdeki adımlarınızın sayısına bağlı olarak).

2. Adım: İçeriği Değiştirin

Tabii ki, içeriği kendi web sitenize göre değiştirebilirsiniz. Adımı belirtmek için ilk Metin Modülünü ve bu adım ve süreçteki rolü hakkında daha fazla bilgi vermek için ikinci Metin Modülünü kullanıyoruz.

Adım 3: Son İşlem Bölümünün Dikey Bölücü Satırını Kaldırın

Sayfanızdaki son bölüme ve dolayısıyla son adıma ulaştıktan sonra, üzerinde bazı küçük değişiklikler yapmanız gerekecektir. Her şeyden önce, dikey bölücümüzün bulunduğu satırı kaldıracağız. Bu bölümden sonra başka bir adım olmadığı için bu satıra ihtiyacımız yok.

Adım 4: Son Bölümden Sıfır Alt Dolguyu Çıkarın

Ayrıca bölümün alt dolgusuna atanan '0px' alt dolgusunu da kaldıracağız. Bu, kutu gölgesinin altta da görünmesine izin verecektir.

Ön izleme

Bu kadar! Tüm aşamaları geçtik. Farklı ekran boyutlarında sonuca son bir göz atalım:

Son düşünceler

Bu kullanım örneği blog gönderisinde, Divi's Architecture Firm Layout Pack'i kullanarak çarpıcı bir süreç sayfasının nasıl oluşturulacağını gösterdik. Bu süreç sayfasını kişiselleştirebilir ve ihtiyacınız olduğu kadar çok adım ekleyebilirsiniz. Bu kullanım örneği, tasarım ekibimizin her hafta sizinle yeni bir düzen paketi paylaştığı devam eden Divi girişimimizin bir parçasıdır. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!