Eklenti olmadan divi’de herhangi bir modülle flip kartı nasıl yapılır
Flip kartları, kullanıcıların web sitenizle etkileşime girmesi için eğlenceli bir yoldur. Sadece havalı flip animasyonu sağlamakla kalmaz, aynı zamanda bir özlü konumda ek bilgiler sunmanıza da izin verir. Bu öğreticide, bir eklenti kullanmadan divi modülünü bir flip kart olarak nasıl değiştireceğinizi göstereceğim! Bu yöntemle, kartın önü olarak bir Divi modülünü ve kartın arkası olarak diğer Divi modüllerini kullanabilirsiniz. Bir divi üreticisi kullanarak istediğiniz gibi her modülü (ön ve arka) bile tasarlayabilirsiniz. Bu işlev sadece birkaç CSS görüntüsü (jQuery olmadan) ile elde edilir.
Bu kartları yapmak için ne kadar basit ve hoş göründüğünüz için şaşıracağını düşündüm. Bölünelim! Burada kayan zirve, bugün yapacağımız tasarımdan gizlice bir zirve.
Divi düzeni, bir sütunun dört sırası bulunan normal bir bölümden oluşur. Her satıra, birbiriyle yığılmış açıklamanın iki modülü ekledim (herhangi bir divi modülü de işlev görecek olsa da). Üst açıklama, flip kartının önü olarak işlev görür ve alt açıklama, flip kartının arkası olarak işlev görür. Bölüme “Ekran: Flex” uygulayarak, satır bir sütun gibi yatay olarak düzenlenir. Bu, kartların yan yana dört sütuna hizalanmasını sağlar. Özel bir CSS eklemeden önce ayarların görüntülenmesi. Daha sonra sayfa ayarlarına özel bir CSS ekliyorum ve her satıra, sütuna ve modüle uygun CSS sınıfını ekliyorum. İşte burada! Bir Divi Flip Kartı Oluşturma Öncül Düzeni kullanarak Başlangıç, Devam Etme ve Yeni Bir Sayfa Oluşturma, Sayfanın Başlığını Verin, ardından Divi Oluşturucuyu kullanmak için tıklayın. “Önceden Yapılmış Düzen Seç” seçeneğini seçin. Kütüphaneden yükleme açılışından uygulama düzeni paketini seçin, ardından Uygulama Geliştiricisinin uygulamasının 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. Şimdi bir flip kartı yapmaya başlamaya hazırsınız. Düzenin ilk kısmının altındaki bölümleri, satırları ve modülleri hazırlayın, bir sütun bir satır içeren yeni bir normal bölüm ekleyin. Herhangi bir modül eklemeyin. Aşağıdaki satır ayarlarını açın ve güncelleme: Özel kenar: 20px daha düşük özel dolgu: 0px üst, 0px daha düşük kaydetme ayarları. Ardından, bu bölümde toplam dört satırınız olması için satır üç kez çoğaltın.
Şimdi bölüm ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: Ekran: Flex; bu, teknolojiyi bir sütunla teknik olarak hala divi sıraları olmalarına rağmen, satırlarımızı temel olarak dört sütuna değiştiren yatay olarak görüntülenecek satırı değiştirir. Buraya modüller ekleyin, burası önceden hazırlanmış düzenimizin bu öğretici için yararlı olduğu yerdir. Flip kartı tasarımımızı başlatmak için düzenin üst kısmındaki dört açıklama modülü kullanacağız. Doğru katlama seçeneğini veya CTRL+C ve CTRL+V (Windows) ve CMD+C CMD+V (MAC) kullanarak, yeni yaptığımız her satıra yeni yapılmış modülleri kopyalayıp yapıştırın. Her satırın aynı modülün yinelenen bir versiyonuna sahip olduğundan emin olun. Şimdi rolün böyle görünecek. Her satırda istiflenmiş iki modülün ön ve arka flip kartı modüllerinin tasarlanması, flip kartının ön ve arkası olarak kullanılacaktır. Her satırdaki üst modül ön olarak işlev görür ve alt modül arka olarak çalışır. Ön kart tasarımı (üst modül) önceden hazırlanmış düzenimiz sayesinde tamamlandığından, tek yapmamız gereken arka kartın tasarımını ve içeriğini (alt modül) ayarlamaktır. Çok seçmeli Divi özelliğini kullanarak, her satırdaki tüm alt modülleri seçin ve ardından dört modülü aynı anda ayarlamak için öğe ayarlarını açın. Şimdi Flip kartımızın arka sürümünü düzenlemek için öğe ayar seçeneğini güncelleyebiliriz. Eleman ayarlarını aşağıdaki gibi güncelleyin: İçindekiler: “Bu bir açıklamadır.” Arka Plan Rengi: #00A2FA Metin Rengi: Işık CSS Custom ve CSS sınıfı ekleyin Şimdi bize Flip Card işlevselliği sağlayacak özel CSS zamanı. Sayfa ayarlarını açın ve aşağıdaki özel CSS’yi ekleyin: @media (min-width: 981px) {. Flip-box-row {
Arka plan rengi: şeffaf;
Genişlik: 250px;Yükseklik: 250 piksel;
-Webkit-perspektif: 1000 piksel;
Perspektif: 1000 piksel;
}
.flip-box-sütun {
Pozisyon: göreceli;
Genişlik:%100;
Yükseklik:%100;
-Webkit-Transition: Dönüştürme 0.8s;
Geçiş: Dönüşüm 0.8s;
-Webkit-Transform Stil: Koruma-3D;
Dönüşüm tarzı: Koruma-3D;
}
.Flip-box-row: Hover .flip-box-sütun {
-webkit-transform: rotatey (180deg);
Dönüşüm: Rotatey (180deg);
}
.flip-box-ön, .flip-box-back {
Pozisyon: Mutlak;
Genişlik:%100;
Yükseklik:%100;
-Webkit-Transform: Translate3D (0.0,0);
-Webkit-Backface-görünürlük: gizli;
Backface-görünürlük: gizli;
}
.flip-box-back {
-webkit-transform: rotatey (180deg);
Dönüşüm: Rotatey (180deg);
}
}
Yukarıdaki CSS sınıfına, her sınıfın ne yaptığını anlamanıza yardımcı olacak bir ad verildiğini unutmayın. Bu aynı zamanda CSS sınıfını divi öğemize nereden eklememiz gerektiği konusunda yararlı bir göstergedir. Örneğin, “Flip-Box-Sıra” sınıfı, dört satırın her birine bir güç vermeyi amaçlamaktadır; Bu nedenle, her satır CSS sınıfına sahip olmalıdır. CSS sınıfı Divi öğesine Multi -Secect kullanarak ekleyin, her satırda ilk dört modülü (ön kartlar) seçin. Ardından aşağıdaki CSS sınıfını ekleyin: CSS Sınıfı: Flip-Box-Front
Ardından, her satırda dört alt modülü (arka kartlar) seçmek için Multi-Secect’i kullanın ve modüle aşağıdaki CSS sınıfını ekleyin: CSS Sınıfı: Flip-Box-Back
Son olarak, dört satırı seçmek için çoklu seçici kullanın ve bunlara aşağıdaki CSS sınıfını verin: CSS Sınıfı: Flip-Box-Baris CSS Sınıf Sınıfı: Flip-Box-Columnd Tasarım Tüm CSS sınıflarımızla eklenir, flip kartımız tamamen işlevsel. Masaüstündeki son tasarıma bakın. Tasarımı ayarlayın Hücresel için sayfa ayarlarına eklediğimiz özel CSS kodunda, yalnızca masaüstü için Flip kartının işlevselliğini sınırlayan bir medya sorgusu vardır. Bununla birlikte, yine de flip kartımızın ön versiyonunu tabletler ve akıllı telefonlardaki ön versiyonunu gizlememiz ve tarayıcının genişliğini ayarlarken hatlarımızın iyi bir şekilde yığıldığından emin olmalıyız. Ön kart açıklama modülümüzü gizlemek için, her satırda tüm üst modülleri (ön kartlar) seçmek için çoklu seçici kullanın (bu, çerçeve görüntü görüntüleme modunda daha kolay olacaktır çünkü her şey ön uç yapıcıda hareket edecektir) ve aşağıdakileri güncelleyin: devre dışı bırakın Açık: Cep Telefonu ve Akıllı Telefon Ardından bölümün ayarlarını açın ve daha önce eklenenlerin yanı sıra ana öğeye başka bir CSS satırı ekleyin: Flex-Wrap: Wrap; Bu, satırın cep telefonuna birikmesini sağlayacaktır. Şimdi tabletler ve akıllı telefonlardaki son tasarıma bakalım. Bonus seçeneği: Dikey arka kart! Flip kartınızın yatay değil, dikey olarak baş aşağı olmasını istiyorsanız, sadece özel CSS’de (kelimenin tam anlamıyla) iki harf değiştirmeniz gerekir. Sayfa ayarlarını açın ve “Transform: Rotatey (180deg)” kullanıldığı iki yer bulun. Ardından “Y” yi “X” ile değiştirin. Tahmin etmediyseniz, bu, y ekseni değil, x ekseninde dönecek şekilde dönüş değiştirir.
Havalı şeyler! Sonuçlara bakın.
