Divi'de Izgara Yerleşimleriniz için Genişleyen Hover Efekti Nasıl Oluşturulur

Izgara düzeninize genişleyen bir fareyle üzerine gelme efekti eklemek, hedef kitlenizin sayfa içeriğinizle etkileşim kurmasını sağlamanın benzersiz bir yoludur. Buradaki fikir, ızgaranızın kompakt bir görüntüsüyle başlamak ve ardından bir kullanıcı Divi'de öğenin üzerine geldiğinde ızgara içeriğini ön plana çıkarmak için bu ızgarayı genişletmektir. Bu, fareyle üzerine gelindiğinde daha büyük bir galeriyi (daha büyük resimlerle) görüntülemek üzere bir resim galerisini genişletmek için harikadır. Ayrıca, hizmetlerinizi keşfetmeleri için ziyaretçilerin ilgisini çekmek için bir tanıtım yazısı kümesini genişletebilirsiniz.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde ele alacağım genişleyen vurgulu efekti örneklerine bir göz atın.

Başlarken

Bu eğitim için gerçekten ihtiyacınız olan tek şey Divi. Tasarımı başlatmak için Divi Builder'da bulunan Tasarım Ajansı Hakkında Sayfası hazır düzenini de kullanacağız.

Başlamak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Divi Builder'ı kullanmak için tıklayın. Ardından, Önceden Yapılmış Bir Düzen Seçme seçeneğini seçin. Kitaplıktan yükleme açılır penceresinden Tasarım Ajansı Düzen Paketi'ni seçin ve ardından Tasarım Ajansı Hakkında Sayfasını kullanmak için tıklayın.

Düzen sayfaya yüklendikten sonra yayınlayın. Bu eğitim için Divi oluşturucuyu ön uçta kullanacağım. Bunu yapmak için tek yapmanız gereken, arka uç sayfa düzenleyicisinin üst kısmındaki "Ön Uçta Oluştur" düğmesini tıklamaktır.

Artık başlamaya hazırsınız!

Hover'da Genişleyen Bulanıklıklar

Bu ilk örnek için, size bu düzenin ikinci bölümünde sunulan hizmetleri gösteren tanıtım yazılarını nasıl genişleteceğinizi göstereceğim.

Blurb Modüllerini Yalnızca Bir Satırı İşgal Edecek Şekilde Taşıyın

Şu anda bölüm, her sütunda bir tanıtım yazısı bulunan iki üç sütunlu satırdan oluşmaktadır.

Hover efektimizi tek satıra ekleyeceğimiz için alt satırdaki tanıtım yazılarını üst satıra taşımamız gerekiyor. Üst satırdaki her sütunda iki tanıtım yazısı olduğundan emin olun.

Ardından boş alt satırı silin.

Blurb Modüllerini Özelleştirme

Daha sonra, aynı tasarımı hepsine aynı anda uygulayabilmemiz için altı tanıtım yazısının tümünü seçmek için Multiselect'i kullanacağız. Bunu yapmak için ctrl (veya cmd) tuşunu basılı tutun ve tümü seçilene kadar tanıtıcı modüllerin her birine tıklayın. Ardından, Öğe ayarları modunu açmak için tanıtım yazılarından birindeki ayarlar simgesine tıklayın.

Devam edin ve içerik kutusunda bulunan içeriği çıkarın ve ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Başlık Metin Boyutu 16px
Genişlik: 150 piksel
Modül Hizalaması: merkez
Özel Dolgu: 10 piksel üst, varsayılan alt, varsayılan sol, varsayılan sağ

Modüllere 150 piksellik özel bir genişlik vermek, satırı genişlettiğimizde başlık metnini yerinde kilitli tutar.

Değişiklikleri kaydedin ve çoklu seçimden çıkın.

Merkezi Bulanıklığı Daha Belirgin Hale Getirin

Ardından, "Marka Kimliği" başlıklı ikinci sütunda en üstteki tanıtım yazısı için tanıtım yazısı modülü ayarlarını açın. Ardından aşağıdakileri güncelleyin:

Simge Yazı Tipi Boyutu: 120px
Başlık Metin Boyutu: 18px (varsayılan)

Bu, merkez tanıtım yazısının, diğer tanıtım yazılarının dışarı doğru genişleyeceği merkez parça olarak daha belirgin olmasını sağlar.

Fareyle Üzerine Geldiğinde Genişletilecek Satırı Özelleştirme

Fareyle üzerine gelindiğinde modüllerimizi genişletmek için sıranın boyutunu ve aralığını ayarlayacağız. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Genişlik: 750 piksel
Oluk Genişliği: 4
Özel Dolgu (varsayılan): 150 piksel Sol, 150 piksel Sağ
Özel Dolgu (fareyle üzerine gelme): 0px Sol, 0px Sağ
Özel Dolgu (tablet): 0px Sol, 0px Sağ

Fareyle üzerine gelindiğinde dolgu değerlerindeki değişiklik, genişleyen vurgulu efekti yaratan şeydir. Satır, 150 piksel sağa ve 150 piksel sola genişleyecektir.

