Divi ile Hover'da Metin Modüllerini Benzersiz Kişi Açıklamalarına Dönüştürme

Resimlere açıklamalar eklemek için yaratıcı bir yol mu arıyorsunuz? Divi'nin yerleşik vurgulu seçenekleriyle artık her zamankinden daha kolay. Bu yaklaşımı, referanslardan ekip üyesi açıklamalarına ve daha fazlasına kadar web sitenizde çeşitli amaçlar için kullanabilirsiniz. Bu eğitimde, çarpıcı web tasarımı elde etmenize yardımcı olacak 4 farklı örneği inceleyeceğiz. Dört örneği de yalnızca Divi'nin yerleşik seçeneklerini kullanarak oluşturuyoruz.

Hadi hadi bakalım!

Ön izleme

Adım adım öğreticiye geçmeden önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Genel Adımlar

Yeni Bölüm Ekle

Bu öğreticiyi takip etmeyi kolaylaştırmak için bazı genel adımlarla başlayacağız. Daha sonra, örneklerin her biri için benzersiz olan adımları ele alacağız. Yeni veya mevcut bir sayfaya yeni bir normal bölüm ekleyerek başlayın.

Satır ekle

Sütun Yapısı

Devam edin ve aşağıdaki sütun yapısını seçin (bunun diğer sütun yapıları ile de çalışmasını sağlayabilirsiniz):

Sütun 1 Arka Plan Resmi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ilk sütuna bir arka plan görüntüsü ekleyin.

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

boyutlandırma

Satırın boyutlandırma ayarlarını değiştirerek devam edin.

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

aralık

Ve sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

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

İçerik Ekle

Fareyle üzerine gelindiğinde açıklamayı göstermek için dört örneğin her biri için bir Metin Modülü kullanacağız. Devam edin ve bu Metin Modülünü arka plan resmi eklediğiniz sütuna ekleyin.

Varsayılan Metin Ayarları

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

• Metin Rengi: rgba(255,255,255,0)
• Metin Boyutu: 0.7vw (Masaüstü), 12px (Tablet ve Telefon)
• Metin Yönü: Yasla

Fareyle Üzerine Gelme Metin Ayarları

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

• Metin Rengi: #000000

Varsayılan Başlık Metni Ayarları

H3 metin ayarlarını da değiştirin.

• 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: rgba(255,255,255,0)
• Başlık 3 Metin Boyutu: 2.5vw (Masaüstü), 40px (Tablet), 30px (Telefon)
• Başlık 3 Çizgi Yüksekliği: 2.2em

Vurgulu Başlık Metni Ayarları

Ve fareyle üzerine gelindiğinde farklı bir H3 metin rengi uygulayın.

• Başlık 3 Metin Rengi: #000000

Satırı 3 Kez Klonla

Artık tüm genel adımların üzerinden geçtik, devam edip oluşturduğumuz satırı üç kez klonlayabiliriz, bu da dört örneğin her biri için bir satıra sahip olmamızı sağlar. Her örneğin başında bir sonraki satıra geçtiğinizden emin olun.

Örnek 1

Metin Modülünü Değiştir

Varsayılan Arka Plan Rengi

İlk örnekle başlayalım! İlk sütundaki Metin Modülünü açın ve bir arka plan rengi ekleyin.

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

Vurgulu Arka Plan Rengi

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

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

Varsayılan Aralık

Daha sonra biraz özel kenar boşluğu ve dolgu ekleyin.

• Üst Kenar Boşluğu: -500px
• Alt Kenar Boşluğu: 500px
• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px
• Sol Dolgu: 70px
• Sağ Dolgu: 70px

Vurgu Aralığı

Üzerine gelindiğinde değerleri değiştirin.

• Üst Kenar Boşluğu: 0px
• Alt Kenar Boşluğu: 0px
• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

geçişler

Son olarak, gelişmiş sekmesinde geçiş süresini artırarak yumuşak bir geçiş oluşturun.

• Geçiş Süresi: 1000ms

Örnek #2

Metin Modülünü Değiştir

Varsayılan Arka Plan Rengi

Bir sonraki örneğe geçelim! İlk sütundaki Metin Modülünü açın ve bir arka plan rengi ekleyin.

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

Vurgulu Arka Plan Rengi

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

• Arka Plan Rengi: rgba(226.246.255,0.85)

Varsayılan Aralık

Daha sonra bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel
• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel
• Sol Dolgu: 70px
• Sağ Dolgu: 70px

Vurgu Aralığı

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

