Bir Blog Yazısı Şablonunun İçinde Divi'nin Yorum Modülü Nasıl Stillendirilir


Divi tema oluşturucu ile bir blog yazısı şablonu tasarlamak oldukça kolaydır. Ancak blog şablonları tasarlarken gözden kaçan bir şey var, o da yorumlar bölümü. Neyse ki Divi, bir blog yazısı şablonuna kolayca eklenebilen özelleştirilebilir bir yorum modülüne sahiptir. Bu gönderide, herhangi bir blog şablonuna dahil edebileceğiniz iki özel yorum bölümü tasarımını nasıl oluşturacağınızı göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Yorum düzeni tasarımlarının farklı ekran boyutlarında nasıl göründüğüne bir göz atalım. İlk tasarım siyah beyaz minimal bir tarz, ikincisi ise daha renkli.

masaüstü

Bir Blog Yazısı Şablonunun İçinde Divi'nin Yorum Modülü

Tablet

Telefon

masaüstü

Bir Blog Yazısı Şablonunun İçinde Divi'nin Yorum Modülü

Tablet

Mobil

Yorum Modülü Şablonlarını ÜCRETSİZ İndirin

Ücretsiz yorum modülü şablonlarına el koymak için önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin
Ücretsiz İndir

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yorum Modül Tasarımını Yeniden Oluşturalım #1

Arka Plan Tasarımı Oluşturun

Siyah beyaz yorum düzeni şablonunu yeniden oluşturmanın ilk adımı, noktalar arka planını tasarlamaktır. Biri masaüstü görünümü için, diğeri duyarlı ekranlar için. Bunu kendiniz oluşturmak istiyorsanız, Adobe Illustrator'ın desen oluşturma aracına ihtiyacınız olacak. Aksi takdirde, benzer bir kalıbı internetten temin edebilir veya yukarıdaki indirilebilir .zip dosyasında bulunanı kullanabilirsiniz.

  1. Adobe Illustrator'da 1920 piksel yükseklik + 670 piksel genişlik civarında boş bir çalışma yüzeyi oluşturun.
  2. Kenar boşlukları dairenin yaklaşık yarısı kadar olan beyaz bir karenin içinde siyah bir daire oluşturun.
  3. Her iki şekli de seçin ve nesne > desen > yap'a tıklayarak bir desen oluşturun.
  4. Desen oluşturucuda 'sütunlara göre tuğla'yı seçin ve bir desen örneği olarak kaydedin.
  5. Çalışma yüzeyinin boyutunda bir şekil oluşturun ve deseni uygulayın.
  6. Duyarlı ekran boyutları için şekli yarı yarıya küçültün. Dairelerin oranını korumak için shift tuşuna basın.
  7. İlkinin yanındaki desenli şekli kopyalayıp yapıştırın ve şimdi daha küçük dairelerle aynı desene sahipsiniz.
  8. İkisini de ayrı ayrı indirin.

Tema Oluşturucu'yu açın ve Yeni Şablon Ekle

Şimdi tema oluşturucuyu açma zamanı. Yeni bir şablon ekleyin.

Tüm Gönderiler için Şablonu Seçin

Tüm gönderilerde yeni şablonu kullanın.

Özel Gövde Ekleyin ve Sıfırdan Yapın

Son olarak, şablonun özel gövdesini oluşturmaya başlayın.

Yeni Bölüm Ekle

Arka plan

Şimdi, yorum düzeni için tasarımı oluşturmaya başlayabiliriz. Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bölüm ayarlarını açın ve desen arka plan resimlerini yükleyin. Bir degrade kaplaması da ekleyin.

  • Arka plan: Gradyan
  • Renk 1: Yarı Şeffaf Beyaz rgba(255,255,255,0.96)
  • Renk 2: Beyaz #ffffff
  • Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet
  • Resim:
    • Masaüstü: Nokta Desenli Resim 1
    • Tablet ve Telefon: Nokta Desenli Resim 2

Yeni Satır Ekle

Sütun Yapısı

Şimdi, iki sütunlu yeni bir satır ekleyin.

boyutlandırma

Ardından, satırın boyutunu ayarlayın.

  • Özel Oluk Genişliği: 2
  • Genişlik: %80
  • Maksimum Genişlik: %100

Sütun 2 Ayarları

Sınır

Sütun ayarlarında, ikinci sütuna bir üst kenarlık ekleyin.

  • Stil: Sadece üst
  • Genişlik: 3 piksel
  • Renk: Siyah #ffffff

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

