Divi'nin Yeni Sütun Yapıları ile “Süreçlerimiz” Bölümü Oluşturma

Divi'nin yeni sütun yapıları, inkar edilemez bir şekilde Divi'ye bir ton daha yerleşik tasarım olanağı ekledi. Divi'nin çok yönlü sütun yapılarıyla ne kadar benzersiz olabileceğinizi göstermek için, yalnızca Divi'nin yerleşik seçeneklerini kullanarak benzersiz bir “bizim sürecimiz” bölümünü nasıl oluşturacağınızı göstereceğiz. Bunun üzerine, süreçteki adımlardan birinin üzerine gelindiğinde görünen ince bir vurgulu efekti de ekleyeceğiz. Bu bölümler, müşterilerinize veya potansiyel müşterilerinize ne yaptığınızı nasıl yaptığınızı açıklamak için harikadır.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, bu eğitimden bekleyebileceğiniz sonuca bir göz atalım.

Yeni Bölüm Ekle

Arka plan rengi

Yeni veya mevcut bir sayfaya standart bir bölüm ekleyin ve bunun için aşağıdaki arka plan rengini kullanın:

• Arka Plan Rengi: #3a1dad

aralık

Sonraki boşluk ayarlarına gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 170 piksel
• Alt Dolgu: 170px

görünürlük

Daha küçük ekran boyutlarında bir alternatif oluşturuyoruz ancak masaüstü sürümünü oluşturmaya başlayacağız. Bu yüzden telefon ve tablette bu bölümü görünürlük ayarlarında devre dışı bırakıyorduk.

1. Satır Ekle

Sütun Yapısı

Bölüm ayarlarını değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Sütun 1, 3 ve 5'e Gradyan Arka Planı Ekle

Güzel bir fareyle üzerine gelme efekti oluşturmak için 1, 3 ve 5 numaralı sütunlara degrade bir arka plan ekleyeceğiz. Bunlar, her biri bir süreç adımını içeren sütunlardır. Adımları birbirine bağlamak için kalan iki sütunu kullanacağız. Bahsettiğimiz üç sütundan her biri aynı gradyan arka planına ihtiyaç duyacaktır:

• Renk 1: #580cf2
• Renk 2: rgba(41,196.169,0)
• Sütun 1 Gradyan Türü: Radyal
• Sütun 1 Başlangıç ​​Konumu: %38
• Sütun 1 Bitiş Konumu: %38

boyutlandırma

Degrade arka planlarını eklemeyi tamamladığınızda, boyutlandırma ayarlarına gidin ve tam genişlik seçeneğini etkinleştirin.

• Bu Satırı Tam Genişlikte Yap: Evet

aralık

Ayrıca tüm satır ve tutma işlemi adımlarına ayrılmış sütun için bazı özel dolgu değerlerine ihtiyacımız olacak.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 20 piksel
• Sütun 1 Alt Dolgu: 20px
• Sütun 3 Üst Dolgu: 20 piksel
• Sütun 3 Alt Dolgu: 20px
• Sütun 5 Üst Dolgu: 20 piksel
• Sütun 5 Alt Dolgu: 20px

Klon Satır #1 İki Kez

Herhangi bir modül eklemeden önce satırı iki kez klonlayacağız. Bu, sonraki adımlarda zaman kazanmamıza yardımcı olacaktır.

İlk Kopyaları Değiştir

Sütun Gradyan Arka Planlarını Kaldır

Bölümünüzdeki ikinci satırı açın (ilk kopya) ve ona uygulanmış tüm sütun gradyan arka planlarını kaldırın. İkinci sırada herhangi bir işlem adımı olmayacağından, yalnızca bir başlık ve adımları birbirine bağlayacak dikey bölücüler olacağından bunlara ihtiyacımız olmayacak.

Sütun Aralığını Kaldır

Benzer şekilde, sütun 1, 3 ve 5'e uygulanan tüm sütun özel dolgusunu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

1. Satırın İlk Sütunu'na Blurb Modülü Ekleme

İçerik Ekle

Modülleri eklemeye başlama zamanı! İlk satırın 1. sütununda bir Blurb Modülü ile başlayacağız. Bu Blurb Modülü, ilk adımımızın içeriğini tutacaktır, bu yüzden devam edin ve seçtiğiniz bir metni ekleyin.

