Divi ile Etkileşimli İçerik Oluşturmak için Vurgulu Metin Gölgelerini Kullanma

Web sitenizi benzer web sitelerinden öne çıkarmak zor olabilir, ancak bunu bir kez başardığınızda, neredeyse her zaman için harcanan çabaya ve düşünceye değer. İlham almanıza yardımcı olmak için Divi ile web siteleri oluştururken nasıl etkileşimli içerik oluşturacağınızı göstereceğiz.

Bu öğreticide yeniden oluşturacağımız örnek, üzerinde çalıştığınız tüm sayfalar için özellikle iyi çalışacaktır. Divi'nin yerleşik metin gölgesi seçeneklerini kullanarak üzerine gelindiğinde gerçekleri veya şirket bilgilerini paylaşabileceksiniz. Ayrıca, bilgilerin ve mobil deneyimin kaybolmaması için bu vurgulu efektlerin daha küçük ekran boyutlarına uygulanmamasını sağlıyoruz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, bekleyebileceğiniz sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Tüm bu fareyle üzerine gelme etkileşimlerinin daha küçük ekran boyutlarına uygulanmadığından emin oluyoruz. Aynı bölümü ve modülleri kullanırken, bunun yerine aşağıdaki basit sonucu alacağız:

Yaklaşmak

• Yeniden oluşturacağımız örnek, sayfalar hakkında harikadır, ancak herhangi bir 5 karakterli veya 6 karakterli kelimeyle çalışmasını sağlayabilirsiniz (sütun yapısıyla eşleştirin)
• Karakterlerin her biri ayrı bir Metin Modülüne tahsis edilecektir.
• Kelimenin farklı karakterlerini birbirine bağlamak ve aynı modülde oluşturulmuş gibi görünmelerini sağlamak için yeterli sayıda sütun içeren bir satır kullanıyoruz.
• Varsayılan olarak, Metin Modülünün metin renginin, bölümün arka plan rengiyle eşleşmesini sağlayacağız.
• Karakterin okunabilir kalmasını sağlamak için karaktere beyaz bir metin gölgesi de uygulayacağız.
• Karakterin üzerine geldiğinizde, metin gölgesi kaybolacak ve metnin rengi değişecek ve bu da size metnin dolmakta olduğu hissini verecektir.
• Bir karakter üzerinde gezinirken, bazı ek bilgiler de görünecektir.
• Daha küçük ekran boyutlarında, şirket gerçekleri ve/veya bilgileri en başından itibaren orada olacaktır.

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Arka plan rengi

Yeni veya mevcut bir sayfa açın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #03006d

aralık

Ardından, bölümün boşluk ayarlarına gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 50px
• Alt Dolgu: 50px

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

Ardından, boyutlandırma ayarlarına gidin ve satırın ekranın tüm genişliğini kaplamasına izin verin. Bu önemli bir adımdır çünkü görüş alanı birimlerini kullanarak mesafeyi manuel olarak belirlememizi sağlar.

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

aralık

Bir önceki adımda, yeni bir satırla gelen tüm varsayılan boyutlandırma ayarlarından kurtulduk. Bununla birlikte, manuel olarak biraz dolgu eklememiz gerekiyor. Burada, sonucun tüm masaüstü ekran boyutlarında aynı kalmasını sağlamak için görünüm birimleri kullanıyoruz.

• Sol Dolgu: 9vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sağ Dolgu: 5vw (Tablet ve Telefon)

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

İçerik Ekle

Satır ayarlarını değiştirmeyi bitirdikten sonra, devam edip ilk Metin Modülünü sütun 1'e ekleyebilirsiniz. İlk karakteri paragraf metni olarak ve fareyle üzerine gelindiğinde liste metni olarak görünmesini istediğiniz içeriği ekleyin.

Varsayılan Metin Ayarları

Ardından tasarım sekmesine gidin ve varsayılan paragraf metni ayarlarını değiştirin. Hem metin hem de bölüm arka planı için aynı rengi kullandığınızdan emin olun.

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Rengi: #03006d
• Metin Boyutu: 27vw (Masaüstü), 0vw (Tablet ve Telefon)
• Metin Satır Yüksekliği: 1.1em
• Metin Gölge Bulanıklığı Gücü: 0.01em
• Metin Gölge Rengi: #ffffff
• Metin Yönü: Sol

Fareyle Üzerine Gelme Metin Ayarları

Güzel vurgulu efekti oluşturmak için, vurgulu üzerinde bu paragraf metin ayarlarını değiştirmemiz gerekecek. Artık tamamen saydam bir metin gölge rengini ortadan kaldırmak için nasıl kullandığımıza dikkat edin.

