Divi ile Sütunları Fiyatlandırma Planlarına Dönüştürme

Divi'nin yeni sütun seçenekleri, iş akışlarımıza tonlarca yeni tasarım olanağı getirdi. Herhangi bir CSS kodu satırına dokunmak zorunda kalmadan birden fazla modülü birleştirmeye yardımcı olurlar. Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak sütunları fiyatlandırma planlarına dönüştüreceğiz. Bazı çarpıcı vurgulu efektler elde etmek için sütun vurgulu dönüştürme seçenekleriyle de oynayacağız. JSON'u da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Sütun Fiyatlandırma Planları Düzenini ÜCRETSİZ İndirin

Ücretsiz sütun fiyatlandırma planları düzenine el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Degrade Arka Plan

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyin ve bölüm ayarlarını açın. Arka plan ayarlarına gidin ve doğrusal bir gradyan arka planı ekleyin:

• Renk 1: #eded
• Renk 2: #ffffff
• Başlangıç ​​Konumu: %30
• Bitiş Konumu: %30

aralık

Ayrıca bölüme biraz üst ve alt dolgu ekliyoruz.

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

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın, gelişmiş sekmesine gidin ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %80 (Masaüstü ve Tablet), %90 (Telefon)
• Maksimum Genişlik: 1400 piksel (Masaüstü), %90 (Tablet), %100 (Telefon)

Sütun 1 Ayarları

İlkinden başlayarak sütun ayarlarını da değiştirmemiz gerekecek. Sütun 1 ayarlarını açın.

Degrade Arka Plan

Aşağıdaki degrade arka planını sütun 1'e uygulayın:

• Renk 1: #f7f7f7
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Alt
• Başlangıç ​​Konumu: %31
• Bitiş Konumu: %31

Sınır

Sütuna da '20px' kenarlık yarıçapı ekleyin.

Kutu Gölge

Ve sayfada biraz derinlik yaratmak için ince bir kutu gölgesi de ekleyeceğiz.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.11)

Varsayılan Dönüştürme Ölçeği

Bu yazının önizlemesinde fark edebileceğiniz gibi, sütunlar biraz dönüştürülmüş. Dönüştürme ayarlarına gidin ve dönüştürme ölçeği seçeneğinin varsayılan durumunda '%100' kaldığından emin olun.

• Alt: %100
• Sağ: %100

Hover Dönüşüm Ölçeği

Fareyle üzerine gelindiğinde dönüştürme ölçeği değerlerini değiştirin.

• Alt: %120
• Sağ: %120

Varsayılan Dönüştür Çevirisi

Ayrıca, dönüştürme çevirme ayarlarını kullanarak sütunu masaüstünde hafifçe sağa doğru itiyoruz. Aşağıdaki girişleri ekleyin:

• Alt: 34px (Masaüstü), 0px (Tablet ve Telefon)
• Sağ: 0 piksel

Fareyle Dönüştürme Çevirisi

Fareyle üzerine gelindiğinde dönüştürme çevirme değerlerini normale döndürün.

• Alt: 0 piksel
• Sağ: 0 piksel

Varsayılan Dönüştür Döndür

Dönüştürme döndürme ayarlarına geçin ve sola aşağıdaki değeri ekleyin:

• Sol: 352deg (Masaüstü), 0deg (Tablet ve Telefon)

Hover Dönüştür Döndür

Fareyle üzerine gelindiğinde değeri '0deg' değerine getirin.

• Sol: 0 derece

taşmalar

Bu gönderide daha sonra, sütunun altına bir düğme ekleyeceğiz. Bu düğme, sütunun alt sınırıyla örtüşecektir. Bunu mümkün kılmak için sütunumuzun taşmalarını görünür hale getirmemiz gerekecek.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Varsayılan Z İndeksi

Sonraki farklı ekran boyutlarında sütunun z dizinini değiştirin. Bu, istiflemeyi düzenli tutmamıza yardımcı olacaktır.

