Divi'nin Yeni Satır Hizalama Seçeneklerini Yaratıcı Bir Şekilde Kullanma

Bugünün Divi eğitiminde, Divi'deki yeni satır hizalama seçeneklerini kendi avantajınıza nasıl kullanabileceğinizi göstereceğiz. Divi'nin Gelişmiş Tasarım Seçenekleri ile nelerin mümkün olduğu hakkında size bir fikir vermek için sıra hizalama seçeneklerini diğer yerleşik tasarım seçenekleriyle birleştireceğiz. Size nasıl yeniden oluşturulacağını göstereceğimiz örnek kesinlikle hiçbir ek kod içermemektedir, bu da herhangi bir beceri seviyesinden herkesin bu tasarımı başarabileceği anlamına gelir.

Başlayalım!

Tasarım Önizlemesi

Bugün oluşturacağımız şeye kısa bir bakış (masaüstünde):

Ve işte tasarımın mobilde nasıl görüneceği:

Divi'nin Yeni Satır Hizalama Seçeneklerini Yaratıcı Bir Şekilde Kullanma

Youtube Kanalımıza Abone Olun

Tema Özelleştirici Ayarları

Birincil Menü Çubuğu

Fark edebileceğiniz gibi, ana menüyü de düzen ile eşleştirdik. Birincil menü çubuğunuzu değiştirmek için WordPress Panonuz > Görünüm > Özelleştir > Başlık ve Gezinme > Birincil Menü Çubuğu > bölümüne gidin ve aşağıdaki değişiklikleri yapın:

• Logo Resmini Gizle: Etkinleştir
• Menü Yüksekliği: 30
• Metin Boyutu: 17
• Harf Aralığı: -1
• Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #FFFFFF
• Aktif Bağlantı Rengi: #FFFFFF
• Arka Plan Rengi: rgba(255, 255, 255, 0)
• Açılır Arka Plan Rengi: rgba(255, 255, 255, 0)

Kahraman Bölümü

Birincil menünüzü değiştirdikten sonra, düzene başlamanın zamanı geldi. Yapmanız gereken ilk şey, yeni bir sayfa eklemek, Visual Builder'a geçmek ve yeni bir standart bölüm eklemek. Bu ilk bölüm bizim kahraman bölümümüz olacak ve şöyle görünüyor:

Bölüm Ayarları

Degrade Arka Plan

Standart bölümü ekledikten sonra buna bir degrade arka planı ekleyebilirsiniz:

• İlk Renk: #9e5555
• İkinci Renk: #000000
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Satır Ayarları

Renk Yerleşimi

Ardından, o bölüme tek sütunlu bir satır ekleyin ve ayarlarını açın. Yapmamız gereken ilk şey, bir renk katmanı eklemek. Koyu gri bir renk seçerek resminizin ne kadar koyu olmasını istediğinizi seçebilirsiniz. Bu durumda, '#595959' kullandık.

Arka plan görüntüsü

Bir sonraki yapmamız gereken şey, tek sütunlu satıra bir arka plan resmi eklemek ve renk bindirmesini uygulamak. Renk kaplamasını ve arka plan görüntüsünü karıştırmak için Arka Plan Görüntüsü Karışımınız olarak 'Çarp'ı seçin.

Orta Satır Hizalaması

Çoğu web sitesinde olduğu gibi, kahraman bölümü için bir orta sıra hizalaması seçeceğiz.

Satırı Tam Genişlikte Yap

Ayrıca satırımızın tam genişlikte olmasını istiyoruz, bu yüzden Tasarım sekmesinin Boyutlandırma alt kategorisinde bu seçeneği etkinleştireceğiz.

Özel Dolgu

Satır ayarlarında yapmamız gereken son şey, üste ve alta özel bir '300px' dolgusu eklemek.

İlk Metin Modülü

Tüm ayarları yaptıktan sonra, ilk Metin Modülünü satıra ekleyeceğiz. İçerik sekmesinde görünmesini istediğiniz metni seçin ve Tasarım sekmesine geçin. Tasarım sekmesinde, Metin alt kategorisine aşağıdaki ayarların uygulandığından emin olun:

• Metin Yazı Tipi: Arvo
• Metin Yazı Tipi Boyutu: 64 (Masaüstü), 47 (Tablet), 33 (Telefon)
• Metin Rengi: #FFFFFF
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

İkinci Metin Modülü

Ardından, başka bir Metin Modülü ekleyin. İkinci Metin Modülü bunun yerine aşağıdaki ayarları içerir:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 25 (Masaüstü), 18 (Tablet), 16 (Telefon)
• Metin Rengi: #FFFFFF
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Merkez

İkinci Bölüm

