Birkaç Tıklamayla Tüm Izgara Düzeninizi Özelleştirmek için Divi'nin Seçici Senkronizasyonu Nasıl Kullanılır

Etkileyici bir ızgara düzeni tasarlamak zor olabilir. İster portföyünüzü sergiliyor olun ister çevrimiçi ürünler sunuyor olun, bu ızgara düzeninin farklı olmasını ve ziyaretçinin dikkatini çekmesini istersiniz. Bir ızgara, tekrarlayan içerik bloklarına sahip olduğundan, küçük bir değişiklik, genel tasarımı büyük ölçüde etkileyebilir. Bu nedenle Divi'nin görsel oluşturucusu gibi bir tasarım aracına sahip olmak yardımcı olur. Global kütüphane öğelerinin ve seçici senkronizasyonun gücüyle, görsel oluşturucu ile ızgara düzeninizin tasarımını mükemmelleştirmek şaşırtıcı derecede kolaydır. Ve eğlence.

Bu öğreticide, bir ızgara düzeni tasarlama sürecini basitleştirmek için seçici senkronizasyonun gücünden nasıl yararlanacağınızı göstereceğim. Güzel ızgara düzenlerini her zamankinden daha hızlı oluşturmanızı sağlayacak bir kurulumda size yol göstereceğim.

Gizlice Bakış

İşte oluşturacağımız birkaç örnek tasarım. Ancak, en etkileyici olan şey, tüm ızgarada değişiklik yapmanın ne kadar kolay olduğudur!

Global Öğeler ve Seçmeli Senkronizasyon Hakkında Hatırlatma

Divi, bir modülü Divi Kitaplığınıza global bir kitaplık öğesi olarak kaydetmenize olanak tanır. Modül global hale getirildikten sonra, modülün hangi ayar seçeneklerinin senkronize edilmesini istediğinizi seçme seçeneğine sahip olacaksınız (buna seçici senkronizasyon denir). Dolayısıyla, global modülü sayfanıza/sitenize birden çok kez eklerseniz, modüllerden birinde eşitlenmiş bir seçenekte yaptığınız herhangi bir değişiklik, aynı anda o modülün tüm örneklerine aktarılır. Bu harika bir zaman tasarrufu ve kullanışlı bir tasarım aracıdır. Ve bir ızgara düzeni tasarlamak için mükemmeldir.

Bir ızgara düzeni genellikle çok sayıda modül içerdiğinden, tüm modüllerin tasarım öğelerini senkronize edebiliriz, böylece değişikliği hepsine uygulamak için yalnızca birini güncellemeniz gerekir.

Fırsatınız olduğunda, daha fazla bilgi için seçici senkronizasyonun nasıl kullanılacağına ilişkin belgelere bakın.

Başlayalım.

Bölüm 1: Izgara Düzeniniz için Dört Sütunlu Bir Satır Oluşturun

İlk bölümümüz yeterince basit. Henüz yapmadıysanız, yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Varsayılan olarak, oluşturucu içinde bir bölüm ve bir satır göreceksiniz. Satırdaki sütun düzeni simgesini tıklayın ve onu dört sütun düzeniyle değiştirin.

İlk modülü eklemeden önce, tasarım sekmesinin altındaki satır ayarlarına gidin ve “Bu Satırı Tam Genişlik Yap” seçeneğini seçin. Ardından ayarları kaydedin.

Bölüm 2: İçerik Bloklarınız için Global Modüller Oluşturun

Bir sonraki bölümde, bir resim modülü (en üstteki resmi eklemek için) ve bir eylem çağrısı modülü (başlık, gövde metni ve düğme eklemek için) içeren bir blog yazısı düzenine çok benzeyen bir dizi öne çıkan içerik ekleyeceğim. ). Bu kurulumun birçok farklı uygulaması var. Birçok portföy ve ürün sayfası bu şekilde yapılandırılmıştır.

Global Görüntü Modülünü Oluşturun