Simge Seç

Ayrıca, bir sonraki adımı nereye arayacağınızı gösteren aşağıdaki simgeyi de kullanıyoruz:

Varsayılan Arka Plan Rengi

Ardından, Blurb Module'e varsayılan bir arka plan rengi ekleyin. Bu arka plan rengi, bölüm için kullandığımızla aynı. Bu öğreticinin önceki bölümünde eklediğimiz sütun gradyan arka planını gizler.

• Arka Plan Rengi: #3a1dad

Vurgulu Arka Plan Rengi

Ancak, sütun gradyan arka planının fareyle üzerine gelindiğinde görünmesini istiyoruz. Bu yüzden fareyle üzerine gelindiğinde arka plan rengini tamamen şeffaf bir renge değiştiriyoruz.

• Arka Plan Rengi: rgba(255,255,255,0)

Varsayılan Simge Ayarları

Simge ayarlarına giderek ve bazı değişiklikler yaparak devam edin.

• Simge Rengi: #9d8ad8
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 80px

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde farklı bir simge rengi ve yazı tipi boyutu uygulayın.

• Simge Rengi: #ffffff
• Simge Yazı Tipi Boyutu: 120px

Metin Ayarları

Ardından, metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yönü: Merkez
• Metin Rengi: Açık

Başlık Metni Ayarları

Başlık metni ayarlarının da değiştirilmesi gerekir.

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Yazı Tipi Stili: Büyük Harf

geçişler

Yumuşak bir geçiş oluşturmak için geçiş süresini artıracağız.

• Geçiş Süresi: 500ms

