Gölge ve vurgulu efektleri kullanmak ister misiniz? Divi yaratmak içindekiler etkileşimli ve öne çıkan Site Web ?
Emin ol Site Web benzer web sitelerinden sıyrılmak zor olabilir. Ama bir kez oraya vardığınızda, neredeyse her zaman için harcanan çabaya ve düşünceye değer.
Size nasıl oluşturulacağını göstereceğiz içindekiler ile web siteleri oluştururken etkileşimli Divi.
Gidelim!
anket
Bu öğreticiye dalmadan önce, bekleyebileceğiniz sonuca hızlıca bir göz atalım.
Masaüstü bilgisayar
Telefon
Farkına Divi ile başlayalım!
Ayrıca bakınız: Divi: Fareyle üzerine gelindiğinde çıkrık menüsü nasıl oluşturulurl
Yeni bölüm ekle
Arka plan rengi
Yeni bir sayfa oluşturun veya mevcut bir sayfayı 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: #03006d
aralık
Ardından bölüm aralığı ayarlarına gidin ve aşağıdaki gibi değiştirin:
- Dolgu (Üst ve Alt): 50 piksel
Yeni bir satır ekle
Sütunun 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 çizginin ekranın tüm genişliğini doldurmasına izin verin.
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik: %100
aralık
Aşağıdaki boşluk ayarlarını da değiştirelim:
- Dolgu (Sağ): 9vw (Masaüstü), 5vw (Tablet ve Telefon)
- Dolgu (Sağ): 5vw (Tablet ve Telefon)
1. sütuna bir Metin modülü ekleyin
İçerik ekle
Satır ayarlarını düzenlemeyi tamamladığınızda, ilk Metin modülünü sütun 1'e ekleyin.
İlk karakteri paragraf metni olarak ekleyin. Sonra içindekiler liste metni olarak görünmesini istediğiniz
Metin Ayarları (Masaüstü)
Ardından sekmeye gidin Dizaynve varsayılan paragraf metni ayarlarını değiştirin. Bölüm metni ve arka planı için aynı rengi kullandığınızdan emin olun.
- Yazı Tipi Ağırlığı: Ultra Kalın
- Metin Rengi: #03006d
- Metin Boyutu: 27vw (masaüstü), 0vw (tablet ve telefon)
- Satır Yüksekliği: 1,1 em
- Metin Gölgesi: Yakalamayı görün
- Gölge Bulanıklığı Gücü: 0,01em
- Gölge Rengi: #ffffff
- Metin Hizalama: Sol
Metin ayarları üzerine gelin
Güzel vurgulu efekti oluşturmak için bu vurgulu paragraf metin ayarlarını değiştirmemiz gerekecek.
- Metin Rengi(Vurgulu): #ffffff
- Gölge Rengi(Vurgulu): rgba(255,255,255,0)
Liste Ayarları (Masaüstü)
Listeleme ayarlarına giderek devam edin.
- Yazı Tipi Ağırlığı: Hafif
- Liste Metin Rengi: #ffffff
- Liste Metni Boyutu: 0px (Masaüstü), 18px (Tablet ve Telefon)
- Stil Konumu: Daire
- Sırasız Liste Stili Pozisyonu: Dış
- Sırasız Liste Öğesi Girintisi: 0px
Üzerine gelindiğinde metin ayarlarını listele (Vurgulu)
Liste metninin fareyle üzerine gelindiğinde görünmesini istiyoruz. Bu yüzden fareyle üzerine gelindiğinde metnin boyutunu değiştireceğiz.
- Sırasız Liste Metin Boyutu (Vurgulu): 18px
aralık
Modül aralığı ayarlarına giderek devam edin ve orada da bazı değişiklikler yapın.
- Kenar Boşluğu (Alt): 50px (Tablet ve Telefon)
- Marj (Sağ): -4vw (Masaüstü), 0vw (Tablet ve Telefon)
Metin modülünü 4 kez klonlayın ve kopyaları kalan sütunlara yerleştirin
Artık 1. sütundaki ilk modülü değiştirmeyi bitirdiğimize göre, modülü dört kez klonlayın. Ardından, kopyaların her birini kalan sütunlara yerleştirin. Kopyaların her birini istediğimizle eşleşecek şekilde değiştireceğiz.
2. sütundaki Metin modülünü değiştirin
Düzenleme içeriği
2. sütundaki kopyayı açın ve içeriği düzenleyin.
Aralığı değiştir
Ardından, boşluk ayarlarına gidin ve özel kenar boşluğu değerlerini değiştirin.
- Kenar Boşluğu (Alt): 50px (Tablet ve Telefon)
- Kenar Boşluğu (Sol ve Sağ): -2vw (Masaüstü), 0vw (Tablet ve Telefon)
- Sağ kenar boşluğu: -2vw (masaüstü), 0vw (tablet ve telefon)
3. sütundaki Metin modülünü değiştirin
Düzenleme içeriği
Ayrıca 3. sütundaki kopyanın içeriğini de değiştirin.
Aralığı değiştir
Tasarım sekmesindeki boşluk ayarları ile.
- Marj (Sol): 2,5 vw
- Marj (Sağ): 1,5 vw
4. sütundaki Metin modülünü değiştirin
Düzenleme içeriği
4. sütundaki Metin modülü ayarlarını açarak devam edin ve içeriği orada da düzenleyin.
Aralığı değiştir
Ardından Tasarım sekmesine gidin ve Aralık ayarlarında özel kenar boşluğu değerlerini değiştirin.
- Marj (Sol): -6vw
- Marj (Sağ): 2vw
5. sütundaki Metin modülünü değiştirin
içindekiler
Son kopyaya yol açın. İçerik alanındaki içeriği düzenleyin.
Aralığı değiştir
Özel boşluk ayarlarıyla.
- Marj (Sol): -7vw
- Marj (Sağ): 3vw
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
Ayrıca Oku: Divi : “Tam Genişlik Menü” modülünün sepet ve arama simgeleri nasıl özelleştirilir?
ofis
Telefon
DIVI'yı Şimdi İndirin !!!
Sonuç
Güvenliğinizi sağlamanın ne kadar önemli olduğunu biliyoruz. Site Web diğer sitelerden öne çıkıyor. Divi'nin yerleşik seçenekleriyle istediğiniz kadar yaratıcı olabilirsiniz.
Bu makale, etkileşimli vurgulu içeriği nasıl oluşturabileceğinize bir örnektir.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
