Kutunuzun tüm düzenini birkaç tıklamayla ayarlamak için divi seçici senkronizasyon nasıl kullanılır
Etkileyici bir ızgara düzeni tasarlamak karmaşık olabilir. İster portföyünüzü gösterin, ister çevrimiçi ürünleri sergileyin, kutunun düzeninin farklı olmasını ve ziyaretçilerin dikkatini çekmesini istersiniz. Izgara tekrarlayan bir içerik bloğuna sahip olduğundan, küçük bir değişiklik genel tasarımı büyük ölçüde etkileyebilir. Bu yüzden görsel bir divi üreticisi gibi bir tasarım aracına sahip olmak güzel. Küresel kütüphane öğelerinin gücü ve seçici senkronizasyon ile, kafes düzeninizin tasarımını görsel yapımcılarla mükemmelleştirmek çok kolaydır. Ve eğlence. Bu öğreticide, ızgara düzenini tasarlama sürecini basitleştirmek için seçici senkronizasyon gücünü nasıl kullanacağınızı göstereceğim. Size güzel bir kafes düzenini öncekinden daha hızlı hale getirecek ayarlarda size rehberlik edeceğim.
Sneak Peek burada yapacağımız tasarımların bazı örnekleri. Bununla birlikte, en etkileyici olanı, tüm ızgarada değişiklik yapmanın ne kadar kolay olduğudur!
Kafes düzeni genellikle birçok modül içerdiğinden, tüm modüllerin tasarım öğelerini senkronize edebiliriz, böylece yalnızca herkese değişiklik uygulamak için bir tane güncellemeniz gerekir. Bir şansınız olduğunda, daha fazla bilgi için seçici senkronizasyonun nasıl kullanılacağına dair belgeleri kontrol edin. Başlayalım. Bölüm 1: Kutumuzun ilk bölümünün düzeni için dört sütun satırı oluşturun. Yapmadıysanız, yeni bir sayfa oluşturun ve görsel bir yapımcı uygulayın. Varsayılan olarak, oluşturucudaki parçaları ve satırları göreceksiniz. Satırdaki sütun düzeni simgesini tıklayın ve dört sütun düzeni ile değiştirin. İlk modülü eklemeden önce, tasarım sekmesinin altındaki satır ayarlarını açın ve “Bu çizgiyi tam olarak yap” ı seçin. Ardından ayarları kaydedin. Bölüm 2: İçerik bloğunuz için bir Global Modül oluşturun Bir sonraki bölüm için, görüntü modülü (üst görüntüyü eklemek için) ile blog yayınının düzeni ve harekete geçecek davet modülü gibi bir dizi üstün içerik ekleyeceğim ( başlıklar, içerik metni ve düğmeler eklemek için). Bu ayarın birçok farklı uygulaması vardır. Birçok portföy ve ürün sayfası bu şekilde düzenlenmiştir. İlk Global Resim Modülünü oluşturun, görüntü modülünü sol sütuna ekleyin ve minimum 500 piksel genişliğe sahip görüntüler yükleyin. Ardından ayarlarınızı kaydedin. İyi bir ipucu, tüm görüntülerinizin kafes boyunca aynı genişliğe ve yüksekliğe sahip olmasını denemektir, böylece görüntünüz eşit olarak sıralanır. Artık görüntü modülünüzü küresel bir öğe haline getirebilirsiniz. Bunu yapmak için, imleci görüntü modülünüze yönlendirirken görünen gri menüdeki kütüphaneye kaydetme simgesini tıklayın. “Global Grid Image” gibi ad düzeni için bir modül verin. Ardından, kütüphaneye kaydetmeden önce “Bunu Global Modül Olarak Yap” seçeneğinin yanındaki onay kutusunu tıklayın. Şimdi görüntü modülü küresel bir öğedir, imleci yararlı bir hatırlatma olarak yönlendirirken yeşil ile vurgulanacaktır. Artık hangi seçenekleri senkronize etmek istediğimizi seçmek için görüntü modülü ayarlarını güncelleyebiliriz. Görünen sermaye belirleme sermayesinden, artık her seçeneğin solunda yeşil bir senkronizasyon simgesinin olduğunu göreceksiniz. Seçenek senkronizasyonunu iptal etmek için simgeyi tıklayın ve yeşilden kırmızıya değişecektir, artık senkronize olmadığını söyleyin. Görüntü modülü için, seçeneklerin ızgaramız boyunca görüntüleri değiştirmek için açık kalmasına izin vermek istiyoruz (her sütun için aynı görüntüyü istemiyoruz), bu nedenle URL görüntü seçeneğinin senkronizasyonunu iptal etmemiz gerekiyor. Ayrıca, “Açık LightBox” seçeneği senkronizasyonunun senkronizasyonunu iptal etmek isteyebilirsiniz, ancak bunu bazı resimler için seçmek istiyorsanız, diğerleri için değil. Ancak bunu tüm görüntüler için etkinleştirmek ve devre dışı bırakmak istiyorsanız, yine de bunu senkronize etmelisiniz. Ve kesinlikle bir ızgara aracılığıyla resimlerimizin her biri için benzersiz bir bağlantı oluşturabilmemiz için “URL bağlantısı” seçeneğinin senkronizasyonunu kesinlikle iptal etmek istiyoruz. Görüntü modülü altında küresel olarak hareket etmek için bir davet modülü oluşturun, dava modülünü harekete geçirmek ve bazı yapay içerikleri aşağıdaki gibi girmek için ekleyin: başlık: Mauris Blandit Aliquet Metin Düğmesi: İleri öğrenin: SED Porttitor Lectus Nibh. Curabitur non nulla oturma amet nisl tempus convallis quis ac lectus. URL düğmesi: # (Bu önemlidir çünkü düğme URL olmadan görüntülenmeyecektir) Resmi içeriğinizi gerçekten eklemeden önce düzeninizi tasarlarken bu yapay içeriği dolgu olarak eklemek için çok yararlı olacaktır. Ayarlarınızı kaydedin. Tıpkı görüntü modülü ile yaptığımız gibi, davet modülünü “Global Grid CTA” adına sahip küresel bir öğe olarak Divi kütüphanenize hareket etmek üzere kaydedin.
Şimdi aşağıdaki senkronizasyonu harekete geçirme ve iptal etme davetine geri dönün: Başlık (Senkron Yok) Metin Düğmesi (Senkron Yok) İçerik (Senkron Yok) URL Düğmesi (Senkron Yok) Ayarları Kaydet. Artık ızgaramız boyunca her modül için farklı içerik girebiliriz. Ve diğer seçenekler senkronize olduğundan, bu seçenek tüm modülleri aynı anda güncellemek için kullanılabilir. İçerik öğelerimizi oluşturan küresel iki modülümüzün modüllerini ve çizgilerini çoğaltın. Ama önce, dört satır sütunumuzu doldurmak için bu modülleri çoğaltalım (veya kopyalayıp yapıştıralım). Sonra ızgaramızın nasıl olacağını hissetmek için satırı çoğaltın. Bu şekilde, küresel modülde tasarım değişiklikleri yapmaya başladıktan sonra, ızgara boyunca değişikliklerin nasıl görüleceğini görebileceksiniz (sadece bir modül değil). Bu harika bir tasarım aracı! Bölüm 3: Küresel modülünüzü tasarlamak artık hoş bir parça zamanı. Bu ayarla ilgili olağanüstü şey, bir modülde ayarlamalar yaptığınızda tüm ayarlarınızı gerçek zamanlı 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 alanı görüntüleyin” için “Hayır” seçeneğini seçin. Not: Modül ayarlarını kaydedene kadar diğer tüm modüllerde değişiklikler görmeyeceksiniz. Tasarım sekmesinin altında aşağıdakileri güncelleyin: Kutu Gölgesi: Ekrana bakın Yatay Konum Gölge Kutusu: -20px Dikey Konum Gölge Kutusu: -20px Gölge Renk: #379E94 Ayarları kaydedin. Şimdilik yapacağımız tek şey budur, ancak daha sonra bazı harika görüntü efektleri yapmak için filtre seçeneğini kullanabileceğiz. Tasarım modülü daveti harekete geçme
Davet modülünü harekete geçirecek şekilde tasarlamak için aşağıdaki ayarları güncelleyin: Arka Plan Rengi: RGBA (255,255,255.0) Daha sonra yapmak istediğim bir şey nedeniyle arka plan rengini şeffaf (beyaz değil) olarak ayarladığımı unutmayın. İzlemeye devam edin. Tasarım sekmesinin altında … Metin Rengi: Koyu Metin Oryantasyonu: Sol Yazı Tipi Başlık: Poppins Height Line Başlık: 1.3EM Body Font: Poppins Body Metin Boyutu: 16px
Düğme için özel bir stil kullanın: evet metin boyutu düğmesi: 16px metin renk düğmesi: #ffffff renk arka plan düğmesi: #379e94 Renk Düğmesi Sınır: #379E94 Sınır Sınır Yarıçapı: 0px Mesafe Mektubu Anahtar Düğmesi 0.0,0,3) Renk Sınırı Gezin. Düğme: RGBA (0.0,0,0,0.3) Yarıçap Sınırı Sınırında Gezin Düğmesi Düğmesi: 0px mesafe Gezinir: 1px Gölge Kutusu Düğmesi: Ekran Yatay Konum Kutusu: 8px Dikey Konum Gölge Kutusu: -8px Gölge Rengi: RGBA (0.0,0,0,0,2) Yazı Tipi Düğmesi: Poppins Pathing Özel:% 8 Üst,% 8 Sağ,% 8 Alt,% 8 Sol Gölge Kutusu: Ekrana Bkz. Yatay Stok Kutusu: 20px Dikey Konum Gölge Kutusu: 20PX Gölge Renk : RGBA (0.0,0,0,0,2) Ürün görüntüleri ekledikten ve düğme metnini “Şimdi Satın Al” olarak değiştirdikten sonra aşağıdaki görünümler. Daha fazla tasarım ayarlamasıyla devam edelim. Bölüm 4: Bu ayarla bir sütun arka plan oluşturma Her satır sütununa arka plan rengi ekleyerek içeriğinizin her bloğuna kolayca arka plan ekleyebilirsiniz. Bu mümkündür çünkü davet modülünün arka plan rengi, şeffaf olduğumuz için sütunun arka planının görüntülenmesine izin vererek. Ayrıca, görüntünün arkasındaki sütunun arka planı ile, daha renkli bir tasarım oluşturmak için görüntü modülünüze bir karışım modu ekleyebilirsiniz. Sütununuza arka plan eklemek için, üstteki satır ayarlarını açın ve aşağıdakileri güncelleyin: Sütun 1 Arka Plan: #379E94 Sütun 2 Arka Plan: #379E94 Sütun 3 Arka Plan: #379E94 Sütun 4 Arka Plan: #379E94 Ayarlar KaydetLütfen ve tüm yeni arka plan renklerinizi aktarmak için satır stilinizi kopyalamak ve aşağıdaki ikinci satıra eklemek için sağ -tıklayın seçeneğini kullanın. Şimdi, daha koyu bir arka planla iyi çalışmak için metni ve düğmeleri aydınlatmak için küresel olarak hareket etmek üzere tasarım modülü tasarım ayarlarından birinde bazı küçük ayarlamalar yapabiliriz. Aşağıdakileri Açın ve Aşağıdaki Davet Modülünü Güncelleyin: Metin Renk: Işık Metin Renk Düğmesi: #379E94 Renk Arka Plan Anahtar Düğmesi: #FFFFFF Renk Sınır Düğmesi: RGBA (255,255,255,0) Bölüm 5: Global Görüntü Modülüne filtreleme ve karıştırma efektleri ekleyin Sütununuzun arka plan rengi yerinde olduğunda, artık görüntünüzle karışacak renginiz var. Bu, görüntünüze sayfanızın renk şemasına uygun renkler eklemenin iyi bir yoludur. İlk olarak görüntü sınırının rengini değiştirin Görüntü modülümüzü sütun arka plan rengiyle birleştireceğimiz için, görüntü sınırının rengi de karıştırılacak ve tasarımı bozacaktır. Bu nedenle, görüntü modülünün sınırının rengini, davetiyeden hafif gri sınırın rengine uyacak şekilde değiştirmemiz gerekir. Gölge Rengi: RGBA (0.0,0,0.2) Arka plan rengini görüntünüzle birleştirmek için parlaklık için bir karışım modu kullanın, görüntü modülü ayarlarınıza parlaklığa bir karışım modu ekleyebilirsiniz. Ayrıca, parlaklık filtresini hafifçe koyulaştırmak için% 88’e ayarlayın. Parlaklık:% 88 karışık mod: parlaklık Parlak ürünler bu etki ile iyi çalışmadığından, bu etkinin gücünü göstermek için daha koyu bir peyzaj görüntüsü kullanıyorum.
Yeni bir renk iç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ğunu görün. Sepya filtresini kullanın Aşağıdakiler, küresel görüntü modülü filtresinin etkilerinden birini aşağıdaki gibi ayarlayarak oluşturulan başka bir tasarıma örnektir. : parlaklık:% 73 sessiz:% 100 Koyu arka plana sahip filtreyi önleyen bir renk kullanın Burada, sadece satır sütununa koyu gri (#333) bir arka plan ekleyerek ve görüntü modülündeki Renk Dodge karışım modunu ayarlayarak yapılan bir tasarım örneğidir. Tamam, şimdi durmalıyım ama sanırım bunun ne anlama geldiğini anlıyorsun. Son zihnin, bir tasarım aracı olarak seçici senkronizasyon kullanarak kafes düzeninizde ayarlamalar yapmak çok kolaydır. Doğru ayarlandıktan sonra, tüm düzeni sadece birkaç tıklama ile ayarlama gücüne sahipsiniz. Bu öğreticide yapılan kafes düzeni tasarımı, eğitmeyi ve ilham vermeyi amaçlamaktadır, bu nedenle bu örnekleri umursamasa da, bir tasarım aracı olarak seçici senkronizasyon için yeni bir takdirle gideceksiniz. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
