olan tek şey ziyaretçi her zaman arıyor Site Web, bunlar referanslar. Güvenilirliği temsil ederler ve potansiyel müşterilerin sizi ziyaret ederken karar verme sürecini etkilerler. Site Web.
Paylaşacak güçlü referanslarınız olduğundan emin olmanın yanı sıra, görsel çekiciliği de önemli bir rol oynar. Bu eğitimde, yalnızca yerleşik seçenekleri kullanarak Divi referans modülünü özelleştirmenin 3 harika yolunu göstereceğiz.
anket
Eğiticiye geçmeden önce, farklı ekran boyutlarındaki nihai sonuca bir göz atalım.
ofis
Telefon
Örnek 1'i yeniden oluşturun
Yeni bölüm ekle
İlk örnekle başlayalım! Yeni bir sayfa oluşturun ve normal bir bölüm ekleyin.
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
boyutlandırma
Daha fazla modül eklemeden satır parametrelerini açın ve boyutlandırma parametrelerinde bazı değişiklikler yapın.
- Bu satırı tam genişlik yap: Evet
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
1. sütuna bir görüntü modülü ekleyin
Bir resim yükle
Modül eklemeye başlamanın zamanı geldi! İhtiyacımız olan ilk mod, 1. sütundaki bir Görüntü modudur. Devam edin ve seçtiğiniz bir kare resmi yükleyin.
filtreler
Sonra filtre ayarlarına gidin ve farklı efektlerle oynayın.
- Doygunluk:% 40
- Kontrast:% 126
1 sütununa bir düğme modülü ekleyin
Bir kopya ekle
Sütun 1'de ihtiyaç duyacağımız ikinci ve son modül bir düğme modülüdür. Seçtiğiniz bir kopyayı ekleyin.
Düğme ayarları
Ardından düğme ayarlarına gidin ve düğmenizin görünümünü değiştirin.
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 14px
- 1 renk: # 5400ff
- 2 renk: # 00fff6
- Gradyan Yönü: 100deg
- Düğme kenarlığının genişliği: 0px
- Yazı tipi ağırlığı: Ultra Kalın
- Yazı Tipi Stili: büyük harf
aralık
Ayrıca özel aralık değerleri ekleyin.
- Üst Dolgu: 10px
- Alt doldurma: 10px
- Sol doldurma: 30px
- Döşeme Sağ: 30px
Gölge kutusu
Ve ince bir kutu gölgesiyle bitirin.
- Kutu Gölge Bulanıklığı Gücü: 80px
- Gölge rengi: rgba (0,0,0,0,3)
2 sütununa bir referans modülü ekleyin
İçerik ekle
İkinci sütunda ihtiyacımız olan tek modül referans modülüdür. Biraz ekle içindekiler farklı alanlara ve bölgelere içindekiler.
Arka plan rengi
Sonra hafifçe saydam bir arka plan rengi ekleyin.
- Arka plan rengi: rgba (255,255,255,0.96)
Referans Simge Ayarları
Referans simgesinin ayarlarını da değiştirin.
- Referans Simge Rengi: # 0c0c0c
- Referans simgesi arka plan rengi: rgba (245,245,245,0)
Gövde metni ayarları
Ardından ana metin ayarlarını değiştirin.
- Gövde Yazı Tipi: Verdana
- Gövde yüksekliği: 1.7em
aralık
Aralık ayarlarına 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ğ kenar boşluğu: 5vw
- En iyi dolgu malzemesi: 70px
- Alt doldurma: 70px
- Sol doldurma: 50px
- Döşeme Sağ: 50px
Sınır
Ayrıca sol kenarlık ekleyin.
- Sol kenarlığın genişliği: 7px
- Sol kenarlık rengi: # 5400ff
Gölge kutusu
Son olarak, tanıklık modülünü biçimlendirmek için ince bir kutu gölge ekleyin.
- Kutu Gölge Bulanıklığı Gücü: 80px
- Kutu gölge yayılma kuvveti: -10px
- Gölge rengi: rgba (0,0,0,0,49)
Her iki modülü de klonlayın ve çiftleri 3 ve 4 sütunlarına yerleştirin
Modülleri 1 ve 2 sütunlarında düzenlemeyi tamamladığınızda, onları klonlayabilir ve kopyaları kalan iki sütuna yerleştirebilirsiniz.
Resmi değiştir
İkinci referansınızın imajını değiştirmeyi unutmayın.
Degrade arka planı değiştirme
Ayrıca düğmenin degrade arka planını değiştirin.
- 1 renk: # ff001d
- 2 renk: # 3700ff
- Gradyan Yönü: 100deg
Tanıklık sınırının rengini değiştirme
Ve kenarlığın rengini yeni düğmenin degrade arka planıyla ilişkilendirin.
- Sol kenarlık rengi: # ff001d
Örnek 2'i yeniden oluşturun
Yeni bölüm ekle
İkinci örneğe geçelim! Sayfanıza yeni bir normal bölüm ekleyin.
Yeni bir 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 parametrelerini açıp boyutlandırma parametrelerini değiştirerek devam edin.
- Bu satırı tam genişlik yap: Evet
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
aralık
Ardından, satır ve sütunlara özel dolgu değerleri ekleyin.
- Sola doldurma: 200px (masaüstü), 30px (tablet), 25px (telefon)
- Sağda doldurma: 200px (masaüstü), 30px (tablet), 25px (telefon)
- 1 sütunu Soldaki dolgu: 5px (masaüstü), 0px (tablet ve telefon)
- 1 sütunu Sağdaki dolgu: 2.5px (masaüstü), 0px (tablet ve telefon)
- 2 sütunu Soldaki dolgu: 2.5px (masaüstü), 0px (tablet ve telefon)
- 2 sütunu Sağdaki dolgu: 2.5px (masaüstü), 0px (tablet ve telefon)
- 3 sütunu Soldaki dolgu: 2.5px (masaüstü), 0px (tablet ve telefon)
- 3 sütunu Sağdaki dolgu: 5px (masaüstü), 0px (tablet ve telefon)
1 sütununa bir video modülü ekleyin
Video bağlantısı
1. sütunda ihtiyaç duyacağımız ilk modül bir video modülüdür. Bu videoyu referans videonuza bağlayın.
Görüntü bindirme
Ayrıca bir görüntü bindirmesi ekleyin.
1 sütununa bir referans modülü ekleyin
İçerik ekle
Sütun 1'de ihtiyaç duyulan ikinci ve son modül, bir referans modülüdür. İfadenin ayrıntılarını ekleyerek başlayın.
Referans simgesini devre dışı bırakın
Ardından öğe ayarlarında referans simgesini kapatın.
- Referans simgesini göster: Hayır
Arka plan rengi
Sonra beyaz bir arka plan ekleyin.
- Arka plan rengi: #ffffff
Gövde metni ayarları
Ayrıca gövde metni ayarlarını da değiştirin.
- Gövde renkli metin: # 000000
- Gövde harf aralığı: -0.5px
- Gövde yüksekliği: 1.7em
aralık
Ve aralık ayarlarında özel kenar boşluğu ve dolgu değerleri ekleyin.
- Alt kenar boşluğu: 30px (tablet ve telefon)
- Dolgu: 50px
- Alt doldurma: 50px
- Sol doldurma: 80px
- Döşeme Sağ: 80px
Sınır
Ayrıca modüle sol altta ve sağda '30px' yuvarlatılmış köşeler veriyoruz.
Gölge kutusu
Son olarak, derinlik vermek için, Testimonial modülüne ince bir kutu gölge veriyoruz.
- Kutu Gölge Bulanıklığı Gücü: 80px
- Kutu gölge yayılma kuvveti: -10px
- Gölge rengi: rgba (0,0,0,0,3)
Modülleri üç kez klonlayın ve kopyaları kalan sütunlara yerleştirin
İki modülü 1 sütununda düzenlemeyi tamamladığınızda, iki kez klonlayın ve çiftleri kalan iki sütuna yerleştirin.
Video bağlantılarını, içeriği ve görüntü bindirmelerini düzenleyin
Videonun linkini değiştirmeyi unutmayın içindekiler ve yeni referanslarınızın görüntü katmanları.
Örnek 3'i yeniden oluşturun
Yeni bölüm ekle
Üçüncü örneğe geçelim! Sayfanıza yeni bir normal bölüm ekleyin.
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
Sütun 1 Arka Plan Rengi
Ardından arkaplan ayarlarına gidin ve ilk sütuna bir arkaplan rengi ekleyin.
- Sütun 1 Arka Plan Rengi: # f9f9f9
Sütun 2 Arka Plan Rengi
İkinci sütunun beyaz bir arka plana ihtiyacı olacaktır.
- Sütun 2 Arka Plan Rengi: #ffffff
boyutlandırma
Sonra boyutlandırma parametrelerine gidin ve oluk genişliğini kaldırın.
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
aralık
Ardından özel aralık değerleri ekleyin.
- En iyi dolgu malzemesi: 0px
- Dolgu Tabanı: 0px
- Sol doldurma: 0px
- Döşeme Sağ: 0px
- Kolon 1 Üst Dolgu: 100px
- Sütun 1 Alt Dolgu: 100px
- Sütun 1 Sol doldurma: 50px
- 1 sütun Sağdaki dolgu: 50px
- Kolon 2 Üst Dolgu: 100px
- 2 sütununun alt dolgusu: 100px
- Sütun 2 Sol doldurma: 50px
- 2 sütun Sağdaki dolgu: 50px
Sınır
Ve kenarlıkların her birine '20px' verin.
Gölge kutusu
Son fakat en az değil, çizginize bir kutu gölge verin.
- Kutu Gölge Bulanıklığı Gücü: 80px
1 sütununa bir referans modülü ekleyin
İçerik ekle
Modül eklemeye başlamanın zamanı geldi! 1. sütunda ihtiyaç duyacağımız ilk modül, bir referans modülüdür. İçerik ekleyin.
Bir resim yükle
Resim ayarlarına bir resim yükleyerek devam edin.
Referans simgesini devre dışı bırakın
Ardından referans simgesini kapatın.
- Referans simgesini göster: Hayır
Arka plan rengini devre dışı bırak
Ayrıca arka plan rengini de kapatı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.
- Polis Birliği: Abril Fatface
- Gövde renkli metin: # 000000
- Gövde metin boyutu: 20px
1 sütununa bir metin modülü ekleyin
İçerik ekle
1. sütunda ihtiyacımız olan ikinci modül bir metin modülüdür. Referans kopyasını içerik alanına ekleyin.
aralık
Ardından Tasarım sekmesine gidin ve özel üst ve alt kenar boşlukları ekleyin.
- Üst kenar boşluğu: 50px
- Alt kenar boşluğu: 50px
1. sütuna bir görüntü modülü ekleyin
Şirket logosunu indirin
İlk sütunda ihtiyaç duyacağımız üçüncü ve son modül bir görüntü modülüdür. Bu modülü referansla ilişkilendirilmiş şirket logosunu eklemek için kullanabilirsiniz.
Tüm modülleri klonlayın ve kopyaları 2 sütununa yerleştirin
1. sütundaki tüm modülleri düzenlemeyi tamamladığınızda, onları kopyalayabilir ve kopyalayabilirsiniz. Bunu yaptıktan sonra, kopyaları ikinci sütuna yerleştirin.
Referansın resmini ve kopyasını değiştirin
İfadenin içeriğini resimlerle değiştirdiğinizden emin olun.
nihayet
Hepsi bu eğitim için, umarım birkaç varyasyon sunmanıza izin verir
