Divi ile Yatay Bölücüler Nasıl Dikey Bölücülere Dönüştürülür

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, 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, örnek olarak Divi's Moving Company Layout Pack'i kullanarak hepimizin bildiği standart yatay Divider Module'ü nasıl dikey hale getireceğinizi göstereceğiz. Sayfalarınızda zaman çizelgeleri oluşturmaya çalışıyorsanız, bu yaklaşım özellikle kullanışlı olacaktır. 'Nasıl çalışır' bölümleri ve çok daha fazlası için kullanmak harika. Dikey bölücüyü kurduktan sonra, zaman çizelgesi efekti oluşturmak için üstüne Blurb Modülleri ekleyeceğiz. Bu öğretici herhangi bir CSS kodu gerektirmez ve yalnızca Divi'nin yerleşik seçeneklerini temel alır.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

Oluşturmaya Başlayalım: Yeni Bir Sayfa Ekle ve Hareketli Şirket Yerleşim Paketinin Açılış Sayfasını Yükle

Yeni Sayfa Ekleyin ve Visual Builder'a Geçin

Yeni bir sayfa ekleyerek, bir başlık ekleyerek ve Visual Builder'a geçerek başlayalım.

Hazır Düzen Seçin

Bunu yaptığınızda, sıfırdan oluşturma, önceden hazırlanmış bir düzen seçme veya mevcut bir sayfayı klonlama olanağına sahip olacaksınız. Son sonucu oluşturmak için Moving Company Layout Pack'in açılış sayfasını kullanacağız, bu yüzden devam edin ve önceden hazırlanmış düzenlere göz atın.

Hareketli Şirket Düzen Paketinin Açılış Sayfasını Seçin

Moving Company Layout Pack ile karşılaşana kadar önceden hazırlanmış düzenleri aşağı kaydırın ve açılış sayfasını sayfanıza yükleyin.

Dikey Bölücü Zaman Çizelgesi Oluşturmaya Başlayın

Zaman Çizelgesi Bölümünü Bul

Artık yatay bölücüleri dikey olanlara çevirmeye ve bu bölücüyü bir zaman çizelgesi oluşturmak için kullanmaya hazırız. Devam edin ve açılış sayfanızda aşağıdaki bölümü bulun:

Aşağıya Yeni Bir Standart Bölüm Ekleyin

Bu bölümün hemen altına standart bir bölüm ekleyin.

'Nasıl Çalışır' Satırını Yeni Bölüme Yerleştirin

Önceki bölümün 'Nasıl Çalışır' satırını yeni bölümünüze sürükleyerek devam edin.

Yeni Satır Ekle

Sütun Yapısı

Bölümünüze yeni yerleştirdiğiniz satırın hemen altına, aşağıdaki sütun yapısına sahip bir tane daha ekleyin:

aralık

Herhangi bir modül eklemeden önce, satır ayarlarınızı açın ve üst kenar boşluğuna '60px' ekleyin.

Sütun 1'e Bölücü Modülü Ekle

Bölücüyü Gizle

Artık modül eklemeye başlayabiliriz! İlk sütunla başlayacağız ve işimiz bittiğinde ikincisine geçeceğiz. İlk sütunda ihtiyaç duyacağımız ilk şey bir Bölücü Modül. Daha önce de belirtildiği gibi, onu dikey hale getireceğiz. İstediğimiz sonuca ulaşmak için ilk adım, Show Divider seçeneğini devre dışı bırakmaktır.

Degrade Arka Plan

Gerçek bölücüyü kullanmak yerine, Bölücü Modülünün arka planını kullanarak bir bölücü oluşturacağız. Aşağıdaki gradyan arka planını kullanıyoruz:

• Renk 1: #e0aa25
• Renk 2: #c11000

boyutlandırma

Şimdi, ayırıcının görünür olmadığından emin olduk. Dikey bölücü oluşturmaya yönelik bir sonraki önemli adım, bölücümüzün genişliğini büyük ölçüde azaltmaktır. '2%' kullanıyoruz ama siz istediğiniz kadar kalın görünmesini sağlayabilirsiniz. Ayrıca, merkezi Modül Hizalamasını etkinleştiriyoruz.

aralık

Bölücü Modülü dikey olarak uzatmak için Bölücü Modülümüzün üst ve alt özel dolgusuna '480px' ekleyeceğiz. Ve işte, dikey bölücümüz var!