İçerik

Seçtiğiniz bazı H3 içeriğiyle ilk metin modülünü sütun 1'e ekleyin.

  • Metin: Paragraf

Başlık Metni

Ardından, tasarım sekmesinde başlık metnine stil verin.

  • Başlık Seviyesi: H3
  • Yazı Tipi: GFS Didot
  • Renk: Siyah #000000
  • Boy:
    • Masaüstü: 5vw
    • tablet: 9vw
    • Telefon: 13vw

aralık

Ayrıca, aralığı ayarlayın.

  • Alt Dolgu
    • Masaüstü: 3vw
    • Tablet ve Telefon: 7vw

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

İçerik

Şimdi, seçtiğiniz bir içerikle sütun 1'e bir referans modülü ekleyin. Bir de resim yükleyin.

  • Yazar: Sadık Okuyucu
  • İş Ünvanı: İçerik Pazarlama Sorumlusu
  • Şirket: Tiger Medya Şirketi
  • Gövde: Paragraf metni
  • Resim: Portre Fotoğrafı

Arka plan

Arka planın şeffaf olduğundan emin olun

  • Arka Plan Rengi: Şeffaf

Elementler

Öğeler sekmesinde, alıntı simgesini göstermek için seçin.

  • Alıntı Simgesini Göster: Evet

alıntı simgesi

Ardından, alıntı simgesini aşağıdaki gibi biçimlendirin.

  • Renk: Siyah #000000
  • Arkaplan: Beyaz #ffffff
  • Simge Yazı Tipi Boyutu:
    • Masaüstü: 2vw
    • tablet: 5vw
    • Telefon: 9vw

resim

Sonraki görüntü ayarlarını değiştirin.

  • Genişlik ve yükseklik:
    • Masaüstü: 110 piksel
    • Tablet ve Telefon: 90px
  • Yuvarlatılmış Köşeler: 90px
  • Kenarlık Rengi: Şeffaf

Metin

Metin hizalamasını da değiştirin.

  • Hizalama: Merkez

Gövde metni

Ardından, gövde metnine stil verin.

  • Yazı Tipi: Verdana
  • Siyah renk
  • Boy:
    • Masaüstü: 0.7vw
    • Tablet: 2vw
    • Telefon: 3vw

Yazar Metni

Yazar metnini şekillendirerek devam edin.

  • Yazı Tipi: GFS Didot
  • Ağırlık: Kalın
  • Renk: Siyah #ffffff
  • Boy:
    • Masaüstü: 1.2vw
    • Tablet: 2.5vw
    • Telefon: 4vw
  • Harf Aralığı: 1px

Konum Metni

Ardından, konum metni.

  • Yazı Tipi: GFS Didot
  • Renk: Siyah #ffffff
  • Boy:
    • Masaüstü: 0.9vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Çizgi Yüksekliği: 2em

Şirket Metni

Ayrıca şirket yazısı.

  • Yazı Tipi: GFS Didot
  • Renk: Siyah #ffffff
  • Boy:
    • Masaüstü: 0.7vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Çizgi Yüksekliği: 2em

boyutlandırma

Modülün boyutunu ayarlayarak devam edin.

  • Genişlik:
    • Masaüstü: %60
    • Tablet: %65
    • Telefon: %75
  • Modül Hizalaması: Merkez

aralık

Ayrıca, aralığı ayarlayın.

  • Üst Dolgu:
    • Masaüstü: 1.5vw
    • tablet: 5vw
    • Telefon: 6vw

Sınır

Son olarak, modüle bir üst kenarlık ekleyin.

  • Kenarlık Stilleri: Yalnızca üst
  • Genişlik: 2 piksel
  • Renk: Siyah #ffffff

Sütun 2'ye Yorum Modülü Ekle

Elementler

2. sütuna geçerek bir yorum modülü ekleyin. Öğe ayarlarını aşağıdaki gibi değiştirin.

  • Yazar Avatarını Göster: Hayır
  • Yanıtla Düğmesini Göster: Evet
  • Yorum Sayısını Göster: Hayır

Alanlar

Modülün tasarım sekmesine gidin ve alan ayarlarını değiştirin.

  • Metin Rengi: Siyah #oooooo
  • Arka Plan Rengi: Soluk Gri #f7f7f7
  • Odak Metni Rengi: Siyah #oooooo
  • Odak Arka Plan Rengi: Soluk Gri #f7f7f7
  • Yazı Tipi: GFS Didot
  • Yazı Boyutu:
    • Masaüstü: 0.9vw
    • Tablet: 1.5vw
    • Telefon: 2.5vw
  • Harf Aralığı: 1px