İlk olarak, sol sütuna bir resim modülü ekleyin ve en az 500 piksel genişliğinde bir resim yükleyin. Ardından ayarlarınızı kaydedin.

İyi bir ipucu, resimlerinizin eşit şekilde hizalanması için tüm resimlerinizi ızgara boyunca aynı genişlik ve yükseklikte yapmaya çalışmaktır.

Artık görüntü modülünüzü global bir öğe yapabilirsiniz. Bunu yapmak için, görüntü modülünüzün üzerine geldiğinizde gösterilen gri menüdeki kitaplığa kaydet simgesine tıklayın. Modüle “Global Grid Image” gibi bir yerleşim adı verin. Ardından, kütüphaneye kaydetmeden önce “Bunu global bir modül yap” seçeneğinin yanındaki onay kutusunu tıklayın.

Görüntü modülü artık global bir öğe olduğundan, yardımcı bir hatırlatıcı olarak üzerine gelindiğinde yeşil renkle vurgulanacaktır. Artık hangi seçenekleri senkronize etmek istediğimizi seçmek için görüntü modülü ayarlarını güncelleyebiliriz. Açılan görüntü ayarları modundan, artık her seçeneğin solunda yeşil senkronizasyon simgelerine sahip olduğunuzu fark etmelisiniz. Bir seçeneğin senkronizasyonunu kaldırmak için simgeye tıklamanız yeterlidir; yeşilden kırmızıya dönerek artık senkronize edilmediğini size bildirir.

Görüntü modülü için, ızgaramız boyunca görüntüyü değiştirme seçeneğini açık tutmak istiyoruz (her sütun için aynı görüntüyü istemiyoruz), bu nedenle Görüntü URL seçeneğinin senkronizasyonunu kaldırmamız gerekiyor.

Ayrıca, bazı resimler için bunu seçmek istemeniz durumunda, diğerleri için değil, "Işık Kutusunda Aç" seçeneğinin senkronizasyonunu kaldırmak isteyebilirsiniz. Ancak bunu tüm görüntüler için açıp kapatmak istiyorsanız, bunu senkronize tutmanız gerekir.

Ve ızgara üzerinden her bir resmimiz için benzersiz bağlantılar oluşturabilmemiz için "Link URL" seçeneğinin senkronizasyonunu kesinlikle kaldırmak istiyoruz.

Küresel Harekete Geçirici Mesaj Modülünü Oluşturun

Görüntü modülünün altına bir eylem çağrısı modülü ekleyin ve aşağıdaki gibi bazı sahte içerik girin:

Başlık: Mauris blandit aliquet
Düğme Metni: Daha Fazla Bilgi Edinin
İçerik: Sed porttitor lectus nibh. Acil durumlar için geçerli değildir.
Düğme URL'si: # (bu önemlidir çünkü düğme URL olmadan görüntülenmeyecektir)

Resmi içeriğinizi gerçekten eklemeden önce, düzeninizi tasarlarken bu sahte içeriği dolgu olarak eklemek yararlıdır.

Ayarlarınızı kaydedin.

Görüntü modülünde yaptığımız gibi, harekete geçirici mesaj modülünü Divi kitaplığınıza “Global Grid CTA” adıyla global bir öğe olarak kaydedin.

Şimdi harekete geçirici mesaj ayarlarına geri dönün ve aşağıdakilerin senkronizasyonunu kaldırın:

Başlık (eşzamansız)
Düğme Metni (eşzamansız)
İçerik (eşzamansız)
Düğme URL'si (eşzamansız)

Ayarları kaydet.

Artık ızgaramız boyunca her modül için farklı içerik girebiliyoruz. Ve seçeneklerin geri kalanı senkronize edildiğinden, bunlar tüm modülleri bir kerede güncellemek için kullanılabilir.

Global Modülleri ve Satırı Çoğalt