• Z Endeksi: 9 (Masaüstü), 11 (Tablet ve Telefon)

Z Endeksinin üzerine gelin

Fareyle üzerine gelindiğinde, sütunun diğerlerinin üstünde görünmesini istiyoruz. Bunun gerçekleşmesi için, fareyle üzerine gelindiğinde z dizinini artıracağız.

• Z İndeksi: 11

geçişler

Ayrıca geçiş ayarlarında geçiş süresini artırarak yumuşak bir geçiş oluşturuyoruz.

• Geçiş Süresi: 500ms

Sütun 2 Ayarları

İkinci sütuna geç! Devam edin ve sütun ayarlarını açın.

Degrade Arka Plan

Aşağıdaki degrade arka plan ayarlarını uygulayın:

• Renk 1: #fff200
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Alt
• Başlangıç ​​Konumu: %31
• Bitiş Konumu: %31

Sınır

Sonraki sınır yarıçapının '20px'ini ekleyin.

Kutu Gölge

Bir ince kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.14)

Varsayılan Dönüştürme Ölçeği

İkinci sütun, öne çıkan fiyatlandırma planımızdır. Bunun gözden kaçmamasını sağlamak için dönüştürme ölçeği ayarlarında sütunun boyutunu artıracağız.

• Alt: %112 (Masaüstü), %100 (Tablet ve Telefon)
• Sağ: %112 (Masaüstü), %100 (Tablet ve Telefon)

Hover Dönüşüm Ölçeği

Fareyle üzerine gelindiğinde dönüştürme ölçeği değerlerini değiştirin.

• Alt: %120
• Sağ: %120

taşmalar

Sonraki yatay ve dikey taşmaları değiştirin.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Varsayılan Z İndeksi

Ardından, görünürlük ayarlarına gidin ve sütunun z dizinini artırın.

• Z İndeksi: 10

Z Endeksinin üzerine gelin

Fareyle üzerine gelindiğinde z dizinini değiştirin.

• Z İndeksi: 12

geçişler

Ve geçiş ayarlarında geçiş süresini artırın.

• Geçiş Süresi: 500ms

Sütun 3 Ayarları

Üçüncü ve son sütuna geç! Sütun ayarlarını açın.

Degrade Arka Plan

Arka plan ayarlarına gidin ve aşağıdaki degrade arka planını ekleyin:

• Renk 1: #f7f7f7
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Alt
• Başlangıç ​​Konumu: %31
• Bitiş Konumu: %31

Sınır

Ardından '20px' kenarlık yarıçapı ekleyin.

Kutu Gölge

İnce bir kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.11)

Varsayılan Dönüştürme Ölçeği

Sütunu dönüştürme zamanı! Varsayılan dönüştürme ölçeği değerlerinin '%100' kaldığından emin olun.

• Alt: %100
• Sağ: %100

Hover Dönüşüm Ölçeği

Fareyle üzerine gelindiğinde bu değerleri değiştirin.

• Alt: %120
• Sağ: %120

Varsayılan Dönüştür Çevirisi

Ayrıca bazı özel dönüştürme çevirme değerleri uygulayarak sütunu masaüstünde sola doğru itiyoruz.

• Alt: -34px (Masaüstü), 0px (Tablet ve Telefon)
• Sağ: 0 piksel

Fareyle Dönüştürme Çevirisi

Fareyle üzerine gelindiğinde değerleri '0px' değerine getirin.

• Alt: 0 piksel
• Sağ: 0 piksel

Varsayılan Dönüştür Döndür

Sütunu varsayılan durumunda döndürerek devam edin.

• Sol: 8 derece (Masaüstü), 0 derece (Tablet ve Telefon)

Hover Dönüştür Döndür

Fareyle üzerine gelindiğinde sol dönüştürme döndürme değerini tekrar '0px' olarak değiştirin.

• Sol: 0 derece

taşmalar

Daha sonra taşmaların görünür olduğundan emin olun.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Varsayılan Z İndeksi

