İpuçları, Bilgi, Uyarılar ve Daha Fazlası için Divi'de Tarz İçerik Kutuları Nasıl Oluşturulur (ÜCRETSİZ İndirme)

İpuçları, uyarılar ve diğer önemli bilgiler gibi şeyler için tasarlanmış içerik kutuları, herhangi bir web sitesi veya blog için kullanışlı varlıklardır. Önemli içeriği, kullanıcıların beğeneceği tutarlı tasarımlarla sergilemenin etkili ve kullanışlı bir yoludur. Örneğin, bir eğitimde önemli bir ipucunu vurgulamak veya kullanıcıları olası bir sorun hakkında uyarmak için bir içerik kutusu tasarımına ihtiyacınız olabilir.

Bu derste size Divi'de 3 içerik kutusu tasarımının nasıl oluşturulacağını göstereceğiz. Bu içerik kutusu tasarımları, herhangi bir ihtiyaca uyacak şekilde yeni simgeler, renk şemaları ve/veya içerikle kolayca değiştirilebilir. Size kutuları nasıl tasarlayacağınızı gösterdiğimizde, sadece birkaç tıklamayla önceden tasarlanmış yeni bir içerik kutusunun dağıtımını kolaylaştırmak için Divi'nin global ön ayarlarını nasıl kullanabileceğinizi göstereceğiz. Eklentiye gerek yok!

Başlayalım!

Gizlice Bakış

Bugün Divi'de bu 3 ana içerik kutusu tasarımını oluşturacağız.

Bu 3 ana içerik kutusu tasarımıyla, her durum için sonsuz içerik kutusu tasarımları yapmak için kolay özelleştirmeler (simge, renk ve metin gibi) yapabileceksiniz.

Aşağıda ÜCRETSİZ indirmemize dahil ettiğimiz 36 örnek var.

Düzeni ÜCRETSİZ İndirin

36 içerik kutusu tasarımının tümüne el koymak için önce aşağıdaki düğmeyi kullanarak düzeni 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.

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 İçerik Kutusu Tasarımları Oluşturma

İçerik kutularımızı tasarlamaya başlamadan önce Divi Builder'daki varsayılan bölüme yeni bir tek sütunlu satır ekleyelim.

İçerik Kutusu Tasarımı #1

İlk içerik kutusunu oluşturmak için sütuna bir tanıtım yazısı modülü ekleyin.

İçerik sekmesi altında aşağıdakileri güncelleyin:

• Simgeyi Kullan: EVET
• Simge: ekran görüntüsüne bakın
• Arka Plan Rengi: #ffffff
• Arka Plan Gradyanı Sol Renk: #00529b
• Arka Plan Gradyanı Sağ Renk: #bde5f8
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: 3em
• Bitiş Konumu: %0

Tasarım sekmesi altında simge stilini aşağıdaki gibi güncelleyin:

• Simge Rengi: #ffffff
• Görüntü/Simge Hizalama: Sol
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 2em

Ardından, metin stillerini aşağıdaki gibi güncelleyin:

• Başlık Metin Rengi: #00529b
• Başlık Metin Boyutu: 1.5em
• Başlık Satırı Yüksekliği: 2em
• Gövde Metni Rengi: #bde5f8
• Gövde Metni Boyutu: 1em
• Gövde Çizgisi Yüksekliği: 2em

Metin stilleri yerleştirildikten sonra, boyutu ve dolguyu aşağıdaki gibi güncelleyin:

• İçerik Genişliği: %100
• Maksimum Genişlik: 700 piksel
• Modül Hizalaması: Merkez
• Dolgu: 2em üst, 2em alt, 5em sol, 2em sağ

Ardından, tanıtım yazısına aşağıdaki gibi ince 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ü: 88px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(0,0,0,0.17)

Gelişmiş sekmesi altında, tanıtım yazısı simgesine özel bir stil vereceğiz, böylece daha önce kullanılan sol arka plan degrade rengiyle eşleşen arka plan ve kenarlık renkleri olan bir daire şekline sahip olacak. Ayrıca simgeyi mutlak bir konumla konumlandıracağız, böylece belgede herhangi bir gerçek yer kaplamadan tam olarak istediğimiz yere yerleştirebiliriz.

Özel stili eklemek için aşağıdaki CSS kodunu Blurb Image CSS kutusuna yapıştırın:

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

NOT: İçerik kutusunun (veya tanıtım yazısı modülünün) renk şemasını değiştirirken, simgenin kenarlığı ve arka planı için Blurb Image CSS'de kullanılan renkleri de güncellememiz gerekecektir.

Nihai sonucu kontrol edelim.

İçerik Kutusu Tasarımı #2

İkinci içerik kutusu tasarımımızı oluşturmak için, birkaç değişiklik yapabilmemiz için tasarımı hızlı bir şekilde başlatmak için önceki tanıtım modülünü çoğaltın.

Bu tasarım için, CSS grid özelliğini kullanarak tanıtım yazısının sol tarafındaki simgeyi dikey olarak ortalayacağız.

Tasarım sekmesi altında, Blurb Image CSS'sini aşağıdakiyle değiştirin:

margin-bottom: 0px;

Ardından, Blurb Content CSS kutusuna aşağıdaki CSS'yi ekleyin:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

Izgaradaki sol sütunun (simgeyi tutan) genişliği 5em olarak , başlık ve gövde metnini içeren sağ sütun ise auto olarak ayarlanmıştır. Sol degrade renginin genişliğini, simgeyi tutan 5em genişliğindeki ızgara sütunuyla eşleştirmemiz gerekiyor. Bunu yapmak için aşağıdakileri güncelleyin:

• Başlangıç ​​Konumu: 5em

Tasarım sekmesi altında simge hizalamasını ve boyutunu güncelleyin:

• Görüntü/Simge Hizalama: orta
• Simge Yazı Tipi Boyutu: 3em

Şimdi sol dolguya ihtiyacımız yok, o yüzden çıkar.

Şimdi her şey güzelce sıralanmalıdır. Nihai sonucu kontrol edin.

İçerik Kutusu Tasarımı #3

Üçüncü içerik kutusu tasarımını oluşturmak için, az önce bitirdiğimiz ikinci tanıtım modülünü (içerik kutusu) çoğaltın.

İkinci tanıtım yazısı çoğaltıldığında, yinelenen tanıtım yazısı ayarlarını açın.

Tasarım sekmesi altında simge rengini değiştirin:

• Simge Rengi: rgba(255,255,255,0.3)

Ardından, önceki sözde öğeye özel CSS ekleyerek simgenin üzerine dikey etiket metni ekleyeceğiz (bu, temel olarak, tanıtıcı modül öğesinden önce ek tasarım ve/veya içerik eklemenize olanak tanır).

Etiketi eklemek için aşağıdaki CSS'yi CSS'den Önce kutusuna yapıştırın:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

Simgeyi, döndürülmüş dikey metne uyacak şekilde döndüreceğiz. Bunu yapmak için Blurb Image CSS kutusuna aşağıdaki CSS'yi ekleyin:

margin-bottom: 0px;
transform: rotateZ(-90deg);

İşte nihai sonuç.

Tasarımın Güncellenmesi

Gövde Metni Boyutunu Değiştirerek İçerik Kutusu Öğelerinin Boyutunu Güncelleyin

İçerik kutularının her biri çoğunlukla em uzunluk birimi kullanılarak oluşturulur ( em , öğenin kök gövde yazı tipi boyutuna göredir). Bu nedenle, Divi'nin yerleşik tasarım ayarlarında gövde metni boyutunu ayarlarken içerik kutularının boyutu sorunsuz bir şekilde ölçeklenir.

Özel CSS Renklerini Güncelle

İçerik kutusu tasarımı #1 için, özel CSS ile simgeye özel bir arka plan ve kenarlık rengi ekledik. Kenarlık ve arka plan özelliği için kullanılan renkleri kendi tasarımınızın renk şemasına uyacak şekilde güncellediğinizden emin olun.

Etiket Metnini Güncelleme

İçerik kutusu tasarımı #3 için, önceki sözde öğeye özel CSS'li bir etiket ekledik. Metni güncellemek için, CSS'den Önce kutusundaki content özelliğinin değerini değiştirmeniz yeterlidir.

Divi'de İçerik Kutularını Yeniden Kullanılabilir Yapma

Modülü Divi Kitaplığına Kaydedin

Modülleri Divi'de yeniden kullanılabilir hale getirmenin iki ana yolu vardır. İlk yol, modülü (veya herhangi bir öğeyi) Divi Kitaplığına kaydetmektir.

Öğe kitaplığa kaydedildikten sonra, bir sayfaya yeni bir öğe eklerken onu Divi kitaplığında bulabilirsiniz.

Genel Önayarları Kullan

Bir modülü Divi'de yeniden kullanılabilir hale getirmenin ikinci ana yolu, o modül için genel bir ön ayar oluşturmaktır. Bir modülün tasarımını genel ön ayar olarak kaydettikten sonra, bu genel ön ayarı aynı modülün başka herhangi bir örneğine kolayca ekleyebilirsiniz.

Bu durumda, içerik kutularımızın (veya tanıtım modüllerinin) her biri için ayarları açabilir ve her biri için yeni bir global ön ayar oluşturabiliriz. Bunu yapmak için Blurb Module ayarlarını açın ve üst kısımdaki ön ayar seçeneğine tıklayın. Ardından modül ayarlarını özel stillerden yeni bir ön ayara dönüştürün.

Yeni ön ayarı istediğiniz şekilde adlandırın ve kaydedin.

Oluşturmak istediğiniz her bir tanıtıcı modül ön ayarı için bu adımları tekrarlayın.

Gelecekte daha fazla içerik kutusu oluşturmak için yeni bir tanıtım modülü ekleyin ve kullanmak istediğiniz simgeyi seçin. Ardından, en üstteki ön ayar açılır menüsüne tıklayarak ve istediğiniz bir ön ayarı seçerek yüklenen ön ayarlardan herhangi birini etkinleştirin.

Nihai sonuçlar

İşte oluşturduğumuz 3 ana içerik kutusu tasarımına son bir bakış.

Ve işte yukarıdaki ÜCRETSİZ indirmemize dahil ettiğimiz birkaç kolay özelleştirme ile yapabileceğiniz 36 tasarım.

Son düşünceler

Oluşturduğumuz tarz içerik kutuları, herhangi bir web sitesi veya blog için kullanışlı bir tasarım varlığı olabilir. İçerik kutularını herhangi bir tasarıma uyacak şekilde ayarlamak için Divi'deki güçlü tasarım seçeneklerinden yararlanabilirsiniz. Ayrıca, bunları kaydedip Divi kitaplığına yükleme ve/veya global ön ayarlar oluşturma özelliğiyle, bu içerik kutularını istediğiniz zaman sadece birkaç tıklamayla dağıtabileceksiniz. İnşallah bunlar işine yarar.

Yorumlarda sizden haber bekliyorum.

Şerefe!