Divi Slider Modülü ile Navigasyon Mozaiği Nasıl Oluşturulur

Bu gönderi, Divi'nin Slider Modülüne Stil Vermenin 5 İlginç Yolu başlıklı mini serimizin 5. bölümüdür. Her gün daha fazla Divi muhteşemliği için bizi izlemeye devam edin!

---

Kaydırıcı muhtemelen bugün web sitelerinde görülen en popüler tasarım öğelerinden biridir ve bir süredir kullanılmaktadır. Çoğu insan muhtemelen kahraman kaydırıcılarını veya galeri kaydırıcılarını kendileri için en yaygın kullanımlardan ikisi olarak düşünür, ancak gerçekten her türlü uygulama için kullanılabilirler – CTA alanları için, ekip üyelerini görüntülemek, referanslar için kullanmak ve hatta gezinmek için. bugün size göstereceğim gibi.

Bu, bu kaydırıcı modül mini serisinin sonuncusu ve umarız hepsini beğenmişsinizdir!

Bugünün Öncesi ve Sonrası: Navigasyon Mozaiği Olarak Divi Slider Modülleri

Kaydırıcı, içinde saklanan herhangi bir varsayılan resimle gelmiyor, bu yüzden bazı slaytlara önceden resim ekledim ancak herhangi bir ayara dokunmadım veya herhangi bir CSS eklemedim. Gördüğünüz gibi, çok tekdüze görünmüyor, beyaz bir arka plan üzerinde varsayılan düğme stiliyle okunabilirlik kesinlikle çok kötü.

Ancak, biraz ayar değişikliği ve sayfa oluşturucu modüllerinin içinde kullanılan bazı CSS ile, sonunda elde edeceğimiz şey bu.

Bu düzeni benzersiz kılan şey, yalnızca görüntüler için kaydırıcıları kullanmamamızdır, bu onların kullanılmasını beklediğimiz şeydir, aynı zamanda bunları menü bağlantıları olarak da kullanıyoruz. Bu nedenle bu düzen, Divi'nin normal navigasyonu kapalıyken veya daha iyisi boş bir sayfa şablonu kullanarak idealdir. Ayrıca, bir açılış sayfası hissine sahip olması için tüm görünümü kapladığından emin olmak için biraz kod ekleyeceğiz.

Divi Slider Modülü ile Navigasyon Mozaiği Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Konsept ve İlham

Bu konsept, fotoğrafçılık merkezli bir Divi çocuk teması için yaptığım bir kaydırıcı düzenine dayanıyor. Otomatik kaydırmanın değişen hızlarda açık olduğu bir ızgara düzeninde birden çok kaydırıcı kullanmıştım. Bu, gerçek gezinme bağlantıları olarak işlev görecek daha fazla kaydırıcı ekleyerek bu konsepti biraz daha ileri götürdü. Orijinal fikrimdeki gibi her kaydırıcı için tüm yüksekliklerin aynı olduğu tek tip bir ızgara kullanmak yerine, burada daha duvarcılık tarzı bir görünümün daha uygun olacağını düşündüm.

Tasarım Öğelerinin Hazırlanması

Resimlerimi önceden topladım ve kullanmak istediğim menü başlıklarını seçtim. Resimlerinizi önceden optimize etmek ve mümkün olduğunda ön uçta görünecekleri boyuta yakın bir boyuta küçültmek en iyisidir.

Görüntüleri optimize etmenin birçok yolu vardır, Photoshop gibi yazılımları kullanabilir, sitenizde Imagify veya EWWW gibi bir görüntü optimizasyon eklentisine sahip olabilirsiniz veya TinyPNG gibi çevrimiçi bir araç kullanabilirsiniz (eğer isterseniz bir eklentisi de mevcuttur). yükleme sırasında optimize edin).

Çevrimiçi olarak stok fotoğraf satın almak ve ücretsiz fotoğraf bulmak için pek çok yer var, ben pexels.com'a bağlı kalmaya eğilimliyim ve bu yazıda kullanılan tüm görselleri burada buldum.

Aşağıdaki öğreticimi takip etmek için aşağıdaki boyutlarda resimlere ihtiyacınız olacak :

• Bölüm Arka Plan Resmi : 1920px x 1280px
• Yatay kaydırıcı resimleri : 900 piksele 600 piksel
• Alt portre kaydırıcı resimleri : 600 piksele 800 piksel

Tasarımı Divi ile Uygulamak

Klasik arka uç oluşturucuyu kullanacağım çünkü en rahat ettiğim şey bu, ancak yaptığımız her şey, yukarıdaki videoda görebileceğiniz gibi, yeni ön uç Görsel Oluşturucu ile kesinlikle gerçekleştirilebilir ve düzenlenebilir.

Bölüm Ayarları

Bu nedenle, yeni bir sayfa oluşturarak ve sayfa özellikleri meta kutusundaki boş şablonu seçerek başlayacağız.

