Divi'de İçerik için Kayan Köşe Tasarımları Nasıl Oluşturulur

Kayan köşe tasarımları oluşturmak, Divi Modüllerine özel kod olmadan mümkün olduğunu düşünmemiş olabileceğiniz biraz yaratıcı stil eklemenin basit ve kolay bir yoludur. İyi haberler! Divi ile, Divi'nin yerleşik seçeneklerini kullanarak modülünüzün dört köşesini biçimlendirmek için ayırıcılar ve tanıtım yazıları kullanabilirsiniz. Ve farklı olasılıkları denemek oldukça eğlenceli olabilir.

Bu eğitimde, Divi'deki içeriğiniz için kayan köşe tasarımlarının nasıl oluşturulacağını göstereceğim. Öğeleri yerleştirdikten sonra, bu köşeleri sayısız şekil, simge ve renkle şekillendirebilirsiniz!

Başlayalım!

Gizlice Bakış

İşte bu öğreticiden mümkün olan kayan köşe tasarımlarına bir göz atın.

Yüzen Kenarlık Tasarım Örnekleri Düzenini ÜCRETSİZ olarak indirin

Ellerinizi yüzen bordür tasarımları düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Şimdi öğreticiye geçelim mi?

Başlarken

Bu eğitim için ihtiyacınız olan tek şey Divi. Bu örnekleri Divi Builder'ın ön ucunda sıfırdan oluşturacağız.

Başlamak için yeni bir sayfa oluşturun ve sayfanıza bir başlık verin. Divi Builder'ı ön uçta kullanmak için tıklayın ve “Sıfırdan Oluştur” seçeneğini seçin.

Artık gitmeye hazırsınız!

Kayan Köşe Tasarım Düzeni Şablonu Oluşturma

Bu tasarımla sayısız tasarım olanağı olacağından, üzerinde çalışılacak temel düzeni (veya şablonu) oluşturmak mantıklıdır.

Bu şablon için bir metin modülünün her köşesine dört bölücü ekleyeceğiz. Ardından, düzen yerine oturduğunda, bu ayırıcıları benzersiz tasarımlar için özelleştirmenin yeni yollarını keşfedebileceksiniz.

İlk olarak, tek sütunlu yeni bir normal bölüm oluşturun.

Metin modülünü eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:

Özel Genişlik: 640 piksel
Özel Dolgu: 0 piksel üst, 0 piksel alt

Ardından satıra bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

Metin Metin Boyutu: 20px
Metin Satır Yüksekliği: 1.8em
Özel Kenar Boşluğu: -25 piksel üst, -25 piksel alt, 25 piksel sol, 25 piksel sağ
Özel Dolgu (masaüstü): %10 üst, %10 alt, %10 sol, %10 sağ
Özel Dolgu (telefon): %20 üst, %20 alt
Kenar Genişliği: 4px
Kenar Rengi: #eeeeee

Özel kenar boşluğu ve dolgu, kısa süre içinde ekleyeceğimiz ayırıcı modüllerimizi hizalamaya yardımcı olacak. Bölücüler 50 piksel yüksekliğe ve genişliğe sahip olacağından, -25 piksel üst ve alt kenar boşluğu bu bölücüleri güzel bir simetrik tasarım için metin modülünün yarısına kadar çeker (göreceksiniz).

En üstteki iki Kayan Köşe Bölücüyü Ekleme

Metin modülü yerindeyken, ayırıcı modülleri kullanarak en üstteki iki kayan köşe tasarımını eklemeye başlayabiliriz.

Yeni bir ayırıcı modül oluşturun ve bunu metin modülünün en üstüne sürükleyin.

Ardından ve ayırıcı ayarlarını aşağıdaki gibi güncelleyin:

Bölücüyü Göster: HAYIR

Arka Plan Rengi: #7cda24 (veya istediğiniz herhangi bir renk)
Yükseklik: 50 piksel
Genişlik: 50 piksel

