Eklenti Olmadan Divi'de Herhangi Bir Modül ile Flip Kartlar Nasıl Oluşturulur

Çevirmeli Kartlar, kullanıcıların web sitenizle etkileşim kurması için eğlenceli bir yoldur. Sadece harika bir çevirme animasyonu sağlamakla kalmaz, aynı zamanda kısa ve öz bir yerde ek bilgi sunmanıza da olanak tanır. Bu derste, size Divi Modüllerini bir eklenti kullanmadan nasıl flip kartlara dönüştüreceğinizi göstereceğim! Bu yöntemle bir Divi modülünü kartın ön yüzü olarak, diğer Divi modülünü ise kartın arka tarafı olarak kullanabileceksiniz. Divi oluşturucuyu kullanarak her bir modülü (ön ve arka) istediğiniz gibi tasarlayabilirsiniz. İşlevsellik, yalnızca birkaç CSS parçacığıyla gerçekleştirilir (jquery yok).

Bu kartları yapmanın ne kadar basit ve eğlenceli olabileceğine şaşıracaksınız.

Hadi dalalım!

gizli zirve

İşte bugün inşa edeceğimiz tasarımın gizli bir zirvesi.

Youtube Kanalımıza Abone Olun

Bu Eğitim İçin İhtiyacınız Olan Şeyler

Bu Eğitim için ihtiyacınız olan tek şey Divi! Eklenti gerekmez. Ayrıca ÜCRETSİZ ve Divi Builder'da bulunan Uygulama Geliştirici Düzen Paketini de kullanacağız.

Temel Fikir Açıklandı

Bu konsept için ilham, aslında flip kartların nasıl tasarlanacağına dair bu temel örnekten geldi. Tek gereken, div sınıflarını Divi satırlarına, sütunlarına ve modüllerine atamak ve ardından CSS'yi biraz temizlemek için biraz yeniden mühendislik yapmaktı.

Divi düzeni, dört tek sütunlu satır içeren normal bir bölümden oluşur. Her satıra, üst üste yığılmış iki tanıtım modülü ekledim (her ne kadar herhangi bir Divi modülü de işe yarasa da). Üst tanıtım yazısı, flip kartın ön yüzü olarak hizmet eder ve alt tanıtım yazısı, flip kartın arkası olarak hizmet eder. Bölüme “display:flex” uygulanarak, satırlar sütunlar gibi yatay olarak yapılandırılır. Bu, kartların yan yana dört sütun halinde hizalanmasını sağlar.

Özel CSS'yi eklemeden önce kurulumun nasıl göründüğü aşağıda açıklanmıştır.

Sonra özel CSS'yi sayfa ayarlarına ekledim ve ilgili CSS sınıflarını her satıra, sütuna ve modüle ekledim.

Bu kadar!

Hazır Düzen Kullanarak Divi Flip Kartları Oluşturma

Sayfanıza Hazır Düzeni Ekleme

İşleri yoluna koymak için devam edin ve yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve ardından Divi Builder'ı kullanmak için tıklayın. “Hazır Düzen Seçin” seçeneğini seçin. Kitaplıktan Yükle açılır penceresinden, Uygulama Geliştirici Düzen Paketi'ni seçin ve ardından Uygulama Geliştirici Açılış Sayfası düzenini kullanmak için tıklayın.

Düzen sayfaya yüklendikten sonra sayfanızı yayınlayın ve ardından "Ön Uçta Oluştur" düğmesini tıklayın. Artık Flip Kartları oluşturmaya başlamaya hazırsınız.

Bölüm, Satır ve Modülleri Ayarlama

Düzenin ilk bölümünün altına, tek sütunlu bir satır içeren yeni bir normal bölüm ekleyin. Henüz herhangi bir modül eklemeyin. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Kenar Boşluğu: 20 piksel alt
Özel Dolgu: 0 piksel üst, 0 piksel alt

Ayarları kaydet.

Ardından, bölümde toplam dört satırınız olacak şekilde satırı üç kez çoğaltın.

Şimdi bölüm ayarlarını açın ve aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

display:flex;

Bu, satırları yatay olarak görüntülenecek şekilde değiştirir, bu da teknik olarak hala her biri bir sütunlu Divi satırları olmasına rağmen satırlarımızı temelde dört sütuna dönüştürür.

Modülleri Satırlara Ekleme

Bu eğitim için hazır düzenimizin kullanışlı olduğu yer burasıdır. Flip kartlarımızın tasarımını hızlı bir şekilde başlatmak için mizanpajın üst kısmındaki dört tanıtım modülünü kullanacağız. Sağ tıklama seçeneklerini veya ctrl+c ve ctrl+v (windows) ve cmd+c cmd+v (mac) kısayol tuşlarını kullanarak, hazır modülleri kopyalayıp az önce oluşturduğumuz satırların her birine yapıştırın. Her satırın aynı modülün yinelenen sürümlerine sahip olduğundan emin olun.

Şimdi bölümünüz şöyle görünmelidir.

Ön ve Arka Flip Kart Modüllerinin Tasarlanması

