Divi's Theme Builder ile Tüm Sayfalara Otomatik Olarak Alt Sayfa İletişim Formu Nasıl Eklenir

Web sitenize eklemek istediğiniz tüm sayfaları ayarlamakla meşgulken, ziyaretçilerinizin yolculuğunu kolaylaştırmak için her sayfanın sonuna bir iletişim formu eklemek isteyebilirsiniz. Divi ile elbette sayfanın kendisine bir iletişim formu ekleyebilirsiniz, ancak süreci kolaylaştırmak istiyorsanız bu da mümkündür. Bugünün Divi eğitiminde, tüm sayfalarınıza bir kerede otomatik olarak bir alt sayfa iletişim formunu nasıl ekleyeceğinizi göstereceğiz. Ayrıca, insanları otomatik olarak bulundukları sayfanın iletişim bölümüne yönlendirecek bir bağlantı bağlantısına sahip sabit bir sağ alt simgeyi otomatik olarak ekleyeceğiz. Sayfa şablonunu da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Sayfa Şablonunu ÜCRETSİZ İndirin

Ellerinizi ücretsiz sayfa şablonuna koymak için önce aşağıdaki düğmeyi kullanarak 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

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.

İNDİRMEK

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!

Eğitime Genel Bakış

• Seçtiğiniz bir düzen paketini kullanarak web sitenizdeki sayfaları ayarlayın
• Sayfa tasarım stiliniz ayarlandıktan sonra, alt sayfadaki iletişim formunda tasarım stilini yeniden kullanabilirsiniz.
• Alt sayfa iletişim formunu eklemek için öncelikle tüm sayfalara ayrılmış yeni bir şablon oluşturmanız gerekir.
• Şablon oluşturulduktan sonra Divi'nin görsel oluşturucusunu kullanarak şablonun gövdesini oluşturmaya başlayabilirsiniz.
• Tüm benzersiz sayfa içeriğinin her sayfada göründüğünden emin olmak için içerik gönderisi modülünü ekleyeceğiz
• Gönderi içeriği modülü, tüm dinamik sayfa tasarımınızı içerir
• Gönderi içeriği modülünün altına, iletişim formumuz için başka bir bölüm ekleyeceğiz
• İletişim formunu tasarlayacağız ve bölüme benzersiz bir CSS kimliği eklediğimizden emin olacağız, bir bağlantı bağlantısı oluşturmak için bu CSS kimliğini kullanacağız
• Bonus: Sayfalarımızın her birinin sağ alt köşesine sabit bir simge ekleyeceğiz ve simgeyi o sayfanın iletişim bölümüne bağlayacağız

1. Layout Pack of Choice Kullanarak Web Sitesi Sayfalarını Ayarlayın

Benimsediğimiz yaklaşım, oluşturduğunuz her tür web sitesinde işe yarar. Ancak bu özel eğitim için Magazine Layout Pack'in tasarım stilini kullanıyoruz. Bu yaklaşımı başka bir web sitesinde kullanıyorsanız, tasarımı ihtiyaçlarınıza göre değiştirmekten çekinmeyin.

2. Divi Tema Oluşturucu'ya gidin ve Yeni Sayfa Şablonu Ekleyin

Divi Tema Oluşturucu'ya Git ve Yeni Sayfa Şablonu Ekle

Web sitenizdeki Divi Theme Builder'a gidin. Orada, yeni bir şablon ekleyin.

Alt sayfadaki iletişim formunun tüm sayfalarda görünmesini istiyorsanız, bu yeni şablonu tüm sayfalarda kullanın. Belirli sayfalarda da görünmesini sağlayabilir ve/veya belirli sayfalardan hariç tutabilirsiniz.

• Kullanım Yeri: Tüm Sayfalar

Şablon Gövdesi Oluşturmaya Başlayın

Yeni şablonu oluşturduktan sonra özel gövdeyi oluşturmaya başlayabilirsiniz.

3. Şablon Gövdesine Sayfa İçeriği Ekleyin

Bölüm Ayarları

aralık

Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın, bölüm kabının tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm satırın varsayılan üst ve alt dolgusunu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Gönderi İçeriği Modülü Ekle

Satırınızın sütununa İçerik Sonrası Modülü ekleyerek devam edin. Bu modül, oluşturduğunuz tüm dinamik sayfa içeriğini temsil eder.

4. Şablon Gövdesine Alt Sayfa İletişim Formu Ekleyin

Yeni Bölüm Ekle

Degrade Arka Plan

İçerik Gönderi Modülünü içeren bölümün altına başka bir normal bölüm ekleyeceğiz. Bu bölüm iletişim formuna ayrılacaktır. Bölüm ayarlarını açın ve bir degrade arka planı ekleyin.

• Renk 1: #ffffff
• Renk 2: #ffc077
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

CSS kimliği

Bir CSS kimliği de ekleyin.

• CSS kimliği: iletişim

Yeni Satır Ekle

Sütun Yapısı

Bölüme yeni bir satır ekleyerek devam edin ve aşağıdaki sütun yapısını kullanın:

Metin Modülü #1'i Sütun 1'e ekleyin

H2 İçeriği Ekle

İlk sütunda ihtiyacımız olan ilk modül bir Metin Modülüdür. Seçtiğiniz bazı içeriği girin.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 70px (Masaüstü), 48px (Tablet), 36px (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1.2em

boyutlandırma

Maksimum genişlik de ekleyin.

• Maksimum Genişlik: 750 piksel

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Seçtiğiniz bazı içerikle sütun 1'e başka bir Metin Modülü ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Cardo
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: rgba(0,0,0,00,03)
• Metin Boyutu: 150px (Masaüstü), 100px (Tablet), 60px (Telefon)
• Metin Satırı Yüksekliği: 1em

aralık

Ve farklı ekran boyutlarında boşluk ayarlarıyla oynayın.

• Üst Kenar Boşluğu: -0.8em (Masaüstü), -100px (Tablet), -80px (Telefon)
• Sol Kenar Boşluğu: -0.8em (Masaüstü ve Tablet), -60 piksel (Telefon)

2. Sütun'a İletişim Formu Ekle

Tüm Gerekli Alanları Ekle

İkinci sütunda ihtiyacımız olan tek modül bir İletişim Formu Modülü. İstediğiniz kadar alan ekleyin ve e-posta hesabınızı da modüle bağlayın.

Ad ve E-posta Alanlarını Tam Genişliğe Dönüştür

Ad ve e-posta adresi alanlarını tam genişliğe çevirerek devam edin.

• Tam Genişlik Yap: Evet

Alan Ayarları

Genel iletişim formu ayarlarına geri dönün ve alanların arka plan rengini değiştirin.

• Alanlar Arka Plan Rengi: #ffffff

Düğme Ayarları

Sonraki düğme ayarlarını değiştirin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000 (Varsayılan), #ff2a38 (Vurgulu)
• Düğme Kenar Genişliği: 8px

• Düğme Kenar Rengi: rgba(0,0,0,0)
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi Ağırlığı: Ultra Kalın
• Düğme Yazı Tipi Stili: Büyük Harf
• Düğme Simgesi: Listede Bul

Sınır

Biraz sınır yarıçapı da ekleyin.

• Tüm Köşeler: 5px

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek modülün ayarlarını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Kutu Gölge Yayılma Gücü: -4px
• Gölge Rengi: rgba(0,0,0,0.08)

Bonus: Şablon Gövdesine Sabit Alt-Sağ Bağlantı Simgesi Ekle

Yeni Bölüm Ekle

aralık

Şimdi, her sayfaya sağ alttaki sabit simgeyi eklemek için başka bir normal bölüm eklememiz gerekecek. Bölümü açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Z İndeksi

Bölümün z indeksini de artırın. Bu, simgenin tüm sayfa içeriğinin üstünde kalmasını sağlayacaktır.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın ve satırın bölümün tüm genişliğini almasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Blurb Modülü Ekle

Başlık ve İçerik Kutusunu Boş Bırak

Sağ alttaki simgeyi görüntülemek için bir Blurb Module kullanacağız. Başlık ve içerik kutusunu boş bıraktığınızdan emin olun.

Simge Seç

Ardından, istediğiniz bir simgeyi seçin.

Bağlantı

Modül bağlantı URL'sine kimliği ekleyerek simgeyi iletişim bölümüne bağlayın.

• Modül Bağlantı URL'si: #contact

Arka plan rengi

Modülün arka plan rengini de değiştirin.

• Arka Plan Rengi: #ffc077

Simge Ayarları

Modülün tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 30px

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Genişlik: 100 piksel
• Modül Hizalaması: Sağ

aralık

Ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 33px
• Alt Dolgu: 33px

Sınır

Ardından, kenarlık ayarlarına gidin ve bazı yuvarlatılmış köşeler ekleyin.

• Tüm Köşeler: 100 piksel

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Kutu Gölge Yayılma Gücü: -15px
• Gölge Rengi: rgba(0,0,0,0.23)

Ana Eleman CSS

Simgeyi sabitlemek için, gelişmiş sekmesinde modülün ana öğesine üç satırlık CSS kodu uygulayacağız.

bottom: 20px;
right: 20px;
position: fixed;

Bulanık Resim CSS'si

Ve modülün görüntü varsayılan alt dolgusunu da kaldırın.

margin-bottom: 0px;

6. Tüm Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Sayfa şablonunuzun gövdesini tamamladıktan sonra, tüm değişiklikleri kaydedebilir, Tema Oluşturucu'dan çıkabilir ve sonucu tüm sayfalarınızda görüntüleyebilirsiniz!

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, tüm sayfalarınıza bir kerede alt sayfa iletişim formunu nasıl ekleyeceğinizi gösterdik. Bunu başarmak için yeni bir sayfa şablonu oluşturduk, İçerik Gönderi Modülünü ekledik ve şablonun sonuna bir iletişim bölümü ekledik. Ayrıca, ziyaretçileri bulundukları sayfanın iletişim bölümüne yönlendirecek bir bağlantı bağlantısına sahip sabit bir sağ alt simge ekledik. Sayfa şablonu JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.