Divi Mimarlık Şirketi’nin düzeninin bir paketi 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 düzen paketi veriyoruz. Her düzen paketiyle birlikte, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, Divi Mimari Düzen Paketini kullanarak nasıl zarif bir süreç sayfası oluşturacağınızı göstereceğiz. Bu sayfayı oluşturmak için, halihazırda düzen paketinde bulunan öğeleri yeniden kullanacağız ve yol boyunca değiştireceğiz. Ayrıca, adımlar arasında bir ilişki kuracak ve ziyaretçilerinizin süreci takip etmesine yardımcı olacak bir ‘bölücü’ veya ‘zaman çizgisi’ yapacağız. Bu yöntemi kullanarak işleminiz için ihtiyaç duyduğunuz kadar adım atabilirsiniz. Başlayalım!
Önizleme Kullanım durumunun öğreticisine girmeden önce, farklı ekran boyutlarında nihai sonucun bir gözüne bakalım:
Sol ve sağ dolgu: 50px (sadece tablet ve cep telefonu)
Adım 6: Derinlik yaratmak için satırımıza bazı gölge kutuları ekleyecektir. Bu öğreticide, varsayılan ayarları değiştirmeden ilk kutunun gölgesini etkinleştirdik. Adım 7: Metin Hizalama Metin Modülünü Değiştir #1 İlk metin modülünden başlayarak tüm bu satır modüllerine odaklanmak istiyoruz. Ayarları açın ve orta metin yönünü etkinleştirin. Adım 8: Negatif sol pedleri bir sonraki bölücü modülü için bir sonraki bölücü bölücü modülünden çıkarın ve bunun yerine ‘0px’ ekleyerek uzaklık ayarında negatif sol dolguyu silin. Adım 9: Bölme modülü için merkezi modülün hizalanmasını kullanın, bu bölücü modülü için orta modülün hizalanmasını da kullanacağız. Adım 10: Metin Oryantasyonu Metin Modülünü Değiştir #2 Sonraki, tüm bilgileri içeren bir metin modülünü açın ve merkezi metin yönünü kullanın. Adım 11: Metin modülünün boyutunu değiştir #2 Bu metin modülünün genişliğini de yapacağız Aşağıdaki ayarları kullanarak masaüstünde daha küçük: Genişlik:% 54 (masaüstü),% 99 (tablet ve cep telefonu)
Modül hizalaması: merkez
Adım 12: Satırınızdaki son modül düğmesi modülü için merkezi modülün hizalanmasını kullanın, düğme modülünde de orta düğmenin hizalanmasını gerektirir. Bu noktada, tüm modülleriniz ortada ve bir sonraki bölüme devam edebiliriz.
Bölüm 3: Dikey ‘Bölü’nü’ ekleyin Adım 1: Öğretici odağının bir sonraki bölümüne farklı adımları birbirine bağlamaya yeni bir sütun satırı ekleyin. Metin modülünü bunun için kullanacağız ve düzenlediğimiz önceki satırın hemen altına yeni satıra yerleştireceğiz. Bunun için aşağıdaki sütun yapısını seçin:
Metin Oryantasyonu: Orta
Bölüm 4: Klon Bölümü Gerektiğinde Sık Sık Adım 1: Klon bölümümüz ilk işlem adımı ile tamamlandı! Bir parça gereken tüm öğeleri içerir. Lütfen ve bu bölümü ihtiyacınız olduğu kadar klonlayın (süreçteki adımlarınızın sayısına bağlı olarak).
Adım 2: İçeriği değiştirin Elbette içeriği kendi web sitenize göre değiştirebilirsiniz. İlk metin modülünü, adımlar ve süreçteki rolü hakkında daha fazla bilgi vermek için adımları ve ikinci metin modülünü göstermek için kullanıyoruz.
Adım 3: Son parçaya bastıktan sonra son işlemden dikey bölücü satırını çıkarın ve böylece sayfanızdaki son adım, bunun için bazı küçük değişiklikler yapmanız gerekir. Her şeyden önce, dikey böceklerimizi içeren satırları sileceğiz. Bu çizgiye ihtiyacımız yok çünkü bu bölümden sonra başka adımlar yok. Adım 4: Son parçamızdan dolgunun sıfır tabanını çıkarın, alt dolgu bölümüne belirlenen ‘0px’ yi dolgu altını da silecektir. Bu, kutunun gölgesinin de altta görünmesine izin verecektir. Önizleme o! Tüm adımlardan geçtik. Farklı ekran boyutlarında nihai sonuçlara bakalım:
