Divi: Sekmelerin üzerine gelindiğinde içerik nasıl ortaya çıkar?

İster misiniz içindekiler genişletilebilir açı sekmelerinin üzerine gelindiğinde ortaya çıkar Divi ?

Fareyle üzerine gelme efektlerini kullanarak kullanıcılarla etkileşim kurmanın yeni ve yaratıcı yollarını keşfetmek her zaman eğlencelidir. Bunu yapmanın harika bir yolu, içindekiler genişletilebilir köşe sekmelerini kullanarak fareyle üzerine gelindiğinde. Bu, kullanıcının bir sütunun veya görselin köşesindeki bir sekmenin üzerine gelerek bir kaplamayı genişletmesine olanak tanır. içindekiler kullanıcı için ek kullanışlılık.

Bu eğitimde, bir düzen oluşturacağız Divi Genişletilebilir açı sekmeleri kullanılarak üzerine gelindiğinde içeriği ortaya çıkaracak tamamen benzersiz. Aslında size bir sütunun dört köşesi için de uzatılabilir bir köşe gönyesinin nasıl tasarlanacağını göstereceğiz. Divi.

Başlayalım!

anket

Birlikte oluşturacağımız genişletilebilir köşe sekmelerinin düzenine hızlı bir bakış. Vurgulu efektlerin ve içeriğin ne kadar güzel simetrik olduğuna dikkat edin.

Divi Builder ile yeni bir sayfa oluşturun

WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.

Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın

Ardından İnşaata Başla (Sıfırdan Oluşturun)

Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Genişletilebilir İçerik Kaplamaları Düzeni Oluşturma

Sağ alt konumdan uzatılabilir köşe gönye tasarımı

Başlamak için normal bölüme iki sütunlu bir satır ekleyin.

Modül eklemeden önce hat parametrelerini aşağıdaki gibi güncelleyin:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 4

Gösterilen bu ilk öğe için, bir köşe sekmesine sahip olacak bir sütun arka plan görüntüsü oluşturacağız (bir modül kullanarak kitap kapağındaki övgü yazısı) üzerine gelindiğinde tüm sütunu/resmi genişleten ve kaplayan sütunun sağ alt kısmında.

Ayrıca kılavuzumuzu okuyun Divi: Fareyle üzerine gelindiğinde akışkan sütun ızgarası nasıl oluşturulur

Bir Blurb modülü ekleyerek başlayalım.

Sütun 1'e Blurb Modülü Ekle

Sütun 1 ayarları

Tanıtım yazısı yerleştirildikten sonra satır ayarlarını açın, aşağıdakileri güncelleyin:

• Arka plan resmi [resim ekle]
• Arka Plan Resmi Boyutu : Gerçek Boyut

NOT: Bu örnek için, düzen paketinden alınan şeffaf arka plan bira resimlerini kullanıyoruz. « Bira Fabrikası". 128 piksele 359 pikseldir, bu nedenle gerçek görüntü boyutunu kullanırız.

1. sütunun kenarlığı

• Yuvarlatılmış Köşeler: 10 piksel sağ alt
• Kenar Genişliği (Sağ ve Alt): 2px
• Kenar Rengi (Sağ ve Alt): #e94558

Özel CSS ve taşma

Gelişmiş sekmesinin altında, ana öğeye aşağıdaki özel CSS'yi ekleyin:

height: 400px;

Açılır seçenek 'Görünürlük' ve aşağıdaki değişiklikleri yapın:

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Blurb Modülüne İçerik Ekleyin

Artık 1. sütundaki Blurb modülünü özelleştirmeye başlamaya hazırız. Modül ayarlarını açın ve aşağıdakileri güncelleyin:

• Başlık: Mango IPA
• Vücut :

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>

• Resim: Sütun arka planı için kullanılan resmin aynısını ekleyin

Blurb Modülü Özelleştirme

Tanıtım yazısına aşağıdaki gibi bir vurgulu arka plan rengi verin:

• Arka Plan (Masaüstü): şeffaf
• Masaüstü (Vurgulu): rgba(255,255,255,0.9)

Sekmenin altında Dizayn, aşağıdakileri güncelleyin:

• Resim/Simge Yerleşimi: Sağ
• Başlık Yazı Tipi: Oswald
• Yazı Ağırlığı: Yarı Kalın
• Yazı Tipi Stili: TT
• Metin Boyutu: 40px
• Gövde Metni Rengi (Masaüstü): Temizle
• Gövde Metni Rengi (Vurgulu): #121212

