Sayfa oluşturucu eklentisi ile bir profil kartında nasıl Yakınlaştırılacağını öğrenmek ister misiniz? Elementor ?
Bu yeni eğitimde Elementor, profilin adını ve sosyal ağ simgelerini ortaya çıkarırken, bir profil kartına nasıl Yakınlaştırma efekti uygulayacağınızı göstereceğiz.
Bugün ne hakkında konuşmak istediğimiz hakkında hiçbir fikriniz yoksa, sizi aşağıdaki videoyu izlemeye davet ediyoruz:
O zaman neden burada olduğumuza dönelim.
Bu öğreticiyi tamamlamak için ihtiyacınız olacak Elementor'un Pro sürümü, çünkü yalnızca bu sürüm tarafından desteklenen özel CSS kodunu kullanacağız.Elementor.
3 sütun yapısı ile yeni bir bölüm oluşturalım, ardından panelde tanımlayalım. Yükseklik uzeri Minimum Yükseklikve sonra Minimum yükseklik hadi tıklayalım VH ve kaydırıcıyı ayarlayın 100.
Bir widget ekleyelim İç bölüm orta sütunda. Dahili Bölüm widget'ı varsayılan olarak 2 sütunla yapılandırılmıştır, bunlardan birini silelim. Paneldeki geri kalanını değiştirerek yapılandıralım. Yükseklik uzeri Minimum Yükseklik ve Minimum yükseklik hadi imleci ayarlayalım 400.
Sekmede stil, hadi değiştirelim Arka plan yerleşimi. Tıklayın klasik arka plan türünü seçin ve kitaplıktan bir görüntü seçin ve görüntü ayarlarında Merkezli Merkezli pozisyonda Örtmek Boyut üzerinde. opaklık 1'de ve
bölümünde sınırlar tıklayın % ve girin 4 tüm kaldırım yarıçapları için.
Kutu sayısında kaydırıcıyı 0 uzeri YatayIçin, 70 uzeri DikeyIçin, 63 uzeri FlouIçin, -60 uzeri difüzör. Resminizin altında güzel bir gölge efekti görmelisiniz.
In iç bölüm kaydır Başlık widget'ı. Başlık olarak Steve Jobs'a girin, Stil sekmesinde beyaz rengi seçin # FFFFFF. Tipografide, Boyut'u seçin. 20.
Ardından, Dahili Bölüm Widget'ının sütununu seçin ve Stil sekmesinde, Düz'e, tüm genişlikleri 1'e ve renkleri #FFFFFF'ye tıklayarak kenarlık türünü seçin.
Sekmede gelişmiş, kenar boşluklarını şu şekilde değiştirin: 15 ve iç kenar boşlukları 20.
Şimdi Sosyal Medya Simgeleri pencere aracını Dahili bölümüne sürükleyerek sosyal medya simgelerini ekleyin.
Sekmedeki sosyal medya bağlantılarını düzenleyin içindekiler Her sosyal ağ'a tıklayarak. Başka sosyal ağlar eklemek istiyorsanız Ekle düğmesine tıklayınbir element
Simge Alanında Simge Kitaplığı'na tıklayın ve arama çubuğuna sosyal ağınızın ilk harflerini yazın, bulur bulmaz seçin ve Ekle düğmesine tıklayın.
Ardından sekmeye gidin stilbölümünde ikon, rengini değiştir personnalisé.
Ayrıca kılavuzumuzu okuyun; Elementor ile sayfalandırma nasıl eklenir
Sur Ana renk, şeffaflığı minimuma ayarlayın.
Sur İkincil renk, rengi seç # FFFFFF. Boyutta, girin 20, İç Marj açık 0.4.
Şimdi sekmeye tıklayın gelişmiş, ve bölümünde konumlandırmatıklayın personnalisé. Elbette özel genişlik, giriş 0.
Çok keşfetmek Elementor ile Renk Seçici Nasıl Kullanılır
Sur Pozisyonseç kesin, Vardiyada 15Üzerinde Dikey Yönlendirme choisir Bas, Ve Ofset uzeri 20.
tekrar seçin İç bölüm ve sekmede gelişmişbölümünde özel CSS (Bu bölüme sahip değilseniz, devam etmek için hızlıca Elementor'un pro sürümüne yükseltin)
Aşağıdaki kodu kopyalayıp bu bölüme yapıştırın:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}Önsel olarak fazla bir şey görmemelisiniz, ancak görüntünün üzerine geldiğinizde görüntüye bir yakınlaştırmanın uygulandığını görmelisiniz.
Şimdi, sütunun belirli öğelerini göstermek veya gizlemek için aşağıdaki kodu kopyalayıp önceki kodun arkasına yapıştırın:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Artık resmin üzerine geldiğinizde, yakınlaştırma görüntüye uygulanır ve sosyal ağların adları ve simgeleri belirir.
Bu sütunu 2 kez çoğaltalım ve diğer 2 sütunu silelim.
Dahili Bölümlerin arka plan görüntüsünü ve sosyal ağların adını ve bağlantılarını değiştirin.
İşte, bu görevi kolayca yaptınız. Kenar boşluklarını her cihaza uyacak şekilde değiştirmeye çalışarak tabletinizin ve akıllı telefonunuzun çalışmasını önizleyin.
Elementor Pro'yu Hemen Alın!
Sonuç
Böyle ! Bir profil kartına nasıl Yakınlaştırma efekti uygulanacağını gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar.
Ancak, ayrıca 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ş.
...
