Caldera Formunun Divi İletişim Formu gibi görünmesi için düzenlenmesi (+ Bonus Ekran)
Caldera Forms, WordPress depolarındaki en popüler ve yüksek püskürtme form eklentilerinden (ücretsiz) biridir. Kullanıcı ve gevşek kullanıcı arayüzü, her türlü formu oluşturmayı çok kolaylaştırır. Bir Divi Builder kullanmaya alışkınsanız, Caldera Builder doğal olarak size gelecektir.
Caldera şeklinin YouTube kanalımıza abone olmak Divi gibi görünmesini nasıl sağlanır Divi, bugün en popüler WordPress temaları arasında en bilinen stillerden biri haline geldi. Divi genellikle temiz ve minimal görünümü nedeniyle seçilir, bu nedenle kullanıcıların böyle görünmesini sağlamak için üçüncü taraflı bir eklenti tasarlamak istemesi şaşırtıcı değildir.Bu, stil ayarları veya modülleri uygulanmadan önce Divi’nin teması şeklidir: Ve bu, Caldera eklentisi tarafından sağlanan temel başlangıç formudur: Gördüğünüz gibi, sütunun genişliği ile oynamanız, caldera’nın birkaç başlığı alanını silmeniz ve alanın üstünden etiketleri silmeniz ve divi (veya Kendinizi baştan başlayabilirsiniz). Kendinizi yapabileceğiniz ilk iki değişiklik, başlığı ve metni kaydetmek bile isteyebilirsiniz, ancak size sahaya bir yer tutucu ekleyeceğinizi ve size bir divi formu gibi görünmesi için size nasıl CSS vereceğinizi göstereceğim.
Bunun gibi bir alana yer tutucu ekleyin, arkadaki Caldera’nın temel başlatıcısıdır. Ona alışmak, şeyleri hareket ettirmek ve ne yaptıklarını görmek için zaman ayırın; yaparak öğrenmek. Gerekirse, daha sonra her zaman yeni bir başlangıç formuyla başlayabilirsiniz. Metni formunuza nereye girerseniz girerseniz, bunun yerine bir yer tutucu kullanmak istersiniz. Örneğin bir e -posta modülü kullanacağım. “Etiketi gizle” yazan kutuyu kontrol etmek ve “Placeholder” başlıklı alanı doldurmak istiyorsunuz. İstediğiniz formunuz olduğunda kaydedin. Ardından, sayfanıza Divi metin modülünü kullanarak ekleyin (metin düzenleyicinizde iyi bir Caldera düğmesi görünecektir). Bir sonraki CSS kodu, CSS Kustom Divi paneline veya çocuğunuzun tema stili sayfasına aşağıdaki CSS’yi eklemeniz gerekir: /*** Bu, form alanlarının görünümünü değiştirir *** / .caldera-grid .form-control {
Dolgu: 16px;
Yükseklik: Otomatik;
Box-Shadow: Yok;
Arka plan: #EEE;
Renk: #999;
Sınır: Yok;
}
/*** Bu düğme stilini değiştirir ***/
.caldera-grid giriş [type = gönder] {
Dolgu: 10px 20px;
Border-Radius: 2px;
Arka plan: şeffaf;
Renk: #2EA3F2;
yazı tipi boyutu: 20px;
Sınır: 2px katı #2EA3F2;
Sağa çık;
Geçiş: Tüm 0,3’ler kolaylık;
}
/*** Bu, düğme shover stilini değiştirir ***/
.caldera-ızgara girişi [Type = Gönder]: Hover {
Arka plan: RGBA (0, 0, 0, 0.05);
Sınır rengi: şeffaf;
Renk: #2EA3F2;
}
Burada hiçbir yerde önemli değil! Ama şanssız bir şey görürseniz, eklemeyi deneyin.
Ve voila, divi temas formuyla aynı görünen bir iletişim formu ile sonuçlanmalısınız:
Bonus Görünür! Size üç görüntüleme daha ulaşmak için kullanabileceğiniz bazı CSS vereceğim. Bu kodu yukarıdaki kodda olduğunuzla aynı yere yerleştirmek isteyeceksiniz: tema seçeneğiyle CSS Kustom Divi panelinde veya çocuğunuzun tema stili sayfasında. Açıkçası, bu iki stilin aynı anda aktif olmasını istemezsiniz, bu nedenle bu CSS bloklarından sadece birini bir seferde kullanın. Stil 1: İlk hayalet şekli çok popüler, şeffaf efekt için şeffaf bir alana sahip bir arka plan görüntüsü kullanarak, arka plan görüntü alanını divi bölümüne yerleştiriyorum. Görüntünüzü seçerken okunabilirliği düşünmek istediğinizi unutmayın, bu durumda daha karanlık bir görüntü daha iyi olacaktır: CSS /*** Bu, form alanlarının görünümünü değiştirir *** / .caldera-grid .form-control {
Dolgu: 16px;
Yükseklik: Otomatik;
Box-Shadow: Yok;
Arka plan: şeffaf;
Renk: #fff;
Sınır: 2 piksel katı #fff;
}
/*** Bu düğme stilini değiştirir ***/
.caldera-grid giriş [type = gönder] {
Dolgu: 10px 16px;
Border-Radius: 2px;
Arka plan: şeffaf;
Renk: #fff;
yazı tipi boyutu: 20px;
Sınır: 2 piksel katı #fff;
Sağa çık;
Geçiş: Tüm 0,3’ler kolaylık;
}
/*** Bu, düğme shover stilini değiştirir ***/
.caldera-ızgara girişi [Type = Gönder]: Hover {
Arka plan: RGBA (255,255,255, 0.2);
Sınır rengi: şeffaf;
Renk: #fff;
}
.caldera -grid. Form kontrol: Odak {
Sınır rengi: #fff;
Box-Shadow: İç metin 0 1px 1px RGBA (255, 255, 255, .075), 0 0 8px RGBA (255, 255, 255, .6);
}
/*** Bu, bu stil için önemli olan yer tutucu metin rengini değiştirir ***/
Girdi ::-WebKit-Input-Yer Holderi {
Renk: #fff! Önemli;
}
Giriş: -moz -yer sahibine {
/ * Firefox 18- */ renk: #fff! Önemli;
}
Giriş ::-Moz-Yer Holderi {
/ * Firefox 19+ */
Renk: #fff! Önemli;
}
Giriş: -ms-input-yer sahibi {
Renk: #fff! Önemli;
}
TextAea ::-WebKit-Input-Yer Sahibi {
Renk: #fff! Önemli;
}
TextAea: -moz -yer sahibi {
/ * Firefox 18- */
Renk: #fff! Önemli;
}
TextAea ::-Moz-Yer Sahibi {
/ * Firefox 19+ */
Renk: #fff! Önemli;
}
TextAea: -ms-input-yer sahibi {
Renk: #fff! Önemli;
}
Yer tutucu metni için CSS’nin son bölümünün neden özetlenmediğini merak ediyor olabilirsiniz. Şimdi onu çalışmayı bırakmaya hazırladığımda, neden emin değilim ama oynamaktan çekinmeyin.
Stil 2: Bu hayalet şekli varyantı yukarıdaki ekrana benzer, ancak gerçekten şeffaf bir alan yerine, karanlık bir opaklığa sahip olacağız. Bu, fotoğrafınızı seçerken size biraz daha fazla yol sağlayacaktır çünkü bu opaklık okunabilirlik sorunlarını çözmeye yardımcı olur.
CSS Kodu /*** Bu, form alanlarının görünümünü değiştirir – bu sefer yazı tipi boyutunu yükselttim *** /
.caldera-grid .form-control {
yazı tipi boyutu: 22px;
Yükseklik: Otomatik;
Box-Shadow: Yok;
Arka plan: RGBA (0, 0, 0, 0.7);
Renk: #f5f5f5;
Sınır: Yok;
}
/*** Bu düğme stilini değiştirir ***/
.caldera-grid giriş [type = gönder] {
Dolgu: 10px 16px;
Border-Radius: 4px;
Arka plan: #27C9B8;
Renk: #fff;
yazı tipi boyutu: 20px;
Sınır: Yok;
Sağa çık;
Geçiş: Tüm 0,3’ler kolaylık;
}
/*** Bu, düğme shover stilini değiştirir ***/
.caldera-ızgara girişi [Type = Gönder]: Hover {
Arka plan: #F15640;
Renk: #333;
}
/*** Bu, parıltı efekti tamamen kaldırır ***/
.caldera -grid. Form kontrol: Odak {
Sınır rengi: şeffaf;
Box-Shadow: Yok;
}
Stil 3: Son metin düzleminin sadece alt sınırı bu örnek alanı sadece alt sınırla gösterir. Bu ekran şu anda çok ince ve oldukça moda. Kullanıcıların metinlerini yazdıklarında, alt sınır daha parlak bir renge dönüştüğünü görebilirsiniz, çok küçük ama iyi ayrıntılar. CSS /*** Bu, form alanlarının görünümünü değiştirir *** /
.caldera-grid .form-control {
yazı tipi boyutu: 22px;
Dolgu: 16px; Yükseklik: Otomatik;
Box-Shadow: Yok;
Border-Radius: 0! Önemli;
Sınır Top: Yok;
Sınır-sol: Yok;
Sınır-sağ: yok;
Sınır dip: 2px katı #333;
}
/*** Bu düğme stilini değiştirir ***/
.caldera-grid giriş [type = gönder] {
Metin-Transform: büyük harf;
Dolgu: 10px 16px;
Border-Radius: 0;
Arka plan: #DD0000;
Renk: #000;
yazı tipi boyutu: 20px;
Sınır: Yok;
Sağa çık;
Geçiş: Tüm 0,3’ler kolaylık;
}
/*** Bu, düğme shover stilini değiştirir ***/
.caldera-ızgara girişi [Type = Gönder]: Hover {
Arka plan: #000;
Renk: #f5f5f5;
}
/*** Bu, kullanıcı yazarken alt sınır rengini değiştirir ***/
.caldera -grid. Form kontrol: Odak {
Sınır rengi: #e0e0e0;
Box-Shadow: Yok;
}
Son zihin Umarım bu örneklerden hoşlanırsınız ve bu CSS görüntülerini Caldera formlarınızı düzenlemenize yardımcı olmak için kullanabilir. Bu çok iyi, ama oynamak ve eklemek çok hoş bir şekil görünümü üretebilir, keyfini çıkarın!