İçerik elementimizi oluşturan iki modülümüz ayarlandı ve tasarım için hazır. Ama önce, satırımızın dört sütununu da doldurmak için bu modülleri çoğaltalım (veya kopyalayıp yapıştıralım). Ardından, ızgaramızın nasıl görüneceğine dair bir fikir edinmek için satırı çoğaltın. Bu şekilde, global bir modülde tasarım değişiklikleri yapmaya başladığınızda, değişikliklerin tüm ızgarada (sadece bir modülde değil) nasıl görüneceğini görebileceksiniz. Bu harika bir tasarım aracı!

Bölüm 3: Global Modüllerinizi Tasarlama

Şimdi eğlenceli kısım zamanı. Bu kurulumla ilgili harika olan şey, bir modülde ayarlamalar yaparken tüm özelleştirmelerinizi gerçek zamanlı olarak ve tüm modüllerde görebilmenizdir.

Başlayalım.

Görüntü Modülü Ayarlarını Ayarlayın

Görüntü modülü ayarları için, “Görüntünün Altındaki Boşluğu Göster” seçeneği için “HAYIR”ı seçin.

Not: Modül ayarlarını kaydedene kadar diğer tüm modüllerde yapılan değişiklikleri görmezsiniz.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: -20px
Kutu Gölgesi Dikey Konumu: -20px
Gölge Rengi: #379e94

Ayarları kaydet.

Şimdilik yapacağımız tek şey bu, ancak daha sonra bazı harika görüntü efektleri oluşturmak için bu filtre seçeneklerinden yararlanabileceğiz.

Harekete Geçirici Mesaj Modülünü Tasarlayın

Harekete geçirici mesaj modülünü tasarlamak için ayarları aşağıdaki gibi güncelleyin:

Arka Plan Rengi: rgba(255,255,255,0)

Dikkat edin, biraz sonra yapmak istediğim bir şey nedeniyle arka plan rengini şeffaf (beyaz değil) olarak ayarladım. Bizi izlemeye devam edin.

Tasarım sekmesi altında…

Metin Rengi: Koyu
Metin Yönü: Sol

Başlık Yazı Tipi: Poppins
Başlık Satırı Yüksekliği: 1.3em
Gövde Yazı Tipi: Poppins
Gövde Metin Boyutu: 16px

Düğme İçin Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 16px
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #379e94
Düğme Kenar Rengi: #379e94
Düğme Sınır Yarıçapı: 0px
Düğme Harf Aralığı: 1px
Düğme Vurgulu Arka Plan Rengi: rgba(0,0,0,0.3)
Düğme Vurgulu Kenarlık Rengi: rgba(0,0,0,0.3)
Düğme Vurgulu Kenarlık Yarıçapı: 0px
Düğme Vurgulu Harf Aralığı: 1 piksel
Düğme Kutusu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 8px
Kutu Gölgesi Dikey Konumu: -8px
Gölge Rengi: rgba(0,0,0,0.2)
Düğme Yazı Tipi: Poppins

Özel Dolgu: %8 Üst, %8 Sağ, %8 Alt, %8 Sol

Kutu Gölgesi: Ekran Görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 20px
Kutu Gölge Dikey Konumu: 20px
Gölge Rengi: rgba(0,0,0,0.2)

Ürün resimlerini ekledikten ve düğme metnini "Şimdi Satın Al" olarak değiştirdikten sonraki görüntü şöyle.

Daha fazla tasarım tweaks ile devam edelim.

Bölüm 4: Sütun Arka Planları Oluşturun

Bu kurulumla, satır sütunlarının her birine bir arka plan rengi ekleyerek içerik bloklarınızın her birine kolayca bir arka plan ekleyebilirsiniz. Bu, harekete geçirici mesaj modülümüzün arka plan renginin şeffaf olması ve sütun arka planının görünmesine izin vermesi nedeniyle mümkündür. Ek olarak, görüntünün arkasındaki sütun arka planı ile daha da renkli tasarımlar oluşturmak için görüntü modülünüze karışım modları ekleyebilirsiniz.