Bu tasarım sadece bir bölüm gerektiriyor ve biz bir özel bölüm kullanacağız. Şahsen Divi'nin uzmanlık bölümlerinden yeterince yararlanmıyorum, bu yüzden burada kullanabildiğim için çok mutlu oldum.

¼ – ½ – ¼ ve ¼ – ¼ – ¼ – ¼ seçeneklerine izin veren en ortadaki düzeni seçmek isteyeceksiniz.

Yeni düzen yüklendiğinde, yeni özel düzeninizin tek olması için varsayılan standart düzeni silin.

Ardından, uzmanlık bölümümüzün sol üst köşesindeki hamburger simgesine tıklayarak ana bölüm arka plan resmini ekleyelim.

Ardından Gelişmiş Tasarım Ayarları sekmesine gidin ve aşağıdakileri ayarlayın:

Son olarak, Bölüm Modülü Ayarlarının Özel CSS Ayarlarına gidin ve ana öğe altına aşağıdaki kodu ekleyin:

min-height: 100vh;

Bu, büyük ekranlarda bile arka plan görüntüsünün tüm görüş alanını kaplamasını sağlar.

Modül Ekleme

Daha sonra modüllerimizi ekleyeceğiz. Kaydırıcılar, metin, sosyal medya takibi ve bölücülerin bir kombinasyonunu kullanıyorum. Yazı ve sosyal medya takibini birazdan açıklayacağım

İşte dağılım:

Sol sütunda, en üste bir Bölücü modülü ve ardından iki kaydırma modülü (gezinme düğmeleri olarak ikiye katlanacak) yerleştirin.

Orta sütunda, en üste bir kaydırma modülü (fotoğraflar için olacak), ardından bir metin modülü ve ardından bir sosyal takip modülü yerleştirin. Aşağıdaki satırda, her birine bir kaydırıcı modül yerleştirin. Görüntüler için sol kaydırıcıyı ve gezinme düğmesi olarak sağ kaydırıcıyı kullanacağız.

Son olarak, sağ sütunumuza, en üste bir ayırıcı modül ve ardından iki kaydırıcı modül koyun. Gezinme düğmeli üst kaydırıcı modülü ve alt kaydırıcı modülü resimler için olacaktır.

Bölücüler, ızgaranın kademeli olduğu bir duvar görünümü başlatmak için oradalar. Soldaki ayırıcıya 40px yükseklik veriyorum. Sağ bölücü, tamamen asimetri için 80 piksellik bir yükseklik veriyorum. Ayırıcı ayarlarında başka hiçbir şey değişmez.

Gezinme Kaydırıcılarını Yapılandırma

Ardından, gezinme kaydırıcılarının veya menü bağlantıları olarak kullanılacak kaydırıcıların ayarlarına başlayacağım. Bu kaydırıcı, diğer gezinme kaydırıcıları için tekrarlanacaktır. Aşağıdaki ayarlar, içindeki herhangi bir slayt için değil, kaydırıcı modülünün kendisi içindir.

Genel Ayarlar için aşağıdakileri ayarlayın:

• okları gizle
• kontrolleri göster: evet
• otomatik animasyon: açık
• animasyon hızı 6000 olarak ayarlandı
• üzerine gelindiğinde otomatik kaydırmaya devam et: açık
• iç gölgeyi kaldır: evet

Gelişmiş Tasarım Ayarları için bir resim daha iyidir, ancak grileri gördüğünüz yerde kullandığım renk #666666 ve başlık yazı tipi boyutları Masaüstü: 40 / Tablet ve mobil: 30

Özel CSS Ayarları için aşağıdaki kod parçaları ilgili CSS kutularına girer:

Ana Öğe – bunun yaptığı şey, bu öğenin etrafına şeffaf bir kenarlık eklemek. Bu, ana bölümün arka plan görüntüsünün kaydırıcılar arasında "göz atabilmesi" içindir. İlk eğilimim kenar boşluğu kullanmaktı ama bu, bu eğitim için daha iyi sonuç verdi. Ben de “şeffaf” kelimesi yerine rgba kullanmayı tercih ediyorum ama bu kişisel bir tercih. Burada 4px kullanıyorum ama daha geniş bir boşluk istiyorsanız bu sayıyı kesinlikle biraz yükseltebilirsiniz. Tüm modüllerde bu 4 piksellik kenarlığın uygulanacağını unutmayın, böylece boşluk gerçekten 8 piksel olur.

border: 4px solid rgba(0,0,0,0);

Slayt Açıklaması – Burada animasyon adını (geçiş efekti) varsayılan “fadeBottom” yerine “Grow” olarak değiştiriyorum. Aslında geçiş için epeyce seçenek var ve bu mini serideki her gönderide bir tane kullanacağım, bu eğitimin sonunda Elegant Themes'in animasyon seçeneklerinin bir listesini ekleyeceğim. Ayrıca tüm modüldeki metni sola hizalıyorum ama Divi'nin CSS'sini geçersiz kılmak için !important kullanmamız gerekiyor (sadece kesinlikle yapmanız gereken yerlerde !important kullanın).

