Güçlü aracılığıyla vurgulu efektli bir altıgen harita oluşturmanız gerekiyor Page Builder Elementor ? Eğer öyleyse, oraya nasıl gideceğinizi bu makalede öğrenin.
Bu eğitimde ne hakkında konuşacağımıza dair bir genel bakışa sahip olmak istiyorsanız, sizi aşağıdaki videoyu izlemeye davet ediyoruz:
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.
Ayrıca şu kılavuzumuzu okuyun: Bir Web Sitesine Ekmek Kırıntıları Nasıl Eklenir ile Elementor
Bir yapıya sahip yeni bir bölüm oluşturalım 3 sütun, 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ı 100'e ayarlayın.
bir ekleyelim Dahili Bölüm widget'ı – İç Bölüm – orta sütunda. Bu widget varsayılan olarak 2 sütunla yapılandırılmıştır, bunlardan birini silelim. yapılandıralım Yükseklik uzeri Minimum Yükseklik ve Minimum yükseklik hadi tanımlayalım 400'e kaydırıcı.
Sekmede stil, kitaplığınızdan bir resim seçerek arka plan resmini ayarlayalım, ardından konumunu Üstün Merkezli, Tekrarla tekrarlanmayan ve Boyut açık Örtmek.
Sur Arka plan yerleşimitıklayın bozulmuş için Arka plan türü, üzerindeki ana rengi seçin ve değiştirin #2299EF ve konumu 20, ardından ikincil renk #1917M.Ö. ve konumu 50, açı 140 ve opaklık 0.85
Sonra bir ekleyin Başlık Widget'ı inİç Bölüm gibi Başlık, Bir Ad verelim, ardından Başlık widget'ının Stil sekmesinde rengi # FFFFFF. Sonra bir ekleyin Metin Düzenleyici widget'ı, ve sekmesinde stil Metni ortalayın ve rengi # FFFFFF.
Ayrıca bakınız: Elementor ile Fiyat Tablosu Widget'ına Resim Nasıl Eklenir
tekrar seç İç Bölüm, sekmeye git İleri, bölümünde İç Marj, giriş 25-2-2-2
İç Bölüm'ü tekrar seçin ve Gelişmiş sekmesine gidin ve Özel CSS bölümünde aşağıdaki kodu kopyalayıp yapıştırın:
/*Traçage Hexagone*/
selector{
clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
}
Ardından, aşağıdaki ikinci kod parçasını bir öncekine ekleyelim:
/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
O zaman aşağıdaki snippet'i de yapıştıralım.
/*CSS d'effet de transition avec ombre*/
selector:hover{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.hexa-mom::before{
content: '';
position: absolute;
bottom: -70px !important;
width: 100%;
color: #fff;
height: 60px;
border-radius: 50%;
background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
display: block;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
z-index: 999;
}
.hexa-mom:hover::before{
opacity: 1 !important;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
Ardından orta sütunu seçelim ve sekmede gelişmiş, giriş altıgen anne alan içerisinde CSS sınıfları.
Bu sütunu 2 kez çoğaltalım ve diğer 2 sütunu silelim.
Diğer widget'ların arka plan resmini değiştirelim İç Bölüm, Başlık ve içindekiler metin düzenleyicinin ve ayrıca Arka Plan Yerleşimi degradelerinin renkleri. Şuna benzeyen bir sonuç elde etmelisiniz:
Burada bu görevi kolayca tamamladı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 ! Efektli bir hex haritasının nasıl oluşturulacağı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ş.
...
