İle duyarlı bir görüntü ızgara düzeni oluşturmak ister misiniz? DIVI ?
Oluşturucu Divi ızgara görünümlerini kullanan harika yerleşik modüllere sahiptir,
Ancak bazen CTA bağlantılarıyla kendi özel görsel ızgara düzeninizi oluşturmak isteyebilirsiniz. Bu size tasarım üzerinde daha fazla kontrol sağlar ve içindekiler Bir eklentiye başvurmanıza gerek kalmadan her bir ızgara öğesi için görüntülemek istediğiniz.
Bugün size, yerleşik tasarım seçeneklerini kullanarak CTA bağlantılarıyla duyarlı bir görüntü ızgara düzeninin nasıl oluşturulacağını göstereceğiz. Divi.
Başlayalım!
anket
İşte bu eğitimin sonunda elde edeceğimiz sonuca kısa bir genel bakış.
Divi Theme Builder ile bir sayfa oluşturun
WordPress Kontrol Panelinden şuraya giderek yeni bir web sayfası oluşturun: Sayfalar >> Ekle
Ayrıca bakınız: DIVI'da kayan ve itmeli menü nasıl oluşturulur?
Ardından sayfanıza bir başlık verin ve ardından " Divi Builder'ı Kullan ".
Ardından " inşa etmeye başla«
Özel Bölüm Düzenini Oluşturma
Yeni bölüm ekle "Özel". sol kenar çubuğu düzeni üçte iki üçte biri.
Aşağıdaki ekran görüntüsünde gösterildiği gibi sütunların düzenini seçin:
Yalnızca yeni özel bölüm kalacak şekilde varsayılan bölümü silin.
Bölüm ayarlarını açın ve arka plan rengini aşağıdaki gibi değiştirin:
- Arka plan: #84dbda
Sekmenin altında stil, aşağıdaki seçenekleri güncelleyin:
- Sütun yüksekliklerini eşitle: EVET
- Özel oluk genişliği kullanın: EVET
- Oluk genişliği: 1
- İç genişlik: %100
Ayrıca Oku: DIVI'da blog gönderilerini nasıl yüzerim?
- Maksimum iç genişlik: 1 piksel (masaüstü), 080 piksel (tablet ve telefon)
- İç Kenar Boşluğu (Üst ve Alt): 12vh
- Sütun 1 Dolgusu (Üst ve Alt): 0px
Bölüm stilleri yerindeyken bölüme tek sütunlu bir satır ekleyin.
Satır Parametreleri
Hat parametrelerini aşağıdaki gibi güncelleyin:
- Özel Oluk Genişliğini Kullan: EVET
- Sütun aralığı: 1
- Sütun yüksekliklerini uyumlu hale getirin: EVET
- İç Kenar Boşluğu (Üst ve Alt): 0px
İlkini çoğaltarak ikinci bir satır oluşturun.
Ardından, yinelenen satırı iki sütunlu bir düzene değiştirin.
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üzeninde duyarlı olmasını sağlamak için, görüntülerimizin her birini bölümdeki 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 " örtmek ", tarayıcı boyutunu ayarlarken resim her zaman tüm sütunu dolduracaktır.
Üst sıra sütun arka plan resmi
Başlamak için üst satırdaki sütun ayarlarını açın.
Ardından sütuna bir arka plan resmi ekleyin.
Alt satır sütun arka plan resimleri
Ardından, ikinci (alt) satırdaki 1. sütun için ayarları açın ve ayrıca bu sütuna bir arka plan görüntüsü ekleyin.
Ardından, aynı satırın 2. sütununa bir arka plan resmi ekleyin.
Bölüm sütunu 1 arka plan resmi
Ve son olarak, bölüm ayarlarını açın "uzmanlık" ve sütun 1'e bir arka plan resmi ekleyin.
Her sütuna görüntülerin üzerine yerleştirilmiş "Harekete Geçirici Mesaj" modülünün eklenmesi
Artık ızgara düzeninin her sütununa arka plan resimlerimiz eklendiğinden, her sütuna bir "Harekete Geçirici Mesaj" modülü ekleyeceğiz.
Sütun arka plan görüntüsü üzerinde bir "Harekete Geçirici Mesaj" modül yerleşimi kullanmak, sütun arka plan görüntüsüne kolayca özel arka plan yerleşim stilleri ve fareyle üzerine gelme efektleri eklemenize olanak tanır.
Bu örnekte, yalnızca Eylem Çağrısı modülündeki düğme öğesini kullanacağız, ancak siz de kolayca ekleyebilirsiniz. içindekiler düğmenin üzerindeki başlığın veya gövdenin.
İlk “Harekete Geçirici Mesaj” modülünü en üst sıradaki sütuna ekleyeceğiz.
içindekiler
"Harekete Geçirici Mesaj" modül ayarlarını aşağıdaki gibi güncelleyin:
- başlık metnini kaldır
- gövde metnini sil
- Düğme Bağlantı URL'si: #
AÇIKLAMA : Düğmenin bağlantı URL'sine "#" eklemek, düğmenin görüntülenmesi 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.
- Arka plan rengi: şeffaf (masaüstü), rgba (255,235,77,0.5) (fareyle üzerine gelin)
Düğme Stilleri
sekmeye git stil ve "Harekete geçirici mesaj" modülünün düğme ayarlarını aşağıdaki gibi değiştirin:
- Düğme için özel stiller kullanın: EVET
- Düğme Metin Boyutu: 22px
- Düğme metin rengi: #ffeb4d
- Arka plan düğmesi: #000000 (masaüstü), #ec5f00 (fareyle üzerine gelin)
Ayrıca bakınız: DIVI'da kayan ve itmeli menü nasıl oluşturulur
- Düğme Kenar Genişliği: 0 piksel
- Düğme Sınır Yarıçapı: 100 piksel
- Düğme Yazı Tipi: Bataklık
- Loş Işık Düğmesi: Yarı Kalın
- Dolgu Düğmesi: 0,5em Üst, 0,5em Alt, 2em Sol, 2em Sağ
Boyut, dolgu ve kenar
Ardından, arkasındaki sütunun arka plan görüntüsünü ortaya çıkarmak için modülümüzün belirli bir yüksekliğe sahip olduğundan emin olmamız gerekir.
Bunu yapmak için modüle iç kenar boşlukları (Üst ve Alt) 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ğıdaki ayarları uygulayın:
- Genişlik: %100
- İç Kenar Boşluğu (Üst ve Alt): 15vh
- Alt kenarlık genişliği: 5 piksel
- Sol kenarlık genişliği: 5 piksel
- Kenarlık rengi: rgba (255,255,255,0.5)
AÇIKLAMA : Doldurma için uzunluk birimi vh'nin kullanılması, dolgu değerini tarayıcı görünüm alanının yüksekliğine göre yapacaktır. Böylece görüntü ızgara öğeleriniz, tarayıcı penceresiyle orantılı olarak büyür ve küçülür.
"Harekete geçirici mesaj" modülünün içeriğinin dikey olarak ortalanması
Bunu sağlamak için içindekiler "Eylem Çağrısı" modülünün dikey olarak ortalanmış kalması nedeniyle, 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;
Diğer sütunlara harekete geçirici mesaj yer paylaşımı eklendi
Artık ilk "Harekete Geçirici Mesaj" modülü özelleştirildiğine göre, modülü kopyalayıp alt satırdaki 3 sütun ve bölümdeki 2. sütun dahil olmak üzere yerleşimin diğer 1 sütununa yapıştırın.
"Harekete Geçirici Mesaj" modülünün özel bölümdeki 1. sütunun tüm yüksekliğini kapsadığından emin olmak için minimum yüksekliği %100 olarak ayarlayın.
- Minimum yükseklik: %100
Bitti ! Son sonucu görelim.
Nihai sonuç
Vurgulu efektlerle bir web sayfasındaki duyarlı görüntü ızgara düzeninin sonucu.
Tarayıcı boyutunu ayarlarken ızgara bu şekilde tepki verir.
DIVI'yı Şimdi İndirin !!!
Sonuç
Duyarlı görüntü ızgara düzenleri, birçok web sitesinin popüler bir yönü olmaya devam ediyor. Harekete geçirici mesaj katmanıyla birleştirilmiş arka plan görüntüsü tarafından sağlanan görsel çekicilik, bu önemli gezinme bağlantılarını gerçekten açabilir.
Ayrıca, görüntü ızgara düzeninin duyarlı yapısı, her zaman bir zorunluluk olan tüm cihazlarda harika görünecek.
Bu kılavuzun gelecekteki yaratıcı projelerinizde sizin için yararlı olacağını umuyoruz. Site Web. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ancak, ayrıca kaynaklarımız web sitesi oluşturma projelerinizi tamamlamak için daha fazla öğeye ihtiyacınız varsa.
adresindeki rehberimizi de takip edebilirsiniz. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
