Divi'de Genişleyen Köşe Sekmeleri ile Hover'da İçerik Nasıl Ortaya Çıkarılır (ÜCRETSİZ İndirme)

Benzersiz fareyle üzerine gelme efektlerini kullanarak içeriğinizle kullanıcıların ilgisini çekmenin yeni ve yaratıcı yollarını keşfetmek her zaman eğlencelidir. Bunu yapmanın harika bir yolu, genişleyen köşe sekmelerini kullanarak fareyle üzerine gelindiğinde içeriği ortaya çıkarmaktır. Bu, kullanıcının ek yararlı içerik içeren bir kaplamayı genişletmek için bir sütunun veya görüntünün köşesindeki bir sekmenin üzerine gelmesine olanak tanır.

Bu eğitim için, genişleyen köşe sekmelerini kullanarak üzerine gelindiğinde içeriği ortaya çıkaracak tamamen benzersiz bir Divi düzeni oluşturacağız. Aslında, Divi'de bir sütunun dört köşesi için genişleyen bir köşe sekmesinin nasıl tasarlanacağını göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte birlikte oluşturacağımız genişleyen köşe sekmesi düzenine hızlı bir bakış. Fareyle üzerine gelme efektlerinin ve içeriğin ne kadar güzel simetrik olduğuna dikkat edin.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

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

Öğreticiye geçelim mi?

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.

Sıfırdan Genişleyen İçerik Kaplamaları Düzeni Oluşturma

Bölüm 1: Sağ Alt Konumdan Genişleyen Köşe Sekmesi Oluşturma

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

Modül eklemeden önce, satır ayarlarını özel bir oluk genişliği ile aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 4

Bu ilk öne çıkan öğe için, fareyle üzerine gelindiğinde tüm sütunu/resmi genişleten ve kaplayan sütunun sağ alt kısmında bir köşe sekmesine (bir tanıtım modülü kullanarak) sahip olacak bir sütun arka plan görüntüsü oluşturacağız.

Bir tanıtıcı modül ekleyerek başlayalım.

Bulanıklık Modülü Ekle

Sütun 1'e bir tanıtıcı modül ekleyin.

Henüz stil vermeyeceğiz. Temel olarak, tanıtım yazısı içeren sütuna stil verebilmemiz için bazı içeriğe ihtiyacımız vardı.

Sütun 1 Ayarları

Tanıtım yazısı yerindeyken, satır ayarlarını açın ve ardından sütun 1 ayarlarını düzenlemek için tıklayın. Ardından aşağıdakileri güncelleyin:

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

NOT: Örneğimde, Brewery Layout Pack'ten alınan şeffaf arka plan bira resimlerini kullanıyorum. 128 piksele 359 pikseldir, bu yüzden görüntünün gerçek boyutunu kullanıyorum.

Sütun 1 Kenarlık

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

Özel CSS ve Taşma

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

height: 400px;

Aşağıdaki güncelleme:

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

Bu özel yükseklik, tanıtım modülümüzün (köşe sekmesi) sütunun tam yüksekliğini genişletmesi için gereklidir. Ayrıca, tanıtım modülünün çoğunu, vurgulu duruma gelene kadar sütunun dışında gizleyebilmemiz için gizli taşma gereklidir.

Blurb Modül İçeriği Ekleme

Artık 1. sütunun içindeki tanıtım yazısı modülünü özelleştirmeye başlamaya hazırız. Tanıtım yazısı 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ünü Tasarlama

Tanıtım yazısına fareyle üzerine gelindiğinde aşağıdaki gibi bir arka plan rengi verin:

• Arka Plan Rengi (masaüstü): şeffaf
• Arka plan rengi (fareyle üzerine gelme): rgba(255,255,255,0.9)

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

• Resim/Simge Yerleşimi: Sol
• Başlık Yazı Tipi: Oswald
• Başlık Yazı Tipi Stili: TT
• Başlık Metin Boyutu: 40px
• Gövde Yazı Tipi Ağırlığı: Yarı Kalın
• Gövde Metni Rengi (masaüstü): şeffaf
• Gövde Metni Rengi (fareyle üzerine gelin): #121212

• Görüntü Genişliği: 100px (masaüstü), 64px (telefon)
• İçerik Genişliği: %100
• Yükseklik: %100
• Dolgu (masaüstü): %15 üst, %15 alt, %8 sol, %8 sağ
• Dolgu (fareyle üzerine gelme): %8 üst, %8 alt, %8 sol, %8 sağ

• Yuvarlatılmış Köşeler (varsayılan): 20 piksel sol üst
• Yuvarlatılmış Köşeler (fareyle üzerine gelin): 10 piksel sol üst
• Üst Kenar Genişliği: 4px (masaüstü), 2px (vurgulu)
• Üst Kenarlık Rengi: #e94558
• Sol Kenar Genişliği: 4px (masaüstü), 2px (vurgulu)
• Sol Kenar Rengi: #e94558