Form Başlığı Metni

Sonraki form başlığı metin ayarlarını değiştirin.

  • Yazı Tipi: GFS Didot
  • Renk: Siyah #ffffff
  • Boy:
    • Masaüstü: 0.9vw
    • Tablet: 2.5vw
    • Yazı Tipi: 3.5vw

Meta Metin

Meta metni şekillendirerek devam edin.

  • Yazı Tipi: GFS Didot
  • Renk: Siyah #ffffff
  • Boy:
    • Masaüstü: 1.3vw
    • Tablet: 3vw
    • Telefon: 4vw

Yorum Metni

Ayrıca yorum metni.

  • Yazı Tipi: Verdana
  • Renk: Siyah #ffffff
  • Boy:
    • Masaüstü: 0.7vw
    • Tablet: 1.7vw
    • Telefon: 2.7vw
  • Harf Aralığı: 1px
  • Çizgi Yüksekliği: 1.8em

Buton

Devam edin, düğmeleri şekillendirin.

  • Yazı Boyutu:
    • Masaüstü: 0.9vw
    • Tablet: 2.5vw
    • Telefon: 3.5vw
  • Metin Rengi: Beyaz #000000
  • Arkaplan: Siyah #ffffff
  • Harf Aralığı: 1px
  • Yazı Tipi: GFS Didot

boyutlandırma

Ardından modülün boyutlandırma ayarlarını yapın.

  • Genişlik: %90
  • Modül Hizalaması: Merkez

aralık

Son olarak, boşluk da.

  • Üst Dolgu:
    • Masaüstü: 4vw
    • Tablet ve Telefon: 8vw
  • Sol ve Sağ Dolgu: 3vw

Yorum Modül Tasarımını Yeniden Oluşturalım #2

Arka Plan Tasarımı Oluşturun

Renkli dairelerin yorum modülü düzenini yeniden oluşturmanın ilk adımı bir arka plan tasarımı hazırlamaktır. Favori grafik düzenleyicinizin içinde basit bir daire tasarımı oluşturabilirsiniz. Arka plan resmini oluşturmak için atmanız gereken adımlar şunlardır:

  1. 1800 piksel genişliğinde ve yaklaşık 1800 piksel yüksekliğinde bir tuval oluşturun.
  2. Biri diğerinden daha büyük olan iki daire ekleyin.
  3. Daireleri renklendirin ve biraz şeffaflık ekleyin.
  4. İki daireyi tuvalin sol üst kısmına biraz üst üste gelecek şekilde yerleştirin.
  5. Daireleri tek bir nesne olarak gruplandırın ve çoğaltın.
  6. Daireleri çevirin ve ilk ikisinden çapraz olarak aşağı ve sağa yerleştirin.
  7. Üstte ve altta boşluk bıraktığınızdan emin olun. Çok fazla yorum olduğunda, görüntü dikey olarak tekrarlanacak ve döşenecektir.

Bu yorum düzeni şablonu için oluşturduğumuz arka plan tasarımı, eğitimin başında indirebileceğiniz sıkıştırılmış klasörde de mevcuttur.

Tema Oluşturucu'yu açın ve Yeni Şablon Ekle

Şimdi tema oluşturucuyu açma zamanı. Yeni bir şablon ekleyin.

Tüm Gönderiler için Şablonu Seçin

Şablonu tüm gönderilere uygulayın.

Özel Gövde Ekleyin ve Sıfırdan Yapın

Ve şablonun özel gövdesini oluşturmaya başlayın.


Yeni Bölüm Ekle

Şablon düzenleyiciye girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve arka plan resmini yükleyin. Bir degrade renk kaplaması da ekleyin.

Arka plan

  • Arka plan: Gradyan
  • Gradyan Rengi 1: Şeffaf Beyaz rgba(255,255,255,0.55)
  • Gradyan Rengi 2: Şeffaf Beyaz rgba(255,255,255,0.55)
  • Resim: Daireler Arka Planı

aralık

Ayrıca, satır eklemeden önce bölümün aralığını ayarlayın.

  • Üst ve Alt Dolgu: 200px

Yeni Satır Ekle

Sütun Yapısı

