Benzersiz bir başlık tasarımı için Divi kaydırıcı modülüne dikey kaydırıcı öğeleri nasıl eklenir
Divi Slider modülü, alışkanlıkların ötesinde düşünmeyi ve şaşırtıcı kaydırıcı tasarımları oluşturmayı kolaylaştıran bir tasarım seçeneği ile doludur. Bugün, birkaç şeyi tersine çevireceğiz (kelimenin tam anlamıyla). Bir sonraki yazıda, Divi kaydırıcı modülüne dikey bir kaydırıcı öğesi ekleyeceğiz. Dikey öğelerle (başlık metni ve slayt kontrolü gibi) bir kaymaya sahip olmak, ziyaretçilerin daha dar sütunlarda (özellikle hücresel olarak) daha fazla slayt içeriği ve arka plan görüntüsü görmelerini sağlar. Ve dikey eleman, genel tasarıma ferahlatıcı bir dokunuş ekler. Bunu yapmak için, tüm vardiyaları oynamak için Divi Transformation Rotary seçeneğini kullanacağız ve daha sonra modern bir dikey sürücü tasarımı yapmak için gerektiği gibi her slayttaki diğer öğeleri geri çevireceğiz. Temel teknikleri tartışarak başlayacağız. Sonra bu dikey kaydırıcı ile gerçekten benzersiz bir başlık tasarımı oluşturacağız.
Bölünelim! Gizlice göz atma
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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? https://youtu.be/nmuy9vayo4m YouTube kanalımıza abone olarak Başlamanız gereken şeylere, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Saat yönünde 90 derece döndürülmüş iki görüntü. Bu, varsayılan işletim sistemi seçeneğiniz veya basit bir fotoğraf düzenleme uygulaması ile kolayca yapılabilir. Medya öğelerini düzenleyerek doğrudan WordPress’te görüntüleri de oynayabilirsiniz.
Bundan sonra, Divi’de büyük çalışmanızı yapmaya hazırsınız. Temel Fikirler Dikey kaydırma elemanlarının eklenmesinin arkasındaki temel fikir, sayfada dikey olarak görüntülenmesi için 90 derece kaydırma modülü (saat yönünün tersine veya saat yönünün tersine) oynamak için Divi Dönüşüm seçeneğini kullanmaktır. Kaydırıcı arka plan görüntüleri (veya slayt) için önce görüntüyü çalmanız (veya bir WordPress görüntü düzenleyicisi kullanmanız), böylece kaydırıcıyı her oynattığınızda dik görüntülenir. Bu, beklediğiniz gibi dikey bir kayma, ok ve metin kontrolü gösterecektir. Zor kısım, vardiyanın yüksekliğini ve genişliğini ayarlayarak mevcuttur çünkü her şey gerçekten döner. Bu kaydırma tasarımı, düzende en iyi iki veya daha fazla sütunla işlev görür. İşte bunun nasıl yapılacağına hızlı bir örnek. İki sıra sütun bulunan normal bölümde, kaydırıcı modülünü sol sütuna ekleyin. Ardından, daha önce saat yönünde 90 derecenin karşısında döndürülen başlık, içerik cümlesi ve arka plan çizimleri ile birkaç slayt ekleyin.
Ardından Divi Dönüşüm seçeneğini kullanarak Z ekseni boyunca 90 derecelik kaydırma modülünü çevirin.
Ardından, ek bir genişlik yapmak ve metni her slaydın sağına hizalamak için alanı kaymaya ekleyin (daha düşük bir dolgu). Sonuç bu. Gördüğünüz gibi, konsept basittir, ancak bu dikey kaydırma öğesi benzersiz tasarımlar yapmak için çok yararlıdır. Aşağıda, bu benzersiz kaydırıcı tasarımından birini birlikte yapmaya çalışacağız. Benzersiz bir başlık tasarımı için Divi kaydırıcı modülüne dikey bir kaydırıcı öğesi eklemek, iki sıra sütunla düzenli bir parça yaparak parça ve arka plan satırını başlatır. Modülü satıra eklemeden önce, önce arka plan renginin aşağıdaki kısmını güncelleyin: Arka Plan Rengi: #24272 Satır Ayarları Sıramıza özel bir oluk genişliği 1 vermemiz ve ardından VW uzunluğu ünitesini kullanarak genişliği ayarlamalıyız. Uzun bir VW ünitesi kullanmak, dikey kaydırıcılar yapmak için önemlidir.
Aşağıdaki satır ve güncelleme ayarlarını açın: suttan genişliği: 1 genişlik: 80VW (masaüstü ve tablet), 95VW (cep telefonu) maks: 80VW (masaüstü ve tablet), 95VW (cep telefonu) Tasarım için kutunun gölgesini ekleyeceğiz amaçlar. Gölge Kutusu: Bkz. Yatay Korkunç Konum Yakalama Gölge Kutusu: -10px Dikey Konum Gölge Kutusu: 0PX Gölge Renk: RGBA (255,255,255,0.03) Metin modülünü kullanarak başlık içeriğini ekleyin Son olarak sütun 2’ye bir kaydırıcı ekleyeceğiz, ancak şimdilik başlık başlığını sütun 1’de birkaç ek metin ekleyelim. Bunu yapmak için Sütun 1’e iki metin modülü ekleyeceğiz. Metin modülünü başlığa ekleyin Başlığımızın başlığını eklemek için metin modülünü sütun 1’e ekleyin.
İçerik içeriğini aşağıdaki H2 başlığıyla güncelleyin:
Varsayılan içerik metnini bir metin satır ekleyecek şekilde azaltın. Ardından, daha önce saat yönünde 90 derecenin karşısında döndürülmüş bir arka plan görüntüsü ekleyin. Ardından, farklı bir arka plan görüntüsü vererek ikinci varsayılan slayt için de aynısını yapın. Bir sonraki sürücüyü çevirin, Dönüşüm Rotary seçeneğini kullanarak değiştirmeyi çevirin: Z: 90deg Eksen Dönüşümü Dönüştürme Vardiyanın yüksekliğinin kaydırıcı genişliği hakkında endişelenmesine gerek yoktur, çünkü sütunun% 100’ünü otomatik olarak kapsayacaktır. Sütun 80VW’nin (sıra genişliği)% 50’dir, bu nedenle genişlik temel olarak varsayılan olarak 40VW olacaktır. Şimdi masaüstüne uyan 40VW yükseklik kaydırıcısı vermemiz ve daha sonra yüksekliği tablette 80VW ve cep telefonunda 95VW olarak ayarlamamız gerekiyor. Aşağıdakileri güncelleyin: Yükseklik: 40VW (masaüstü), 80VW (tablet), 95VW (cep telefonu) Ardından, metni dikey kaymanın sağına uyumlu hale getirmek için dolguyu ayarlayın. Dolgu (masaüstü): 0px üst, 21vw aşağıda, 0px sol, 0px sağ dolgu (tablet): 42VW Dolgu (Telefon): 50VW aşağıda Metin Ayarlarını Güncelleme Metnin başlığını ve içeriğini aşağıdaki gibi ayarlayın: Sol metin: Sol yazı tipi başlık: Karla Metin Boyutu Başlık: 32px Hat Yüksekliği Başlık: 1.3EM Aralık Harf İçeriği: 3px Vücut Hattı Yüksekliği: 1.8Memmesta Düğmesi Organize etmek için ve bir düğmeyi konumlandırın, aşağıdakileri güncelleyin: metin boyutu düğmesi: 16px renk arka plan düğmesi: #9A2508 genişlik Düğmenin sınırı: 0px mesafe harf: 2px ağırlık: Yarı kalınlık Kutton simgesi: artı işaret (ekran görüntüsüne bakınız) Senest hizalama: Marj düğmesi:% 10 yukarıda,% 10 aşağıda Arka Plan Gradient Dikey kaydırma başlığının metni için bir arka plan yapmak için, arka plan gradyanını kaymaya aşağıdaki gibi ekleyebiliriz: gradyan arka planının sol rengi: #9A2508 Sağ renk arka plan gradyanı: RGBA (0,0,0,0,0 ) Başlangıç Konumu:% 12 Son Pozisyon:% 0 DEĞERLEME BAŞLANGIÇ ARKAKAŞTIRMAYA YAPTIM: Evet Not: İsterseniz, slayt görüntüsünüz için kaplama yapmak için doğru gradyan renk opaklığını ayarlayabilirsiniz. Kaydırıcı düğmesini çevirin ve özel CSS ile ok çevirin, düğmelerimiz hala dikey olduğundan, CSS parçalarıyla önceki konuma geri döndürmemiz gerekir. Aşağıdaki CSS’yi slayt düğmesine ekleyin: Dönüşüm: döndür (-90deg); Kaydırıcı oklar için, aynı CSS parçalarını yukarı ve aşağı değil, sağ ve sola götürecek şekilde ekleyebilirsiniz. Ve oradayken, okun boyutunu da artırabiliriz. Dönüştürmek için aşağıdaki CSS’yi ekleyin: döndür (-90deg); yazı tipi boyutu: 80px; İşte burada! Sonuç sonucuna bakalım. Nihai sonuç Ve burada tabletler ve cep telefonlarında. Dikey öğelerle uğraşarak yeni tasarımları keşfetmekten çekinmeyin.Aşağıda, metnin solunda ve genişliğinde konumlandırılan düğme ile aynı tasarımın bir örneğidir. Son zihin, divi kaydırma modülünü döndürür, titremenize dikey tasarım öğeleri eklemenin hızlı ve etkili bir yoludur.Gerçekten, tek zorlu kısım, boyutu ve mesafeyi iyi ve duyarlı hale getirmektir.Ancak neyse ki, Divi, tüm cihazlarda iyi görünmesini sağlamak için tasarımı değiştirmeyi kolaylaştıran yeterli varsayılan seçeneğe sahiptir.Bu dikey kaydırma tasarımı, sitenizin diğer alanlarında başlıkların yanı sıra iyi çalışacaktır.Bunun daha dar bir sütun düzeninde üstün ürünler veya referanslar görüntülemek için kullanıldığını görebiliyorum.Umarım bir sonraki proje için bir ilham kaynağı olabilir.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? https://youtu.be/nmuy9vayo4m YouTube kanalımıza abone olarak Başlamanız gereken şeylere, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Saat yönünde 90 derece döndürülmüş iki görüntü. Bu, varsayılan işletim sistemi seçeneğiniz veya basit bir fotoğraf düzenleme uygulaması ile kolayca yapılabilir. Medya öğelerini düzenleyerek doğrudan WordPress’te görüntüleri de oynayabilirsiniz.
Bundan sonra, Divi’de büyük çalışmanızı yapmaya hazırsınız. Temel Fikirler Dikey kaydırma elemanlarının eklenmesinin arkasındaki temel fikir, sayfada dikey olarak görüntülenmesi için 90 derece kaydırma modülü (saat yönünün tersine veya saat yönünün tersine) oynamak için Divi Dönüşüm seçeneğini kullanmaktır. Kaydırıcı arka plan görüntüleri (veya slayt) için önce görüntüyü çalmanız (veya bir WordPress görüntü düzenleyicisi kullanmanız), böylece kaydırıcıyı her oynattığınızda dik görüntülenir. Bu, beklediğiniz gibi dikey bir kayma, ok ve metin kontrolü gösterecektir. Zor kısım, vardiyanın yüksekliğini ve genişliğini ayarlayarak mevcuttur çünkü her şey gerçekten döner. Bu kaydırma tasarımı, düzende en iyi iki veya daha fazla sütunla işlev görür. İşte bunun nasıl yapılacağına hızlı bir örnek. İki sıra sütun bulunan normal bölümde, kaydırıcı modülünü sol sütuna ekleyin. Ardından, daha önce saat yönünde 90 derecenin karşısında döndürülen başlık, içerik cümlesi ve arka plan çizimleri ile birkaç slayt ekleyin.
Ardından Divi Dönüşüm seçeneğini kullanarak Z ekseni boyunca 90 derecelik kaydırma modülünü çevirin.
Ardından, ek bir genişlik yapmak ve metni her slaydın sağına hizalamak için alanı kaymaya ekleyin (daha düşük bir dolgu). Sonuç bu. Gördüğünüz gibi, konsept basittir, ancak bu dikey kaydırma öğesi benzersiz tasarımlar yapmak için çok yararlıdır. Aşağıda, bu benzersiz kaydırıcı tasarımından birini birlikte yapmaya çalışacağız. Benzersiz bir başlık tasarımı için Divi kaydırıcı modülüne dikey bir kaydırıcı öğesi eklemek, iki sıra sütunla düzenli bir parça yaparak parça ve arka plan satırını başlatır. Modülü satıra eklemeden önce, önce arka plan renginin aşağıdaki kısmını güncelleyin: Arka Plan Rengi: #24272 Satır Ayarları Sıramıza özel bir oluk genişliği 1 vermemiz ve ardından VW uzunluğu ünitesini kullanarak genişliği ayarlamalıyız. Uzun bir VW ünitesi kullanmak, dikey kaydırıcılar yapmak için önemlidir.
Aşağıdaki satır ve güncelleme ayarlarını açın: suttan genişliği: 1 genişlik: 80VW (masaüstü ve tablet), 95VW (cep telefonu) maks: 80VW (masaüstü ve tablet), 95VW (cep telefonu) Tasarım için kutunun gölgesini ekleyeceğiz amaçlar. Gölge Kutusu: Bkz. Yatay Korkunç Konum Yakalama Gölge Kutusu: -10px Dikey Konum Gölge Kutusu: 0PX Gölge Renk: RGBA (255,255,255,0.03) Metin modülünü kullanarak başlık içeriğini ekleyin Son olarak sütun 2’ye bir kaydırıcı ekleyeceğiz, ancak şimdilik başlık başlığını sütun 1’de birkaç ek metin ekleyelim. Bunu yapmak için Sütun 1’e iki metin modülü ekleyeceğiz. Metin modülünü başlığa ekleyin Başlığımızın başlığını eklemek için metin modülünü sütun 1’e ekleyin.
İçerik içeriğini aşağıdaki H2 başlığıyla güncelleyin:
İşim
Ardından aşağıdakileri güncelleyin: Başlık 2 Yazı Tipi: Karla Başlık 2 Renk Metin: #FFFFFF Başlık 2 Metin Boyutu: 5VW (masaüstü), 60px (tablet), 50px (cep telefonu) Dolgu:% 15 yukarı,% 20 daha düşük,% 5 sol, % 5 doğruGölge Kutusu: Yatay Korkunç Konum Bkz.
Bir sonraki gövde içeriği için metin modülünü ekleyin, Sütun 1’deki ilk metin modülünün altına yeni bir metin modülü ekleyin. Şimdilik varsayılan içeriği bırakabiliriz. Ardından aşağıdakileri güncelleyin: Metin Metin Rengi: #CCCCCC Genişliği:% 70 Modül Hizalama: Sağ kenar boşluğu:% 5 üst dolgu:% 5 alt,% 10 sol,% 5 sağ kutu: Bkz. Yatay Beceri Çubuğu Dikey Konum Gölge Kutusu: 10px Gölge Renk: RGBA (255,255,255,0.03) Dikey kaydırıcılar yapmak artık dikey kaydırıcı elemanları olan kaydırıcılar yapmaya hazırız. Bunu yapmak için kaydırıcı modülünü sütun 2’ye ekleyin. İki varsayılan slaytın ilk slayt ayarını açın.Varsayılan içerik metnini bir metin satır ekleyecek şekilde azaltın. Ardından, daha önce saat yönünde 90 derecenin karşısında döndürülmüş bir arka plan görüntüsü ekleyin. Ardından, farklı bir arka plan görüntüsü vererek ikinci varsayılan slayt için de aynısını yapın. Bir sonraki sürücüyü çevirin, Dönüşüm Rotary seçeneğini kullanarak değiştirmeyi çevirin: Z: 90deg Eksen Dönüşümü Dönüştürme Vardiyanın yüksekliğinin kaydırıcı genişliği hakkında endişelenmesine gerek yoktur, çünkü sütunun% 100’ünü otomatik olarak kapsayacaktır. Sütun 80VW’nin (sıra genişliği)% 50’dir, bu nedenle genişlik temel olarak varsayılan olarak 40VW olacaktır. Şimdi masaüstüne uyan 40VW yükseklik kaydırıcısı vermemiz ve daha sonra yüksekliği tablette 80VW ve cep telefonunda 95VW olarak ayarlamamız gerekiyor. Aşağıdakileri güncelleyin: Yükseklik: 40VW (masaüstü), 80VW (tablet), 95VW (cep telefonu) Ardından, metni dikey kaymanın sağına uyumlu hale getirmek için dolguyu ayarlayın. Dolgu (masaüstü): 0px üst, 21vw aşağıda, 0px sol, 0px sağ dolgu (tablet): 42VW Dolgu (Telefon): 50VW aşağıda Metin Ayarlarını Güncelleme Metnin başlığını ve içeriğini aşağıdaki gibi ayarlayın: Sol metin: Sol yazı tipi başlık: Karla Metin Boyutu Başlık: 32px Hat Yüksekliği Başlık: 1.3EM Aralık Harf İçeriği: 3px Vücut Hattı Yüksekliği: 1.8Memmesta Düğmesi Organize etmek için ve bir düğmeyi konumlandırın, aşağıdakileri güncelleyin: metin boyutu düğmesi: 16px renk arka plan düğmesi: #9A2508 genişlik Düğmenin sınırı: 0px mesafe harf: 2px ağırlık: Yarı kalınlık Kutton simgesi: artı işaret (ekran görüntüsüne bakınız) Senest hizalama: Marj düğmesi:% 10 yukarıda,% 10 aşağıda Arka Plan Gradient Dikey kaydırma başlığının metni için bir arka plan yapmak için, arka plan gradyanını kaymaya aşağıdaki gibi ekleyebiliriz: gradyan arka planının sol rengi: #9A2508 Sağ renk arka plan gradyanı: RGBA (0,0,0,0,0 ) Başlangıç Konumu:% 12 Son Pozisyon:% 0 DEĞERLEME BAŞLANGIÇ ARKAKAŞTIRMAYA YAPTIM: Evet Not: İsterseniz, slayt görüntüsünüz için kaplama yapmak için doğru gradyan renk opaklığını ayarlayabilirsiniz. Kaydırıcı düğmesini çevirin ve özel CSS ile ok çevirin, düğmelerimiz hala dikey olduğundan, CSS parçalarıyla önceki konuma geri döndürmemiz gerekir. Aşağıdaki CSS’yi slayt düğmesine ekleyin: Dönüşüm: döndür (-90deg); Kaydırıcı oklar için, aynı CSS parçalarını yukarı ve aşağı değil, sağ ve sola götürecek şekilde ekleyebilirsiniz. Ve oradayken, okun boyutunu da artırabiliriz. Dönüştürmek için aşağıdaki CSS’yi ekleyin: döndür (-90deg); yazı tipi boyutu: 80px; İşte burada! Sonuç sonucuna bakalım. Nihai sonuç Ve burada tabletler ve cep telefonlarında. Dikey öğelerle uğraşarak yeni tasarımları keşfetmekten çekinmeyin.Aşağıda, metnin solunda ve genişliğinde konumlandırılan düğme ile aynı tasarımın bir örneğidir. Son zihin, divi kaydırma modülünü döndürür, titremenize dikey tasarım öğeleri eklemenin hızlı ve etkili bir yoludur.Gerçekten, tek zorlu kısım, boyutu ve mesafeyi iyi ve duyarlı hale getirmektir.Ancak neyse ki, Divi, tüm cihazlarda iyi görünmesini sağlamak için tasarımı değiştirmeyi kolaylaştıran yeterli varsayılan seçeneğe sahiptir.Bu dikey kaydırma tasarımı, sitenizin diğer alanlarında başlıkların yanı sıra iyi çalışacaktır.Bunun daha dar bir sütun düzeninde üstün ürünler veya referanslar görüntülemek için kullanıldığını görebiliyorum.Umarım bir sonraki proje için bir ilham kaynağı olabilir.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
