Divi Kaydırma Hareket Efektleri ile Kayan İletişim Bölümü Oluşturun

Her web sitesinin bir iletişim bölümüne ihtiyacı vardır, ancak bu, standart bir tasarıma gitmeniz gerektiği anlamına gelmez. Divi'nin kaydırma efektleriyle öne çıkacak kayan bir iletişim bölümü oluşturabilirsiniz. Ziyaretçileri iletişim formunuzla etkileşime geçmeye davet edecek dikey kayan bir iletişim bölümü düzeniyle kullanıcı etkileşiminizi geliştirin. Bu gönderide, herhangi bir sayfaya ekleyebileceğiniz tam genişlikte kayan bir iletişim bölümünün nasıl oluşturulacağını göstereceğiz. Divi Theme Builder ile site çapında bir altbilginin üstüne bile ekleyebilirsiniz.

Aşağıda, kendi Divi Kitaplığınıza yüklemek için JSON düzenine sahip ücretsiz indirilebilir bir klasör bulacaksınız. Ayrıca, harita arka planını yeniden oluşturmanıza yardımcı olacak bir PSD şablonunun yanı sıra kendi renklerinizle kişiselleştirebilmeniz için harita iğnesinin bir SVG'sini de ekledik.

Hadi hadi bakalım!

Ön izleme

İletişim formu düzenini oluşturmaya başlamadan önce, farklı ekran boyutlarındaki sonuca bir göz atın.

masaüstü

Mobil

Yüzen İletişim Bölümünü ÜCRETSİZ İndirin

Ellerinizi serbest yüzen iletişim bölümü düzenine 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!

1. Yüzen İletişim Bölümü İçin Harita Arka Planı Oluşturun

Google Haritalar'ı açın

Bu öğreticinin ilk adımı, siyah beyaz harita arka planını oluşturmaktır. Kendinizinkini oluşturmak için aşağıdaki adımları izleyin:

• İlk olarak, Google Haritalar'ı açın ve adresinizi arayın.
• Yüklendiğinde, şehrin büyük bir bölümünü veya adresinizin etrafındaki sokakları görebilmeniz için uzaklaştırın.

• Ardından, konumunuz haritanın sağ üst çeyreğinde olacak şekilde haritayı konumlandırın.
• Ardından, konum pimini çıkarın.
• Son olarak, köşelerdeki sekmelerden kaçınarak haritanın ekran görüntüsünü alın.

Pini Kişiselleştirin

Yukarıdaki indirilebilir dosyalarda, tasarımda kullandığımız pinin bir SVG dosyasını ekledik. Vektör grafik düzenleyicinizle onu kullanabilir ve renkleri değiştirebilirsiniz. Photoshop'ta rengi değiştirmek isterseniz şeffaf bir PNG de ekledik.

SVG pini için şu adımları izleyin:

• İlk olarak, bu öğreticinin başındaki ücretsiz dosyaları indirin ve klasörü açın.
• İkinci olarak, SVG pin grafiğini Illustrator, Inkscape veya favori vektör düzenleyiciniz ile açın.
• Üçüncüsü, rengi markanıza veya web sitenize uyacak şekilde değiştirin.
• Son olarak, şeffaf bir PNG olarak kaydedin.

Photoshop'ta düzenleyin

Şimdi hepsini bir araya getirme zamanı. İlk olarak, rengin doygunluğunu azaltmak için haritayı favori grafik düzenleyicinizde açın. İkinci olarak, pimi ekleyin.

Photoshop'unuz varsa, eklediğimiz PSD dosyasını kullanabilir ve harita ekran görüntünüzü ikinci katmandaki akıllı nesneye ekleyebilirsiniz.

Akıllı nesneyi kullanmak için şu adımları izleyin