Şimdi üç sütunlu bir satır ekleyin.

boyutlandırma

Modül eklemeden önce satırın boyutunu ayarlayın.

  • Özel Oluk Genişliği: 2
  • Genişlik: %80
  • Maksimum Genişlik: %100

Sütun 2 Ayarları

Arka plan

Şimdi, mavi bir arka plan ekleyerek ikinci sütuna stil verin.

  • Arka Plan Rengi: Mavi #51a2ff

Sınır

Kenarları yuvarlayarak devam edin.

  • Yuvarlatılmış Köşeler: Dört köşenin tümü 1vw

Kutu Gölge

Son olarak, bir kutu gölgesi de ekleyin.

  • Gölge: Üçüncü Seçenek
  • Bulanıklık Gücü: 80 piksel
  • Renk: rgba(0,0,0,0.13)

1. Sütun'a Kişi Modülü Ekle

İçerik

Modülleri ekleme zamanı. 1. sütunda bir kişi modülü ile başlayın ve içeriği ekleyin.

  • İsim: Jenny McAbee
  • Pozisyon: Düzenli Katılımcı
  • Gövde: Paragraf Metni
  • Resim: Portre Fotoğrafı

Arka plan

Modüle beyaz bir arka plan ekleyin.

  • Arka Plan Rengi: Beyaz #000000

resim

Tasarım sekmesinde, görüntü kenarlığını aşağıdaki gibi biçimlendirin.

  • Yuvarlatılmış Köşeler: Sol üstte ve sağ üstte 0,5vw
  • Kenarlık Stilleri: Alt Kenarlık
    • Genişlik: 5 piksel
    • Renk: Mavi #51a2ff

Başlık Metni

Başlık metnini şekillendirerek devam edin.

  • Başlık Seviyesi: H4
  • Yazı Tipi: Alegreya Sans SC
  • stil: TT
  • Renk: #021859
  • Boy:
    • Masaüstü: 1vw
    • Tablet: 3vw
    • Telefon: 5vw
  • Harf Aralığı: 1px
  • Satır Yüksekliği: 1,6em

Gövde metni

Ardından, gövde metni.

  • Yazı Tipi: Lato
  • Renk: Mavi #1a1f73
  • Boy:
    • Masaüstü: 0.7vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Çizgi Yüksekliği: 2em

Konum Metni

Konum metniyle devam edin.

  • Yazı Tipi: Lato
  • Tarz: İtalik
  • Renk: #021859
  • Boy:
    • Masaüstü: 0.8vw
    • Tablet: 3vw
    • Telefon: 3.5vw

boyutlandırma

Ardından, boyutu ayarlayın.

  • Genişlik:
    • Masaüstü: %100
    • Tablet: %50
    • Telefon: %70
  • Modül Hizalaması: Merkez

aralık

Ayrıca, boşluk.

  • Üst ve Alt Dolgu: 4vw

Sınır

Ardından, bazı yuvarlak köşeler ekleyin.

  • Yuvarlatılmış Köşeler: Dört köşede o.5vw
  • Kenarlık Stilleri: 24 piksel dört kenar
    • Renk: Beyaz #ffffff

Kutu Gölge

Son olarak, bir kutu gölgesi ekleyin.

  • Gölge: Üçüncü Seçenek
  • Bulanıklık Gücü: 80 piksel
  • Renk: rgba(0,0,0,0.13)

Sosyal Medya Takip Modülünü Sütun 1'e Ekleyin

Ağlar

Kişi modülünün altına, üç sosyal ağ içeren bir sosyal medya takip modülü ekleyin.

  • Facebook
  • Linkedin
  • heyecan

Ağ ayarları

Her sosyal ağa şeffaf bir arka plan rengi uygulayın. Bunu tek tek yapmanız gerekiyor.

  • Arkaplan: Şeffaf

hizalama

Ana tasarım ayarlarında, modülün hizalamasını ortalayın.

  • Modül Hizalaması: Merkez

Simge

Son olarak simgeleri maviye boyayın.

  • Renk: Mavi #51a2ff
  • Boy:
    • Masaüstü: 1vw
    • Tablet ve Telefon: 4vw

Sütun 2'ye Metin Modülü Ekle

İçerik

2. sütuna geçin. Seçtiğiniz bazı h3 içeriğine sahip bir metin modülü ekleyin.

  • Metin: Bize bir yorum bırakın

Arka plan

Beyaz bir arka plan ekleyin.

  • Arka Plan Rengi: Beyaz #ffffff

