Divi'nin Referans Modülünü Şekillendirmenin 5 Harika Yolu

Ziyaretçilerin bir web sitesinde her zaman aradığı tek şey referanslardır. Güvenilirliği temsil ederler ve web sitenizi ziyaret ederken potansiyel müşterilerin veya potansiyel müşterilerin karar verme sürecini etkiler. Paylaşacak güçlü referanslarınız olduğundan emin olmanın yanı sıra, onları görsel olarak çekici kılmak da önemli bir rol oynar. Bu gönderide, yalnızca yerleşik seçenekleri kullanırken Divi Referans Modülünü şekillendirmenin 5 harika yolunu göstereceğiz.

Hadi hadi bakalım!

Ön izleme

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

masaüstü

Mobil

Örnek 1'i Yeniden Oluştur

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

İlk örnekle başlayalım! Yeni bir sayfa oluşturun ve normal bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve Boyutlandırma ayarlarında bazı değişiklikler yapın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül, 1. sütundaki bir Resim Modülüdür. Devam edin ve tercih ettiğiniz kare bir resmi yükleyin.

Filtreler

Ardından filtre ayarlarına gidin ve farklı efektlerle oynayın.

• Doygunluk: %40
• Kontrast: %126

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

Kopya Ekle

Sütun 1'de ihtiyaç duyacağımız ikinci ve son modül bir Düğme Modülüdür. Seçimin bir kopyasını ekleyin.

Düğme Ayarları

Ardından, düğme ayarlarına gidin ve düğmenizin görünümünde bazı değişiklikler yapın.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 14px
• Renk 1: #5400ff
• Renk 2: #00fff6
• Gradyan Yönü: 100deg
• Düğme Kenar Genişliği: 0px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Bazı özel boşluk değerleri de ekleyin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Kutu Gölge

Ve ince bir kutu gölgesi ile bitirin.

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

2. Sütun'a Referans Modülü Ekle

İçerik Ekle

İkinci sütunda, ihtiyacımız olan tek modül bir Referans Modülü. Farklı alanlara ve içerik kutusuna biraz içerik ekleyin.

Arka plan rengi

Ardından, biraz şeffaf bir arka plan rengi ekleyin.

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

Alıntı Simgesi Ayarları

Alıntı simgesi ayarlarını da değiştirin.

• Alıntı Simge Rengi: #0c0c0c
• Alıntı Simgesi Arka Plan Rengi: rgba(245,245,245,0)

Gövde Metni Ayarları

Ardından, gövde metni ayarlarını değiştirin.

• Gövde Yazı Tipi: Verdana
• Gövde Çizgisi Yüksekliği: 1.7em

aralık

Aralık ayarlarında farklı özel kenar boşluğu ve dolgu değerleri ekleyerek devam edin.

• Üst Marj: 15vw (Masaüstü ve Tablet), 0vw (Telefon)
• Alt Kenar Boşluğu: 50px (Tablet ve Telefon)
• Sol Kenar Boşluğu: -10vw (Masaüstü ve Tablet), 0vw (Telefon)
• Sağ Marj: 5vw
• Üst Dolgu: 70px
• Alt Dolgu: 70px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Ayrıca bir sol kenarlık ekleyin.

• Sol Kenar Genişliği: 7px
• Sol Kenar Rengi: #5400ff

Kutu Gölge

Son olarak, Referans Modülünü şekillendirmek için ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(0,0,0,0.49)

Her İki Modülü de Klonla ve Kopyaları Sütun 3 ve 4'e Yerleştir

1. ve 2. sütundaki modülleri değiştirmeyi tamamladığınızda, modülleri klonlayabilir ve kopyaları kalan iki sütuna yerleştirebilirsiniz.

Resmi değiştir

İkinci referansınızın resmini değiştirmeyi unutmayın.

Düğme Degrade Arka Planını Değiştir

Düğme gradyan arka planını da değiştirin.

• Renk 1: #ff001d
• Renk 2: #3700ff
• Gradyan Yönü: 100deg

Referans Kenarlığı Rengini Değiştir

Ve kenarlık rengini yeni düğme gradyan arka planıyla eşleştirin.