Nihai sonucu kontrol edin.

Dairesel Izgara Yapma

Genişleyen dairesel bir ızgara düzeni oluşturmak istiyorsanız, tek yapmanız gereken birkaç küçük ayardır.

Önce dış tanıtım yazılarından birini çoğaltın ve ikinci sütundaki büyük tanıtım yazısının üzerine sürükleyin. Ardından, büyük simgeyle birlikte orta tanıtım yazısındaki başlık metnini silin.

Tanıtım yazılarını dikey olarak hizalamak için küçük bir özel CSS parçacığı ekleyebilirsiniz. Satır ayarlarını açın ve aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

align-items: center;

Şimdi sonucu kontrol edin.

Izgarayı Sağa Genişletme

Izgarayı sola veya sağa genişletmeyi de seçebilirsiniz. Modüllerinizi düzenleyin ve ardından sıranızın özel dolgusunu güncelleyin. Örneğin, içeriği sağa genişletmek istiyorsanız, varsayılan özel dolgunuzu 0 piksel sola ve 300 piksel sağa ayarlayın.

Mobilde Neye benziyor

İşte tasarımın tablet ve akıllı telefonda geri döneceği şey. Genişleyen vurgulu efekti, mobilde de etkin olmayacaktır.

Bir Resim Galerisine Genişleyen Vurgulu Efekt Ekleme

Ayrıca, daha büyük resimlerle daha büyük bir ızgara düzeni sergilemek için galeri modülünü kullanarak fareyle üzerine gelindiğinde bir resim galerisini genişletebilirsiniz. Bunu yapmak için Tasarım Ajansı Hakkında Sayfa düzeni başlığının altındaki “İşimiz” bölümünü bulun.

Ardından, üç resmin bulunduğu satırın altına yeni bir tek sütunlu satır ekleyin. Satırın içine bir galeri modülü ekleyin.

Galeri modülü ayarlarını aşağıdaki gibi güncelleyin:

Galeriye aynı boyutlara sahip 4 resim ekleyin, böylece satır boyunca aynı görünecekler.

Görüntü Sayısı: 4
Başlığı ve Altyazıyı göster: HAYIR
Sayfalandırmayı Göster: Hayır

Ardından, tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Yakınlaştırma Simgesi Rengi: #353740
Vurgulu Yer Paylaşımı Rengi: rgba(252.210,29,0.92)

Genişlik (masaüstü): %40
Genişlik (fareyle üzerine gelme): %100
Genişlik (tablet): %100

Fareyle üzerine gelindiğinde galeri modülünün genişliğini değiştirmek, genişleyen vurgulu efekti yaratan şeydir. Tablet genişliğini %100'e ayarlamak, fareyle üzerine gelme etkisinin mobil cihazlarda olmasını da engeller.

İşte şimdiye kadar nasıl göründüğü.

İşlevselliği biraz geliştirmek ve düzeni eşleştirmek için satır ayarlarımızı hala güncellememiz gerekiyor.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Genişlik: %80
Oluk Genişliği: 2
Sütun Yüksekliklerini Eşitle: EVET

İçeriği Sayfanın Aşağısına İterek Genişleyen Vurgulu Efektin Durdurulması

Resim galerisinin sayfa içeriğini aşağı itmeden genişlemesini istiyorsanız, bunu satırınıza bir minimum yükseklik ayarlayarak yapabilirsiniz. bu, özellikle galerinin hemen altındaki bir düğmeyle daha iyi bir UX sağlayacaktır.

Satır ayarlarına gidin ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

min-height: 350px

Ardından, Sütun Ana Öğesine aşağıdaki özel CSS'yi ekleyin:

margin: auto;

Sütun yüksekliklerinin eşitlenmesi, arka uçta "margin: auto" öğesinin artık 350 piksellik bir minimum yüksekliğe sahip olan satır içinde dikey olarak ortalanacak sütun içeriğini hizalamasına olanak tanıyan "display: flex" css özelliğini etkinleştirir. Divi'de içeriğin dikey olarak nasıl hizalanacağına ilişkin tam makalemizde bu konsept hakkında daha fazla bilgi edinin.

Nihai sonucu kontrol edin.

Galeriye Daha Fazla Görsel Ekleme

Ayrıca galeriye 4 resim daha ekleyebilir ve aşağıdaki sonuç için satırınızın minimum yüksekliğini 475 piksele yükseltebilirsiniz.

Mobilde Neye benziyor

İşte galeri mobilde nasıl görüneceği. Genişleyen vurgulu efekti etkin değil.

Son düşünceler

Verilen örnekler, tüm ızgara içeriğiniz için genişleyen bir vurgulu efekti oluşturmak için Divi'yi kullanmanın sadece birkaç yoludur. Ama eminim onu ​​sayısız başka kullanım durumu için kullanabilirsin. Portföy modüllerini, mağaza modüllerini ve hatta blog modüllerini genişletebilirsiniz. Bu yüzden yaratıcı olun ve olasılıkları kendi başınıza keşfederek eğlenin.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!