• PSD dosyasını açın.
• Turuncu renkli katmana çift tıklayın. Yeni bir pencere açılacaktır.
• Haritamızı sizinkiyle değiştirin.
• Kaydet'e tıklamayı unutmayın.
• Ana düzenleme penceresine geri dönün ve orada da kaydet'i tıklayın.
• Web için .jpg olarak dışa aktarın.

Photoshop'unuz yoksa şu adımları izleyin:

• İlk olarak 1920 piksel x 700 piksel boyutunda yeni bir proje oluşturun.
• İkinci olarak, harita ekran görüntüsünü tuval üzerine yerleştirin. Konumunuzu merkezden biraz daha yüksek, sağ üst kadranda tuttuğunuzdan emin olun.
• Üçüncüsü, görüntü ayarlarını kullanmak görüntüyü siyah beyaza çevirir.
• Ayrıca, biraz kontrast ekleyin.
  1. Parlaklık: -25
  2. Kontrast: -50
• Ardından, görüntü katmanına tıklayın ve yaklaşık %55 oranında şeffaflık ekleyin.
• Bu tasarımı beyaz olmayan bir arka plana sahip bir web sayfasında oluşturacaksanız, web sitesinin arka plan rengi ne olursa olsun temel rengi beyaz tutmak için görüntünün altına beyaz bir katman ekleyin.
• Pimi konumunuza yerleştirerek devam edin. Yaklaşık 90 piksel boyunda boyutlandırın. En üst katmanda bırakın.
• Son olarak, .jpg olarak indirin.

2. Eleman Yapısı Oluşturun

Yeni Bölüm Ekle

Arka plan

Şimdi Divi Builder ile kayan temas bölümünü oluşturmaya başlama zamanı! Yapacağımız ilk şey, yeni veya mevcut bir sayfa açmak ve yeni bir bölüm eklemek.

İçerik sekmesinde, Photoshop'ta oluşturduğunuz harita arka planını ekleyin.

• Arka Plan Resmi: Düzenlenmiş haritanız

aralık

Ardından, tasarım sekmesinde bölümün boşluk ayarlarını özelleştirin.

• Üst ve Alt Kenar Boşluğu: 50vh
• Alt Dolgu: 0vw

görünürlük

Ardından, taşmaları görünür olarak ayarlayın.

• Yatay ve Dikey Taşma: Görünür

Konum

Son olarak, bölümün Z indeksini 10 olarak ayarlayın.

• Z İndeksi: 10

Yeni Satır Ekle

Sütun Yapısı

Şimdi bazı öğeler eklemenin zamanı geldi. İlk önce, 2 sütunlu bir satır ekleyin.

boyutlandırma

Satır ayarlarını açın ve boyutlandırmayı aşağıdaki gibi ayarlayın.

• Genişlik
  • Masaüstü: %90
  • Tablet ve Telefon: %80
• Maksimum Genişlik: 90%

görünürlük

Gelişmiş sekmeye tıklayın ve sonraki taşmaları ayarlayın.

• Yatay ve Dikey Taşma: Görünür

Konum

Konum ayarlarını değiştirerek satır ayarlarını tamamlayın.

• pozisyon: akraba
• Ofset Menşei: Sol Üst
• Dikey Ofset
  • Masaüstü: -8vw

Sütun 1 Ayarları

Arka plan

Modülleri eklemeden önce, tek tek sütunlara stil vermemiz gerekecek. Sütun 1'e bir arka plan rengi ekleyin.

• Düz Renk: #25274d

aralık

Sonraki boşluk ayarlarını yapın.

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

Sınır

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

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

Kaydırma Efektleri

Son olarak, kaydırma efektleri ayarlarında biraz dikey hareket kullanın. Bu, kayan bir etki yaratmamıza yardımcı olacaktır.