• Sol Kenar Rengi: #ff001d

Örnek 2'yi Yeniden Oluştur

Yeni Bölüm Ekle

İkinci örneğe geçelim! Sayfanıza yeni bir normal bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Bölümde herhangi bir değişiklik yapmadan aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Satır ayarlarını açarak ve boyutlandırma ayarlarında bazı değişiklikler yaparak devam edin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ardından, satır ve sütunlara bazı özel dolgu değerleri ekleyin.

• Sol Dolgu: 200px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sağ Doldurma: 200px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sütun 1 Sol Dolgu: 5px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 1 Sağ Dolgu: 2.5px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 2 Sol Dolgu: 2.5px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 2 Sağ Dolgu: 2.5px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 3 Sol Dolgu: 2.5 piksel (Masaüstü), 0 piksel (Tablet ve Telefon)
• Sütun 3 Sağ Dolgu: 5px (Masaüstü), 0px (Tablet ve Telefon)

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

Video bağlantısı

Sütun 1'de ihtiyaç duyacağımız ilk modül bir Video Modülüdür. Bu videoyu referans videonuza bağlayın.

Görüntü Bindirme

Bir Görüntü Yerleşimi de ekleyin.

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

İçerik Ekle

Sütun 1'de ihtiyaç duyulan ikinci ve son modül bir Referans Modülüdür. Referans ayrıntılarını ekleyerek başlayın.

Alıntı Simgesini Devre Dışı Bırak

Ardından, öğe ayarlarında alıntı simgesini devre dışı bırakın.

• Alıntı Simgesini Göster: Hayır

Arka plan rengi

Ardından beyaz bir arka plan ekleyin.

• Arka Plan Rengi: #ffffff

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Metni Rengi: #000000
• Gövde Harf Aralığı: -0.5px
• Gövde Çizgisi Yüksekliği: 1.7em

aralık

Ve boşluk ayarlarına bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Alt Kenar Boşluğu: 30 piksel (Tablet ve Telefon)
• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 80px
• Sağ Dolgu: 80px

Sınır

Ayrıca modüle sol ve sağ alt köşeleri '30px' veriyoruz.

Kutu Gölge

Ve son olarak, biraz derinlik yaratmak için, Referans Modülüne ince bir kutu gölgesi veriyoruz.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(0,0,0,0.3)

Modülleri Üç Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki her iki modülü de değiştirdikten sonra, onları iki kez klonlayın ve kopyaları kalan iki sütuna yerleştirin.

Video Bağlantılarını, İçeriği ve Görüntü Bindirmelerini Değiştirin

Yeni referanslarınızın video bağlantısını, içeriğini ve görüntü bindirmelerini değiştirmeyi unutmayın.

Örnek 3'ü Yeniden Oluştur

Yeni Bölüm Ekle

Üçüncü örneğe geçelim! Sayfanıza yeni bir normal bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

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

Sütun 1 Arka Plan Rengi

Ardından, arka plan ayarlarına gidin ve ilk sütuna bir arka plan rengi ekleyin.

• Sütun 1 Arka Plan Rengi: #f9f9f9

Sütun 2 Arka Plan Rengi

İkinci sütunun beyaz bir arka plan rengine ihtiyacı olacaktır.

• 2. Sütun Arka Plan Rengi: #ffffff

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve oluk genişliğini kaldırın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 0px
• Sağ Dolgu: 0px
• Sütun 1 Üst Dolgu: 100 piksel
• Sütun 1 Alt Dolgu: 100 piksel
• Sütun 1 Sol Dolgu: 50px
• Sütun 1 Sağ Dolgu: 50 piksel
• Sütun 2 Üst Dolgu: 100 piksel
• Sütun 2 Alt Dolgu: 100 piksel
• Sütun 2 Sol Dolgu: 50px
• Sütun 2 Sağ Dolgu: 50 piksel

Sınır

Ve sınırların her birine '20px' verin.

Kutu Gölge

Son olarak, sıranıza bir kutu gölgesi verin.

• Kutu Gölge Bulanıklığı Gücü: 80px

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

İçerik Ekle

