Benzersiz Bir Başlık Tasarımı için Divi'nin Kaydırıcı Modülüne Dikey Kaydırıcı Öğeleri Nasıl Eklenir
Yayınlanan: 2019-06-28Divi'nin kaydırıcı modülü, kutunun dışında düşünmeyi ve çarpıcı kaydırıcı tasarımları oluşturmayı kolaylaştıran tasarım seçenekleriyle doludur. Bu yüzden bugün bazı şeyleri tersine çevireceğiz (kelimenin tam anlamıyla). Takip eden yazıda Divi'nin kaydırıcı modülüne dikey kaydırıcı öğeleri ekleyeceğiz. Dikey öğelere sahip bir kaydırıcıya (başlık metni ve slayt kontrolleri gibi) sahip olmak, ziyaretçilerin daha dar sütunlarda (özellikle mobil cihazlarda) daha fazla slayt içeriği ve arka plan görüntüsü görmelerine olanak tanır. Ve dikey öğeler, genel tasarıma canlandırıcı bir dokunuş katıyor.
Bunu yapmak için, tüm kaydırıcıyı döndürmek için Divi'nin dönüştürme döndürme seçeneğini kullanacağız ve ardından modern bir dikey kaydırıcı tasarımı oluşturmak için her slayttaki diğer öğeleri gerektiği gibi ters döndüreceğiz. Temel tekniğin üzerinden geçerek başlayacağız. Ardından bu dikey kaydırıcı ile tamamen benzersiz bir başlık tasarımı oluşturacağız.
Hadi dalalım!
Gizlice Bakış
Divi Dikey Kaydırıcı Öğeleri Düzenini ÜCRETSİZ olarak indirin
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.
Ü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?
https://youtu.be/Nmuy9VAYo4M
Youtube Kanalımıza Abone Olun
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Saat yönünün tersine 90 derece döndürülmüş iki görüntü. Bu, işletim sisteminizin yerleşik seçenekleri kullanılarak veya herhangi bir basit fotoğraf düzenleme uygulaması aracılığıyla kolayca yapılabilir. Medya öğesini düzenleyerek bir görüntüyü doğrudan WordPress'te de döndürebilirsiniz.
Bundan sonra Divi'de şaheserinizi yaratmaya hazırsınız.
Temel Fikir
Dikey kaydırma öğeleri eklemenin ardındaki temel fikir, kaydırma modülünü 90 derece (saat yönünde veya saat yönünün tersine) döndürerek sayfada dikey olarak görüntülenmesi için Divi'nin dönüştürme seçeneklerini kullanmaktır. Kaydırıcı (veya slayt) arka plan resimleri için, resmi önceden döndürmek isteyeceksiniz (veya WordPress Resim düzenleyicisini kullanarak), böylece kaydırıcıyı her döndürdüğünüzde resim dik görünecektir. Bu, kaydırıcı denetimlerini, okları ve metni beklediğiniz gibi dikey olarak görüntüler. İşin zor kısmı, işler tam anlamıyla tersine döndüğünden, kaydırıcının yüksekliğini ve genişliğini özelleştirmekle birlikte gelir. Bu kaydırıcı tasarımı, iki veya daha fazla sütunlu bir düzende en iyi sonucu verir.
İşte bunun nasıl yapılacağına dair hızlı bir örnek.
İki sütunlu bir satıra sahip normal bir bölümde, sol sütuna bir kaydırıcı modül ekleyin.
Ardından, her biri bir Başlık, bir gövde içeriği cümlesi ve daha önce saat yönünün tersine 90 derece döndürülmüş bir arka plan görüntüsü içeren birkaç slayt ekleyin.
Ardından, Divi'nin dönüştürme seçeneklerini kullanarak kaydırıcı modülünü z ekseni boyunca 90 derece döndürün.
Ardından, ek genişlik oluşturmak ve metni her slaydın sağına hizalamak için kaydırıcıya boşluk (alt dolgu) ekleyin.
İşte sonuç.
Gördüğünüz gibi, konsept basittir, ancak bu dikey kaydırma öğeleri, benzersiz tasarımlar oluşturmak için gerçekten kullanışlı olabilir.
Aşağıda, bu benzersiz kaydırıcı tasarımlarından birini birlikte yaratmanın bir yolunu bulacağız.
Benzersiz Bir Başlık Tasarımı için Divi'nin Kaydırıcı Modülüne Dikey Kaydırıcı Öğeleri Ekleme
Bölüm ve Satır Oluşturma
Bölüm Arka Planı
İki sütunlu bir satır içeren normal bir bölüm oluşturarak başlayın.
Satıra bir modül eklemeden önce, önce bölümü aşağıdaki arka plan rengiyle güncelleyin:
Arka Plan Rengi: #24272a
Satır Ayarları
Daha sonra sıramıza 1'lik özel bir oluk genişliği vermemiz ve ardından vw uzunluk birimini kullanarak genişliği ayarlamamız gerekiyor. Dikey kaydırıcımızı daha sonra duyarlı hale getirmek için vw uzunluk birimini kullanmak önemlidir.
Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Oluk genişliği: 1
Genişlik: 80vw (masaüstü ve tablet), 95vw (telefon)
Maksimum Genişlik: 80vw (masaüstü ve tablet), 95vw (telefon)
Ardından tasarım amacıyla bir kutu gölgesi ekleyeceğiz.
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -10px
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi: rgba(255,255,255,0.03)
Metin Modülü Kullanarak Başlık İçeriği Ekleme
Sonunda 2. sütuna kaydırıcıyı ekleyeceğiz, ancak şimdilik sütun 1'de bazı ek metinlerle başlık başlığını ekleyelim. Bunu yapmak için 1. sütuna iki metin modülü ekleyeceğiz.
Başlık için Metin Modülünü Ekleyin
Başlık başlığımızı eklemek için 1. sütuna bir metin modülü ekleyin.
Gövde içeriğini aşağıdaki h2 başlığıyla güncelleyin:
<h2>My Work</h2>
Ardından aşağıdakileri güncelleyin:
Başlık 2 Yazı Tipi: Karla
Başlık 2 Metin Rengi: #ffffff
Başlık 2 Metin Boyutu: 5vw (masaüstü), 60px (tablet), 50px (telefon)
Dolgu: %15 üst, %20 alt, %5 sol, %5 sağ
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 60px
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi: #9a2508
Gövde İçeriği için Metin Modülü Ekle
Ardından, 1. sütundaki 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şlik: %70
Modül Hizalama: sağ
Marj: -5% üst
Dolgu: %5 alt, %10 sol, %5 sağ
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: 10px
Gölge Rengi: rgba(255,255,255,0.03)
Dikey Kaydırıcıyı Oluşturma
Artık dikey kaydırıcı elemanları ile kaydırıcıyı oluşturmaya hazırız.
Bunu yapmak için 2. sütuna bir Slider Modülü ekleyin.
İki varsayılan slayttan ilkinin slayt ayarlarını açın.
Tek bir metin satırı eklemek için varsayılan gövde metnini kesin. Ardından, önceden saat yönünün tersine 90 derece döndürülmüş bir arka plan resmi ekleyin.
Ardından, ikinci varsayılan slayt için aynısını yapın ve ona farklı bir arka plan görüntüsü verin.
Kaydırıcıyı Döndür
Ardından, dönüştürme döndürme seçeneğini kullanarak kaydırıcıyı döndürün:
Dönüştür Döndür z ekseni: 90deg
Kaydırıcı Yüksekliği
Otomatik olarak sütunun %100'ünü kaplayacağı için kaydırıcı genişliği hakkında endişelenmemize gerek yok. Sütun, 80vw'nin (satır genişliği) %50'sidir, bu nedenle temel olarak genişlik varsayılan olarak 40vw olacaktır. Şimdi kaydırıcıya masaüstünde 40vw ile eşleşen bir yükseklik vermemiz ve ardından yüksekliği tablette 80vw ve telefonda 95vw olarak ayarlamamız gerekiyor.
Aşağıdakileri güncelleyin:
Yükseklik: 40vw (masaüstü), 80vw (tablet), 95vw (telefon)
Ardından, metni dikey kaydırıcının sağına hizalamak için dolguyu ayarlayın.
Dolgu (masaüstü): 0 piksel üst, 21vw alt, 0 piksel sol, 0 piksel sağ
Dolgu (tablet): 42vw alt
Dolgu (telefon): 50vw alt
Metin Ayarlarını Güncelle
Başlık ve gövde metnini aşağıdaki gibi ayarlayın:
Metin Hizalama: sol
Başlık Yazı Tipi: Karla
Başlık Metin Boyutu: 32px
Başlık Satırı Yüksekliği: 1.3em
Gövde Harf Aralığı: 3px
Gövde Çizgisi Yüksekliği: 1.8em
Düğmeye Şekil Verme
Düğmeyi biçimlendirmek ve konumlandırmak için aşağıdakileri güncelleyin:
Düğme Metin Boyutu: 16px
Düğme Arka Plan Rengi: #9a2508
Düğme Kenar Genişliği: 0px
Düğme Harf Aralığı: 2px
Düğme Yazı Tipi Ağırlığı: yarı kalın
Düğme Simgesi: artı işareti (ekran görüntüsüne bakın)
Düğme Hizalama: sağ
Düğme Marjı: %10 üst, %10 alt
Arka Plan Gradyanı
Dikey kaydırıcı başlık metnimiz için bir arka plan oluşturmak için kaydırıcıya aşağıdaki gibi bir arka plan gradyanı ekleyebiliriz:
Arka Plan Gradyanı Sol Renk: #9a2508
Arka Plan Gradyanı Sağ Renk: rgba(0,0,0,0)
Başlangıç Konumu: %12
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET
Not: İsterseniz, slayt görüntüleriniz için bir bindirme oluşturmak için arka plan gradyan sağ renginin opaklığını ayarlayabilirsiniz.
Özel CSS ile Düğme ve Kaydırıcı Okları Döndürme
Düğmemiz hala dikey olduğundan, bir CSS parçacığı ile onu önceki konumuna döndürmemiz gerekecek. Slayt Düğmesine aşağıdaki CSS'yi ekleyin:
transform: rotate(-90deg);
Kaydırıcı oklar için, yukarı ve aşağı yerine sağa ve sola işaret etmeleri için aynı css snippet'ini ekleyebilirsiniz. Ve oradayken okların boyutunu da artırabiliriz. Aşağıdaki CSS'yi ekleyin
transform: rotate(-90deg); font-size: 80px;
Bu kadar!
Nihai sonucu kontrol edelim.
Son sonuç
Ve işte tablet ve telefonda.
Dikey öğeleri değiştirerek yeni tasarımları keşfetmekten çekinmeyin. Solda konumlandırılmış düğme ve bir metin yerleşimi ile aynı tasarımın bir örneği.
Son düşünceler
Döner Divi'nin kaydırıcı modülü, kaydırıcınıza dikey tasarım öğeleri eklemenin hızlı ve etkili bir yoludur. Gerçekten, tek zorlu kısım, boyutun ve aralığın güzel ve duyarlı olmasını sağlamaktır. Ancak neyse ki Divi, tasarımı tüm cihazlarda harika görünecek şekilde değiştirmeyi kolaylaştıran yeterli yerleşik seçeneğe sahiptir.
Bu dikey kaydırıcı tasarımı, bir başlığın yanı sıra sitenizin diğer alanlarında da harika çalışır. Bunun, öne çıkan ürünleri veya referansları daha dar sütun düzenlerinde sergilemek için kullanıldığını görebiliyorum.
Umarım bu size bir sonraki projeniz için biraz ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!