• Görüntü/Simge Genişliği: 100 piksel (masaüstü), 64 piksel (telefon)
• İçerik Genişliği: %100
• Yükseklik: %100
• Dolgu (Masaüstü): %15 (Üst ve Alt), %8 (Sol ve Sağ)
• Dolgu (Vurgulu): %8 (Üst, Alt, Sol ve Sağ)

• Yuvarlatılmış Köşeler (Masaüstü): 20 piksel sol üst
• Yuvarlatılmış Köşeler (Vurgulu): 10 piksel sol üst
• Kenarlık Genişliği (Üst ve Sol): 4px (Masaüstü), 2px (Vurgulu)
• Kenar Rengi (Üst ve Sol): #e94558

Dönüştür seçeneği (Masaüstü)

• Dönüşüm Ölçeği (X ve Y): %50

• Dönüştür Çeviri
  • Y ekseni: %50
  • X ekseni: %30

Ayrıca şu kılavuzumuzu okuyun: Divi: "Göster" efektiyle yapışkan bir alt bilgi nasıl oluşturulur

• Kökeni Dönüştür: alt ve sağ

Dönüştürme seçenekleri (fareyle üzerine gelin)

• Dönüştürme Ölçeği (Y ve X) (Vurgulu): %100

• Dönüştür Çevir(Y ve X) (Vurgulu): %0

Sağ taraftaki öne çıkan görseli çevirmek için alana aşağıdaki özel CSS'yi ekleyin Bulanık İçerik :

direction: rtl

NOT: "rtl" "Sağdan sola", içeriğin varsayılan sırasını değiştirir (soldan sağa).

Sonuç

Sağ alttan genişleyen köşe sekmemizin sonucunu görelim. Fareyle üzerine gelindiğinde tüm sütunu doldurmak için nasıl genişlediğine dikkat edin.

Sol alt konumdan uzatılabilir köşe gönye tasarımı

Yinelenen sütun

Sol alt konumdan genişleyen köşe sekmesini oluşturmak için tüm sütunu çoğaltarak tasarımı yeniden başlatabiliriz. Satır ayarlarını açın ve sütun 1'i çoğaltın. Ardından, yalnızca iki tam kopyanız olması için fazladan sütunu silin.

2 sütun ayarlarını güncelle

Ardından, sütun 2 ayarlarını açın ve aşağıdakileri güncelleyin:

• Yuvarlatılmış Köşeler: 10 piksel sol alt
• Kenar Genişliği (Sağ): 0px
• Kenar Genişliği (Sol): 2px
• Renk: #e94558

Blurb modülünün parametrelerini güncelleme

Ardından, Blurb ayarlarını aşağıdaki gibi güncelleyin:

• Metin Hizalama: sağ
• Yuvarlatılmış Köşeler (Masaüstü): 20 piksel sağ üst
• Yuvarlatılmış Köşeler (Vurgulu): 10 piksel sağ üst
• Sol Kenar Genişliği: 0px
• Sağ Kenar Genişliği: 4px (masaüstü), 2px (vurgulu)
• Sağ Kenar Rengi: #e94558

• Dönüştür Çevir (X Ekseni) (Masaüstü): -%30
• Kökeni Dönüştür (Masaüstü): sol alt

Ardından, Blurb içerik alanındaki özel CSS'yi kaldırdığınızdan emin olun.

Sonuç

İşte sonuç. Bunun ilkine göre nasıl simetrik olduğuna ve sütunun sol alt konumundan büyüdüğüne dikkat edin.

Sağ üst konumdan uzatılabilir köşe gönye tasarımı

Artık son iki genişleyen köşe gönye tasarımlarımıza başlamaya hazırız. Avantajlı bir başlangıç ​​yapmak için, önceden tasarladığımız tanıtım metnini içeren tüm satırı çoğaltalım.

1 sütun ayarlarını güncelle

Ardından, yinelenen satır için ayarları açın, ardından 1. sütun için ayarları açın ve aşağıdakileri güncelleyin:

• Yuvarlatılmış Köşeler: 10 piksel sağ üst
• Alt Kenar Genişliği: 0px
• Üst Kenar Genişliği: 2px
• Üst Kenarlık Rengi: #e94558

Blurb modülünün parametrelerini güncelleme