Modül eklemeye başlama zamanı! Sütun 1'de ihtiyaç duyacağımız ilk modül bir Referans Modülüdür. İçeriği ekleyin.

Fotoğraf yükleniyor

Resim ayarlarında bir resim yükleyerek devam edin.

Alıntı Simgesini Devre Dışı Bırak

Ardından, alıntı simgesini devre dışı bırakın.

• Alıntı Simgesini Göster: Hayır

Arka Plan Rengini Devre Dışı Bırak

Arka plan rengini de devre dışı bırakın.

• Arka Plan Rengini Kullan: Hayır

Gövde Metni Ayarları

Tasarım sekmesine giderek devam edin ve gövde metni ayarlarında bazı değişiklikler yapın.

• Gövde Yazı Tipi: Abril Fatface
• Gövde Metni Rengi: #000000
• Gövde Metni Boyutu: 20px

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

İçerik Ekle

Sütun 1'de ihtiyaç duyacağımız ikinci modül bir Metin Modülüdür. Referans kopyasını içerik kutusuna ekleyin.

aralık

Ardından, tasarım sekmesine gidin ve bazı özel üst ve alt kenar boşlukları ekleyin.

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

Sütun 1'e Görüntü Modülü Ekle

Şirket Logosu Yükle

Birinci sütunda ihtiyaç duyacağımız üçüncü ve son modül bir Görüntü Modülüdür. Referans ile ilgili şirket logosunu eklemek için bu modülü kullanabilirsiniz.

Tüm Modülleri Klonla ve Kopyaları Sütun 2'ye Yerleştir

Sütun 1'deki tüm modülleri değiştirmeyi tamamladığınızda, devam edip onları klonlayabilirsiniz. Bunu yaptıktan sonra, kopyaları ikinci sütuna yerleştirin.

Referans Resmini Değiştir ve Kopyala

Görüntülerle birlikte referansın içeriğini değiştirdiğinizden emin olun.

Örnek 4'ü Yeniden Oluştur

Yeni Bölüm Ekle

Dördüncü örneğe geçelim! Sayfanıza yeni bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

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

Sütun 1 Arka Plan Resmi

Satır ayarlarını açın ve ilk sütuna bir arka plan resmi ekleyin.

• Sütun 1 Arka Plan Resmi Tekrarı: Tekrar Yok

Sütun 3 Arka Plan Resmi

Üçüncü sütun için de aynısını yapın.

• Sütun 3 Arka Plan Resmi Tekrarı: Tekrar Yok

boyutlandırma

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

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Sonraki varsayılan üst ve alt dolguyu kaldırın.

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

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

İçerik Ekle

İlk sütuna bir Referans Modülü ekleyerek devam edin. Bunu yaptıktan sonra, referans ayrıntılarını ekleyin.

Degrade Arka Plan

Modüle degrade bir arka plan verin.

• Renk 1: #8b32ff
• Renk 2: #ff35ae
• Gradyan Yönü: 120deg

Alıntı Simgesi Ayarları

Ardından, simge ayarlarında bazı değişiklikler yapın.

• Alıntı Simge Rengi: #000000
• Alıntı Simgesi Arka Plan Rengi: #ffffff

Metin Ayarları

Ve metin ayarlarından metin rengini değiştirin.

• Metin Rengi: Açık

aralık

Modüle kare bir şekil vermek için, boşluk ayarlarına bazı özel dolgular ekleyeceğiz.

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px
• Sol Dolgu: 100 piksel
• Sağ Dolgu: 100 piksel

Kutu Gölge

Ayrıca ince bir kutu gölgesi kullanarak referansa biraz derinlik katmak isteyeceksiniz.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: #ff35ae

Varsayılan Filtre

Bu referansın arkasındaki fikir, üzerine geldiğinizde referansın kaybolması ve görüntünün ortaya çıkmasıdır. Bu efekti elde etmek için filtre ayarlarında opaklık filtresini kullanacağız. Varsayılan opaklığın '%100' olduğundan emin olun.

• Opaklık: %100

Vurgulu Filtre

Ve fareyle üzerine gelindiğinde tüm opaklığı kaldırın.

• Opaklık: %0