• Metin Rengi: #ffffff
• Metin Gölge Rengi: rgba(255,255,255,0)

Varsayılan Liste Metni Ayarları

Liste metin ayarlarına giderek devam edin. Bu ayarların önemli bir kısmı, masaüstündeki metin boyutunun '0px' olduğundan emin olmak, ancak daha küçük ekran boyutları için metin boyutu olarak '18px' eklemektir. Bu, liste metninin daha küçük ekran boyutlarında görünmesini, ancak üzerine gelinmeden masaüstünde görünmemesini sağlar.

• Sırasız Liste Yazı Tipi Ağırlığı: Hafif
• Sırasız Liste Metin Rengi: #ffffff
• Sırasız Liste Metin Boyutu: 0px (Masaüstü), 18px (Tablet ve Telefon)
• Sırasız Liste Metni Gölge Rengi: rgba(255,255,255,0)
• Sırasız Liste Stil Türü: Daire
• Sırasız Liste Stili Pozisyonu: Dış
• Sırasız Liste Öğesi Girintisi: 0px

Gezinme Listesi Metin Ayarları

Liste metninin üzerine gelindiğinde görünmesini istiyoruz. Bu yüzden fareyle üzerine gelindiğinde metin boyutunu değiştireceğiz. Fareyle üzerine gelindiğinde kullandığınız metin boyutunun, daha küçük ekran boyutlarında kullandığınız metin boyutuyla aynı olduğundan emin olun. Bu, daha küçük ekran boyutlarında fareyle üzerine gelme etkisinin olmamasını sağlamaya yardımcı olacaktır.

• Sırasız Liste Metin Boyutu: 18px

aralık

Modülün boşluk ayarlarına giderek devam edin ve orada da bazı değişiklikler yapın.

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

Metin Modülünü 4 Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Artık 1. sütundaki ilk modülü değiştirmeyi bitirdiğimize göre, devam edip modülü dört kez klonlayabilir ve kopyaların her birini kalan sütunlara yerleştirebiliriz. Sonraki adımlarda, kopyaların her birini yeni karakterle eşleşecek şekilde değiştireceğiz.

Sütun 2'deki Metin Modülünü Değiştir

İçeriği Değiştir

2. sütundaki kopyayı açın ve içeriği değiştirin.

Aralığı Değiştir

Ardından, boşluk ayarlarına gidin ve özel kenar boşluğu değerlerini değiştirin.

• Alt Kenar Boşluğu: 50px (Tablet ve Telefon)
• Sol Kenar Boşluğu: -2vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -2vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 3'teki Metin Modülünü Değiştirin

İçeriği Değiştir

3. sütundaki kopyanın içeriğini de değiştirin.

Aralığı Değiştir

Tasarım sekmesindeki boşluk ayarlarıyla birlikte.

• Alt Kenar Boşluğu: 50px (Tablet ve Telefon)
• Sol Kenar Boşluğu: -5.5vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 1.5vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 4'teki Metin Modülünü Değiştirin

İçeriği Değiştir

4. sütundaki Metin Modülünü açarak devam edin ve içeriği burada da değiştirin.

Aralığı Değiştir

Ardından tasarım sekmesine gidin ve boşluk ayarlarında özel kenar boşluğu değerlerini değiştirin.

• Alt Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: -6vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 2vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 5'teki Metin Modülünü Değiştirin

İçeriği Değiştir

Son kopyaya doğru. İçerik kutusundaki içeriği değiştirin.

Aralığı Değiştir

Özel boşluk ayarlarıyla birlikte.

• Alt Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: -7vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 3vw (Masaüstü), 0vw (Tablet ve Telefon)

Ö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

Web sitenizi diğer web sitelerinden öne çıkarmanın ne kadar önemli olduğunu biliyoruz. Divi'nin yerleşik seçenekleriyle istediğiniz kadar yaratıcı olabilirsiniz. Bu gönderi, daha küçük ekran boyutlarında her şeyin basit kalmasını sağlarken fareyle üzerine gelindiğinde nasıl etkileşimli içerik oluşturabileceğinizin bir örneğidir. Şu anda üzerinde çalışmakta olduğunuz herhangi bir hakkında sayfası için yeniden oluşturduğumuz örneği kullanabilirsiniz. Ziyaretçilerinizle bir etkileşim sürerken şirketiniz hakkında bazı gerçekleri ve ek bilgileri paylaşmanın harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!