Kahraman bölümü bittikten sonra ikinci bölüme geçebiliriz. Bu bölüm için, güzel bir efekt yaratmak için özel kenar boşluğu ve sütun arka planlarıyla birlikte ortadaki yerine sağ satır hizalamasını kullanacağız. Bu bölümde iki satır sürümü oluşturmamız gerekecek: masaüstü sürümü ve tablet/telefon sürümü. Bu, tasarımın her türlü ekranda çarpıcı görünmesini sağlayacaktır.

Bölüm Ayarları

Degrade Arka Plan

İkinci bir bölüm ekledikten sonra, degrade arka planını buna ekleyin:

• İlk Renk: #000000
• İkinci Renk: #d6d6d6
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 184deg
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

Masaüstü Satırı Ekle

Ardından, devam edebilir ve buna ilk iki sütunlu bir satır ekleyebilirsiniz; bu satır masaüstü sürümü olacak. Neyse ki, çoğunu tablet/mobil sürüm için de yeniden kullanabileceğiz.

Satır Ayarları

Sütun Arka Planı

İçerik sekmesinde, ikinci sütunun arka plan rengi olarak '#FFFFFF' ekleyin.

Sağ Satır Hizalama

Tasarım sekmesine gidin ve bir sağ satır hizalaması seçin.

Satırı Tam Genişlikte Yap

Ardından, Boyutlandırma alt kategorisini açın ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

Özel Dolgu

Satır ayarlarında yapmanız gereken son şey, satıra '300px' üst dolgusu ve ikinci sütuna aşağıdaki dolgu eklemektir:

• Üst: 35 piksel
• Sağ: 35 piksel
• Alt: 150 piksel
• Sol: 35 piksel

Sütun 1

Birinci Bölücü Modül

İlk sütun için bir Bölücü Modül ekleyerek başlayacağız. İçerik sekmesinin Görünürlük alt kategorisinde, 'Bölücüyü Göster' seçeneğini etkinleştirin.

Tasarım sekmesine gidin ve ayırıcı renk olarak '#FFFFFF' öğesini seçin.

Ardından, Bölücü Stili olarak 'Solid'i ve Stiller alt kategorisinde Bölücü Konumu olarak 'Üst'ü seçin.

Bölücü Modülün Tasarım sekmesinde yapmanız gereken son şey, Boyutlandırma alt kategorisinde aşağıdaki ayarlamaları yapmaktır:

• Bölücü Ağırlığı: 3
• Yükseklik: 0 piksel
• Genişlik: 20%
• Modül Hizalaması: Sağ

İlk Metin Modülü

Bölücü Modülünün hemen altına, ilk Metin Modülünü ekleyin ve Tasarım sekmesinin Metin alt kategorisinde aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Arvo
• Metin Yazı Tipi Boyutu: 30px
• Metin Rengi: #000000
• Metin Satırı Yüksekliği: 1,6em
• Metin Yönü: Merkez

İlk Bölücü Modülünü Klonla ve Hizalamayı Değiştir

Oluşturduğumuz Divider Modülünü klonlayın ve ilk Metin Modülünün hemen altına konumlandırın. Değiştirilmesi gereken tek şey Boyutlandırma alt kategorisindeki Modül Hizalamasıdır. Sağ tarafta tutmak yerine, solu seçin.

İkinci Metin Modülü

İlk sütuna eklemeniz gereken son şey, aşağıdaki ayarlara sahip başka bir Metin Modülüdür:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 14
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Merkez

2. sütun

Görüntü Modülü

İkinci sütuna eklemeniz gereken ilk şey, Tasarım sekmesinin Aralık alt kategorisinde aşağıdaki ayarlara sahip bir görüntü Modülüdür:

• Resmin Altındaki Boşluğu Göster: Evet
• Üst Kenar Boşluğu: -300px
• Sol: -80 piksel

Metin Modülü

Ardından, Görüntü Modülünün hemen altına bir Metin Modülü ekleyin ve Tasarım sekmesinin Metin alt kategorisinde aşağıdaki ayarları seçin:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 14
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Merkez

Sosyal Medya Takip Modülü

İkinci sütuna eklemeniz gereken son şey bir Sosyal Medya Takip Modülüdür. İstediğiniz kadar sosyal simge ekleyin ve Tasarım sekmesinde Öğe Hizalaması olarak 'Merkez'i seçtiğinizden emin olun.

Tablet ve Telefonda Devre Dışı Bırak

Tüm bunlar bittiğinde, Telefon ve Tablet'teki satırı devre dışı bırakabilirsiniz.

Mobil Satır Ekle

Masaüstü Satırını Klonla

Artık Masaüstü sürümünü yaptığımıza göre, Mobil sürümü yapmak çok daha hızlı olacak. Masaüstü satırını klonlayın ve sonraki adımları izleyin.

Sütunları Değiştir