• Kaydırma Dönüştürme Efektleri: Dikey Hareket
• Dikey Hareketi / Masaüstünü Ayarla
  • Başlangıç ​​Ofseti: 4
  • Orta Ofset: 0 (%50'de)
  • Bitiş Ofseti: -4
• Dikey Hareketi / Tableti ve Telefonu Ayarlayın
  • Başlangıç ​​Ofseti: 4
  • Orta Ofset: 0 (%40 ve %60'ta)
  • Bitiş Ofseti: -3
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Sütun 2 Ayarları

Konum

Şimdi, ikinci sütun ayarlarına geçin. Konum ayarlarını buna göre yapın.

• pozisyon: akraba
• Ofset Menşei: Sol Üst
• Dikey Ofset
  • Masaüstü: 25vw

Kaydırma Efektleri

Bu sütuna da biraz dikey hareket ekliyoruz.

• Kaydırma Dönüştürme Efektleri: Dikey Hareket
• Dikey Hareketi / Masaüstünü Ayarla
  • Başlangıç ​​Ofseti: 2
  • Orta Ofset: 0 (%50'de)
  • Bitiş Ofseti: -2
• Dikey Hareketi / Tableti ve Telefonu Ayarlayın
  • Başlangıç ​​Ofseti: 0
  • Orta Ofset: 0 (%50'de)
  • Bitiş Ofseti: -2
• Hareket Efekti Tetikleyicisi: Elemanın Başı

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

İçerik

Sütun 1'deki bir metin modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H2 içeriğini ekleyin.

Başlık Metni

Tasarım sekmesine geçin ve H2 metnini aşağıdaki gibi biçimlendirin.

• Başlık Seviyesi: H2
• Yazı Tipi: Palanquin Dark
• Yazı Ağırlığı: Kalın
• Yazı Tipi Stili: TT
• Renk: Sarı #ffd868
• Boy
  • Masaüstü: 5vw
  • Tablet: 10vw
  • Telefon: 12vw
• Harf Aralığı: 4px

Sütun 1'e İletişim Formu Modülü Ekle

İçerik

Metin modülünün altına bir iletişim formu ekleyin. Bunlar kullandığımız alanlar:

• İsim
• E-posta
• Ders
• İleti

Spam Koruması

İletişim formu modülünü şekillendirmeden önce. spam korumasını açın ve ReCaptcha hesabınızı bağlayın.

• Bir Spam Koruma Hizmeti Kullanın: Evet
• Servis Sağlayıcı: ReCaptcha
• Hesap Seç

Alanlar

Tasarım sekmesine geçin ve alanları aşağıdaki gibi biçimlendirin.

• Arka Plan Rengi: Koyu Mavi #25274d
• Metin Rengi: Soluk Gri #d1d1d1
• Odak Arka Plan Rengi: Koyu Mavi #25274d
• Odak Metni Rengi: Soluk Gri #d1d1d1
• Yazı Tipi: Palanquin
• stil: TT
• Yazı Boyutu
  • Masaüstü: 0.9vw
  • Tablet: 2vw
  • Telefon: 3vw
• Harf Aralığı: 1px

Buton

Ardından, düğmeye stil verin.

• Özel Stiller: Evet
• Metin Boyutu: 20px
• Metin Rengi: Koyu Mavi #25274d
• Arka Plan Rengi: Sarı #ffd868
• Sınır Yarıçapı: 7px
• Simge Rengi: Koyu Mavi #25274d
• Üst Kenar Boşluğu: 5px

boyutlandırma

Sırada boyutlandırma ayarlarını değiştiriyoruz.

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Biz de biraz üst dolgu ekleyeceğiz.

• Üst Dolgu: 4vw

Sınır

Kenarlık ayarlarını özelleştirerek modül ayarlarını tamamlayın.

• Girdiler Yuvarlatılmış Köşeler: Dört köşenin tamamı 6 piksel
• Girdiler Kenarlık Stilleri: Dört tarafın tümü
• Girdiler Kenarlık Genişliği: 2px
• Girişler Kenarlık Rengi: Sarı #ffd868

2. Sütun'a Sosyal Medya Takip Modülü Ekleyin

İçerik

2. sütuna geçin ve bir sosyal medya modülü ekleyin. İhtiyacınız olan tüm sosyal medya ağlarını kullanın.

• Facebook
• heyecan
• Linkedin

Bağlantı

Şekillendirmeden önce ilgili ağlara bağlantılar ekleyin.

Öğe Arka Planı

Şimdi ilk sosyal ağı açın ve arka plan rengini değiştirin.

• Renk: Koyu Mavi#25274d

Öğe Simgesi

Aynı elementin tasarım sekmesinde ikon ayarlarını aşağıdaki gibi değiştirin.

• Renk: Sarı #ffd868
• Simge Yazı Tipi Boyutu
  • Masaüstü ve Tablet: 31px
  • Telefon: 26px

Öğe Aralığı

Ardından, simgeleri birbirinden ayırmak için küçük bir kenar boşluğu ekleyin.

• Sağ Marj: 1vw

Öğe Stillerini Kopyala ve Yapıştır

Kalan sosyal ağları biçimlendirmek için ana içerik penceresine dönün ve ilk simgenin öğe stillerini kopyalayın. Ardından, öğe stillerini kalan sosyal ağlara yapıştırın.

hizalama

Ana tasarım sekmesine geçin ve modülün sola hizalandığından emin olun.

• Modül Hizalama: Sol

boyutlandırma

Ardından, modülün boyutunu ayarlayın.

• Genişlik: %100

aralık

Tüm varsayılan dolguyu da silin.

• Üst, Alt, Sol ve Sağ Dolgu: 0vw

Sınır

Son olarak, kenarlık ayarlarına bazı yuvarlak köşeler ekleyin. Bu, tüm simgelerin kenarlıklarını bir kerede ayarlayacaktır.

• Yuvarlatılmış köşeler
  • Sol Üst ve Sağ: 7px
  • Alt Sol ve Sağ: 0px

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

İçerik

Sosyal medya modülünün altına başka bir metin modülü ekleyin. Seçtiğiniz bazı içeriği ekleyin. İki adres, bir telefon numarası ve bir e-posta ekledik. Tüm büyük harflerle her öğenin başlığında kalın kullanın.

• MERKEZ : 1587 Sukhumvit Soi 21, Bangkok, Tayland.
• PERAKENDE YERİ : Emporium AVM 2. Kat
• TELEFON : (321) 564 2398
• E - POSTA : [e-posta korumalı]

Arka plan

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

• Renk: Koyu Mavi #25274d

Metin

Tasarım sekmesine gidin ve metni biçimlendirin.

• Yazı Tipi: Palanquin
• Renk: Sarı #ffd868
• Boyut: 18 piksel

aralık

Bazı özel boşluk değerleri de ekleyin.

• Üst boşluk
  • Masaüstü: -60 piksel
  • Tablet ve Telefon: -50px
• Üst, Alt, Sol ve Sağ Dolgu
  • Masaüstü:3vw
  • Tablet: 6vw
  • Telefon: 8vw

Sınır

Ve kenarlık ayarlarında yuvarlatılmış köşeler ekleyerek modülü tamamlayın. Bu kadar!

• Yuvarlatılmış Köşeler: 10px Sağ Üst, Sol Alt ve Sağ Alt.

Ön izleme

Kayan iletişim bölümünü yeniden oluşturmayı bitirdiğimize göre, farklı ekran boyutlarındaki sonuca son bir kez bakın.

masaüstü

Mobil

Kayan İletişim Bölümü Düzenini Yeniden Oluşturmayı Bitirdiniz!

Yeni Divi kaydırma efektlerini kullanmak, herhangi bir standart düzeni mükemmel bir tasarıma dönüştürmeye yardımcı olur. Kendi harita arka planınızı oluşturarak, bitmiş tasarımın nasıl göründüğü üzerinde daha fazla kontrole sahip olursunuz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bırakın!