Başlık Metni

Ardından tasarım sekmesine geçin ve başlık metnine stil verin.

  • Başlık Seviyesi: H3
  • Yazı Tipi: Alegreya Sans SC
  • Ağırlık: Kalın
  • Yazı Tipi Stili: TT
  • Renk: Mavi #021859
  • Boy:
    • Masaüstü: 2vw
    • Tablet ve Telefon: 5.5vw

aralık

Son olarak, aralığı ayarlayın.

  • Üst Dolgu:
    • Masaüstü: 3vw
    • Tablet: 2vw
    • Telefon: 6vw
  • Alt Dolgu
    • Masaüstü ve Tablet: 3vw
  • Sol ve Sağ Dolgu:
    • Masaüstü ve Tablet: 1vw

Sütun 2'ye Yorum Modülü Ekle

Elementler

Şimdi yorum modülünü 2. sütuna ekleyin. Tüm öğeleri etkinleştirin.

  • Yazar Avatarını Göster: Evet
  • Yanıtla Düğmesini Göster: Evet
  • Yorum Sayısını Göster: Evet

Arka plan

Yorumlar modülüne beyaz bir arka plan ekleyin.

  • Arka Plan Rengi: Beyaz #ffffff

Alanlar

Ardından, alan ayarlarını aşağıdaki gibi yaparak modülü şekillendirmeye başlayın.

  • Arka Plan Rengi: Beyaz #ffffff
  • Metin Rengi: Mavi #1a1f73
  • Odak Arka Plan Rengi: Beyaz #ffffff
  • Odak Metni Rengi: Mavi #1a1f73
  • Yazı Tipi: Alegreya Sans SC
  • stil: TT
  • Boy:
    • Masaüstü: 1vw
    • Tablet: 3vw
    • Telefon: 4vw
  • Yuvarlatılmış Köşeler: 5 piksel tüm köşeler

resim

Görüntü ayarlarını da değiştirin.

  • Yuvarlatılmış Köşeler: 5px
  • Kenar Stili: her taraf
  • Genişlik: 3 piksel
  • Renk: Mavi #1a1f73

Yorum Sayısı Metni

Ardından, yorum sayısı metni.

  • Başlık Seviyesi: H3
  • Yazı Tipi: Alegreya Sans SC
  • Yazı Tipi Stili: TT
  • Renk: Mavi #021859
  • Boy:
    • Masaüstü: 1.3vw
    • Tablet: 3vw
    • Telefon: 5vw
  • Satır Yüksekliği: 2 em

Form Başlığı Metni

Ayrıca, form başlık metnine stil verin.

  • Başlık Seviyesi: H3
  • Yazı Tipi: Alegreya Sans SC
  • Yazı Tipi Stili: TT
  • Renk: Mavi #021859
  • Boy:
    • Masaüstü: 1vw
    • Tablet: 3vw
    • Telefon: 5vw
  • Satır Yüksekliği: 2 em

Meta Metin

Aşağıdaki gibi meta metin ve stile geçin.

  • Yazı Tipi: Lato
  • Renk: #021859
  • Boy:
    • Masaüstü: 1vw
    • Tablet: 2.7vw
    • Telefon: 3.5vw

Yorum Metni

Ardından yorum metni.

  • Yazı Tipi: Lato
  • Renk: #021859
  • Boy:
    • Masaüstü: 0.9vw
    • Tablet: 1.8vw
    • Telefon: 2.5vw

Buton

Düğmelere de stil vermeyi unutmayın.

  • Yazı Boyutu:
    • Masaüstü: 0.9vw
    • Tablet: 2.5vw
    • Telefon: 3.5vw
  • Metin Rengi: Beyaz #ffffff
  • Sınır Yarıçapı: 5px
  • Yazı Tipi: Lato

aralık

Ayrıca, yorum modülünün aralığı.

  • Üst boşluk:
    • Masaüstü: -1vw
    • Tablet ve Telefon: -3.3vw
  • Üst Dolgu:
    • Masaüstü ve Tablet: 3vw
    • Telefon: 4vw
  • Alt Dolgu:
    • Masaüstü: 3vw
    • Telefon ve Tablet: 0vw
  • Sol ve Sağ Dolgu:
    • Masaüstü: 2vw
    • tablet: 4vw
    • Telefon: 7vw

Sınır