Her iki sütunda bulunan modülleri değiştirerek başlayın.

Sütun Arka Plan Rengi

Ardından, ikinci sütunun arka plan rengini kaldırın ve bunun yerine ilk sütuna yerleştirin.

Sütun Dolgusu

Özel Dolguyu ikinci sütunda kullanmak yerine, onu ilk sütunda bulundurmamız gerekecek. Ayrıca, alt dolgu '150px' değil, üst, sağ ve sol dolgu gibi '35px'.

Orta Satır Hizalamasını Kullan

Ardından, satır hizalamasını da 'Merkez' olarak değiştirmemiz gerekecek.

Masaüstünde Devre Dışı Bırak

Son fakat en az değil, satırın Masaüstünde devre dışı bırakıldığından emin olun.

Üçüncü Bölüm

Üçüncü bölüm, ikincisine gerçekten benzer olacak. İkinci bölümün ayarlarının çoğunu devralabildiğimiz ve bazı ayarlamalar yapabildiğimiz için bu bölümü oluşturmak kolay olacak. Tüm adımları tamamladığınızda, aşağıdaki sonuca tanık olabilirsiniz:

Bölüm Ayarları

Degrade Arka Plan

Yeni bir standart bölüm ekleyin ve aşağıdaki gradyan arka planını kullanın:

• İlk Renk: #d6d6d6
• İkinci Renk: #9e5555
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 184deg
• Başlangıç ​​Konumu: %30
• Bitiş Konumu: %30

Özel Kenar Boşluğu

Ardından, özel bir '-200px' kenar boşluğu da ekleyin.

Masaüstü Satırı

Üçüncü bölüm için de aynı çalışma şekli; masaüstü ve tablet/telefon versiyonu yapacağız.

İkinci Bölümün Masaüstü Satırını Klonla

Önceki bölümün Masaüstü satırını klonlayarak başlayın. Ayarların çoğu aynıdır ve yapılması gereken değişiklikleri gözden geçireceğiz.

Sütunları Değiştir

Yapmamız gereken değişikliklerden biri de her iki sütunda bulunan modülleri değiştirmek.

Sütun Arka Plan Rengi

Ardından, ikinci sütun arka plan rengini de kaldırmamız ve ilk sütun arka plan rengi olarak '#000000' eklememiz gerekecek.

Sütun Dolgusu

Sütun 2 Özel Dolgusunu silin ve ilk sütunun üst, sağ, alt ve sol özel dolgusu için '35px'i kullanın.

Sol Satır Hizalamasını Kullan

Ayrıca, satır hizalamasını sağdan sola değiştirin.

Görüntü Modülü Özel Kenar Boşluğu

Görüntü Modülünün boşluk alt kategorisinin de bazı değişikliklere ihtiyacı olacaktır:

• Üst: -150 piksel
• Sağ: -80px

İlk Bölücü Modül Özel Marj

Ardından, ikinci sütundaki ilk Bölücü Modülüne '200 piksel'lik bir üst kenar boşluğu ekleyin.

Zıt Renkleri Kullan

Fark edebileceğiniz gibi; renklerin kullanımı ikinci bölümün tam tersidir. Devam edin ve tüm yazı tipi renklerini '#FFFFFF' ve ayırıcı renkleri '#000000' olarak değiştirin.

Tablet ve Telefonda Devre Dışı Bırak

Satır tablet ve telefonda zaten devre dışı bırakılmış olsa da (klon nedeniyle), emin olmak istiyorsanız Görünürlük alt kategorisine gidebilirsiniz.

Mobil Satır

Önceki Masaüstü Satırını Klonla

Mobil sürüm için, az önce oluşturduğunuz Masaüstü satırını kopyalayın ve bu yazının sonraki bölümünde takip eden değişiklikleri yapın.

Orta Satır Hizalamasını Kullan

Satır ayarlarını açın ve Satır Hizalamasını orta olarak değiştirin.

Görüntü Modülü Özel Kenar Boşluğu

Yapmanız gereken başka bir şey de Görüntü Modülünün üst kenar boşluğunu '-20%' olarak değiştirmek.

Masaüstünde Devre Dışı Bırak

Son olarak, bu son satırın masaüstünde devre dışı bırakıldığından emin olun.

Sonuç

Bu öğreticiyi adım adım izleyerek, masaüstünde aşağıdaki sonucu elde edebilmelisiniz:

Ve mobilde aşağıdaki sonuç:

Son düşünceler

Bu gönderide, Divi Builder'da satırların farklı hizalama seçeneklerini nasıl yaratıcı bir şekilde kullanabileceğinizi gösterdik. İnsanlar en çok yaparak öğrenirler, bu yüzden size nasıl yaratılacağını adım adım gösterdiğimiz bir örnek verdik. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bırakmaktan çekinmeyin.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!