Divi ile Görüşler için Benzersiz Vurgulu Örtüşmeler Nasıl Oluşturulur

Görüşler birçok web sitesi için çok önemlidir. Uzmanlık gösterirler ve ziyaretçiler bir şirketin veya kişinin ne kadar güvenilir olduğunu anlamak isterlerse genellikle onları ararlar. Bu nedenle, web sitenizde referansları görsel olarak sunma şeklinizi düşünmek önemlidir.

Divi ile referanslarınızı tam istediğiniz gibi görüntüleyebilirsiniz. Size ilham vermek için, vurgulu örtüşmeleri kullanarak referansları sergilemenin çarpıcı ve benzersiz bir yolunu nasıl oluşturacağınızı göstereceğiz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sonuca bir göz atalım.

Yeni Bölüm Ekle

Başlayalım! Yeni bir sayfa ekleyin veya mevcut bir sayfayı açın ve yeni bir normal bölüm ekleyin.

Yeni Satır 1 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ını değiştirin.

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

aralık

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

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 2 Sol Dolgu: 2vw (Masaüstü), 3vw (Tablet ve Telefon)
• Sütun 2 Sağ Dolgu: 11vw (Masaüstü), 3vw (Tablet ve Telefon)

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

Fotoğraf yükleniyor

Çeşitli modülleri eklemeye başlama zamanı! İlk sütunda bir Görüntü Modülü ile başlayın. Tercih ettiğiniz bir portre resmini yükleyin.

Görüntü Hizalama

Görüntü ayarlarını açın ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Sol

boyutlandırma

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

• Genişlik: %78 (Masaüstü), %70 (Tablet ve Telefon)
• Modül Hizalama: Sol

Sütun 1'e Vurgulu Örtüşme Metin Modülü Ekleme

İçerik Ekle

Görüntü Modülünün hemen altına bir Metin Modülü ekleyin. Kişinin ayrıntılarını içerik kutusuna yerleştirin.

Varsayılan Arka Plan

Bir arka plan rengi ekleyerek devam edin.

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

vurgulu arka plan

Üzerine gelindiğinde başka bir arka plan rengi ekleyin.

• Arka Plan Rengi: #0f1bff

Varsayılan Metin Ayarları

Ardından, metin ayarlarını değiştirin.

• Metin Rengi: #ffffff
• Metin Boyutu: 0px
• Metin Satır Yüksekliği: 0px

Fareyle Üzerine Gelme Metin Ayarları

Fareyle üzerine gelindiğinde metin ayarları için bazı ayarlamalar yapın.

• Metin Boyutu: 19px
• Metin Satır Yüksekliği: 2em

Varsayılan Başlık Metni Ayarları

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

• Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık 3 Yazı Tipi Stili: Büyük Harf
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 0px
• Başlık 3 Çizgi Yüksekliği: 0em

Vurgulu Başlık Metni Ayarları

Fareyle üzerine gelindiğinde farklı değerler ekleyin.

• Başlık 3 Metin Boyutu: 35px
• Başlık 3 Çizgi Yüksekliği: 1.1em

aralık

Ardından, boşluk ayarlarına gidin ve bazı değerler ekleyin.

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

Metin Yönünü Değiştir

Metin ayarlarına geri dönün ve metin yönünü değiştirin.

• Metin Yönü: Merkez

Varsayılan Kutu Gölgesi

Ardından, metin modülüne varsayılan bir kutu gölgesi ekleyin. Bu kutu gölgesi genel tasarımın bir parçası olacaktır.

• Kutu Gölgesi Yatay Konumu: 1000px
• Kutu Gölgesi Dikey Konumu: -400px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 250px
• Gölge Rengi: rgba(175.175,175,0.13)

Vurgulu Kutu Gölgesi

Özel vurgulu örtüşme efekti oluşturmak için bir vurgulu kutu gölgesi de ekleyin.

• Kutu Gölgesi Yatay Konumu: -73px
• Kutu Gölgesi Dikey Konumu: -49px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 10px
• Gölge Rengi: rgba(255,182,12,0.53)

geçişler

Yumuşak bir geçiş oluşturmak için gelişmiş sekmesinde geçiş süresini değiştirin.

• Geçiş Süresi: 1000ms

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

İçerik Ekle

İkinci sütunda, ihtiyacımız olan ilk şey bir Metin Modülü başlığıdır. Devam edin ve referansın bir özetini ekleyin.

Başlık Metni Ayarları

Ardından, başlık metni ayarlarını değiştirin.

• Başlık 3 Yazı Tipi: Goudy Kitapçık 1911
• Başlık 3 Metin Hizalama: Sol
• Başlık 3 Metin Boyutu: 3.5vw (Masaüstü), 40px (Tablet), 30px (Telefon)
• Başlık 3 Çizgi Yüksekliği: 1.1em

