Divi satırlarını yatay ve dikey yön sekmelere dönüştürme
Sekme, web sitenizin kısa alanında önemli bilgileri sunmak için kesinlikle kullanışlıdır. Bu, kullanıcının uzun sayfa içeriği hakkında kaydırma ihtiyacını azaltır. Divi sekme modülünün kullanımı kolaydır ve tıklayarak basit içerikten geçmek için iyidir. Ancak bu öğreticide, tüm divi hattını Hover sekmesine nasıl değiştireceğinizi göstereceğim. Ayrıca nasıl yatay ve dikey bir sekme yapacağınızı da göstereceğim. Bu, sekme içeriğinin her alanı için birkaç modülle tamamlanmış bir çizgi düzeni tasarlamak için Divi’nin gücünü açacaktır. Eklentiye gerek yok! Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide bir araya geleceğimiz yatay ve dikey uçuş sekmeleri bir bakış.
Bu öğreticiden bir tasarım almak için Divi Rows Hover sekme düzenini ücretsiz indirin, ö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
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? YouTube kanalımıza abone Olmaya başlamanız gereken şeylere, aşağıdaki ayarlara sahip olmanız gerekir:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak üç resim
Bundan sonra, Divi’de birkaç Hover sekmesi yapmaya başlamak için boş bir tuvaliniz olacak.
Başlamak için bir divi hattı kullanarak yatay bir yön sekmesi yapın, iki sütun satırıyla yeni bir düzenli bölüm oluşturun.
Modülümüzü eklemeden önce arka plan çizgisi, dolgu ve kutunun gölgesi, satır ayarlarını biraz ayarlayalım. Sekme işlevimiz için konumlandırmak için daha sonra satıra dönmemiz gerekir. Aşağıdaki satır ve güncelleme ayarlarını açın: Arka plan gradyanının sol rengi: #284F91 Sağ renk arka plan gradyanı: #4646C4 Dolgu: 50px üst, 50px alt, 50px sol, 50px sağ gölge kutusu: bkz. Ekran görüntüsü renk gölge kutusu: RGBA (70, 70, 70.196.0.66) Satıra içerik ekleyin Şimdi çizgimize yapay içerik ekleyeceğiz. İçerik alanınız için bir sütun ve herhangi bir modül kombinasyonu ekleyebileceğinizi unutmayın. Sütun 1’de görüntü modülü ile görüntüler ekleyin. Tasarım konferansı düzeni paketlerinden birini kullanıyorum. Doğru sütunda, hareket etmek ve güncellemek için aşağıdaki davetiyeyi ekleyin: url bağlantı anahtarı: # (şimdilik düğmeyi yalnızca görüntülemek için) Arka planı kullanın: Eşitsizlik Metin: Sol yazı tipi başlığı: Lato Metin Başlık Boyutu: 60px (masaüstü), 50px (cep telefonu) Bir sekme oluşturma gerçek bir sekme oluşturmak için kullanıcı imleci bu satır içeriğini görüntülemek için yönlendirir, bir metin modülü oluşturmamız ve birkaç özel CSS ile sağ üstte konumlandırmamız gerekir. Sütun 1’deki görüntünün altına yeni bir metin modülü ekleyin ve aşağıdakileri güncelleyin: İçerik: “Sekme One” Arka Plan Rengi: #284F91 (Bu, satırın sol gradyan rengiyle eşleşmelidir) Metin Seviyesi: Orta Metin Metin: #fffff Genişlik: 100 Piksel Yüksek: 50px Marj: -100px üst, -50px Sol dolgu: 14px üst, son, son, Çizginin üstünde mutlak bir konum vermek için ana öğeye aşağıdaki özel CSS ekleyin. Pozisyon: Mutlak! Önemli;
Üst: 0; Bu CSS ve eklediğimiz özel bir marj, sekmenin satırın sol üst kısmına yerleştirilmesini sağlayacaktır. Sekmenin gerçekten satırın üzerinde olması önemlidir, böylece kullanıcılar imleci daha sonra yönlendirebilir.
Kalan satırları ve sekmeleri yapmaya devam etmeden önce yüksek parça ve mesafe, o bölüme bazı üst ve alt kenar boşlukları ekleyerek satırımıza nefes alması için biraz alan verelim. Bu tasarım için, bizim tarafımızdan yer açmak için marj kullanmamız önemlidir, çünkü belirtilen yüksekliğin bir kısmını da vereceğiz. Yükseklik setimizin bir kısmını vermeliyiz çünkü çizgimizin yüksek yüksekliğimize ulaşmasını istiyoruz. Bu, satırlarımızın her birinin (sekmenin içeriği) aynı yüksekliğe sahip olacağı anlamına gelir. Bu nedenle, her satırın aynı miktarda içeriğe sahip olması daha iyidir veya birkaç sıra sekmesinde istenmeyen bir negatif alan olacaktır. Bu gelecekte daha makul olmalıdır. Şimdilik, aşağıdaki bölüm ayarlarını açın ve güncelleme: Yükseklik: 500 piksel (masaüstü), 900 piksel (tablet), 750 piksel (cep telefonu) kenar boşluğu: 100px üst, 100px alt dolgu: 0px üst , 0px aşağıda Satır sütunu hücresel olarak istiflendiğinde, parçanın yüksekliğinin daha uzun içerik alanını dikkate alacak şekilde ayarlanması gerektiğini unutmayın. Bu nedenle, kendi ihtiyaçlarınız için bu yükseklikte bazı ayarlamalar olması gerekir. Şimdi ayarlarınızı kaydedin ve tekrar daha fazla satır ekleyelim. Daha önce yaptığınız ikinci bir satır, yinelenen satırlar oluşturmak için ikinci bir sekme içeriği oluşturma. Metin modülünü sütun 1 ve görüntüsüne taşıyın. Sütun 2’ye taşıyın. Ardından görüntüyü yenisiyle güncelleyin. Bu, her sekmenin farklı içeriğinin bir resmini çekmenize yardımcı olacaktır.
İkinci satır ayarlarını açın ve imleci arka plan önizleme alanına yönlendirerek arka plan gradyanının rengini değiştirin ve küçük “anahtar” simgesini tıklayın.
Ardından sütun 1’de bir sekme oluşturmak için kullanılan metin modülü ayarlarını açın ve yeni üst gradyanla eşleşen bir renk verin. Arka Plan Rengi: #4646C4 O zaman sekmeyi sağa taşımamız gerekir, böylece bu satır yukarıdaki satırla örtüştüğünde, sekmeyi doğrudan sekmenin sağındaki sekmeyi görebilirsiniz. Marj: Sol 50px Sıra için ikinci sıra için Hover Filtresi Opaklık efekti ekleyerek, imleci sekmeye yönlendirirken ve çizgi içeriğini görüntülerken iyi bir havada geçiş olması için Hover filtresi opaklık efekti ekleyebiliriz.
Satır ayarlarını açın ve aşağıdaki filtreleri ekleyin: opaklık:% 70 (varsayılan),% 100 (imleci işaret edin), ardından Hover filtresi opaklık efekti için geçiş süresini ve hız eğrisini ekleyin. Geçiş Süresi: 500ms Geçiş Hız Eğrisi: Doğrusal
Üçüncü sekme içeriğini yapın Şimdi sekme içeriğinin son satırını ekleyebiliriz. Bunu yapmak için yeni yaptığınız ikinci sırayı kopyalayın. Ardından metin modülünü sütun 1 ve görüntüsüne taşıyın. Sütun 2’ye taşıyın ve görüntü modülünü yeni bir görüntüle güncelleyin. Satır ayarlarını yeni bir arka plan gradyanıyla güncelleyin. Sol renk gradyan arka plan: #333333 Sağ renk gradyan arka plan: #4646c4 Ardından, sütun 1’de bir sekme oluşturmak ve rengi ve marjı güncellemek için kullanılan metin modülü ayarlarını açın. Arka Plan Rengi: #333333 Marj: 150 piksel kaldıBu, çizgilerimizi örtüşecek şekilde konumlandırmadan önce sayfanızın görünümüdür. Üst üste binen çizgiler, üst üste binen hatlarımız için mutlak bir konumlandırma, mutlak bir pozisyon kullanmamız gerekir. Ardından, imleci sekmeye yönlendirirken her satırı öne taşımak için Z dizin seçeneğini kullanacağız. Ancak mutlak konum satırımızı verdiğimiz için (ve ebeveyn/parça belirli bir yüksekliğe sahip olduğumuz için), her satıra% 100 yükseklik ekleyebiliriz, böylece yüksek yüksekliğe ulaşırlar. İşte nasıl yapılacağı. İlk olarak, tel çerçeve modunu uygulayın. Ardından, üç satır seçmek için Multi -Secect kullanın ve biri sermaye düzenleme sermayesini uygulamak olan ayarları açın. Ardından yüksekliği%100’e güncelleyin. Yükseklik:% 100 Bu, üç satırın yüksekliğini% 100’e düzenleyecektir. Ardından ana öğeye aşağıdaki özel CSS ekleyin: Pozisyon: Mutlak! Önemli; sol: 0; Sağ: 0; Marj: Otomatik; Şimdi sekmemizi yapmak için satırın nasıl örtüştüğünü görmek için masaüstü görüntüleme modunu kullanın. Şu anda Z endeksi ile yüzerken hatların sırasını değiştirmek, ön planda üçüncü satır/sekmeye dikkat etmiş olabilirsiniz. Bu nedenle, imleci başka bir sekmeye yönlendirene kadar ilk sekmenin ilk görünmesi için hattı z dizinini kullanarak yeniden düzenlememiz gerekir. Bunu yapmak için, Frame görüntü görüntüleme moduna dönün ve oluşturduğunuz ilk satırın ayarlarını açın (bir sekme ile). Ardından Z endeksini aşağıdaki gibi güncelleyin: Dizin Z: 10
Ardından, ikinci ve üçüncü satırı seçmek için Multi -Secect kullanın. Ardından, elemanların sermaye düzenlemesini açın ve imleci her iki satıra da yönlendirirken aşağıdaki z indexini ekleyin. Dizin Z: 11 (nokta imleci)
İşte burada. Sonuç sonucuna bakalım. Nihai sonuç
Bu nedenle, teknik olarak her sekme (metin modülü), satırın üstünde ve dışında konumlandırılmış olmalarına rağmen her satırın bir parçası olduğu için çalışır. Bu yüzden imleci sekmeye yönlendirmek içindeki satırları görüntüler. Ve bu cep telefonundaki görünümdür. Sıraya dikey bir sekme eklemek istiyorsanız, dikey bir yön sekmesi yapın, tek yapmanız gereken her sekmeyi yapmak için kullanılan metin modülünü yeniden konumlandırmaktır. Sekme için alan sağlamak için satır ve boşluk alanının boyutunu da değiştirmemiz gerekiyor. Yapılması gereken budur. Yeni bir tasarımınız olması için yaptığımız Hover sekmesini içeren parçaları devam et ve çoğaltın. Sonra aşağıdaki bölüm ayarlarını açın: Dolgu:% 10 sol,% 10 sağ Ardından, üç satırı seçmek için Multi -Secect kullanın ve öğe ayarlarını aşağıdakilerle güncelleyin: genişlik:% 70 (masaüstü),% 70 (tablet),% 80 (cep telefonu) maks: 980px genişlik Daha sonra üç açıklama için gradyanın yönünü 90deg olarak güncelleyin, böylece sekmeyi sola yerleştirdiğimizde, sol gradyanın rengi sekmenin arka plan rengi ile karışır. Gradyan yönü: 90 derece Şimdi, istediğimiz dikey sekmeyi almak için metin modülü sekmemizi satırımızın soluna konumlandırma zamanı. Metin modülünün sekme ayarlarını açın ve aşağıdakileri güncelleyin: Marj (masaüstü): -50px üst, -150px sol kenar boşluğu (cep telefonu): -100px üst, -50px sol kenar boşluğu ayarları sekmeyi geri yüklemektir. Sekme için satırın üstünde yatay ekran. Ardından, satırdaki metin modülü sekmesi için ayarları açın ve aşağıdakileri güncelleyin: Marj (masaüstü): 0px üst, -150px sol kenar boşluğu (cep telefonu): -100px üst, 50px sol Ve üçüncü satırdaki son sekme için aşağıdakileri güncelleyin: marj (masaüstü): 50px üst, -150px sol kenar boşluğu (cep telefonu): -100 piksel yukarıda, 150px Kirah nihai sonuçları şimdi sonucunu görelim. Ve işte bir tablet ve cep telefonu. Biraz yaratıcı düşünce ve divi gücüne sahip son zihin, divi çizgilerini kullanarak oldukça havalı bazı özel gelişim sekmeleri yapabilirsiniz.Ne sergileyebileceğiniz için birkaç sınır vardır.Örneğin, bu düzenleme ile tüm sıralar parça kadar yüksek olmalıdır.Ancak, eklentiler kullanmaya gerek olmadığı için, bunun iyi bir çözüm olduğunu düşünüyorum.Ve unutmayın, çünkü içeriğiniz için Divi satırlarını kullanabilirsiniz, bu Hover sekmesini bir sonraki projenizde kullanmanın birçok yolu vardır.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!