Divi kaydırıcı modülü ile navigasyon mozaiği nasıl yapılır
Bu yazı, Divi kaydırıcı modüllerini organize etmenin 5 ilginç yolunu başlıklı mini serimizde 5’in 5. bölümüdür. Her gün daha fazla Divi’nin büyüklüğünü dört gözle bekleyin!
Kaydırıcı, bugün web sitesinde görülen ve bir süredir orada olan daha popüler tasarım öğelerinden biri olabilir. Çoğu insan kahramanları veya galeri değişimlerini kendileri için en yaygın iki kullanım olarak düşünebilir, ancak aslında her türlü uygulama için kullanılabilirler – CTA alanı için, ekip üyelerini sergilemek, referanslar için kullanılan veya hatta ben olarak navigasyon olarak Günü gösterecek.
Bu, bu kaydırıcı mini modül serisindeki sonuncusu ve umarız her şeyin tadını çıkarırsınız! Bugün ve sonra bugün: Divi kaydırıcı modülü bir kaydırıcı navigasyon olarak mozaik olarak depolanan varsayılan görüntülerle donatılmamıştır, bu nedenle önceki slaytlara görüntüler ekledim, ancak herhangi bir ayara dokunmadım veya herhangi bir CSS ekledim. Gördüğünüz gibi, çok düzgün görünmüyor, elbette okunabilirlik, beyaz arka planın üzerindeki varsayılan düğme stili ile çok kötü. Ancak ayarlarda ve sayfa üreticisi modülünde kullanılan bazı CS’lerde hafif bir değişiklik ile, sonunda bu alacağımız şey budur. Bu benzersiz düzeni yapan şey, sadece bunun için kullanılacağını umduğumuz görüntüler için bir kaydırma kullanmakla kalmamamız, aynı zamanda bir menü bağlantısı olarak da kullanmamızdır. Bu nedenle, bu düzen, boş bir sayfa şablonu kullanılarak kapatılacak Divi’nin normal navigasyonu ile idealdir. Ayrıca, yön sayfası gibi hissedecek şekilde tüm görünüm alanını doldurduğundan emin olmak için küçük bir kod ekleyeceğiz. YouTube Kanalı Konseptimiz ve İlham Verici’ne abone olan bir Divi kaydırıcı modülü ile navigasyon mozaiği nasıl yapılır, fotoğrafçılığa odaklanan divi çocuklarının teması için yaptığım vardiyanın düzenine dayanmaktadır. Çeşitli hız seviyelerinde etkinleştirilmiş otomatik kayma ile kutu düzeninde birkaç vardiya kullandım. Bu sadece konsepti, gerçek navigasyon bağlantısı olarak hareket etmek için daha fazla kayan bıçak ekleyerek biraz daha ileri getirir. İlk fikrim gibi her vardiya için aynı yüksekliğin tüm olduğu tek tip bir kafes kullanmak yerine, burada daha fazla taş stil görünümünün daha uygun olacağını düşünüyorum. Tasarım öğesini hazırlamak Önceki resmimi topladım ve kullanmak istediğim menü başlığını seçiyorum. En iyisi, önceki görüntünüzü optimize etmek ve ayrıca mümkünse ön uçta gerçek boyuta yakın boyutu en aza indirmektir. Resimleri optimize etmenin birçok yolu vardır, Photoshop gibi yazılımları kullanabilirsiniz, sitenizde Imagify veya Ewww gibi bir resim optimizasyon eklentisine sahip olabilirsiniz veya TinyPNG gibi çevrimiçi araçları kullanabilirsiniz (ancak isterseniz eklentilere sahip olan eklentiler de kullanabilirsiniz. Yüklemeyi optimize edin). Stok fotoğrafları satın almak ve ücretsiz fotoğraflar bulmak için birçok çevrimiçi yer var, Pexels.com’u kullanmaya devam ediyorum ve bu yayında kullanılan tüm resimleri buluyorum. Aşağıdaki öğreticimi takip etmek için aşağıdaki boyutlarda görüntülere ihtiyacınız var:
Arka Plan Görüntü Bölümü: 1920px Kali 1280px
Peyzaj Vites Görüntü: 900 piksel 600 piksel
Portre Vites Aşağıdaki Resim: 600px Kali 800px
Divi ile bir tasarım uygulayarak klasik bir arka uç üreticisi kullanacağım çünkü bu benim için en rahat olanı, ancak yaptığımız her şey yukarıdaki videoda gördüğünüz gibi yeni bir görsel oluşturucu ön uçla tamamlanabilir ve düzenlenebilir.
Bölümü ayarlayarak yeni bir sayfa oluşturarak ve Meta kutusu öznitelik kutusunda boş bir şablon seçerek başlayacağız.
Bu tasarım sadece bir parça gerektirir ve özel bir bölüm kullanacağız. Şahsen Divi’nin özel kısmını kullanmak için yeterli değilim, bu yüzden burada kullanabildiğim için oldukça mutluyum.
Ortada, – ve – – – – seçeneklerine izin veren düzeni seçmelisiniz. Yeni düzen yüklendiğinde, yeni özel düzeninizin tek olması için varsayılan standart düzenini silin. Sonraki, özel kısmımızın sol üst köşesindeki hamburger simgesine tıklayarak ana bölümün arka plan görüntüsünü ekleyelim. Ardından, takip tasarım ayarlarını açın ve aşağıdakileri ayarlayın: Son olarak, bölüm modülü ayarlarından özel CSS ayarlarını açın ve aşağıdaki kodu ana öğenin altına ekleyin: min-height: 100VH; Bu, büyük bir ekranda bile arka plan görüntüsünün tüm görünüm alanlarını doldurmasını sağlar. Bir Modül Ekle Sonra modülümüzü ekleyeceğiz. Değişme, metin, sosyal medya takipçileri ve bölücülerin bir kombinasyonunu kullanıyorum. Aşağıdaki ayrıntıları takip ederek metin ve sosyal medya hakkında biraz açıklayacağım: Sol sütunda, bölücü modülünü üstte, ardından iki sürücü modülü (navigasyon düğmesi olarak işlev görecek) yerleştirin. Orta sütunda kaydırıcı modülünü üstte (fotoğraflar için kullanılacak), ardından metin modülü, ardından Sosyal Takip Modülünü yerleştirin. Aşağıdaki satırda, kaydırıcı modülünü her satıra yerleştirin. Navigasyon düğmesi olarak görüntü ve sağ soranı için sol vardiyayı kullanacağız. Son olarak, sağ sütunumuzda, bölücü modülünü üste yerleştirin, ardından iki vites modülü. Navigasyon düğmesine sahip üst kaydırıcı modülü ve görüntü için alt kaydırıcı modülü. Bölücü, kafesin kademeli olduğu bir tuğla çiftinin görünümüne başlamak için oradaydı. Soldaki bölücü 40 piksel yükseklik veriyorum. Sağ bölücü, asimetri için saf 80 piksel yükseklik veriyor. Bölücü ayarlarında başka hiçbir şey değişmedi. Bir sonraki gezinme kaydırıcısını yapılandırma Navigasyon kayma çubuğu veya menü bağlantısı olarak kullanılacak sürgülü çubuğun ayarlarını başlatacağım. Bu kaydırıcı diğer navigasyon kaydırıcıları için tekrarlanacaktır. Aşağıdaki ayarlar kaydırıcı modülünün kendisi içindir, içindeki ayrı slayt değildir. Genel ayarlar için aşağıdaki gibi ayarlanmıştır: Okları Gizle Kontrolü Göster: Evet
Otomatik animasyon: aktif
Animasyon hızı 6000’e ayarlandı
Yönetmenlik yaparken otomatik slaytlara devam edin: etkin
Gölgeyi Kaldır: Evet
Gelişmiş tasarım ayarları için resim daha iyidir, ancak gri görürseniz, kullandığım renk #666666 ve yazı tipi başlığının boyutu masaüstü: 40 / tablet ve hücresel: 30
Özel CSS ayarları için, aşağıdaki bit kodu her birine CSS kutusuna girer: Ana öğe, bu öğe etrafına şeffaf bir sınır eklemektir. Bu, ana bölümün arka plan görüntüsünün kayar çubuk arasında “göz atabilmesi” içindir. İlk eğilimim marj kullanmaktır, ancak bu bu eğitim için daha iyi çalışır. Ayrıca “şeffaf” kelimesi yerine RGBA kullanmayı tercih ediyorum, ancak bu kişisel bir tercih. Burada 4px kullanıyorum ama daha geniş bir boşluk istiyorsanız, kesinlikle bu sayıyı biraz artırabilirsiniz. Tüm modüllerin bu 4px sınırını uygulayacağını unutmayın, böylece mesafe gerçekten 8px olacak.
Sınır: 4px katı RGBA (0.0,0,0); Slayt Açıklama-HEREMATIONIN ADI (geçiş efekti) varsayılan “Fadebottom” yerine “büyüme” olarak değiştiriyorum. Aslında geçişler için birkaç seçenek var ve bu mini dizideki her gönderide bir tane kullanacağım, bu öğreticinin sonunda zarif tema animasyon seçeneklerinin bir listesini ekleyeceğim. Ayrıca metni soldaki modül boyunca uyumlu hale getiriyorum, ancak CSS Divi olmak için önemli! Text-Aign: Sol! Önemli; animasyon adı: büyümek; Slayt Düğmesi – Önceki gelişmiş ayarlarda düğme sınırını serbest bırakıyorum, böylece artık metin ve anahatlar arasında bir arabellek haline gelen garip bir alan olmayacak şekilde sol dolguyu silmem gerekiyor. Dolgu-sol: 0! Önemli; Slayt Denetleyicisi – Navigasyon için kullanılan birkaç slaytın olduğu örnekler için (benim gibi farklı bir galeri sayfası gösteren) nokta denetleyicisini sağa taşıyın ve görünür olabilecek uzun süreli kontrol numarasını silin. Metin-align: doğru;
Dolgu-sağ: 30px;
yazı tipi boyutu: 0; İçindeki slaytlar için başlıklar, düğme metni ve URL ve herhangi bir açıklama metni eklemeniz gerekir ve ayrıca arka plan rengini RGBA olarak (255,255,255,0.7) ayarlamanız gerekir.
Fotoğraf kaydırıcısını yapılandırma
Sonra fotoğraf değiştirme ayarlarına başlayacağım.Bu kaydırıcı diğer fotoğraf kaydırıcıları için tekrarlanacak ve daha önce olduğu gibi, bu ayar kaydırıcı modülünün kendisi içindir, içindeki bireysel slayt değil.Genel ayarlar için aşağıdaki gibi ayarlanmıştır: Okları Gizle
Kontrolü Göster: Hayır
Otomatik animasyon: aktif Animasyonlu hız 9000 olarak ayarlandı Yönetmenlik yaparken otomatik slaytlara devam edin: etkin Gölgeyi Kaldır: Evet
Daha fazla tasarım ayarı için aşağıdakileri ayarlayın:
Üst Rulman: 150 piksel
Alt pedler: 200px
Özel CSS ayarları için, aşağıdaki bit kodu her biri CSS kutusuna girer: daha önce olduğu gibi ana öğe ekleme şeffaf sınırları. Sınır: 4px katı RGBA (0.0,0,0); Artık kaydırıcınızı tüm düzenlerde uygun bir yere yerleştirebilir ve slaydınızla doldurabilirsiniz. İçindeki slaytlar için sadece arka plan görüntüleri eklemeniz gerekir. Ayrıca fotoğraf vardiyam için, varyasyonlar için farklı hızlarda ayarladım. Biri 8000’de, biri 9000’de ve biri 11000’de. Neye ayarlanan sorun yok, kullanıcılara müdahale edebileceği için çok hızlı geçiş yapmak için ayarlamamayı öneririm. Eğer tıklamadan önce her slayttan oturmazlarsa, sorun değil, bu yüzden hızlı bir şekilde yapmaları gerektiğini düşünme konusunda endişelenmeyin. Modülleri Yapılandırma Metni ve sosyal medyayı takip edin, bunun neden sizi merak ediyor olabilir. Bu bir yön sayfası olarak kullanılacağından, bu tür bilgileri dahil etmek mantıklıdır. Bu mini dizideki tek zaman, düzen kaydırıcının yanındaki başka bir modül içeriyor. Metninizi her zamanki gibi yazın, ardından bu ayarı gelişmiş tasarım ayarları için ayarlayın: Sosyal medya takipçilerinizi her zamanki gibi ayarlayın, ardından şu ayarı ekleyin: CSS Custom – Bu sosyal simgelere odaklanır. Ekran: Tablo;
Marj: 0 otomatik! Önemli; Orta satır ayarlarıyla tamamlayın, yalnızca bölümün ortasındaki her iki sarı satır için doğru genel ayarları ayarlamamızı sağlayarak tamamlamamız gerekir:
Nihai sonuç Başından beri takip ettiyseniz, şimdi kendinizi ve divi çok amaçlı kayar blans kullanarak yeni bir düzene sahip olmanız gerekir.Kendi benzersiz sonuçlarınızı elde etmek için çeşitli şeyleri karıştırmaktan çekinmeyin;Şimdi nasıl yapıldığını biliyorsun.Yarın, ziyaretçilerinizi indirmek için divi sitenize PDF indirmeleri nasıl ekleyeceğinizi gösteren bir divi öğreticisi yayınlayacağız.Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