Dönüştürme Seçeneği (Masaüstü)

• Ölçeği Y Eksenini Dönüştür: %50
• Ölçeği X Eksenini Dönüştür: %50
• Y Eksenini Dönüştür: %50
• Dönüştürme X Eksenini Çevir: %30
• Kökeni Dönüştür: Sağ Alt

Dönüştürme Seçenekleri (Vurgulu)

• Ölçeği Y Eksenini Dönüştür (fareyle üzerine gelin): %100
• Ölçeği X Eksenini Dönüştür (fareyle üzerine gelme): %100
• Y Eksenini Dönüştür (fareyle üzerine gelme): %0
• Dönüştür X Eksenini Çevir (fareyle üzerine gelin): %0

Tanıtıcı resmi sağ tarafa çevirmek için, Bulanık İçerik kutusuna aşağıdaki özel CSS'yi ekleyin:

direction: rtl

NOT: "rtl" yönü, içeriğin varsayılan sırasını (soldan sağa) değiştiren "sağdan sola" anlamına gelir.

Sonuç

Genişleyen köşe sekmemizin nihai sonucunu sağ alt konumdan kontrol edelim. Fareyle üzerine gelindiğinde tüm sütunu doldurmak için nasıl genişlediğine dikkat edin.

Bölüm 2: Sol Alt Konumdan Genişleyen Köşe Sekmesi Oluşturma

Sütunu Çoğalt

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

Sütun 2 Ayarlarını Güncelle

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

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

Bulanıklık Ayarlarını Güncelle

Ardından, Bulanıklık 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 (fareyle üzerine gelin): 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 X Eksenini Çevir (masaüstü): -%30
• Origin'i Dönüştür (masaüstü): sol alt

Ardından, Bulanık İçerik kutusundaki özel CSS'yi sildiğinizden emin olun.

Sonuç

İşte sonuç. Bunun birincisine nasıl simetrik olduğuna ve sütunun sol alt konumundan genişlediğine dikkat edin.

Bölüm 3: Sağ Üst Konumdan Genişleyen Köşe Sekmesi Oluşturma

Şimdi son iki genişleyen köşe sekmesi tasarımı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.

Sütun 1 Ayarlarını Güncelle

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

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

Blurb Modül Ayarlarını Güncelle

Ardından, tanıtıcı 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 Rengi: #e94558
• Dönüştürme Y Eksenini Çevir (masaüstü): -%50
• Kökeni Dönüştür: sağ üst

Bulanık Özel CSS

Şu anda, yukarıdaki satırdaki diğer iki tanıtım yazısı gibi başlığımızı göstermeyen tanıtım yazısı modülünün yalnızca sol alt kısmını görebiliyoruz. Başlığı sekmenin içinde göstermek için, bazı özel CSS ile başlığı tanıtım yazısının sol alt köşesine yeniden konumlandırmamız gerekiyor.

Blurb Title kutusuna aşağıdaki Özel CSS'yi ekleyin:

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

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

direction: rtl;
height: 100%;

Bölüm 4: Sol Üst Konumdan Genişleyen Köşe Sekmesi Oluşturma

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.

Sütun 2 Ayarlarını Güncelle

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

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

Bulanıklık Ayarlarını Güncelle

Ardından, 2. sütundaki tanıtım yazısı 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 X Eksenini Çevir (masaüstü): -%30
• Kökeni Dönüştür: Sol Üst

Bulanık Özel CSS

Ardından, Blurb Title kutusuna aşağıdaki Özel CSS'yi ekleyin:

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

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

height: 100%;

Bölüm 4: Düzen Tasarımını Bitirmek

Bölüm Arka Plan Rengi

Bir Bölüm Arka Plan Rengini aşağıdaki gibi ekleyin:

• Arka Plan Rengi: #efefef

Başlık Ekleme

Başlığı oluşturmak için iki satırın ortasına bir satır ekleyin ve bir sütun satırına bir metin modülü ekleyin.

İçeriği ekleyin: "Mevsimsel".

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

• Başlık 2 yazı tipi: Merriweather
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Yazı Tipi Stili: TT
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #999999
• Başlık 2 Metin Boyutu: 50px (masaüstü), 30px (tablet), 24px (telefon)
• Başlık 2 Harf Aralığı: 1em
• Doldurma: 50 piksel sol (masaüstü), 30 piksel sol (tablet), 24 piksel sol (telefon)

Son sonuç

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

Ve işte mobildeki tasarım.

Son düşünceler

Bu düzen tasarımında yer alan genişleyen köşe sekmeleri, Divi web sitenizde öne çıkarmak istediğiniz her türlü içerik için kesinlikle işe yarayacaktır. 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. Tasarım yetenekleri bununla bol miktarda bulunur. İyi eğlenceler.

Yorumlarda sizden haber bekliyorum.

Şerefe!