Son olarak, yorum modülüne bazı yuvarlak köşeler ekleyin.

  • Kenarlık Stilleri: 2 piksel tüm dört kenar
  • Renk: Mavi #1a1f73

E-posta Opt Modülünü Sütun 3'e Ekle

İçerik

3. sütuna ve bir e-posta kayıt modülüne geçin. Modüle bir başlık verin.

  • Metin: Düzenli Güncellemeler Alın
  • Gövde: Paragraf Metni

E-posta hesabı

E-posta hesabı sekmesinde e-posta sağlayıcınızı ayarlayın. Bir liste seçin ve API anahtarınızı ekleyin.

  • E-posta Sağlayıcı
    • Liste
    • API Anahtarı

Alanlar

Ardından, yalnızca tek bir ad alanı kullanmayı seçin.

  • Tek Ad Alanı Kullan: Evet

Arka plan

Modüle beyaz bir arka plan ekleyin.

  • Arka Plan Rengi: Beyaz

Düzen

Tasarıma geçin ta ve düzen ayarlarını aşağıdaki gibi değiştirin.

  • Düzen: Gövde Solda, Form Sağda
  • İsim Tam Genişlik: Evet
  • Ad Tam Genişlik: Evet
  • Soyadı Tam Genişlik: Evet
  • E-posta Tam Genişliği: Evet

Alanlar

Ardından, alan ayarlarına stil verin.

  • Metin Rengi: Mavi #1a1f73
  • Arka Plan Rengi: Beyaz #ffff
  • Odak Metni Rengi: Mavi #1a1f73
  • Odak Arka Plan Rengi: Beyaz #ffff
  • Yazı Tipi: Lato
  • Yazı Boyutu:
    • Masaüstü: 0.7vw
    • Tablet: 2.2vw
    • Telefon: 3.2vw
  • Harf Aralığı: 1px
  • Yuvarlatan Köşeler: Tüm köşelerde 0.2vw
  • Kenar Stilleri: Dört tarafın tümü
    • Genişlik: 2 piksel
    • Renk: Mavi #1a1f73

Başlık Metni

Ardından başlık metni.

  • Başlık Seviyesi: H4
  • Yazı Tipi: Alegreya Sans SC
  • Ağırlık: Orta
  • Yazı Tipi Stili: TT
  • Renk: Mavi #1a1f73
  • Boy:
    • Masaüstü: 1vw
    • tablet: 4vw
    • Telefon: 5vw
  • Harf Aralığı: 1px

Gövde metni

Ayrıca, gövde metni.

  • Yazı Tipi: Lato
  • Renk: Mavi #1a1f73
  • Boy:
    • Masaüstü: 0.7vw
    • Tablet: 2.3vw
    • Telefon: 3vw

Sonuç Mesaj Metni

Sonuç mesaj metnini unutmayın.

  • Yazı Tipi: Lato
  • Renk: Mavi #1a1f73
  • Boy:
    • Masaüstü: 0.7vw
    • Tablet: 2.3vw
    • Telefon: 3vw

Buton

Ayrıca, düğmeyi stilleyin.

  • Yazı Boyutu:
    • Masaüstü: 0.7vw
    • Tablet: 2.3vw
    • Telefon: 3vw
  • Metin Rengi: Beyaz #ffffff
  • Arka Plan Rengi: Mavi #51a2ff
  • Yazı Tipi: Lato

aralık

Aralığı ayarlayın.

  • Üst ve Alt Dolgu: 4vw

Sınır

Ardından, bazı yuvarlak köşeler ekleyin.

  • Yuvarlatılmış Köşeler: Dört köşede o.5vw

Kutu Gölge

Son olarak, bir kutu gölgesi ekleyin.

  • Gölge: Üçüncü Seçenek
  • Bulanıklık Gücü: 80 piksel
  • Renk: rgba(0,0,0,0.13)

Ön izleme

Artık tüm adımların üzerinden geçtik, hadi bu eğitimin sonucuna son bir göz atalım.

masaüstü

Tablet

Telefon

masaüstü

Tablet

Mobil

Bu bir Yorum Modülü Sargısıdır!

Bu kadar! Blog yazısı şablonunuza özelleştirilmiş bir yorum bölümü eklediniz. Bu tasarımların kendi Divi tema oluşturucu kreasyonlarınıza ilham vereceğini umuyoruz. Bu öğreticinin başında her iki tasarımın JSON dosyalarını indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

Divi's Theme Builder ile Özel Global Başlık Nasıl Oluşturulur

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir