Divi’nin yeni sütun yapısı ile “Süreçimiz” bölümünü oluşturun
Divi’nin yeni sütun yapısı, Divi’ye daha olası varsayılan tasarım eklemek için yadsınamaz. Divi çok amaçlı sütun yapısında ne kadar benzersiz olduğunuzu göstermek için, yalnızca varsayılan Divi seçeneğini kullanan benzersiz bir “süreç” bölümünü nasıl yapacağınızı göstereceğiz. Buna ek olarak, işlemdeki adımlardan birini yönlendirirken görünen düzgün bir havalı etkisi de ekleyeceğiz. Bu bölüm, müşterinize veya potansiyel müşterinize ne yaptığınızı nasıl yaptığınızı açıklamak çok iyidir. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, bu öğreticiden bekleyebileceğiniz sonuçlara bakalım.
Arka plan renginin yeni bir kısmını ekleyin Yeni bir sayfaya standart kısmı ekleyin veya zaten var olan ve bunun için aşağıdaki arka plan rengini kullanın:Arka plan rengi: #3A1dad Bir sonraki boşluk aralığını açın ve bazı özel üst ve alt pedler ekleyin.
Üst dolgu: 170px
Dolgu Alt: 170px Görünürlüğümüz daha küçük ekran boyutlarında alternatifler yapmaktır, ancak bir masaüstü sürümü yapmaya başlayacağız. Bu nedenle bu bölümü görünürlük ayarlarında cep telefonları ve tabletler üzerinde devre dışı bırakın. Ayarları değiştirmeyi bitirdikten sonra satır #1 sütun yapısı ekleyin, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Gradyanın arka planını Sütun 1, 3 ve 5’e ekleyin İyi bir Hover efekti oluşturmak için, gradyanın arka planını 1, 3 ve 5 sütunlara ekleyeceğiz. Bu, her biri işlem adımlarını barındıracak bir sütundur. Adımları birbirine bağlamak için kalan iki sütunu kullanacağız. Bahsettiğimiz üç sütunun her biri aynı gradyan arka planı gerektirecektir: Renk 1: #580CF2
Renk 2: RGBA (41,196,169.0)
Sütun 1 Tip gradyanı: Radyal
Sütun 1 Başlangıç Pozisyonu:% 38
Sütun 1:% 38’in son konumu
Yapıştırıcı Gradyanın arka planını eklemeyi bitirdikten sonra boyut ayarlarını açın ve tam genişlik seçeneğini etkinleştirin. Bu çizgiyi tamamen genişletin: evet
Mesafemiz ayrıca işlem adımlarını tutmaya adanmış tüm satırlar ve sütunlar için bazı özel dolgu değerleri gerektirir. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Dolgu Üst: 20px
Sütun 1 Pilding Alt: 20px
Sütun 3 Dolgu Üst: 20px
Sütun 3 Dolgu Alt: 20px
Sütun 5 dolgu üst: 20px
Sütun 5 Dolgu Alt: 20px
Herhangi bir modül eklemeden önce iki kez #1 #1 line, satırı iki kez klonlayacağız. Bu, sonraki adımlarda zamandan tasarruf etmemize yardımcı olacaktır. İlk yinelenmeyi değiştirin İkinci satır açık sütununun arka planını (ilk kopya) (ilk kopya) silin ve kendisine uygulanan sütun gradyanının tüm arka planlarını silin. İkinci sırada herhangi bir işlem adımını barındırmayacak çünkü buna ihtiyacımız olmayacak, yalnızca başlık ve dikey bölücü bu adımları bağlayacaktır. Sütun alanını da çıkarın, 1, 3 ve 5 sütunlarına uygulanan tüm özel dolgu sütunlarını silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Blurb modülünü ilk sıra sütununa ekleyin #1 İçeriği ekleyin Modül eklemeye başlamanın zamanı geldi! İlk satırdan 1 sütundaki bulanıklık modülü ile başlayacağız. Bu bulanıklık modülü, ilk adımımızdan içeriği barındıracak, bu nedenle devam edin ve seçim metninizi ekleyin. Simgemiz ayrıca bir sonraki adımı bulmak için bir yer gösterecek aşağıdaki simgeyi de kullanıyor: Varsayılan arka plan rengi daha sonra, bulanıklık modülüne varsayılan arka plan rengini ekleyin. Bu arka plan rengi, bölüm için kullandığımızla aynıdır. Bu, bu öğreticinin önceki bölümüne eklediğimiz sütun gradyanının arka planını gizler. Arka plan rengi: #3A1dad Arka plan rengini yönlendirin, ancak sütun gradyanının arka planının Hover’da görünmesini istiyoruz. Bu yüzden imleci gerçekten şeffaf bir renge işaret ederken arka plan rengini değiştiriyoruz.
Arka plan rengi: RGBA (255,255,255.0) Varsayılan simge ayarları, simge ayarlarını girerek devam eder ve bazı değişiklikler yapar.
Renk simgesi: #9D8AD8 Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu: 80px
Simge ayarlarına gidin, imleçi yönlendirirken farklı olan yazı tiplerinin rengini ve yazı tiplerinin boyutunu uygulayın.
Ikon Color: #ffffff Simge yazı tipi boyutu: 120px
Sonraki metin ayarları, metin ayarlarını açın ve bazı değişiklikler yapın.
Metin Oryantasyonu: Orta Metin Rengi: Işık
Başlık Metin Ayarları Başlık metin ayarlarının da değiştirilmesi gerekir.
Ağır yazı tipi başlığı: Ultra Kalın Yazı tipi stili başlığı: büyük harf
Geçiş Düzgün bir geçiş yapmak için geçiş süresini artıracağız.
Geçiş süresi: 500ms Klon Blurb Modülü ve Düzensiz Sütunlara Yer (Her ikisi de #1 & #3 satır) Şimdi bulanıklık modülünün ilk adımını yaptık, 5 kez klonlayabilir ve kopyayı aşağıdaki basılı ekranda işaretlenmiş sütuna koyabiliriz. İçerik ve simge Her kopya elbette, işlemin mantıklı olmasını sağlamak için her bir kopyanın ve simgelerinin içeriğini değiştirmeniz gerekir.
Eklememiz gereken ikinci modülün #1 görünürlüğünün ikinci sütununa yatay bölücü ekleyin. Bu modülü bulanık modülün tüm adımlarını birbirine bağlamak için kullanıyoruz. Lütfen ve ilk satırdan ikinci sütuna bir tane ekleyin. Divisor göster: evet Bölücü rengi bir sonraki bölücü rengini değiştirir. Renk: #dddddd
Dikey bölücü modülünü uyumlu hale getirmek için mesafe, birkaç üst kenar boşluğu kullanacağız. Ayrıca bazı sol ve sağ kenar boşlukları negatif kullanarak modülün genişliğini artıracağız.
Üst kenar boşluğu: 150 pikselSol kenar boşluğu: -60px Doğru: -60px
Klon Yatay Bölü Kenarı ve Kısır Modülünü Klonlamak ve Aşağıdaki Yazdırılan Ekranda İşaretlenen Sütuna Yerleştirme:
#2 görünürlüğünün ilk sütununa dikey böcekleri ekleyin. Bunu yapmak için ikinci sıradan Sütun 1’e yeni bir bölücü modülü ekleyeceğiz, ancak ‘Bölüciyi Görüntüle’ seçeneğinin devre dışı bırakıldığından emin olacağız.
Divisor göster: hayır Arka plan rengi Arka plan rengini bir sonraki modüle ekleyin. Arka plan rengi: #ddddd
Yapıştırıcı ve sonraki boyut ayarlarını değiştirin. Bunu yaptıktan sonra, dikey bölücünün yerine düştüğünü göreceksiniz. Genişlik:% 0.5
Modül hizalaması: Pusat, dikey böceklerin yüksekliğini artırmak için bir mesafedir, bazı özel alan değerleri kullanacağız. Üst kenar boşluğu: 20px
Üst dolgu: 120px
Dolgu Alt: 120 piksel Dikey bölücü klon ve yinelenmeyi sütun 5 satır #2, ikinci sıranın son sütununa yaptığınız ve yerleştirdiğiniz dikey bölücü klonlamaya yerleştirin.
Başlık Metin Modülünü Sütun 3 Satır #2 Ekleyin İhtiyacımız olan son modülün içeriğini ekleyin. Bu modülü, seçilen birkaç içeriğe sahip ikinci satırdan üçüncü sütuna ekleyin.
Başlık Metin Ayarları Başlık metin ayarlarını açın ve başlık ekranınızda bazı değişiklikler yapın.
Başlık 2 Font Ağırlığı: Ultra Kalın Başlık 2 Metin Seviyesi: Orta Başlık 2 Renk Metni: RGBA (255,255,255.0.09) Başlık 2 Metin Boyutu: 220px (masaüstü), 150 piksel (tablet), 100px (telefon)
Başlık alanı 2 harf: -50px (masaüstü), -30px (tablet), -25px (telefon)
Son mesafe, metin modülünün başlığının yerine girmesine izin vermek için bazı özel alan değerleri ekleyin.
Üst kenar boşluğu: 30 piksel
Sol kenar boşluğu: -800 piksel
Sağ kenar boşluğu: -800 piksel Tabletler ve cep telefonları için bir alternatif oluşturun Bu yazının başında belirtildiği gibi arka plan renginin yeni bir kısmını ekleyin, daha küçük ekran boyutları için bir alternatif yapacağız. Devam edin ve daha önce olduğu gibi aynı arka plan rengini kullanarak yeni normal bölümü ekleyin.
Arka plan rengi: #3A1dad
Mesafe Bazı dolgu değerleri özel olarak yukarı ve aşağı ekleyin.
Üst dolgu: 170px Dolgu Alt: 170px
Görünürlük ve görünürlük ayarlarında masaüstündeki parçaları gizleyin. Masaüstü için yaptığımız gibi, 6 sütun satırı kullanmak yerine 1 numaralı satırlar ekleyin. Yalnızca bir sütun kullanıyoruz.
Metin Modülü Klon Başlığı Önceki bölümden Metin Modülünün #1 Klonlama Metin Başlığı’na yerleştirin ve Masaüstü bölümünüzden kopya yerleştirin.
Sıra #2 sütun yapısı daha sonra ekleyin, bir sütunla başka bir satır ekleyin. Önceki bölümden bulanık klon modülü ve masaüstündeki bulanıklık modülünün adımlarından birini klonlayarak satır 2’ye yerleştirin ve yeni satırınıza kopya yerleştirin. Simgeyi değiştir, simgeyi aşağı yönlü simgeye değiştirin. Boyutunu Değiştirin Bir sonraki boyut ayarlarını değiştirin. Genişlik:% 39 (tablet),% 59 (cep telefonu) Modül hizalaması: merkez Önceki bölümden dikey bölücü klonu ve 2 numaralı satıra yerleştirin. Lütfen ve klon ve yinelenen bulanıklık modülünün hemen altına yerleştirin. Değişim Boşlukları, yüksekliği azaltmak için bu modülün mesafe ayarını değiştirin. Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel
İki modülü istediğiniz kadar klonlamak, bu iki modülü tüm işlem adımlarını daha küçük bir ekran boyutunda görüntülemek istediğiniz kadar klonlayabilirsiniz. Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım. Bu yazıdaki son zihin, inanılmaz ve benzersiz bir süreç oluşturmak için Divi sütun yapısını kullanmanın yaratıcı bir yolunu gösterdik. Buna ek olarak, bir öğeyi yönlendirdikten sonra ortaya çıkan sürecin her adımına düzgün bir havada hafif bir etkisi ekledik. Kendi benzersiz alternatifinizi yaratmak için bu tasarımla oynamaktan çekinmeyin. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
