Divi’de yön etkisi ile 3D işaret yazısı nasıl yapılır
Hepimiz biliyoruz ki, iyi bir web sitesi ziyaretçilerin aradıklarını hızlı ve verimli bir şekilde bulmasını kolaylaştırıyor. Ve içeriğinizi daha çekici hale getirebilirseniz her zaman yardımcı olur. Bu öğreticide, kullanıcıları içerecek ve aradıklarını benzersiz bir şekilde bulmalarını kolaylaştıracak bir 3D işaret yazısı nasıl tasarlayacağınızı göstereceğim. Bunu yapmak için, bir gönderide oynatmanın 3D etkisini oluşturmak için birkaç açıklama modülünde Divi Dönüşüm seçeneğini ve perspektif CSS özelliğini kullanacağız. Başlayalım! Gizlice göz atma
Ücretsiz 3D işaret düzenini indirin Bu öğreticiden bir 3D İşaret Posta Tasarımı almak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin! Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız olan youtube kanalımıza abone olun, aşağıdakilere ihtiyacınız var:
WordPress sitenizdeki Divi temasını yüklediğinizden ve etkinleştirdiğinizden emin olun.
Kendi yazı resminizi oluşturmak istiyorsanız, Photoshop, Gimp veya Sketch gibi bir fotoğraf düzenleyicisine ihtiyacınız var. Veya yukarıdaki bu tasarım için ücretsiz düzen indirmesinde sağlanan görüntüleri kullanabilirsiniz.
Buna ek olarak, her şeyi en başından divi üreticisinin ön ucunda inşa edeceğiz.
İşaret Post için Görüntüler Oluşturma Bu tasarım için bir işaret yazısı yapmanın en kolay yolu, sayfanın altından veya satırından dikey olarak tekrarlayan bir arka plan görüntüsü olarak ekleyebileceğimiz küçük ve tekrarlanan küçük bir görüntü bloğu yapmaktır. Bu adımdan geçmek istiyorsanız, başlamak için yukarıdaki ücretsiz indirme işleminde bulunan JSON düzenini içe aktarabilirsiniz. Ancak, seçtiğiniz özel bir renkle kendiniz yapmak istiyorsanız, işte nasıl yapılır.
Bu örnek için Photoshop’u kullanacağım, ancak süreç diğer popüler fotoğraf editörlerine çok benziyor. Photoshop’ta özel 25 piksel yükseklik ve genişliğe sahip yeni belgeler oluşturmak için tıklayın.
Ön planın rengini siyah (#000000) veya istediğiniz renkte ayarlayın. Ardından boya kovasını seçin ve siyah kareyi boyamak için boş bir kare katmanı tıklayın. Ardından JPEG olarak görüntünüzü bilgisayarınıza kaydedin. Bu, 3D Post işareti tasarımımız için bir yazı oluşturmak için tasarımda kullanacağımız görüntüdür. Hazır olduktan sonra Divi’ye 3D işaret post tasarımını uygulayın, yeni bir sayfa oluşturduğunuzdan, sayfanın başlığını verdiğinizden ve Divi Builder’ı öne yaydığınızdan emin olun. “Başından Uyan” seçeneğini seçin. Boş VA’larınız bekliyor! Şimdi bir sütun satırı ile yeni bir düzenli bölüm oluşturun. Modülü eklemeden önce satırı ayarlayın, aşağıdaki satır ayarlarını açın ve güncelleme görüntüsü: [Post için özel bir kare görüntü girin] Arka plan görüntü boyutu: Arka plan görüntüsünün gerçek boyutu tekrar: Yineleme y (dikey) Sonra aşağıdakileri güncelleyin: Talang genişliği: 1 maksimum genişlik: 980px özel dolgu: 2vw üst, 2vw daha düşük o zaman aşağıdaki özel CSS’yi sütunun ana öğelerine aşağıdaki gibi eklememiz gerekir: perspektif: 1000px;
Bu perspektif CSS özelliği, dönüşüm seçeneğiyle her oynadığımızda işaretin (veya açıklamanın) 3D etkisini elde etmek için gereklidir. Bununla ilgili daha fazla bilgi için, perspektifin Divi Dönüşüm seçeneğiyle nasıl çalıştığına bakın. 3D Post işaretinde ilk işaretimizi oluşturmak için bulanıklık modülüyle bir işaret yapın, Blurb modülünü kullanacağız. Lütfen ve açıklama modülünü satıra ekleyin.
Ardından bulanıklık ayarlarını açın ve bulanıklık içeriğini aşağıdaki gibi güncelleyin: Yapay içeriği yalnızca birkaç satır metin içerecek şekilde azaltın. Simgeler kullanın: evet simgesi: sol ok (ekran görüntüsüne bakın) Arka Plan Rengi: #1A233F Icon Rengi: #9EB3C2 Resim Yeri/Ikon: Sol simge yazı tipinin boyutunu kullanın: evet simge yazı tipi boyutu: 80px Metin Oryantasyonu: Orta Yazı Tipi Başlık: Playfair Ekran Metin Renk Başlığı: #9EB3C2 Metin Başlığı Boyut: 38px (masaüstü), 26px (Mobil) Maksimum Genişlik: 600px Modül Hizalama: Özel Dolgu Merkezi:% 5 yukarı,% 5 her ikisi de% 5% 5 Sol,% 5 sağ tur: 20px sınır genişliği: 3px renk sınır: #21335e Bu, modülümüzün stilini işler, ancak 3D efektimizi elde etmek için açıklama modülümüzü oynamak için Dönüşüm seçeneğini kullanmamız gerekir. Bu güncellemeyi yapmak için aşağıdakiler: x ekseninin dönüşümü: 20 derece Daha fazla işaret için yinelenen satırlar şimdi işaret tasarımlarımızdan biri bittikten sonra, daha fazlasını yapmak için çizgileri çoğaltabiliriz. Hatları her çoğalttığımızda, sadece dönüşümün dönüşünü güncellememiz gerekir, böylece işaretler direk etrafındaki farklı derecelerde döner. Devam edin ve çoğaltın ve yeni satırdaki açıklama modülünü aşağıdaki gibi güncelleyin: Dönen X Ekseninin Dönüşümü: -30 DEG Üçüncü işareti yapmak ve yeni satırdaki açıklama modülünü güncellemek için çift satır aşağıdaki gibi: Dönüştürme ekseni x: 40deg eksen Şu anda ikinci işaretin yönünü değiştirin Tüm oklar aynı yöne işaret ediyor. Yönü soldan sağa değiştirmek için bulanık modül ayarlarını hafifçe güncellememiz gerekir. Modül Ayarları Açıklamasını İkinci Sıra (Orta) açın ve aşağıdakileri güncelleyin: Ikon: Sağ Ok (Ekran görüntüsüne bakın)
Metin Oryantasyonu: Sol Metin solda olacak ve simge sağda olacak şekilde bulanık içerik sırasını çevirebiliriz. Bunu yapmak için, ana öğelere aşağıdaki gibi özel bir CSS hattı eklememiz gerekir: Yön: rtl; Şimdi açıklamanın içeriği tersine çevrildi ve yeni bir yöne işaret eden bir işaretiniz var! Bu ayarla ilgili harika şeylerden birini yüzerken, başlangıç dönüşüne (0 derece) geri getirmek için kolayca kayan bir durum ekleyebilmenizdir. Bu, kullanıcıların içeriğe dahil olmalarını ve imleci modüle yönlendirirken metni net bir şekilde görmesini sağlar. Üç modüle aynı vuruş durumunu eklemek istediğimiz için, açıklamanın üç modülünü seçmek ve öğenin sermaye ayarlarını açmak için modüllerden birinin ayarlarını açmak için Multi -Secect kullanın. Ardından aşağıdakileri güncelleyin: Dönüştürme x eksenini (nokta imleç): 0deg Ayarları kaydedin ve hepsi bu! Şimdi şimdiye kadar tasarımı ve işlevselliğe bakın.
Son adımımız için bir arka plan görüntüsü ile parçamızı ayarlayarak, bölümümüze yeni bir arka plan görüntüsü ekleyebiliriz. Bu isteğe bağlıdır, ancak özellikle bir paralaks efekti kullanıyorsanız, doğru resim çok havalı görünebilir. Bölümü açın ve yeni bir arka plan görüntüsü ekleyin. (Ajans düzeni paketimizden bir resim kullanıyorum) Ardından aşağıdakileri güncelleyin: Paralax efektini kullanın: Evet Özel Dolgu: 0px Top, 0px aşağıda Nihai sonuç
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin! Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız olan youtube kanalımıza abone olun, aşağıdakilere ihtiyacınız var:
WordPress sitenizdeki Divi temasını yüklediğinizden ve etkinleştirdiğinizden emin olun.
Kendi yazı resminizi oluşturmak istiyorsanız, Photoshop, Gimp veya Sketch gibi bir fotoğraf düzenleyicisine ihtiyacınız var. Veya yukarıdaki bu tasarım için ücretsiz düzen indirmesinde sağlanan görüntüleri kullanabilirsiniz.
Buna ek olarak, her şeyi en başından divi üreticisinin ön ucunda inşa edeceğiz.
İşaret Post için Görüntüler Oluşturma Bu tasarım için bir işaret yazısı yapmanın en kolay yolu, sayfanın altından veya satırından dikey olarak tekrarlayan bir arka plan görüntüsü olarak ekleyebileceğimiz küçük ve tekrarlanan küçük bir görüntü bloğu yapmaktır. Bu adımdan geçmek istiyorsanız, başlamak için yukarıdaki ücretsiz indirme işleminde bulunan JSON düzenini içe aktarabilirsiniz. Ancak, seçtiğiniz özel bir renkle kendiniz yapmak istiyorsanız, işte nasıl yapılır.
Bu örnek için Photoshop’u kullanacağım, ancak süreç diğer popüler fotoğraf editörlerine çok benziyor. Photoshop’ta özel 25 piksel yükseklik ve genişliğe sahip yeni belgeler oluşturmak için tıklayın.
Ön planın rengini siyah (#000000) veya istediğiniz renkte ayarlayın. Ardından boya kovasını seçin ve siyah kareyi boyamak için boş bir kare katmanı tıklayın. Ardından JPEG olarak görüntünüzü bilgisayarınıza kaydedin. Bu, 3D Post işareti tasarımımız için bir yazı oluşturmak için tasarımda kullanacağımız görüntüdür. Hazır olduktan sonra Divi’ye 3D işaret post tasarımını uygulayın, yeni bir sayfa oluşturduğunuzdan, sayfanın başlığını verdiğinizden ve Divi Builder’ı öne yaydığınızdan emin olun. “Başından Uyan” seçeneğini seçin. Boş VA’larınız bekliyor! Şimdi bir sütun satırı ile yeni bir düzenli bölüm oluşturun. Modülü eklemeden önce satırı ayarlayın, aşağıdaki satır ayarlarını açın ve güncelleme görüntüsü: [Post için özel bir kare görüntü girin] Arka plan görüntü boyutu: Arka plan görüntüsünün gerçek boyutu tekrar: Yineleme y (dikey) Sonra aşağıdakileri güncelleyin: Talang genişliği: 1 maksimum genişlik: 980px özel dolgu: 2vw üst, 2vw daha düşük o zaman aşağıdaki özel CSS’yi sütunun ana öğelerine aşağıdaki gibi eklememiz gerekir: perspektif: 1000px;
Bu perspektif CSS özelliği, dönüşüm seçeneğiyle her oynadığımızda işaretin (veya açıklamanın) 3D etkisini elde etmek için gereklidir. Bununla ilgili daha fazla bilgi için, perspektifin Divi Dönüşüm seçeneğiyle nasıl çalıştığına bakın. 3D Post işaretinde ilk işaretimizi oluşturmak için bulanıklık modülüyle bir işaret yapın, Blurb modülünü kullanacağız. Lütfen ve açıklama modülünü satıra ekleyin.
Ardından bulanıklık ayarlarını açın ve bulanıklık içeriğini aşağıdaki gibi güncelleyin: Yapay içeriği yalnızca birkaç satır metin içerecek şekilde azaltın. Simgeler kullanın: evet simgesi: sol ok (ekran görüntüsüne bakın) Arka Plan Rengi: #1A233F Icon Rengi: #9EB3C2 Resim Yeri/Ikon: Sol simge yazı tipinin boyutunu kullanın: evet simge yazı tipi boyutu: 80px Metin Oryantasyonu: Orta Yazı Tipi Başlık: Playfair Ekran Metin Renk Başlığı: #9EB3C2 Metin Başlığı Boyut: 38px (masaüstü), 26px (Mobil) Maksimum Genişlik: 600px Modül Hizalama: Özel Dolgu Merkezi:% 5 yukarı,% 5 her ikisi de% 5% 5 Sol,% 5 sağ tur: 20px sınır genişliği: 3px renk sınır: #21335e Bu, modülümüzün stilini işler, ancak 3D efektimizi elde etmek için açıklama modülümüzü oynamak için Dönüşüm seçeneğini kullanmamız gerekir. Bu güncellemeyi yapmak için aşağıdakiler: x ekseninin dönüşümü: 20 derece Daha fazla işaret için yinelenen satırlar şimdi işaret tasarımlarımızdan biri bittikten sonra, daha fazlasını yapmak için çizgileri çoğaltabiliriz. Hatları her çoğalttığımızda, sadece dönüşümün dönüşünü güncellememiz gerekir, böylece işaretler direk etrafındaki farklı derecelerde döner. Devam edin ve çoğaltın ve yeni satırdaki açıklama modülünü aşağıdaki gibi güncelleyin: Dönen X Ekseninin Dönüşümü: -30 DEG Üçüncü işareti yapmak ve yeni satırdaki açıklama modülünü güncellemek için çift satır aşağıdaki gibi: Dönüştürme ekseni x: 40deg eksen Şu anda ikinci işaretin yönünü değiştirin Tüm oklar aynı yöne işaret ediyor. Yönü soldan sağa değiştirmek için bulanık modül ayarlarını hafifçe güncellememiz gerekir. Modül Ayarları Açıklamasını İkinci Sıra (Orta) açın ve aşağıdakileri güncelleyin: Ikon: Sağ Ok (Ekran görüntüsüne bakın)
Metin Oryantasyonu: Sol Metin solda olacak ve simge sağda olacak şekilde bulanık içerik sırasını çevirebiliriz. Bunu yapmak için, ana öğelere aşağıdaki gibi özel bir CSS hattı eklememiz gerekir: Yön: rtl; Şimdi açıklamanın içeriği tersine çevrildi ve yeni bir yöne işaret eden bir işaretiniz var! Bu ayarla ilgili harika şeylerden birini yüzerken, başlangıç dönüşüne (0 derece) geri getirmek için kolayca kayan bir durum ekleyebilmenizdir. Bu, kullanıcıların içeriğe dahil olmalarını ve imleci modüle yönlendirirken metni net bir şekilde görmesini sağlar. Üç modüle aynı vuruş durumunu eklemek istediğimiz için, açıklamanın üç modülünü seçmek ve öğenin sermaye ayarlarını açmak için modüllerden birinin ayarlarını açmak için Multi -Secect kullanın. Ardından aşağıdakileri güncelleyin: Dönüştürme x eksenini (nokta imleç): 0deg Ayarları kaydedin ve hepsi bu! Şimdi şimdiye kadar tasarımı ve işlevselliğe bakın.
Son adımımız için bir arka plan görüntüsü ile parçamızı ayarlayarak, bölümümüze yeni bir arka plan görüntüsü ekleyebiliriz. Bu isteğe bağlıdır, ancak özellikle bir paralaks efekti kullanıyorsanız, doğru resim çok havalı görünebilir. Bölümü açın ve yeni bir arka plan görüntüsü ekleyin. (Ajans düzeni paketimizden bir resim kullanıyorum) Ardından aşağıdakileri güncelleyin: Paralax efektini kullanın: Evet Özel Dolgu: 0px Top, 0px aşağıda Nihai sonuç