50 piksel yükseklik ve genişlik, bize kayan kenarlığımız için kullanabileceğimiz mükemmel kareyi verir.

Şimdi, kayan efekti aşağıdaki gibi oluşturmak için ayırıcıya bir kutu gölgesi ekleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü: 0px
Kutu Gölge Yayılma Gücü: 20px
Gölge Rengi: #ffffff

Ayırıcı modülün metin modülünün üzerinde kalmasını (ve arkasına gizlenmemesini) sağlamak için ana öğeye aşağıdaki gibi bir CSS parçacığı eklememiz gerekir:

Ana Öğe CSS'si:

position: relative

Ardından Z İndeksini 1 olarak güncelleyin.

Ardından, bölücü modülü çoğaltın ve çoğaltılan bölücü ayarlarını aşağıdaki gibi güncelleyin:

Modül Hizalama: sağ
Özel Kenar Boşluğu: -50 piksel üst

Bu, bölücüyü sağa hizalar ve üzerinde oturan bölücü modülün tam yüksekliği kadar yukarı çeker. Bu, tam olarak aradığımız köşe yerleşimini oluşturur.

Alt Köşe Bölücülerini Ekleme

İki alt köşe bölücü eklemek için, tel kafes görünüm modunu dağıtın ve az önce oluşturduğunuz sol ve sağ bölücüleri kopyalayın ve bunları metin modülünün altına yapıştırın (sol bölücünün resimde gösterildiği gibi sağ bölücünün üstünde yığıldığından emin olun) aşağıda).

Bu kadar! Temel düzenimizin son tasarımını kontrol edelim.

Yeni Yüzer Köşe Tasarımlarını Keşfetmek

Bu şablon yerindeyken, mümkün olan bazı farklı tasarımları keşfedebiliriz. Bu bölümün tamamını Divi kitaplığına kaydedebilir, böylece ileride bir şablon olarak saklayabilirsiniz. Ama şimdilik, bölümü çoğaltalım ve yeni bir tasarım keşfedelim.

Degrade arka plana sahip Elmas Şekiller

Şablonumuzun bir kopyası yerindeyken, bölücü modüllerin dördünü de seçmek için çoklu seçim özelliğini kullanın. Ardından, öğe ayarları modunu dağıtmak için seçilen bölücülerden birindeki ayarlar dişli simgesine tıklayın. Bu adım için tıklama modunun kullanılması yardımcı olabilir.

Öğe ayarlarında aşağıdakileri güncelleyin:

Degrade Arka Plan Sol Renk: #7cda24
Degrade Arka Plan Sağ Renk: #edf000
Gradyan Yönü: 45deg

Ardından, ayırıcıyı elmas şekline döndürmek için dönüştürme seçeneklerini kullanın.

Dönüştür Döndür Z ekseni: 45deg

İşte son tasarım.

Eğik Bölücüler

Daha da benzersiz bir tasarım için bölücüleri eğmek için eğriltme dönüştürme seçeneğini de kullanabilirsiniz. Her bölücü için ayrı bir eğim tasarımı ekleyebilir veya X ve Y ekseninde dördü için aynı anda -37 derece ile çarpıklığı güncellemek için çoklu seçimi kullanabilirsiniz.

İşte böyle görünecek.

Koyu Arka Plan Tasarımları

Benzersiz bir kayan köşe tasarımı için metin modülüne koyu bir arka plan rengi ekleyerek denemeler bile yapabilirsiniz. Burada, dönüştürme döndürme veya eğme olmadan arka plan rengi #002130 olan bir metin modülü örneği verilmiştir.

Yuvarlatılmış Kenar Köşeleri

Tasarıma bazı yuvarlatılmış köşeler koymak için, aşağıdaki gibi satıra yuvarlatılmış köşeler ekleyebilirsiniz:

Yuvarlatılmış Köşeler: 20px

Daire Yüzer Köşeler

Bu kare köşeleri dairelere dönüştürmek için, her bölücünün ana öğesine aşağıdaki özel CSS snippet'ini ekleyebilirsiniz:

border-radius: 50%;

Bölücüler 50 piksele 50 piksel olduğundan, bu mükemmel bir daire tasarımı oluşturacaktır.

Gördüğünüz gibi, sayısız yeni köşe tasarımı için bu öğeleri ince ayar yapmanın bir çok farklı yolu var.

Şimdi, ayırıcı modüller yerine kayan köşeler için tanıtım yazısı simgeleri kullanmayı keşfedelim.

Blurb Simgeleri ile Kayan Köşeler Oluşturma

Metin modülünün her köşesine Blurb simgeleri eklemek size daha da benzersiz tasarımlar sağlayabilir. Eğitimin başında oluşturduğumuz aynı düzen şablonunu kullanabilirsiniz. Tek fark, dört köşe için ayırıcı modüller yerine tanıtıcı modüllerin kullanılması olacaktır.

Devam edin ve dağıtılan bölüm düzeni şablonunun bir kopyasını alın.

Ardından metin modülünün üstündeki ve altındaki ayırıcı modülleri silin.

En üstteki iki tanıtım yazısı simgesi köşesini ekleme

Tanımlama modülünü yalnızca tek bir simge görüntülemek için kullanmak isteyeceğimizden, boyut ve aralığı doğru olarak almamız ve emin olmamız gerekir.

Metin modülünün üzerine bir tanıtım yazısı modülü ekleyin ve başlığı ve gövde metnini çıkarın. Ardından bir resim yerine bir simge kullanmak için tıklayın ve daire şeklindeki facebook simgesini seçin.

Ardından aşağıdaki tanıtım yazısı ayarlarını güncelleyin (bu ayarlar ilk örnekte bölücü modüle eklediğimiz ayarlara çok benzer):

Arka Plan Rengi: #ffffff
Simge Yazı Tipi Boyutu: 50px
Genişlik: 50 piksel
Özel Kenar Boşluğu: 0 piksel alt
Yuvarlatılmış Köşeler: %50
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü: 0px
Kutu Gölge Yayılma Gücü: 20px
Gölge Rengi: #ffffff

Ana Öğe CSS'si:

position: relative;

Bulanık Resim CSS'si:

margin-bottom: 0px

Z İndeksi: 1

Ardından, mevcut tanıtım yazısının hemen altında bir tane daha oluşturmak için tanıtım yazısı modülünü çoğaltın ve aşağıdakileri güncelleyin:

Modül hizalaması: sağ
Özel Kenar Boşluğu: -50 piksel üst

Ardından, en üstteki iki tanıtım yazısı modülünü kopyalayın ve bunları metin modülünün altına yapıştırın (sol tanıtım yazısının sağ tanıtım yazısının üzerinde yığıldığından emin olun).

Ardından, her bir tanıtım yazısının simgelerini istediğiniz şekilde güncelleyebilirsiniz.

İşte son tasarım.

Blurb Icon Kayan Köşeler ile Daha Fazla Tasarım Keşfedin

Bu kurulumla birçok benzersiz tasarımı keşfedebilirsiniz. Simgeleri değiştirebilir, farklı renk kombinasyonları kullanabilir ve hatta dönüştürme seçenekleriyle bunları ölçekleyebilir veya döndürebilirsiniz.

Metin modülü için koyu bir arka plan rengi ve farklı simge renkleri kullanan tasarıma bir örnek.

Birden Çok Sütun Düzeninde Çalışır

Öğeleri bir arada tuttuğunuz sürece, bu kayan köşe düzenlerini birden çok sütuna ekleyebilirsiniz.

Toplama

Divi'de içeriğiniz için kayan köşe tasarımları oluşturmak, Divi oluşturucunun gücünü gerçekten gösterir. Mevcut tüm yerleşik seçeneklerle, tek bir temel yerleşim şablonundan sayısız tasarım varyasyonu oluşturabilirsiniz. Umarım bu, kendi yeni tasarımlarınızı keşfederken biraz eğlenmeniz için size ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!