aralık

Bazı özel boşluk değerleri ekleyerek devam edin.

• Üst Kenar Boşluğu: 7vw (Masaüstü), 100px (Tablet), 50px (Telefon)

Sütun 2'ye Açıklama Metni Modülü Ekle

İçerik Ekle

Metin Modülü başlığının hemen altına tüm referansı içeren başka bir Metin Modülü ekleyin.

Metin Ayarları

Referansı ekledikten sonra devam edin ve metin ayarlarını değiştirin.

• Metin Satırı Yüksekliği: 2.2em
• Metin Yönü: Sol

aralık

Bazı özel üst kenar boşluğu da ekleyin.

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

Yeni Satır Ekle

Sütun Yapısı

Şimdi ilk satırı bitirdiğimize göre, aşağıdaki sütun yapısını kullanarak ikincisini ekleyelim:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

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

aralık

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

• Üst Kenar Boşluğu: 100 piksel
• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Sol Dolgu: 11vw (Masaüstü), 3vw (Tablet ve Telefon)
• Sütun 1 Sağ Dolgu: 2vw (Masaüstü), 3vw (Tablet ve Telefon)

1. Sütundaki Önceki Satırın ve Yerin Metin Modüllerini Klonla

Önceki satıra dönün ve 2. sütundaki her iki modülü de klonlayın. Bunu yaptıktan sonra, kopyaları yeni satırın ilk sütununa yerleştirin.

Metin Yönünü Değiştir

Her iki modülün metin yönünü değiştirin.

• Metin Yönü: Sağ

Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

Ardından, ikinci sütuna bir Görüntü Modülü ekleyin ve yeni bir portre görüntüsü yükleyin.

Görüntü Hizalama

Modülün görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Sağ

boyutlandırma

Boyutlandırma ayarlarını değiştirerek devam edin.

• Genişlik: %78 (Masaüstü), %70 (Tablet ve Telefon)
• Modül Hizalaması: Sağ

aralık

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

• Üst Kenar Boşluğu: 50px (Tablet ve Telefon)

Vurgulu Örtüşme Metin Modülünü Sütun 2'ye Ekleme

İçerik Ekle

Bu tasarımı bitirmek için ihtiyacımız olan son modül, Görüntü Modülünün altındaki bir Metin Modülüdür. Kişinin ayrıntılarını içerik kutusuna ekleyin.

Varsayılan Arka Plan

Ardından, modüle bir arka plan görüntüsü ekleyin.

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

vurgulu arka plan

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Arka Plan Rengi: #690cff

Varsayılan Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Rengi: #ffffff
• Metin Boyutu: 0px
• Metin Satır Yüksekliği: 0px
• Metin Yönü: Merkez

Fareyle Üzerine Gelme Metin Ayarları

Fareyle üzerine gelindiğinde bazı ayarlamalar yapın.

• Metin Boyutu: 19px
• Metin Satır Yüksekliği: 2em

Varsayılan Başlık Metni Ayarları

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

• Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 0px
• Başlık 3 Çizgi Yüksekliği: 0em

Vurgulu Başlık Metni Ayarları

Fareyle üzerine gelindiğinde bazı küçük ince ayarlarla.

• Başlık 3 Metin Boyutu: 35px
• Başlık 3 Çizgi Yüksekliği: 1.1em

aralık

Aralık ayarlarına giderek devam edin ve bazı özel değerler ekleyin.

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

Varsayılan Kutu Gölgesi

Metin Modülüne varsayılan bir kutu gölgesi ekleyin.

• Kutu Gölgesi Yatay Konumu: -1000px
• Kutu Gölge Dikey Konumu: -420px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 250px
• Gölge Rengi: rgba(175.175,175,0.13)

Vurgulu Kutu Gölgesi

Ve fareyle üzerine gelindiğinde kutu gölgesini değiştirin.

• Kutu Gölgesi Yatay Konumu: -73px
• Kutu Gölgesi Dikey Konumu: -49px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 10px
• Gölge Rengi: rgba(12,255,238,0.53)

geçişler

Son olarak, geçiş süresini değiştirerek yumuşak bir geçiş oluşturun.

• Geçiş Süresi: 1000ms

Ön izleme

Artık tüm adımlardan geçtik, şimdi sonuca son bir göz atalım!

Son düşünceler

Bu gönderinin, vurgulu örtüşmeleri kullanarak çarpıcı referans bölümleri oluşturmanız için size ilham verdiğini umuyoruz! Kodlamak veya bir şeyleri çözmek için çok fazla zaman harcamak zorunda kalmadan web sitenize başka bir boyut eklemenize gerçekten yardımcı oluyorlar. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!