Ardından görünürlük ayarlarına gidin ve varsayılan z dizininin 9 olduğundan emin olun.

• Z İndeksi: 9

Z Endeksinin üzerine gelin

Fareyle üzerine gelindiğinde z dizinini değiştirin.

• Z İndeksi: 11

geçişler

Ve geçiş ayarlarında geçiş süresini artırın.

• Geçiş Süresi: 500ms

Sütun 1'e Blurb Modülü Ekle

Başlık ekle

İlk sütuna modül eklemeye başlama zamanı! Yeni bir Blurb Modülü ekleyin ve bir başlık ekleyin.

Simge Seç

Sonraki bir simge seçin.

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını buna göre değiştirin:

• Simge Rengi: #000000
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 50px

Başlık Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Poppins
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 27px

aralık

Ve biraz üst kenar boşluğu da ekleyin.

• Üst Kenar Boşluğu: 80px

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

görünürlük

Bölücü modül olan ikinci modüle geçiyoruz. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Tasarım sekmesine gidin ve ayırıcı rengini siyah olarak değiştirin.

• Çizgi Rengi: #000000

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 6px
• Genişlik: %14
• Modül Hizalaması: Merkez
• Yükseklik: 0 piksel

aralık

Son olarak, biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 50px

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Divider Modülünün hemen altına bir Metin Modülü ekleyerek devam edin ve istediğiniz içeriği ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Hizalama: Merkez
• Metin Rengi: #4f4f4f
• Metin Satırı Yüksekliği: 2.3em

aralık

Bazı özel kenar boşluğu ve dolgu değerleri de ekleyin.

• Üst Kenar Boşluğu: 50px
• Üst Dolgu: 10px
• Alt Dolgu: 10px

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Önceki Metin Modülünün hemen altında başka bir Metin Modülüne ihtiyacımız olacak. Seçtiğiniz bazı içeriği girin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Hizalama: Merkez
• Metin Rengi: #000000
• Metin Boyutu: 47px
• Metin Satırı Yüksekliği: 1em

aralık

Bazı özel üst ve alt kenar boşluklarını da ekleyin.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 80px

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

hizalama

Tasarım sekmesine gidin ve düğme hizalamasını orta olarak değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğmeye de stil verin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 17px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #FFFFFF
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Ağırlığı: Kalın

aralık

Ayrıca bazı özel kenar boşluğu ve dolgu değerleri ekleyeceğiz.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: -40px
• Üst Dolgu: 23px
• Alt Dolgu: 23px
• Sol Dolgu: 70px
• Sağ Dolgu: 70px

Kutu Gölge

Ve Düğme Modülüne ince bir kutu gölgesi vererek bunu tamamlayacağız.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.3)

Tüm Modülleri İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki tüm modülleri tamamladıktan sonra, onları iki kez klonlayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

Blurb Simgelerini ve Başlıklarını Değiştirin

Her bir kopya için tanıtım yazısı simgelerini ve başlıkları değiştirdiğinizden emin olun.

Metin Modülü İçeriğini Değiştir

Metin modülü içeriğiyle birlikte.

2. Düğmeyi Değiştir

Son olarak, 2. sütundaki düğmeyi açın ve düğme ayarlarını değiştirin. Bu adımı tamamladığınızda, işiniz bitti!

• Düğme Metin Rengi: #FFFFFF
• Düğme Arka Plan Rengi: #8300E9

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yeni sütun seçeneklerini kullanarak sütunları nasıl fiyatlandırma planlarına dönüştüreceğinizi gösterdik. Tek bir CSS kodu satırına dokunmak zorunda kalmadan fiyatlandırma planlarını özelleştirebilirsiniz! Bu öğretici yalnızca yeni sütun seçeneklerinin farklı modülleri güzel bir tasarımda birleştirmenize nasıl yardımcı olduğunu göstermeye yöneliktir. Herhangi bir sorunuz veya öneriniz varsa, bunları aşağıdaki yorum bölümünde bırakmaktan çekinmeyin!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.