Sütun 1'e Önceki Bölümün Bulanıklık Modüllerini Ekle

Bir sonraki yapacağımız şey, bu dikey bölücüyü kullanarak bir zaman çizelgesi oluşturmak. Önceki bölümde, üç Blurb Modülü bulacaksınız. Devam edin ve her birini, üzerinde çalıştığınız satırın ilk sütununa, Bölücü Modülün hemen altına yerleştirin.

Blurb Modülünü Değiştir #1

Arka Plan Rengi Ekle

Blurb Modüllerimizi düzenlerken süreci hızlandırmak için Divi'nin verimlilik özelliklerinden birini kullanacağız. Tüm değişiklikleri ilk Blurb Modülüne uygulayacağız ve daha sonra modül stillerini kopyalayıp tek tıklamayla diğer Blurb Modüllerine ekleyeceğiz. İlk Blurb Modülünüzü açın ve arka plan rengi olarak 'rgba(255,255,255,0.73)' ekleyin.

Simge Yazı Tipi Boyutunu Değiştir

Yapmanız gereken bir sonraki şey, Simge Yazı Tipi Boyutunu '65px' olarak değiştirmek.

Boşluğu Kaldır

Ayrıca Aralık ayarlarındaki tüm kenar boşluğunu kaldıracağız. Daha sonra, değerler farklı olduğu için her bir Blurb Modülüne ayrı ayrı marj ekleyeceğiz.

Blurb Modül Stilini Kopyala ve Kalan Blurb Modüllerine Ekle

Blurb Modül Stillerini Kopyala

İlk Blurb Modülünü değiştirmeyi bitirdik. Üzerine sağ tıklayın ve 'Modül Stillerini Kopyala' seçeneğini seçin. Bu, az önce yaptığımız tüm değişiklikleri kopyalayacaktır.

Modül Stillerini Kalan Bulanıklık Modüllerine Yapıştır

Ve modül stillerini kalan iki Blurb Modülüne yapıştırın. İçeriği değiştirmediğini fark edeceksiniz, sadece size zaman kazandıran tasarım ayarlarını değiştiriyor.

Aralık Bulanıklığı Modülleri

Blurb Modülü #1

Daha önce belirtildiği gibi, Blurb Modüllerinin aralığı farklıdır. İkincisinde hiç yok ama birincisi üst kenar boşluğu için '-900px' kullanıyor. Bu negatif marjı eklediğinizde, Blurb Modüllerinin zaman çizelgesinin bir parçası olduğunu fark edeceksiniz. Visual Builder içinde, Bölücü Modülü, Blurb Modüllerinin üstünde gibi görünüyor. Ancak Visual Builder'dan çıktığınızda, her şeyin yerine oturduğunu göreceksiniz, bu yüzden endişelenmeyin.

Blurb Modülü #3

Ardından son Blurb Modülünüzü açın ve alt kenar boşluğuna '150px' ekleyin.

Sütun 2'de Görüntü Modülünü Bırakın

Resmi Bul

Artık 2. sütuna geçebiliriz! İhtiyacımız olan tek modül bir Görüntü Modülü. Zaten sayfamızda bulunan birini yeniden kullanıyoruz, bu yüzden devam edin ve bulun:

2. Sütundaki Resmi Bırak

Bırakın ve sonraki ikinci sütununuza sürükleyin.

Aralığı Değiştir

Dikey olarak ortalamak için, ona biraz kenar boşluğu ekleyeceğiz:

• Üst Kenar Boşluğu: 300px (Masaüstü), 30px (Tablet ve Telefon)
• Alt Kenar Boşluğu: 50px (Tablet ve Telefon)

Önceki ve Sonraki Bölümü Kaldır

Bölümümüzü oluşturmayı bitirdik! Yapılması gereken son şey, fazlalık bölümleri silmektir.

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu kullanım örneği blog gönderisinde, Divi's Moving Company Layout Pack'i kullanarak dikey bölücüleri dikey bölücülere nasıl dönüştüreceğinizi gösterdik. Bu yaklaşım, herhangi bir ek kod kullanmak zorunda kalmadan sayfanızda zaman çizelgeleri oluşturmak istiyorsanız idealdir. Yalnızca Divi'nin yerleşik seçeneklerine dayanır. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!