Her sıraya yığılmış iki modül, flip kartların önü ve arkası olarak kullanılacaktır. Her sıradaki üst modül ön, alt modül arka kısım olarak görev yapacak. Ön kartın (üst modül) tasarımı önceden hazırlanmış yerleşimimiz sayesinde zaten yapıldığından, tek yapmamız gereken arka kartın (alt modül) tasarımını ve içeriğini ayarlamaktır.

Divi çoklu seçim özelliğini kullanarak, her satırdaki tüm alt modülleri seçin ve ardından dört modülün tümünü aynı anda özelleştirmek için öğe ayarlarını açın.

Artık flip kartlarımızın arka versiyonunu stilize etmek için eleman ayarları seçeneklerini güncelleyebiliriz. Öğe ayarlarını aşağıdaki gibi güncelleyin:

İçerik: "Bu bir açıklamadır."
Arka Plan Rengi: #00a2fa
Metin Rengi: Açık

Özel CSS ve CSS Sınıfları Ekleme

Şimdi bize flip kart işlevselliğini verecek özel CSS'nin zamanı geldi. Sayfa ayarlarını açın ve aşağıdaki Özel CSS'yi ekleyin:

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

Yukarıdaki CSS sınıflarının, her birinin ne yaptığını anlamanıza yardımcı olacak şekilde adlandırıldığına dikkat edin. Ayrıca, bu CSS sınıflarını Divi öğelerimize nereye eklememiz gerektiğine dair yararlı bir göstergedir. Örneğin, "flip-box-row" sınıfı, dört satırın her birine stil vermek içindir; bu nedenle, her satırın o CSS sınıfına sahip olması gerekir.

Divi Öğelerine CSS Sınıfları Ekleme

Multiselect'i kullanarak, sıraların her birinde en üstteki dört modülün (ön kartlar) tümünü seçin. Ardından aşağıdaki CSS sınıfını ekleyin:

CSS Sınıfı: flip-box-front

Ardından, her satırdaki dört alt modülün (arka kartlar) tümünü seçmek için çoklu seçimi kullanın ve bu modüllere aşağıdaki CSS Sınıfını ekleyin:

CSS Sınıfı: flip-box-back

Son olarak, dört satırı da seçmek için çoklu seçimi kullanın ve onlara aşağıdaki CSS Sınıflarını verin:

CSS Sınıfı: flip-box-satır
Sütun CSS Sınıfı: flip-box-sütun

Masaüstünde Son Tasarım

Eklenen tüm CSS sınıflarımız ile flip kartlarımız tamamen işlevseldir. Masaüstündeki son tasarıma göz atın.

Tasarımın Mobil İçin Özelleştirilmesi

Sayfa ayarlarına eklediğimiz özel CSS kodunda, flip card işlevini yalnızca masaüstüyle sınırlayan bir medya sorgusu var. Ancak yine de tablet ve akıllı telefondaki flip kartlarımızın ön sürümlerini gizlememiz ve tarayıcı genişliklerini ayarlarken satırlarımızın güzel bir şekilde yığıldığından emin olmamız gerekiyor.

Ön kart tanıtıcı modüllerimizi gizlemek için, her satırdaki tüm üst modülleri (ön kartlar) seçmek için çoklu seçimi kullanın (ön uç oluşturucuda işler hareket edeceğinden bu, tel kafes görünüm modunda daha kolay olacaktır) ve aşağıdakileri güncelleyin:

Devre dışı bırak: Telefon ve Akıllı Telefon

Ardından bölüm ayarlarını açın ve daha önce eklenene ek olarak ana öğeye bir CSS satırı daha ekleyin:

flex-wrap:wrap;

Bu, satırların mobil cihazlarda yığılmasını sağlayacaktır.

Şimdi tablet ve akıllı telefondaki son tasarımı kontrol edelim.

Bonus Seçenek: Dikey Çevirmeli Kartlar!

Flip kartlarınızın yatay yerine dikey olarak çevrilmesini istiyorsanız, özel CSS'de yalnızca iki harfi (tam anlamıyla) değiştirmeniz gerekir. Sayfa ayarlarını açın ve "dönüştür: döndürmeY(180deg)" ifadesinin kullanıldığı iki yeri bulun. Ardından “Y”yi “X” ile değiştirin. Henüz tahmin etmediyseniz, bu, dönüşü Y ekseni yerine X ekseninde dönecek şekilde değiştirir.

Oldukça havalı şeyler! Sonucu kontrol edin.

Son düşünceler

Divi'de harika görünen Flip Kartlar oluşturmak için bir eklentiye başvurmanız gerekmez. Bu öğretici ile, sayısız tasarım ve flip kart içeriği kombinasyonu oluşturmak için bir çerçeveniz var. Kartlarınızın önü ve arkası olarak hizmet edecek herhangi iki modülü seçebileceğinizi unutmayın. Bu yüzden özgür hissedin, yaratıcı olun!

Umarım bu yardımcı olmuştur ve aşağıdaki yorumlarda sizden haber almayı dört gözle bekliyorum.

Şerefe!