Yakınlaştırma Kaydırma Animasyonu ile Duyarlı Tam Ekran İletişim Formu Bölümü Nasıl Oluşturulur

Birçok web sitesi için sayfanın iletişim bölümü ziyaretçiler için ideal bir yerdir. Bariz olanı belirtmek gerekirse, çoğu kişi/şirket, ziyaretçilerinin daha fazla iş için kendileriyle iletişim kurmasını ister. Bu nedenle, daha iyi dönüşüm için bu bölümü optimize etmek önemlidir. Bunu yapabilmemizin bir yolu, kullanıcıya iletişim bilgilerinin dikkati dağılmadan görüntülenmesini sağlayan tam ekran bir iletişim formu düzeni oluşturmaktır.

Bu eğitimde, Divi sitenizin herhangi bir sayfasında kullanabileceğiniz tam ekran bir iletişim formu bölümü düzeni oluşturacağız. Ayrıca, tam ekran düzeninin küçük telefonlarda bile harika görünmesini sağlayacak yardımcı duyarlı tasarım ayarlarıyla düzeni özelleştireceğiz.

Başlayalım!

Gizlice Bakış

İşte oluşturacağımız duyarlı tam ekran iletişim formu bölümüne hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

https://youtu.be/5Qt9J95uME8

Youtube Kanalımıza Abone Olun

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır. Bunun bir bölüm düzeni olduğunu unutmayın, bu nedenle oluşturucuda yeni bir bölüm oluştururken bu düzeni bir sayfaya, gönderiye veya şablona eklemeniz gerekecek.

Bölüm düzenini bir sayfaya nasıl ekleyeceğinizi öğrenmek için gönderinin altına bakın.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).

İletişim Bölümü Düzenini Oluşturma

Başlangıç ​​için Divi Builder'ı kullanarak yeni bir sayfaya önceden hazırlanmış bir düzen ekleyeceğiz. Bu, tasarımı hızlandıracak, böylece bir bölümü (bir iletişim formuyla) tam ekran ve duyarlı hale getirmek için gerekenlere odaklanabiliriz. Ardından, sonunda hepsini bir araya getirmek için kaydırma efekti ekleyeceğiz.

Hazır Düzen Ekleme

Divi oluşturucuyu kullanarak sayfayı düzenlemek için tıkladığınızda, “Önceden Hazırlanmış Bir Düzen Seçin” seçeneğini seçin.

Ardından Business Coach İletişim Sayfası düzenini bulun ve “Bu Düzeni Kullan” düğmesini tıklayın.

Bölüm Ayarları

Düzen sayfaya yüklendikten sonra, sayfa düzeninin en üstündeki bölümün ayarlarını açın ve aşağıdakileri güncelleyin:

Arka plan

• Arka Plan Rengi: #3550a0

Kesit Yüksekliği ve Dolgu

• Minimum Yükseklik: 600 piksel
• Yükseklik: 104vh
• Dolgu: üst 0 piksel, alt 0 piksel

Bu tasarımın anahtarlarından biri, yüksekliği en az 100vh'ye (görüntü alanı yüksekliğinin %100'ü) ayarlamaktır. Bu, bölümün tarayıcı penceresinin tüm yüksekliğini kapladığından emin olacaktır. 104vh yükseklik ekledik, böylece kullanıcı bölüme geçtiğinde biraz fazladan yerimiz oldu.

Minimum yüksekliği 600 piksele ayarlamak, tarayıcı yüksekliği çok küçük olduğunda bölüm içindeki öğelerin hiçbirinin gizlenmemesi için bir geri dönüş yüksekliğidir. Bunun, bölüm içinde sahip olduğumuz içerik miktarına göre ayarlanması gerekecektir.

Özel CSS

Bölüm içindeki satırları dikey olarak ortalamak için (tam ekran bölümler için harika), ana öğeye aşağıdaki özel CSS'yi ekleyin.

display:flex;flex-direction: column;

İletişim Formu Ekleme

İletişim formunu bölüme eklemek için, aşağıdaki hazır bölümden mevcut metin modülünün altına sürükleyin.

Premade Layout'tan Ekstra Bölüm(ler)i Sil

Ardından alt kısmı silin, böylece sadece inşa ettiğimiz bir bölüm kalsın.

Tam Ekran Duyarlı Tasarım için Bölüm Öğelerini Özelleştirme