Sütunlarınıza arka plan eklemek için üst satırdaki satır ayarlarına gidin ve aşağıdakileri güncelleyin:

Sütun 1 Arka Plan: #379e94
2. Sütun Arkaplan: #379e94
Sütun 3 Arka Plan: #379e94
4. Sütun Arka Plan: #379e94

Ayarları kaydet

Devam edin ve satırınızın stilini kopyalamak için sağ tıklama seçeneklerini kullanın ve tüm yeni arka plan renklerinizi aktarmak için aşağıdaki ikinci satıra ekleyin.

Artık metni ve düğmeyi daha koyu arka planla iyi çalışacak şekilde aydınlatmak için küresel harekete geçirici mesaj modülü tasarım ayarlarımızdan birinde bazı küçük ayarlamalar yapabiliriz.

Eylem çağrısı modülü ayarlarına gidin ve aşağıdakileri güncelleyin:

Metin Rengi: Açık
Düğme Metin Rengi: #379e94
Düğme Arka Plan Rengi: #ffffff
Düğme Kenar Rengi: rgba(255,255,255,0)

Bölüm 5: Global Image modülüne Filtreleme Efektleri ve Karıştırma Ekleme

Sütun arka plan renkleri yerindeyken, artık resminizle harmanlanacak bir renginiz var. Bu, resimlerinize sayfanızın renk şemasına uygun renk eklemenin harika bir yoludur.

İlk Resim Kenarlık Rengini Değiştir

Görüntü modülümüzü sütun arka plan rengimizle harmanlayacağımız için, görüntü kenarlığı rengi de karıştırılacak ve tasarımı bozacaktır. Bu nedenle, eylem çağrısı modülünün açık gri kenar rengiyle eşleşmesi için görüntü modülünün kenar rengini yeşilden değiştirmemiz gerekiyor.

Gölge Rengi: rgba(0,0,0,0.2)

Parlaklık Karışım Modunu Kullan

Arka plan rengini resminizle karıştırmak için resim modülü ayarlarınıza parlaklık karışım modunu ekleyebilirsiniz. Ayrıca, biraz karartmak için parlaklık filtresini %88'e ayarlayın.

Parlaklık: %88
Karışım Modu: Parlaklık

Hafif ürün resimleri bu efektle pek işe yaramadığından, bu efektin gücünü göstermek için daha koyu manzara resimleri kullandım.

Yeni Renkler İçin Sütun Arka Plan Rengini Ayarlayın!

Şimdi, sütununuzun arka plan rengini ayarlayarak içerik bloğunuzun tüm rengini değiştirmenin ne kadar kolay olduğuna bakın.

Sepya Filtresi Kullan

Global görüntü modülü filtre efektlerinden yalnızca birini aşağıdaki şekilde ayarlayarak oluşturulan başka bir örnek tasarım:

Parlaklık: %73
Sepya: %100

Koyu Arka Planla Renk Soldurma Filtresi Kullan

Satır sütunlarına koyu gri (#333) arka plan ekleyerek ve görüntü modülünde Renk Soldurma karışım modunu ayarlayarak oluşturulan örnek bir tasarım.

Tamam, şimdi durmalıyım, ama bence sen anladın.

Son düşünceler

Tasarım aracı olarak seçici senkronizasyonu kullanarak ızgara düzenlerinizde ayarlamalar yapmak son derece kolaydır. Düzgün bir şekilde kurulduğunda, sadece birkaç tıklamayla tüm düzeni ayarlama gücüne sahipsiniz. Bu öğreticide oluşturulan ızgara düzeni tasarımları eğitmek ve ilham vermek içindir, bu nedenle bu örnekleri önemsemeseniz bile, umarım bir tasarım aracı olarak seçici senkronizasyon için yeni bir takdirle ayrılırsınız.

Yorumlarda sizden haber bekliyorum.

Şerefe!