Referans Modülünü Sütun 3'e Klonla

1. sütundaki Referans Modülünü değiştirmeyi tamamladığınızda, kopyalayın ve kopyayı üçüncü sütuna yerleştirin.

Degrade Arka Planını Değiştir

Sonraki kopyanın degrade arka planını değiştirin.

• Renk 1: #32b0ff
• Renk 2: #89099e
• Gradyan Yönü: 120deg

Klon Satırı

Ve tüm satırı klonlayın.

Referans Gradyan Arka Planını Kaldır ve Arka Plan Rengini Değiştir

Yapmanız gereken bir sonraki şey, Referans Modüllerinin gradyan arka planını kaldırmak ve bunun yerine beyaz bir arka plan rengi kullanmaktır.

• Arka Plan Rengi: #ffffff

Görüş Metni Ayarlarını Değiştir

Degrade arka planını kaldırdıktan sonra, metin ayarlarından metin rengini değiştirebilirsiniz.

• Metin Rengi: Koyu

Örnek 5'i Yeniden Oluştur

Yeni Bölüm Ekle

Bu öğreticinin bir sonraki ve son örneğine geçelim! Sayfanıza yeni bir normal bölüm ekleyin.

Arka plan rengi

Bölümün arka plan rengini değiştirin.

• Arka Plan Rengi: #eded

Yeni Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Boyutlandırma ayarlarında da bazı değişiklikler yapın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2

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

İçerik Ekle

İlk sütuna bir Metin Modülü ekleyerek devam edin. Referans kopyasını içerik kutusuna ekleyin.

Arka plan rengi

Ve modülün arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarından metin yönünü değiştirin.

• Metin Yönü: Merkez

aralık

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

• Sol Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)
• Sağ Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)

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

İçerik Ekle

Metin Modülünün hemen altında, devam edip bir Referans Modülü ekleyebilirsiniz. Yazar adı, iş unvanı ve şirket adı alanlarını doldurun.

Fotoğraf yükleniyor

Resim ayarlarında da bir resim yükleyin.

Degrade Arka Plan

Ve bir degrade arka planı ekleyin.

• Renk 1: #5b32ff
• Renk 2: #32e5f2
• Gradyan Yönü: 100deg

Alıntı Simgesi Ayarları

Tasarım sekmesine giderek ve alıntı simgesi ayarlarını değiştirerek devam edin.

• Alıntı Simge Rengi: #000000
• Alıntı Simgesi Arka Plan Rengi: #ffffff

Metin Ayarları

Metin ayarlarından da metin yönünü değiştirin.

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

Gövde Metni Ayarları

Ardından, gövde metni ayarlarıyla oynayın.

• Gövde Yazı Tipi Ağırlığı: Ultra Kalın
• Gövde Yazı Tipi Stili: Büyük Harf
• Gövde Metin Boyutu: 15px
• Gövde Harf Aralığı: -0.5px
• Gövde Çizgisi Yüksekliği: 2.1em

aralık

Bu modül ve Metin Modülü arasında örtüşme oluşturmak için bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: -25px

Kutu Gölge

Ve Referans Modülüne ince bir kutu gölgesi vererek referans tasarımını tamamlayın.

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

Her İki Modülü İki Kez Klonlayın ve Kopyaları Kalan Sütunlara Yerleştirin

1. sütundaki modülleri değiştirmeyi bitirdikten sonra, onları iki kez klonlayabilir ve kopyaları kalan iki sütuna yerleştirebilirsiniz.

Referans İçeriğini ve Görselleri Değiştirin

Modüllerde kullanılan içeriği ve görselleri değiştirdiğinizden emin olun.

Referans Gradyan Arka Planlarını Değiştir

Degrade arka planlarla birlikte.

• Renk 1: #a632ff
• Renk 2: #f7a131

• Renk 1: #3281ff
• Renk 2: #2cf483

Ö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 Referans Modülünü şekillendirmenin 5 harika yolunu gösterdik. Size öğretici adım adım rehberlik ettik ve temelde üzerinde çalıştığınız herhangi bir web sitesinde kullanabileceğiniz referanslar oluşturduk. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.