text-align: left !important; 
animation-name: Grow;

Slayt Düğmesi – Daha önce Gelişmiş ayarlarda düğmenin kenarlığını kaldırdım, bu yüzden şimdi sol dolguyu çıkarmam gerekiyor, böylece normalde metin ve anahat arasında arabellek olan garip bir boşluk olmaz.

padding-left: 0 !important;

Slayt Denetleyicileri – Gezinme için kullanılan birden fazla slaytın olduğu durumlarda (farklı Galeri sayfalarını gösteriyorum gibi), bu nokta denetleyicilerini sağa hareket ettiriyor ve ayrıca ortaya çıkabilecek sinir bozucu denetleyici numaralarını kaldırıyor.

text-align: right;
padding-right: 30px;
font-size: 0;

İçindeki slaytlar için başlığı, düğme metnini ve URL'yi ve herhangi bir açıklama metnini eklemeniz ve ayrıca arka plan rengini rgba(255,255,255,0.7) olarak ayarlamanız gerekir .

Artık gezinme kaydırıcılarınızı düzen boyunca uygun noktalara çoğaltabilir ve yeniden yerleştirebilir ve bunları slaytlarınızla doldurabilirsiniz. Galeri sayfalarında yaptığım gibi, yalnızca bir gezinme kaydırıcısının aslında birden çok slayta sahip olmasını öneririm. Kullanıcının çok fazla tıklama yapmasını istemeyiz, aksi takdirde ayrılabilirler.

Fotoğraf Kaydırıcılarını Yapılandırma

Ardından, fotoğraf kaydırıcılarının 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 ayarlar kaydırıcı modülünün kendisi içindir, içindeki herhangi bir slayt için değil.

Genel Ayarlar için aşağıdakileri ayarlayın:

• okları gizle
• kontrolleri göster: hayır
• otomatik animasyon: açık
• animasyon hızı 9000 olarak ayarlandı
• üzerine gelindiğinde otomatik kaydırmaya devam et: açık
• iç gölgeyi kaldır: evet

Gelişmiş Tasarım Ayarları için aşağıdakileri ayarlayın:

• üst dolgu: 150 piksel
• alt dolgu: 200 piksel

Özel CSS Ayarları için aşağıdaki kod parçaları ilgili CSS kutularına girer:

Ana Öğe – Daha önce olduğu gibi o şeffaf kenarlığı eklemek.

border: 4px solid rgba(0,0,0,0);

Artık kaydırıcılarınızı düzen boyunca uygun noktalara çoğaltabilir ve yerleştirebilir ve bunları slaytlarınızla doldurabilirsiniz. İçindeki slaytlar için sadece arka plan resimlerini eklemeniz yeterlidir. Ayrıca fotoğraf kaydırıcılarım için onları farklı hızlara ayarladım. Biri 8000'de, biri 9000'de ve biri 11000'de . Hangilerinin neye ayarlandığı gerçekten önemli değil, kullanıcı için can sıkıcı olabileceğinden, onları çok hızlı değiştirecek şekilde ayarlamamanızı tavsiye ederim. Tıklamadan önce her slaytta oturmazlarsa, sorun değil, bu yüzden hızlı gitmeleri gerektiğini düşünmeyin.

Metin ve Sosyal Medya Takip Modüllerini Yapılandırma

Bunlar neden dahil edilmiş, merak edebilirsiniz. Bu bir açılış sayfası olarak kullanılacağından, bu tür bilgilerin dahil edilmesi mantıklıdır. Bu mini seride, düzenin kaydırıcının yanında diğer modülleri içerdiği tek zamandır.

Metninizi normalde yaptığınız gibi yazın, ardından Gelişmiş Tasarım Ayarları için şu ayarları yapın:

Sosyal medya takibinizi normalde yaptığınız gibi ayarlayın ve ardından şu ayarları ekleyin:

Özel CSS – Bu, sosyal simgeleri ortalar.

display: table;
margin: 0 auto !important;

Orta Sıra Ayarlarıyla Bitirme

Bölümün ortasındaki her iki sarı satır için de doğru Genel ayarları yaptığımızdan emin olarak bitirmemiz gerekiyor:

Nihai Sonuç

Baştan beri takip ettiyseniz, şimdi Divi'nin çok yönlü kaydırıcılarını kullanarak kendinize ve şık yeni düzene sahip olmalısınız. Kendi benzersiz tarzınızı elde etmek için her şeyi karıştırmaktan çekinmeyin; şimdi nasıl yapıldığını biliyorsun.

Yarın: Divi Kullanarak Tek Tıkla WordPress PDF İndirme Nasıl Eklenir

Bu gönderi, Divi'nin Kaydırıcı Modülüne Stil Vermenin 5 İlginç Yolu serimizi tamamlıyor . Yarın, ziyaretçilerinizin indirmesi için Divi sitelerinize PDF indirmelerini nasıl ekleyeceğinizi gösteren tek seferlik bir Divi öğreticisi yayınlayacağız.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!