Divi'de CTA'lar ve Hover Bindirmeleri ile Duyarlı Görüntü Izgarası Düzeni Nasıl Oluşturulur

Duyarlı ızgara düzenleri, her cihazda iyi göründükleri için bağlantıları (veya CTA'ları) olan bir resim koleksiyonunu sergilemek için mükemmeldir. Divi oluşturucu, Portföy Izgarası, Blog Izgarası ve Galeri Izgarası dahil olmak üzere ızgara ekranlarını kullanan bazı harika yerleşik modüllere sahiptir. Ancak bazen CTA'larla kendi özel görüntü ızgara düzeninizi oluşturmak isteyebilirsiniz. Bu, bir eklentiye başvurmak zorunda kalmadan her ızgara öğesi için görüntülenmesini istediğiniz tasarım ve içerik üzerinde size daha fazla kontrol sağlar.

Bugün size Divi'nin yerleşik tasarım seçeneklerini kullanarak CTA'larla nasıl duyarlı bir görüntü ızgarası düzeni oluşturacağınızı göstereceğiz. Bunu yapmak için, bir özel bölüm kullanarak ızgarayı nasıl düzenlediğimiz ve bir Harekete Geçirici Mesaj modülü kullanarak her bir görüntüye bindirmeler eklediğimiz konusunda yaratıcı olacağız.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de CTA'lar ve Hover Bindirmeleri ile Duyarlı Görüntü Izgarası Düzeni Oluşturma

Bölüm 1: Özel Bölüm Düzenini Oluşturma

Başlamak için, üçte biri üçte iki sol kenar çubuğu düzenine sahip yeni bir uzmanlık bölümü ekleyin.

Yalnızca yeni uzmanlık bölümünün kalması için varsayılan normal bölümü silin.

Bölüm ayarlarını açın ve arka plan rengini aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #84dbda

Tasarım sekmesi altında, boyutlandırma, genişlik ve dolgu seçeneklerini aşağıdaki gibi güncelleyin:

• Sütun Yüksekliklerini Eşitle: EVET
• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• İç Genişlik: %100
• Maksimum İç Genişlik: 1080 piksel (masaüstü), 500 piksel (tablet ve telefon)
• Dolgu: 12vh üst, 12vh alt
• Sütun 1 Dolgusu: 0 piksel üst, 0 piksel alt

Bölüm stilleri yerleştirildikten sonra bölüme tek sütunlu bir satır ekleyin.

Satır Ayarları

Satır ayarlarını aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: EVET
• Dolgu: 0 piksel üst, 0 piksel alt

İkinci bir satır oluşturmak için ilk satırı çoğaltın.

Ardından, yinelenen satırı iki sütunlu bir düzen ile güncelleyin.

Bölüm 2: Görüntüleri Sütun Arka Plan Görüntüleri Olarak Ekleme

Artık tüm satırlar ve sütunlar yerinde olduğuna göre, resimlerimizi ızgara düzenimize eklemeye hazırız. Görüntülerin ızgara düzeni içinde yanıt verdiğinden emin olmak için, görüntülerimizin her birini bölüm boyunca dört sütunun her birine arka plan görüntüsü olarak ekleyeceğiz. Her arka plan görüntüsünün arka plan boyutu "kapak" olacağından, tarayıcı boyutunu ayarlarken görüntü her zaman tüm sütunu dolduracaktır.

Üst Sıra Sütun Arka Plan Resmi

Başlamak için, üst satırdaki sütunun sütun ayarlarını açın.

Ardından sütuna bir arka plan resmi ekleyin.

Alt Satır Sütunları Arka Plan Resimleri

Ardından, ikinci (alt) satırdaki 1. sütun için ayarları açın ve o sütuna da bir arka plan resmi ekleyin.

Ardından, aynı satırdaki 2. sütuna bir arka plan resmi ekleyin.

Özel Bölüm Sütun 1 Arka Plan Resmi

Son olarak, uzmanlık bölümünün ayarlarını açın ve 1. sütuna bir arka plan resmi ekleyin.

Bölüm 3: Her Sütuna Görüntü Yerleşimi Harekete Geçirici Mesaj Ekleme

Artık ızgara düzeninin her sütununa arka plan resimlerimiz eklendiğine göre, her sütuna bir CTA butonlu resim için bir bindirme görevi görecek bir eylem çağrısı modülü ekleyeceğiz. Harekete geçirici mesaj modülünü sütunun arka plan görüntüsünün üstünde kaplama olarak kullanmak, görüntüye kolaylıkla özel arka plan kaplama stilleri ve fareyle üzerine gelme efektleri eklemenize olanak tanır. Ayrıca, görüntünün üzerine özel bir CTA ekleme seçeneği de sunar. Bu örnek için, Harekete geçirici mesaj modülündeki düğme öğesini kullanacağız, ancak içerik seçeneklerini kullanarak düğmenin üzerindeki başlığa veya gövde içeriğine kolayca ekleyebilirsiniz.

Harekete Geçirici Mesaj Modülü Oluşturma

İlk görüntü bindirmeli harekete geçirici mesajı eklemek için, üst satırdaki sütuna bir harekete geçirici mesaj modülü ekleyin.

İçerik

Harekete geçirici mesajın içeriğini aşağıdaki gibi güncelleyin:

• başlık metnini sil
• gövde metnini sil
• Düğme Bağlantı URL'si: #
• Arka Plan Rengi: şeffaf (masaüstü), rgba(255,235,77,0.5) (fareyle üzerine gelin)

NOT: Düğme bağlantısı URL'si için bir "#" eklemek, düğmenin görünmesi için şimdilik yalnızca bir dolgudur. Fareyle üzerine gelindiğinde yarı saydam arka plan rengi eklemek, modülün (ve arkasındaki görüntünün) üzerine geldiğinizde size güzel bir özel kaplama rengi verecektir.

Düğme Stilleri

Düğme için harekete geçirici mesaj tasarım ayarlarını aşağıdaki gibi güncellemeye devam edin:

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 22px
• Düğme Metin Rengi: #ffeb4d
• Düğme Arka Plan Rengi: #000 (masaüstü), #ec5f00 (fareyle üzerine gelin)
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Yazı Tipi: Bataklık
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Dolgusu: 0,5em üst, 0,5em alt, 2em sol, 2em sağ

Boyutlandırma, Dolgu ve Kenarlık

Ardından, arkasındaki sütun arka plan görüntüsünü ortaya çıkarmak için modülümüzün biraz yüksekliğe sahip olduğundan emin olmamız gerekir. Bunu yapmak için modülün üstüne ve altına biraz dolgu ekleyeceğiz. Ayrıca, ızgara düzenindeki diğer görüntülerden biraz ayrılmasını sağlamak için modüle ince bir kenarlık ekleyeceğiz.

Aşağıdakileri güncelleyin:

• Genişlik: %100
• Dolgu: 15vh üst, 15vh alt
• Alt Kenar Genişliği: 5px
• Sol Kenar Genişliği: 5px
• Kenar Rengi: rgba(255,255,255,0.5)

NOT: Doldurma için vh uzunluk biriminin kullanılması, dolgu değerini tarayıcı görüntü alanı yüksekliğine göre yapacaktır. Bu nedenle, tarayıcı penceresinin yüksekliği arttıkça ve azaldıkça görüntü ızgara öğelerinizin yüksekliği artacak ve azalacaktır.

CTA İçeriğini dikey olarak ortalamak

Harekete geçirici mesaj modülü içindeki içeriğin dikey olarak merkezde kalmasını sağlamak için, flex özelliğini kullanarak küçük bir özel CSS pasajı ekleyebiliriz.

Gelişmiş sekmesinin altında, Ana Öğeye aşağıdaki CSS'yi ekleyin:

display:flex;
flex-direction:column;
justify-content:center;

Harekete Geçirici Mesaj Yer Paylaşımını diğer sütunlara ekleme

Artık ilk harekete geçirici mesaj modülünün stili belirlendiğine göre, modülü kopyalayıp alt satırdaki 2 sütun ve uzmanlık bölümündeki 1. sütun dahil olmak üzere düzen boyunca diğer 3 sütuna yapıştırın.

Harekete geçirici mesaj modülünün uzmanlık bölümündeki 1. sütunun tam yüksekliğini kapsadığından emin olmak için minimum yüksekliği %100 olarak güncelleyin.

• Minimum Yükseklik: %100

Normalde bu, normal bir sütundaki bir modül için işe yaramaz. Ancak, sütundaki flex özelliği nedeniyle, modül esasen esnek bir alt öğedir, bu nedenle %100 min-height değeri çalışacaktır.

Bu kadar. Nihai sonucu kontrol edelim.

Son sonuç

İşte canlı bir sayfadaki duyarlı görüntü ızgara düzeninin nihai sonucu.

Ve işte vurgulu efektler.

İşte tarayıcı boyutunu ayarlarken tasarımın nasıl tepki verdiği.

Son düşünceler

Duyarlı görüntü ızgara düzenleri, birçok web sitesinin popüler bir yönü olmaya devam ediyor. Harekete Geçirici Mesaj yer paylaşımı ile birleştirilmiş arka plan görüntüsü tarafından sağlanan görsel özellik, bu önemli gezinme bağlantılarını gerçekten ortaya çıkarabilir. Ayrıca, görüntü ızgara düzeninin duyarlı yapısı, her zaman bir zorunluluk olan tüm cihazlarda harika görünecek. Umarım bir sonraki projeniz için elinize geçer.

Yorumlarda sizden haber bekliyorum.

Şerefe!