Blurb Modülünü Klonla ve Düzensiz Sütunlardaki Yeri (Her İki Satır #1 ve # 3)

Artık ilk Blurb Module adımını oluşturduğumuza göre, onu 5 kez klonlayabilir ve kopyaları aşağıdaki yazdırma ekranında işaretli sütunlara yerleştirebiliriz.

Her Kopyanın İçeriğini ve Simgesini Değiştirin

Elbette, işlemin anlamlı olduğundan emin olmak için kopyaların her birinin içeriğini simgeyle birlikte değiştirmeniz gerekecektir.

1. Satırın İkinci Sütuna Yatay Bölücü Ekle

görünürlük

Eklememiz gereken ikinci modül bir Bölücü Modül. Tüm Blurb Module adımlarını birbirine bağlamak için bu modülü kullanıyoruz. Devam edin ve ilk satırın ikinci sütununa bir tane ekleyin.

• Bölücüyü Göster: Evet

Bölücü Renk

Sonraki ayırıcı rengini değiştirin.

• Renk: #dddddd

aralık

Bölücü Modülü dikey olarak hizalamak için bir miktar üst kenar boşluğu kullanacağız. Ayrıca bir miktar negatif sol ve sağ kenar boşluğu kullanarak modülün genişliğini artıracağız.

• Üst Kenar Boşluğu: 150 piksel
• Sol Kenar Boşluğu: -60px
• Sağ: -60 piksel

Yatay Bölücüyü Klonla ve Çift Sütunlardaki Yeri (Her İki Satır #1 ve #3)

Bölücü Modülü klonlayın ve aşağıdaki yazdırma ekranında işaretli sütunlara yerleştirin:

2. Satırın İlk Sütuna Dikey Bölücü Ekle

görünürlük

Dikey bir bölücüye de ihtiyacımız olacak. Bir tane oluşturmak için ikinci satırın 1. sütununa yeni bir Bölücü Modülü ekleyeceğiz ama 'Bölücüyü Göster' seçeneğinin devre dışı olduğundan emin olacağız.

• Bölücüyü Göster: Hayır

Arka plan rengi

Sonraki modüle bir arka plan rengi ekleyin.

• Arka Plan Rengi: #dddddd

boyutlandırma

Ardından Boyutlandırma ayarlarını değiştirin. Bunu yaptığınızda, dikey bir ayırıcının yerine oturduğunu fark edeceksiniz.

• Genişlik: %0.5
• Modül Hizalaması: Merkez

aralık

Dikey bölücünün yüksekliğini artırmak için bazı özel boşluk değerleri kullanacağız.

• Üst Kenar Boşluğu: 20px
• Üst Dolgu: 120px
• Alt Dolgu: 120px

Dikey Bölücüyü Klonla ve 2. Satırın 5. Sütununa Kopyaları Yerleştir

Oluşturduğunuz dikey bölücüyü klonlayın ve ikinci satırın son sütununa yerleştirin.

2. satırın 3. sütununa Başlık Metin Modülü Ekle

İçerik Ekle

İhtiyacımız olan son modül, bir Metin Modülü başlığıdır. Bu modülü, bazı içeriklerle ikinci satırın üçüncü sütununa ekleyin.

Başlık Metni Ayarları

Başlık metni ayarlarına gidin ve başlığınızın görünümünde bazı değişiklikler yapın.

• Başlık 2 Yazı Ağırlığı: Ultra Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: rgba(255,255,255,0.09)
• Başlık 2 Metin Boyutu: 220px (Masaüstü), 150px (Tablet), 100px (Telefon)
• Başlık 2 Harf Aralığı: -50px (Masaüstü), -30px (Tablet), -25px (Telefon)

aralık

Son olarak, Metin Modülü başlığının yerine oturmasını sağlamak için bazı özel boşluk değerleri ekleyin.

• Üst Kenar Boşluğu: 30 piksel
• Sol Kenar Boşluğu: -800px
• Sağ Kenar Boşluğu: -800px

Tablet & Telefon için Alternatif Oluşturun

Yeni Bölüm Ekle

Arka plan rengi

Bu yazının başında belirtildiği gibi, daha küçük ekran boyutları için bir alternatif oluşturacağız. Devam edin ve öncekiyle aynı arka plan rengini kullanarak yeni bir normal bölüm ekleyin.

• Arka Plan Rengi: #3a1dad

aralık

Bazı özel üst ve alt dolgu değerleri ekleyin.

• Üst Dolgu: 170 piksel
• Alt Dolgu: 170px

görünürlük

Ve görünürlük ayarlarında masaüstündeki bölümü gizleyin.

1. Satır Ekle

Sütun Yapısı

Masaüstü bölümünde yaptığımız gibi 6 sütunlu bir satır kullanmak yerine sadece bir sütun kullanıyoruz.

Önceki Bölümün Başlık Metin Modülünü Klonla & 1. Satırdaki Yer

Masaüstü bölümünüzün Metin Modülü başlığını klonlayın ve kopyayı yeni satırınıza yerleştirin.

Boşluğu Kaldır

Bu modülün boşluk ayarlarını kaldırarak devam edin.

2. Satır Ekle

Sütun Yapısı

Ardından, bir sütunlu başka bir satır ekleyin.

Önceki Bölümün Blurb Modülünü Klonla ve 2. Sıradaki Yeri

Masaüstü bölümündeki Blurb Module adımlarından birini klonlayın ve kopyayı yeni satırınıza yerleştirin.

Simgeyi Değiştir

Simgeyi aşağıyı gösteren simgeyle değiştirin.

Boyutlandırmayı Değiştir

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: %39 (Tablet), %59 (Telefon)
• Modül Hizalaması: Merkez

Önceki Bölümün Dikey Bölücü Klonu ve 2. Sıradaki Yer

Burada da önceki bölümün dikey ayırıcısını kullanıyoruz. Devam edin ve kopyalayın ve kopyayı Blurb Modülünün hemen altına yerleştirin.

Aralığı Değiştir

Yüksekliğini azaltmak için bu modülün aralık ayarlarını değiştirin.

• Üst Dolgu: 50px
• Alt Dolgu: 50px

Her İki Modülü İstediğiniz Kadar Klonlayın

Bu modüllerin her ikisini de tüm işlem adımlarını daha küçük ekran boyutlarında sergilemek istediğiniz kadar çoğaltabilirsiniz.

Ön izleme

Artık tüm adımları attığımıza göre, sonuca son bir göz atalım.

Son düşünceler

Bu gönderide, çarpıcı ve benzersiz bir süreç bölümü oluşturmak için Divi'nin sütun yapılarını yaratıcı bir şekilde nasıl kullanacağınızı gösterdik. Bunun da ötesinde, bir öğenin üzerine geldiğinizde görünen işlem adımlarının her birine ince bir vurgu efekti ekledik. Kendi benzersiz alternatifinizi yaratmak için bu tasarımla oynamaktan çekinmeyin. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!