• Üst Kenar Boşluğu: 200 piksel
• Alt Kenar Boşluğu: -200px
• Sol Kenar Boşluğu: 50px
• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

Varsayılan Kenarlık

Metin Modülüne bir kenarlık ekleyerek devam edin.

• Sol Kenar Genişliği: 0px
• Sol Kenar Rengi: #ffffff

fareyle üzerine gelin

Ve fareyle üzerine gelindiğinde kenarlık genişliğini değiştirin.

• Sol Kenar Genişliği: 8px

geçişler

Son olarak, yumuşak bir geçiş için geçiş süresini artırın.

• Geçiş Süresi: 500ms

Örnek 3

Klon Metin Modülü

Üçüncü örneğe geçelim! Bu örnek için, daha küçük ekran boyutları için ayrı bir sürüm oluşturmamız gerekecek. İlk sütundaki Metin Modülünü klonlayın.

Sütun 1 Gradyan Arka Planı Ekle

Ardından, satır ayarlarını açın ve aşağıdaki ayarları kullanarak ilk sütuna bir degrade arka planı ekleyin:

• Renk 1: rgba(43,135,218,0)
• Renk 2: #ffffff
• Sütun 1 Gradyan Türü: Radyal
• Sütun 1 Radyal Yön: Merkez
• Sütun 1 Başlangıç ​​Konumu: %59
• Sütun 1 Bitiş Konumu: %59
• Sütun 1 Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

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

Degrade Arka Plan

Sütun 1'deki ilk Metin Modülünü açın. Bu, masaüstünde görünen açıklama olacaktır. Bir degrade arka planı ekleyin.

• Renk 1: rgba(239,239,239,0,65)
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %70
• Bitiş Konumu: %71

Varsayılan Aralık

Ardından, bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: 6vw
• Alt Marj: 6vw
• Üst Dolgu: 9vw
• Alt Dolgu: 9vw
• Sol Dolgu: 2vw
• Sağ Dolgu: 2vw

Vurgu Aralığı

Fareyle üzerine gelindiğinde kenar boşluğu değerlerini değiştirin.

• Sol Kenar Boşluğu: 15vw
• Sağ Kenar Boşluğu: -15vw

görünürlük

Ve modülü tablet ve telefonda devre dışı bırakın.

geçişler

Geçiş süresini de artırın.

• Geçiş Süresi: 500ms

Metin Modülünü Değiştir #2

Degrade Arka Plan

Sütun 1'deki ikinci modül, daha küçük ekran boyutlarında görünecek açıklamadır. Bir degrade arka planı ekleyerek başlayın.

• Renk 1: rgba(239,239,239,0,65)
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %70
• Bitiş Konumu: %71

Varsayılan Aralık

Daha sonra bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Kenar Boşluğu: 95px
• Alt Kenar Boşluğu: 95px
• Üst Dolgu: 170 piksel
• Alt Dolgu: 170px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Vurgu Aralığı

Fareyle üzerine gelindiğinde kenar boşluğu değerlerini değiştirin.

• Üst Kenar Boşluğu: 250 piksel
• Alt Kenar Boşluğu: -200px

görünürlük

Ve modülü masaüstünde devre dışı bırakın.

Her İki Metin Modülünün Metin Yönünü Değiştirin

Son olarak, istenen sonucu elde etmek için her iki modülün de metin yönünü değiştirdiğinizden emin olun.

• Metin Yönü: Merkez

Örnek 4

Metin Modülünü Değiştir

Varsayılan Arka Plan Rengi

Dördüncü ve son örneğe geçelim! 1. sütundaki Metin Modülüne aşağıdaki arka plan rengini ekleyin:

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

Vurgulu Arka Plan Rengi

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

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

Varsayılan Aralık

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

• Sol Kenar Boşluğu: -200px
• Sağ Kenar Boşluğu: 200px
• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px
• Sol Dolgu: 70px
• Sağ Dolgu: 70px

Vurgu Aralığı

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

• Sol Kenar Boşluğu: 0px
• Sağ Kenar Boşluğu: 0px
• Üst Dolgu: 300px
• Alt Dolgu: 300px

geçişler

Son olarak, yumuşak bir geçiş için geçiş süresini artırın.

• Geçiş Süresi: 1200ms

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, vurgulu üzerinde kişi açıklamalarını sergilemek için Divi'nin vurgulu seçeneklerini nasıl yaratıcı bir şekilde kullanabileceğinizi gösterdik. Bu dört örnekle, herhangi bir referansı veya ekip üyesi açıklamasını sayfanızda etkileşimli bir tasarım öğesine dönüştürmeye hazırsınız. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!