Divi'de Hover Efektleri ile 3D İşaret Mesajı Nasıl Oluşturulur
Yayınlanan: 2019-05-13İyi bir web sitesinin ziyaretçilerin aradıklarını hızlı ve verimli bir şekilde bulmasını kolaylaştırdığını hepimiz biliyoruz. Ve içeriğinizi daha ilgi çekici hale getirebilmeniz her zaman yardımcı olur. Bu eğitici yazıda, kullanıcıların ilgisini çekecek ve aradıklarını benzersiz bir şekilde bulmalarını kolaylaştıracak bir 3D tabela gönderisini nasıl tasarlayacağınızı göstereceğim. Bunu yapmak için, bir yazı üzerinde döndürülen işaretlerin 3B efektini oluşturmak için Divi'nin dönüştürme seçeneklerini ve birden çok tanıtıcı modülde perspektif css özelliğini kullanacağız.
Başlayalım!
Gizlice Bakış
ÜCRETSİZ 3D Sign Post Düzenini İndirin
Bu öğreticiden 3D Sign Post tasarımına el 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.
Ü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!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Youtube Kanalımıza Abone Olun
Başlamak için Gerekenler
Başlamak için aşağıdakilere ihtiyacınız olacak:
- WordPress sitenizde Divi Temasının kurulu ve etkin olduğundan emin olun.
- Kendi gönderi görselinizi oluşturmak istiyorsanız Photoshop, Gimp veya Sketch gibi bir fotoğraf düzenleyiciye ihtiyacınız olacak. Veya yukarıdaki bu tasarım için ücretsiz düzen indirmesinde sağlanan resmi kullanabilirsiniz.
- Bunun dışında Divi Builder'ın ön ucunda her şeyi sıfırdan inşa edeceğiz.
İşaret Postu için Görüntü Oluşturma
Bu tasarım için bir işaret direği oluşturmanın en kolay yolu, sayfanın bölümünde veya satırında dikey olarak tekrar eden bir arka plan görüntüsü olarak ekleyebileceğimiz küçük bir tekrarlanabilir görüntü bloğu oluşturmaktır. Bu adımı atlamak istiyorsanız, başlamak için yukarıdaki ücretsiz indirmede bulunan json düzenini içe aktarabilirsiniz. Ancak, seçtiğiniz özel bir renkle kendinizinkini yaratmak istiyorsanız, bunu nasıl yapacağınız aşağıda açıklanmıştır.
Bu örnek için Photoshop kullanacağım, ancak süreç diğer popüler fotoğraf editörleri için de çok benzer.
Photoshop'ta, özel yüksekliği ve genişliği 25 piksel olan yeni bir belge oluşturmak için tıklayın.
Ön plan rengini siyah (#000000) veya istediğiniz renge ayarlayın.
Ardından boya kovası aracını seçin ve kareyi siyaha boyamak için boş kare katmanın içine tıklayın.
Ardından resminizi bilgisayarınıza jpeg olarak kaydedin. Bu, 3D tabela direği tasarımımız için direği oluşturmak için tasarımda kullanacağımız görüntüdür.
Divi'de 3D İşaret Postu Tasarımını Uygulama
Hazır olduğunuzda, yeni bir sayfa oluşturduğunuzdan, sayfanıza bir başlık verdiğinizden ve Divi Builder'ı ön uçta dağıttığınızdan emin olun. “Sıfırdan Oluştur” seçeneğini seçin.
Boş tuvaliniz sizi bekliyor!
Şimdi tek sütunlu bir satırla yeni bir normal bölüm oluşturun.
Satırı Özelleştirme
Modül eklemeden önce satır ayarlarını açın ve aşağıdakileri güncelleyin:
Arka Plan Resmi: [gönderi için özel kare resim ekleyin]
Arka Plan Resmi Boyutu: Gerçek Boyut
Arka Plan Resmi Tekrarı: Y tekrarı (dikey olarak)
Ardından aşağıdakileri güncelleyin:
Oluk Genişliği: 1
Maksimum Genişlik: 980 piksel
Özel Dolgu: 2vw üst, 2vw alt
Ardından aşağıdaki özel CSS'yi Sütun Ana Öğesine aşağıdaki gibi eklememiz gerekiyor:
perspective: 1000px;
Bu perspektif css özelliği, dönüştürme seçenekleriyle her döndürdüğümüzde işaretin (veya tanıtıcı yazının) 3B efektini elde etmek için gereklidir.
Bununla ilgili daha fazla bilgi için, Divi'nin dönüştürme seçenekleriyle perspektifin nasıl çalıştığına bakın.
Blurb Modülü ile İşaret Oluşturma
3D tabela yazımızda ilk tabelamızı oluşturmak için bir tanıtıcı modül kullanacağız. Devam edin ve satıra bir tanıtıcı modül ekleyin.
Ardından tanıtım yazısı ayarlarını açın ve tanıtım yazısının içeriğini aşağıdaki gibi güncelleyin:
Sahte içeriği yalnızca birkaç satır metin içerecek şekilde azaltın.
Simgeyi Kullan: EVET
Simge: sol ok (ekran görüntüsüne bakın)
Arka Plan Rengi: #1a233f
Simge Rengi: #9eb3c2
Resim/Simge Yerleşimi: Sol
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 80px
Metin Yönü: orta
Başlık Yazı Tipi: Playfair Gösterimi
Başlık Metin Rengi: #9eb3c2
Başlık Metin Boyutu: 38px (masaüstü), 26px (telefon)
Maksimum Genişlik: 600 piksel
Modül Hizalaması: Merkez
Özel Dolgu: %5 üst, %5 alt, %5 sol, %5 sağ
Yuvarlatılmış Köşeler: 20px
Kenar Genişliği: 3px
Kenar Rengi: #21335e
Bu, tanıtım modülümüzün stilini halleder, ancak 3B efektimizi elde etmek için tanıtım modülümüzü döndürmek için dönüştürme seçeneklerini kullanmamız gerekir. Bu güncellemeyi yapmak için aşağıdakileri yapın:
Dönüştür X Eksenini Döndür: 20deg
Daha Fazla İşaret için Satırı Çoğalt
Artık tabela tasarımlarımızdan birini tamamladığımıza göre, daha fazlasını yapmak için satırı çoğaltabiliriz. Satırı her çoğalttığımızda, işaretlerin yazı etrafında farklı derecelerde dönmesi için dönüşüm dönüşünü güncellememiz gerekecek.
Devam edin ve satırı çoğaltın ve yeni satırdaki tanıtım yazısı modülünü aşağıdaki gibi güncelleyin:
Dönüştür X Eksenini Döndür: -30deg
Üçüncü bir işaret oluşturmak için satırı çoğaltın ve bu yeni satırdaki tanıtım modülünü aşağıdaki gibi güncelleyin:
Dönüştür X Eksenini Döndür: 40deg
İkinci İşaretin Yönünü Değiştirme
Şu anda tüm oklar aynı yönü gösteriyor. Yönü soldan sağa değiştirmek için, tanıtıcı modül ayarlarını biraz güncellememiz gerekiyor.
İkinci satırdaki (ortadaki) tanıtım yazısı modülünün ayarlarını açın ve aşağıdakileri güncelleyin:
Simge: sağ ok (ekran görüntüsüne bakın)
Metin Yönü: Sol
Metin solda ve simge sağda olacak şekilde tanıtıcı içeriğin sırasını çevirebiliriz. Bunu yapmak için Ana Öğeye aşağıdaki gibi tek bir özel CSS satırı eklememiz gerekiyor:
direction: rtl;
Artık tanıtım yazısı içeriği tersine çevrildi ve yeni bir yönü gösteren bir işaretiniz var!
Hover'da İşaretleri Orijinal Duruma Döndür
Bu kurulumla ilgili harika şeylerden biri, döndürülmüş modülü orijinal (0 derece) dönüşüne geri getirmek için kolayca bir vurgulu durumu ekleyebilmenizdir. Bu, kullanıcının içerikle etkileşime geçmesine ve modülün üzerine geldiğinde metni net bir şekilde görmesine olanak tanır.
Üç tanıtım modülünün tümüne aynı vurgulu durumunu eklemek istediğimizden, üç tanıtım modülünün tümünü seçmek için çoklu seçimi kullanın ve öğe ayarları modunu getirmek için modüllerden birinin ayarlarını açın. Ardından aşağıdakileri güncelleyin:
Dönüştür X Eksenini Döndür (vurgulu): 0deg
Ayarları kaydedin ve bu kadar!
Şimdi şimdiye kadarki tasarım ve işlevselliğe göz atın.
Bölümümüzü Arka Plan Resmiyle Özelleştirme
Son adımımız için bölümümüze yeni bir arka plan resmi ekleyebiliriz. Bu elbette isteğe bağlıdır, ancak özellikle paralaks efektini kullanırsanız doğru görüntü gerçekten harika görünebilir.
Bölümü açın ve yeni bir arka plan resmi ekleyin. (Ajans Düzen Paketimizden bir resim kullanıyorum)
Ardından aşağıdakileri güncelleyin:
Paralaks Etkisini Kullan: EVET
Özel Dolgu: 0 piksel üst, 0 piksel alt
Son sonuç
Son düşünceler
Bir 3D işaret gönderisi oluşturmak, sitenize gerçekten içeriğinizi (tam anlamıyla) ortaya çıkarabilecek yaratıcı ve ilgi çekici bir tasarım öğesi ekler. Ve fareyle üzerine gelme efekti, kullanıcının güzel bir geri dönüş için içeriği 3D efekti olmadan görüntülemesini sağlar. Açıklama modülüne kolayca bir bağlantı URL'si ekleyebileceğinizi unutmayın, böylece isterseniz tıklanabilir bir gezinme öğesi işlevi görebilir. Her neyse, umarım bu size bir sonraki projeniz için biraz ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!