Bölüm düzeni tamamlandığında, tüm cihazlarda tam ekran bir bölüm için güzel bir şekilde ölçeklenecek duyarlı bir tasarımla bölümün içeriğini (veya alt öğelerini) özelleştirmeye başlamaya hazırız.

Metin boyutunun çoğu için vh uzunluk birimini ve öğelerin her biri için boşlukları kullanacağız. Bu, kısa telefon ekranlarında bile öğeleri tam ekran düzeniyle görüntüde tutmaya yardımcı olacaktır.

Satır Ayarları

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt, 7vh sol, 7vh sağ

Metin Modülü Ayarları

Metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Başlık Metni Boyutu

• Başlık Metni Boyutu: 7vh (masaüstü), 5vh (tablet ve telefon)

• Başlık 3 Metin Boyutu: 2vh (masaüstü), 3vh (tablet), 12px (telefon)

marj

• Marj: 3vh alt

İletişim Formu Ayarları

Şimdi iletişim formundaki responsive tasarım ayarlarımıza vh uzunluk birimini kullanarak devam edeceğiz. İletişim Formu Ayarlarını açın ve aşağıdakileri güncelleyin:

Alan Ayarları

• Alan Marjı: 3vh
• Fleids Dolgusu: 2vh üst, 2vh alt
• Alanlar Metin Boyutu: 2.5vh

Düğme Metin Boyutu

• Düğme Metin Boyutu: 2vh

Genişlik

• Maksimum Genişlik: yok

Kaydırma Efektlerini Ekleme

Tasarımın son adımı, sayfayı aşağı kaydırırken iletişim formu bölümünü tam ekran görünümüne geçirecek olan kaydırma efektidir. Bunu yapmak için bölüm ayarlarını bir kez daha açın ve aşağıdakileri güncelleyin:

Yukarı ve Aşağı Ölçekleme Sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %60 (%0'da)
• Orta Ölçek: %60 (%70'de)
• Bitiş Ölçeği: %100 (%100'de)

Bu, tam ekran iletişim formu bölümünün tasarımını tamamlar. Ancak nihai sonucu görmeden önce, web sitesindeki sayfalardan birine ekleyelim.

Web Sitenizde Tam Ekran İletişim Formu Bölümünü Kullanma

Bölüm Düzenini Divi Kitaplığına Kaydet

Bu bölümü sitemizde başka bir sayfaya ekleyebilmemiz için öncelikle bölüm düzenini Divi Library'ye kaydetmemiz gerekiyor.

Bunu yapmak için bölüm menüsündeki “Kitaplığa Ekle” simgesine tıklayın. Ardından düzene bir ad verin ve “Kütüphaneye Kaydet” düğmesini tıklayın.

Artık bölüm düzeni gelecekte kullanılmak üzere Divi Kitaplığında mevcut olacak.

Divi Kitaplığından Sayfaya Bölüm Düzeni Ekleme

Divi'deki bir sayfaya (veya gönderiye) tam ekran iletişim formu bölümü düzeni eklemek için Divi Builder'ı kullanarak sayfayı açın.

Ardından sayfada bir yere yeni bir bölüm eklemek için tıklayın.

Bölüm Ekle açılır penceresinde, Kitaplıktan Ekle sekmesine tıklayın ve listeden kayıtlı bölüm düzenini seçin (benimki “Tam Ekran İletişim Formu” olarak adlandırılır).

Son sonuç

Şimdi nihai sonucu kontrol edelim.

İşte masaüstünde.

İşte tablette (aslında iPad Pro).

İşte telefonda (aslında iPhone 5). Ekranın gerçekten kısa olmasına rağmen içeriğin tam ekran görünümüne sığdığına dikkat edin.

Son düşünceler

Tam ekran iletişim formu bölümünün, kendi web siteniz için yüksek dönüşüm sağlayan bir iletişim formu/bölümü oluşturmanıza yardımcı olacağını umuyorum. Akılda tutulması gereken en önemli şey, içeriğin her zaman küçük telefonlarda da güzel bir şekilde görüntülenmesi için yeterince kısa olduğundan emin olmaktır. Bu düzende kullanılan temel duyarlı tasarım tekniklerinden bazıları, web sitenizdeki herhangi bir tasarımda ayarlamalar yaparken de kullanışlı olacaktır.

Bu konu hakkında daha fazla bilgi için Divi'de duyarlı bir iletişim formu tasarlamak için vw ve vh uzunluk birimlerinin nasıl kullanılacağına ilişkin yayınımıza göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!