Ardından, Blurb modülü ayarını açın ve aşağıdakileri güncelleyin:

• Yuvarlatılmış Köşeler (Masaüstü): 20 piksel sol alt
• Yuvarlatılmış Köşeler (Vurgulu): 10 piksel sol alt
• Üst Kenar Genişliği: 0px
• Alt Kenar Genişliği: 4px (Masaüstü), 2px (Vurgulu)
• Alt Kenar Genişliği: #e94558

• Dönüştür Çevir (Y ekseni) (Masaüstü): -%50
• Kökeni Dönüştür: sağ üst

Özel CSS

Şimdilik, yukarıdaki satırdaki diğer iki sunum gibi başlığımızı göstermeyen sunum modülünün sadece sol alt kısmını görebiliyoruz. Başlığı sekmede görüntülemek için başlığı, özel CSS ile tanıtım yazısının sol alt köşesine yeniden konumlandırmamız gerekiyor.

Alana aşağıdaki özel CSS'yi ekleyin Başlık :

position: absolute;
bottom: 0;
left: 15px;

Ardından içerik alanına aşağıdaki CSS'yi ekleyin Bulanık İçerik :

direction: rtl;
height: 100%;

Sol üst konumdan uzatılabilir köşe gönye tasarımı

Dördüncü ve son genişleyen köşe sekmesi vurgulu efektimiz için, tüm ızgara düzeninin simetrik tasarımını tamamlamak için onu sol üst köşeye konumlandıracağız.

2 sütun ayarlarını güncelle

Satır ayarları altında, sütun 2 ayarlarını açın ve aşağıdakileri güncelleyin:

• Kenarlıklar Köşeler: 10 piksel sol üst
• Alt Kenar Genişliği: 0px
• Üst Kenar Genişliği: 2px
• Üst Kenarlık Rengi: #e94558

Blurb modülünün parametrelerini güncelleme

Ardından, 2. sütundaki Blurb modülü metin ayarlarını açın ve aşağıdakileri güncelleyin:

• Yuvarlatılmış Köşeler (Masaüstü): 20 piksel sağ alt
• Yuvarlatılmış Köşeler (Vurgulu): 10 piksel sağ alt
• Üst Kenar Genişliği: 0px
• Alt Kenar Genişliği: 4px (masaüstü), 2px (vurgulu)
• Alt Kenar Rengi: #e94558

Ardından dönüştürme seçeneklerini güncelleyin:

• Dönüştür Çevir (Y Ekseni) (Masaüstü): -%50
• Kökeni Dönüştür: sol üst

Özel CSS

Ardından alana aşağıdaki özel CSS'yi ekleyin Başlık :

position: absolute;
bottom: 0%;
right: 0%;

Ayrıca kutuya aşağıdaki CSS'yi ekleyin Bulanık İçerik :

height: 100%;

Düzeni tasarlamayı bitirin

Bölüm arka plan rengi

Aşağıdaki gibi bir bölüm arka plan rengi ekleyin:

• Arkaplan: #efef

Başlık ekle

Başlığı oluşturmak için iki satırın ortasındaki bir sütuna bir satır ekleyin.

Ardından bir Metin modülü ekleyin.

İçeriği ekleyin: "Mevsimsel".

Ardından aşağıdaki ayarları güncelleyin:

• Yazı Tipi: Merriweather
• Yazı Ağırlığı: Kalın
• stil: TT
• Metin Hizalama: Ortalanmış
• Metin Rengi: #999999
• Boyut: 50px (Masaüstü), 30px (Tablet), 24px (Telefon)
• Harf Aralığı: 1em

• Dolgu (Sol): 50px (Masaüstü), 30px (Tablet), 24px (Telefon)

Nihai sonuç

Genişleyen köşe sekmeleriyle mizanpajın nihai sonucuna göz atın.

Ve işte mobildeki tasarım.

DIVI'yı Şimdi İndirin !!!

Sonuç

Bu öğreticide gösterilen köşe sekmeleri, kesinlikle, bilgisayarınızda sergilemek istediğiniz her tür içerik için işe yarayacaktır. Site Web Böl. 

Ayrıca dört köşeyi de kullanmak zorunda değilsiniz. Örneğin, fareyle üzerine gelindiğinde içeriği ortaya çıkarmak için yalnızca sağ üst köşedeki sekmeleri kullanarak görüntüler için bir ızgara düzeni oluşturabilirsiniz.

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, 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ş.

...