Divi Satırları Yatay ve Dikey Vurgulu Sekmelere Nasıl Dönüştürülür
Yayınlanan: 2019-05-29Sekmeler, önemli bilgileri web sitenizin kısa ve öz bir alanında kullanıma sunmak için kesinlikle kullanışlıdır. Bu, kullanıcının uzun sayfa içeriğini kaydırma ihtiyacını azaltır. Divi'nin sekme modülünün kullanımı kolaydır ve tıklamayla basit içerik arasında geçiş yapmak için mükemmeldir.
Ancak bu eğitimde, size tüm Divi satırlarını fareyle üzerine gelme sekmelerine nasıl dönüştüreceğinizi göstereceğim. Ayrıca size hem yatay hem de dikey sekmelerin nasıl oluşturulacağını göstereceğim. Bu, Divi'nin her sekme içerik alanı için çoklu modüllerle eksiksiz satır düzenleri tasarlama gücünü ortaya çıkaracaktır. Eklentiye gerek yok!
Başlayalım.
Gizlice Bakış
İşte bu eğitimde birlikte oluşturacağımız yatay ve dikey gezinme sekmelerine hızlı bir bakış.
Divi Rows Hover Sekme 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?
Youtube Kanalımıza Abone Olun
Başlamak için Gerekenler
Başlamak için aşağıdaki kuruluma 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)
- Sahte içerik için kullanılacak üç resim
Bundan sonra, Divi'de bazı vurgulu sekmeler oluşturmaya başlamak için boş bir tuvaliniz olacak.
Bölme Satırlarını Kullanarak Yatay Vurgulu Sekmeler Oluşturma
Başlamak için iki sütunlu yeni bir normal bölüm oluşturun.
Satır Arka Planı, Dolgu ve Kutu Gölgesi
Modüllerimizi eklemeden önce satır ayarlarını biraz özelleştirelim. Sekme işlevimiz için konumlandırmak için daha sonra satıra geri dönmemiz gerekecek.
Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Arka Plan Gradyanı Sol Renk: #284f91
Arka Plan Gradyanı Sağ Renk: #4646c4
Dolgu: 50 piksel üst, 50 piksel alt, 50 piksel sol, 50 piksel sağ
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Rengi: rgba(70,70,196,0.66)
Satıra İçerik Ekleme
Şimdi sıramıza biraz sahte içerik ekleyeceğiz. İçerik alanınız için herhangi bir sütun ve modül kombinasyonu ekleyebileceğinizi unutmayın.
1. sütunda, bir resim modülüne sahip bir resim ekleyin. Tasarım Konferansı Düzen Paketinden birini kullanıyorum.
Sağ sütunda, bir eylem çağrısı modülü ekleyin ve aşağıdakileri güncelleyin:
Düğme Bağlantı URL'si: # (şimdilik düğmeyi görüntülemek için)
Arka Plan Rengini Kullan: HAYIR
Metin Hizalama: sol
Başlık Yazı Tipi: Lato
Başlık Metin Boyutu: 60px (masaüstü), 50px (telefon)
Sekmeyi Oluşturma
Kullanıcıların bu satır içeriğini ortaya çıkarmak için üzerine gelecekleri gerçek sekmeyi oluşturmak için, bir metin modülü oluşturmamız ve bazı özel CSS ile sağ üstte konumlandırmamız gerekiyor.
Devam edin ve 1. sütundaki resmin altına yeni bir metin modülü ekleyin ve aşağıdakileri güncelleyin:
İçerik: "Birinci Sekme"
Arka Plan Rengi: #284f91 (bu, satırın sol gradyan rengiyle eşleşmelidir)
Metin Metin Hizalama: orta
Metin Metin Rengi: #ffffff
Genişlik: 100 piksel
Yükseklik: 50 piksel
Kenar boşluğu: -100 piksel üst, -50 piksel sol
Dolgu: 14 piksel üst
Son olarak, satırın en üstünde mutlak bir konum vermek için ana öğeye aşağıdaki özel css'yi ekleyin.
position: absolute !important; top: 0;
Bu css artı eklediğimiz özel kenar boşlukları, sekmenin tam olarak satırın sol üst kısmında konumlandırılmasını sağlayacaktır. Kullanıcının daha sonra üzerine gelebilmesi için sekmelerin gerçekten satırın üzerine oturması önemlidir.
Kesit Yüksekliği ve Aralığı
Şimdi kalan satırları ve sekmeleri oluşturmaya devam etmeden önce, bölüme biraz üst ve alt kenar boşluğu ekleyerek satırlarımıza biraz nefes alma odası verelim. Bu tasarım için, bölümümüzden boşluk bırakmak için kenar boşlukları kullanmamız önemlidir, çünkü bölümümüze de bir yükseklik ayarı vereceğiz. Bölümümüze belirli bir yükseklik vermemiz gerekiyor çünkü satırlarımızın bölümümüzün tüm yüksekliğini kaplamasını istiyoruz. Bu, satırlarımızın her birinin (sekme içeriği) bölümümüzün aynı yüksekliğine sahip olacağı anlamına gelir. Bu nedenle, satırların her birinin benzer miktarda içeriğe sahip olması veya bazı satır sekmelerinde istenmeyen negatif boşluk olması en iyisidir. Bu daha sonra daha mantıklı olmalı.
Şimdilik bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
Yükseklik: 500 piksel (masaüstü), 900 piksel (tablet), 750 piksel (telefon)
Kenar boşluğu: 100 piksel üst, 100 piksel alt
Dolgu: 0 piksel üst, 0 piksel alt
Satır sütunları mobil cihazlarda yığıldığında daha uzun içerik alanını hesaba katmak için bölümün yüksekliğinin ayarlanması gerekeceğine dikkat edin. Bu nedenle, kendi ihtiyaçlarınız için bu yüksekliğe biraz ince ayar yapmanız gerekecek.
Şimdi ayarlarınızı kaydedin ve bu satırları eklemeye geri dönelim.
Sekme İçeriğinin İkinci Satırını Oluşturma
İkinci satırı oluşturmak için daha önce oluşturduğunuz satırı çoğaltın. Metin modülünü 1. sütuna ve resmi 2. sütuna taşıyın. Ardından resmi yenisiyle güncelleyin. Bu, her sekmede farklı içeriğin nasıl göründüğü hakkında bir fikir edinmenize yardımcı olacaktır.
İkinci satırın ayarlarını açın ve arka plan önizleme alanının üzerine gelerek arka plan gradyan renklerini değiştirin ve küçük "anahtar" simgesine tıklayın.
Ardından, 1. sütunda sekmeyi oluşturmak için kullanılan metin modülünün ayarlarını açın ve ona yeni üst gradyanla eşleşen bir renk verin.
Arka Plan Rengi: #4646c4
Daha sonra sekmeyi sağa kaydırmamız gerekiyor ki bu satır üstteki satırla çakıştığında ilk satırdaki sekmenin hemen sağındaki sekmeyi görebilelim.
Kenar Boşluğu: 50 piksel Sol
İkinci Satır için Opaklık Filtresi Vurgulu Efekti Ekleme
Satır için, opaklık filtresi vurgulu efekti ekleyebiliriz, böylece sekmenin üzerine gelindiğinde ve satırın içeriğini ortaya çıkarırken hoş bir vurgulu geçiş olur.
Satır ayarlarını açın ve aşağıdaki filtreyi ekleyin:
Opaklık: %70 (varsayılan), %100 (fareyle üzerine gelindiğinde)
Ardından, opaklık filtresi vurgulu efekti için bir geçiş süresi ve hız eğrisi ekleyin.
Geçiş Süresi: 500ms
Geçiş Hızı Eğrisi: Doğrusal
Sekme İçeriğinin Üçüncü Satırını Oluşturma
Artık sekme içeriğimizin son satırını ekleyebiliriz. Bunu yapmak için az önce oluşturduğunuz ikinci satırı çoğaltın. Ardından metin modülünü 1. sütuna ve görüntüyü 2. sütuna taşıyın ve görüntü modülünü yeni bir görüntü ile güncelleyin.
Satır ayarlarını yeni bir arka plan gradyanı ile güncelleyin.
Arka Plan Gradyanı Sol Renk: #333333
Arka Plan Gradyanı Sağ Renk: #4646c4
Ardından, 1. sütunda sekmeyi oluşturmak için kullanılan metin modülünün ayarını açın ve rengi ve kenar boşluğunu güncelleyin.
Arka Plan Rengi: #333333
Kenar boşluğu: 150 piksel kaldı
Satırlarımızı üst üste gelecek şekilde konumlandırmadan önce sayfanız böyle görünmelidir.
Mutlak Konumlandırma ile Satırları Örtüşme
Satırlarımızı çakıştırmak için mutlak konumlandırma kullanmamız gerekiyor. Daha sonra sekmeler üzerinde gezinirken her satırı ön plana çıkarmak için Z indeksi seçeneğini kullanacağız. Ancak satırlarımıza mutlak bir konum verdiğimizden (ve üst öğenin/bölümün belirli bir yüksekliği olduğundan), bölümün tüm yüksekliğini kaplayacak şekilde satırların her birine %100 yükseklik ekleyebiliriz.
İşte nasıl yapılacağı.
İlk olarak, tel kafes modunu dağıtın. Ardından, üç satırı da seçmek için çoklu seçimi kullanın ve öğe ayarları modunu dağıtmak için bunlardan birinin ayarlarını açın. Ardından yüksekliği %100 olarak güncelleyin.
Yükseklik: %100
Bu, üç satırın tümünün yüksekliğini %100'e ayarlayacaktır.
Ardından aşağıdaki özel CSS'yi Ana Öğeye ekleyin:
position: absolute !important; left: 0; right: 0; margin: auto;
Şimdi, sekmelerimizi oluşturmak için satırların nasıl güzel bir şekilde üst üste bindiğini görmek için masaüstü görünüm modunu dağıtın.
Z İndeksi ile Hover Üzerindeki Satırların Sırasını Değiştirme
Şu anda üçüncü satırın/sekmenin ön planda olduğunu fark etmiş olabilirsiniz. Bu nedenle, siz başka bir sekmenin üzerine gelene kadar ilk sekme ilk önce gösterilecek şekilde Z Dizini kullanarak satırları yeniden sıralamamız gerekiyor.
Bunu yapmak için tel kafes görüntüleme moduna geri dönün ve oluşturduğunuz ilk satır için ayarları açın (bir sekme ile). Ardından z dizinini aşağıdaki gibi güncelleyin:
Z İndeksi: 10
Ardından, ikinci ve üçüncü satırı seçmek için çoklu seçimi kullanın. Ardından öğe ayarları modunu açın ve fareyle üzerine gelindiğinde aşağıdaki z dizinini her iki satıra ekleyin.
Z İndeksi: 11 (fareyle üzerine gelin)
Bu kadar. Nihai sonucu kontrol edelim.
Son sonuç
Bunun işe yaramasının nedeni, teknik olarak her sekmenin (metin modülü), satırın üstünde ve dışında konumlandırılmış olsalar bile her satırın bir parçası olmasıdır. Bu nedenle, bir sekmenin üzerine gelindiğinde içerdiği satırı görüntüler.
Ve işte mobilde nasıl göründüğü.
Dikey Vurgulu Sekmeler Oluşturma
Satırlara dikey sekmeler eklemek istiyorsanız, gerçekten yapmanız gereken tek şey, her sekmeyi oluşturmak için kullanılan metin modüllerini yeniden konumlandırmaktır. Sekmelere yer açmak için satırlarımızın boyutunu ve bölüm aralığını da ayarlamamız gerekecek.
İşte yapmanız gerekenler.
Devam edin ve üzerinde çalışmak için yeni bir tasarıma sahip olmanız için yeni oluşturduğumuz vurgulu sekmeleri içeren bölümü çoğaltın.
Ardından bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
Dolgu: %10 sol, %10 sağ
Ardından, üç satırı da seçmek için çoklu seçimi kullanın ve öğe ayarlarını aşağıdakilerle güncelleyin:
Genişlik: %70 (masaüstü), %70 (tablet), %80 (telefon)
Maksimum Genişlik: 980 piksel
Ardından, üç tanıtım yazısının tümü için degrade Yönünü 90deg olarak güncelleyin, böylece sekmeleri sola yerleştirdiğimizde sol degrade rengi sekme arka plan rengiyle karışacaktır.
Gradyan Yönü: 90deg
Şimdi sıra istediğimiz dikey sekmeleri elde etmek için metin modülü sekmelerimizi satırlarımızın soluna konumlandırmaya geldi.
İlk satırdaki metin modülü sekme ayarını açın ve aşağıdakileri güncelleyin:
Kenar boşluğu (masaüstü): -50 piksel üst, -150 piksel sol
Kenar boşluğu (telefon): -100 piksel üst, -50 piksel sol
Telefon için kenar boşluğu ayarı, yatay sekme ekranı için sekmeyi satırın üstüne getirmektir.
Ardından, bölüm satırındaki metin modülü sekmesinin ayarlarını açın ve aşağıdakileri güncelleyin:
Kenar boşluğu (masaüstü): 0 piksel üst, -150 piksel sol
Kenar boşluğu (telefon): -100 piksel üst, 50 piksel sol
Üçüncü satırdaki son sekme için aşağıdakileri güncelleyin:
Kenar boşluğu (masaüstü): 50 piksel üst, -150 piksel sol
Kenar boşluğu (telefon): -100 piksel üst, 150 piksel sol
Son sonuç
Şimdi nihai sonucu kontrol edelim.
Ve işte bir tablet ve telefon.
Son düşünceler
Biraz yaratıcı düşünce ve Divi'nin gücü ile Divi satırlarını kullanarak oldukça havalı özel vurgulu sekmeler oluşturabilirsiniz. Görüntüleyebilecekleriniz için birkaç sınırlama vardır. Örneğin, bu kurulumda tüm satırlar bölümle aynı yükseklikte olmalıdır. Ancak, bir eklenti kullanmanıza gerek olmadığı için bunun harika bir çözüm olduğunu düşünüyorum. Ve unutmayın, içeriğiniz için Divi satırlarını kullanabildiğiniz için, bir sonraki projenizde bu fareyle üzerine gelme sekmelerini kullanmanın birçok yolu vardır.
Yorumlarda sizden haber bekliyorum.
Şerefe!