Elementor: Metnin üzerine gelindiğinde bir resim nasıl değiştirilir?

Elementor: Metnin üzerine gelindiğinde bir resim nasıl değiştirilir?

Elementor Sayfa Oluşturucu ile metnin üzerine gelindiğinde görüntüyü değiştirmek ister misiniz? Bu yeni eğitimde, size bunu nasıl yapacağı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:

Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

O zaman neden burada olduğumuza dönelim.

Ayrıca aşağıdakilerle ilgili rehberimizi keşfedin:  Elementor ile Portföyden Efekt Kartı Nasıl Oluşturulur

Bu öğreticiyi tamamlamak için ihtiyacınız olacak Elementor'un Pro sürümü, çünkü yalnızca Elementor'un bu sürümü tarafından desteklenen özel CSS kodunu kullanacağız.

2 sütunlu bir bölüm oluşturalım, ardından yan 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.

Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

Sekmede stil hadi onu seçelim Arka plan türü üzerine tıklayarak klasik, ardından değiştirin renk uzeri# F9F9F9

Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

Sekmede gelişmiş, hepsini değiştir İç kenar boşlukları uzeri 25

Şimdi sütun genişliğini şu şekilde değiştirelim: kârimizin %40 sol sütun için ve kârimizin %60 sağ sütun için.

Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

Sol sütunda, bir bırakalım Metin Düzenleyici Widget'ı, ardından içine bir Metin yapıştırın ve Başlık Boyutu açık metin Başlık 3.

Sekmede gelişmiş, olarak girin İç Kenar Boşlukları 10-25-10-30 için sırasıyla üst, sağ, alt ve sol iç kenar boşlukları

bölümünde arka plân sekme gelişmiş, tıklamak GENEL BAKIŞöğesini seçin, ardından arka plan türü uzeri klasik, hadi girelim renk #DFF5FF et Geçiş süresi uzeri 0.5.

Fareyi metnin üzerine getirdiğimizde, üzerine gelindiğinde muhteşem bir arka plan rengi keşfetme fırsatımız olacak.

Şimdi bölüme geçelim sınırlarve üzerine tıklayın GENEL BAKIŞöğesini seçin, ardından Devam et için kenarlık türü et sınır arasındaki bağlantıyı devre dışı bırakalım girmek 4 özellikle hedefiniz sol kenarlık. hadi rengi seçelim #002FA7 ve bir geçiş süresi ekleyin 0.5

Metin kutumuzun üzerine bir kez daha gelirsek, solda bir kenarlıkla daha belirgin bir animasyon göreceğiz.

bölümünde sınır, sekmeye geri dönelim NORMAL, kenarlık türünü seçelim Devam et, sınırlar arasındaki bağlamayı devre dışı bırak, yakala 4 sol kenarlık için ve çok şeffaf hale getirin.

Metnin üzerine bir kez daha gelirsek, çok yumuşak bir geçiş göreceğiz.

Ayrıca Oku: Elementor ile bir görüntünün üzerindeki metin nasıl görüntülenir?

Bu metni iki kez çoğaltalım ve her içeriğin metinlerini bu şekilde değiştirelim.

Sağ sütunda, bir Resim widget'ıve kitaplığımızdan bir resim ekleyin.

Giderek bu görüntünün etrafında biraz boşluk yaratacağız. Gelişmiş sekme ve Üst, Sağ, Alt ve Sol tüm iç kenar boşlukları için 10 – 10 – 10 – 50 girin.

Resmi seçelim ve sekmede gelişmiş ikincisinden, bölüme gidelim Hareket efektleri daha sonra Giriş Animasyonu, Seçme Azaltmak

bölüme geri dönelim gelişmiş Gelişmiş Sekmesinden seçin ve CSS Sınıfları alanına bazı sınıf adları ekleyin. hadi alalım tüm-img img-1

İmajımızı 2 kez çoğaltalım.

İkinci görüntüyü seçelim ve img-1'i img-2 olarak değiştirelim, ardından görüntüyü yeni bir görüntüye değiştirelim.

Ayrıca bakınız: Elementor ile bir resim galerisi nasıl oluşturulur

Üçüncü görüntü için img-1'i img-3'e değiştirelim, ardından görüntüyü yeni bir görüntüyle değiştirelim.

Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

Bölümümüzü seçelim ve sekmesine gidelim gelişmiş. Bölümde özel CSS, aşağıdaki kod parçacığını kopyalayıp yapıştırın:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(Bu bölüme sahip değilseniz Pro sürümünüz yoktur, devam etmek istiyorsanız sürümünüzü yükseltmeniz gerekir).

Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

İlk metin düzenleyicimizi seçelim ve Gelişmiş sekmesine gidelim ve Özellikler bölümü. Alan içerisinde Özellikler, aşağıdaki kod parçacığını kopyalayıp yapıştırın:

data-showme|img-1

Bunu, img-1'i img-2'ye veya img-3'e değiştirirken diğer metin düzenleyiciler için yapın.

Şimdi sayfamıza bir HTML widget'ı ekleyelim. Aşağıdaki komut dosyasını kopyalayıp yapıştırın:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>
Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

Şimdi sayfanızı kaydedin veya güncelleyin, ardından önizleyin.

Sayfa Oluşturucu Öğesi ile bir metnin üzerine gelindiğinde bir resmi değiştirin

İşte, bu görevi kolayca yaptınız.

Elementor Pro'yu Hemen Alın!

Sonuç

İşte burada ! Bir metnin üzerine gelindiğinde bir resmi nasıl değiştireceğinizi 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ş.

...

Elementor: Bir portföyden efekt kartı nasıl oluşturulur

Elementor: Bir portföyden efekt kartı nasıl oluşturulur

Portföy etkisi ile kart oluşturmayı öğrenmek ister misiniz? Bu yeni öğreticide, bunu Elementor ile nasıl yapacağı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:

portföy efektli bir kart oluşturun

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 Elementor'un bu sürümü tarafından desteklenen özel CSS kodunu kullanacağız.

Ayrıca Oku: Elementor ile bir görüntünün üzerindeki metin nasıl görüntülenir?

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.

3 sütun bölümü

Ortadaki sütunu seçelim ve bu sütuna Dahili Bölüm Widget'ı. Dahili Bölüm widget'ı varsayılan olarak 2 sütunla yapılandırılır. 2 sütunun altına widget'ı bırakalım Başlık başlık ile restoran, Seçme H4 HTML etiketi için ve Merkez hizalama için.

Sekmede gelişmiş Başlık widget'ına girelim 30 özellikle hedefiniz Üst boşluk

portföy efektli bir kart oluşturun

Bir kez daha Dahili Bölümümüzü seçelim. Panelde, onu değiştirelim Yükseklik uzeri Minimum Yükseklik ve Minimum yükseklik hadi imleci ayarlayalım 380. Ardından Dahili bölümün sağ veya sol sütununu silelim

portföy efektli bir kart oluşturun

bırak onu Resim widget'ı Dahili Bölümde ve kitaplığımızdan bir resim ekleyin. hadi seçelim Tüm için Görüntü boyutu et Merkez için hizalama.

portföy efektli bir kart oluşturun

Not: Bizimki gibi eksiksiz sayfalara sahip olmak istiyorsanız, sizi GoFullPage Chrome uzantısının yardımıyla sayfaları yakalamaya davet ediyoruz, ancak başka bir tane de kullanabilirsiniz.

Ayrıca keşfedin: Elementor ile bir resim galerisi nasıl oluşturulur

Daha sonra Sekmede stil, tıklamak PX de Genişlik, kaydırıcıyı ayarlayalım 260 et les sınır ışınları uzeri 10

Ardından, Blur'u 40'a ve Diffuse'ı -10'a değiştirerek Box Shadow'u değiştirelim.

portföy efektli bir kart oluşturun

Gelişmiş sekmesinde, bölümünde konumlandırma, Seçme kesin özellikle hedefiniz Pozisyon, Yatay Yönlendirme uzeri Patavatsız olarak da adlandırılan dekalaj uzeri 0, L 'Dikey Yönlendirme uzeri Bas.

Görüntü widget'ımızı iki kez çoğaltalım. Kaçınılmaz olarak hepsi üst üste gelecek. Navigator'ı açalım, böylece ilki tarafından gizlenen diğer widget'lara erişebiliriz.

portföy efektli bir kart oluşturun

İkinci Widget'ın ve Sekmesindeki görüntüyü değiştirelim gelişmiş, onları değiştirelim alt kenar boşlukları et Patavatsız Girerek 30 her biri için. Şimdi hafif bir gecikme göreceksiniz, 

Üçüncü Görüntü Widget'ı için de aynısını yapın, ancak Kenar Boşluklarını uygulayın 60 Alt ve Sol kenar boşlukları için. Artık 3 Görüntü widget'ının tümüne ilişkin bir genel bakışa sahip olmalısınız.

portföy efektli bir kart oluşturun

Dahili Bölüm widget'ımızı seçelim, Sekmesine gidelim gelişmiş ve bölümde özel CSS, aşağıdaki kod parçacığını kopyalayıp yapıştırın:

selector .elementor-widget-image{
    transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
    transform: scale(.65);
}
selector:hover .front-img{
    transform-origin: center left;
}
selector:hover .mid-img{
    transform-origin: center top;
}
selector:hover .last-img{
    transform-origin: bottom right;
}

(Bu bölüme sahip değilseniz Pro sürümünüz yoktur, devam etmek istiyorsanız sürümünüzü yükseltmeniz gerekir)

Şimdi haritamızın üzerine gelirseniz, bir yakınlaştırma animasyonuna sahip olacaksınız.

portföy efektli bir kart oluşturun

İlk Görsel Widget'ımızı (en düşük olanı) ve Sekmesinde seçelim gelişmiş, hadi kapalım ön-img için CSS sınıfları.

İkinci Resim Widget'ı için şunu yazalım orta resim CSS Sınıfları için.

Üçüncü Resim Widget'ı için şunu yazalım son görüntü CSS Sınıfları için.

Ayrıca bakınız: Elementor ile Sekmeli Resim Galerisi Nasıl Oluşturulur

Şimdi sütunumuzun üzerine geldiğimizde, Dahili Bölümümüzün içeriğinin güzel bir animasyonunu göreceğiz.

portföy efektli bir kart oluşturun

Sayfamızı tablet modunda gösterelim resimlerin düzgün görüntülenmediğini göreceğiz.

portföy efektli bir kart oluşturun

İlk Görüntü widget'ını seçin, Stil sekmesinde, PC'ye tıklayarak ve ardından genişlik olarak 150 girerek genişliği değiştirelim. Aynısını diğer 2 Görüntü widget'ı için de yapalım.

İçerik bölümünde Dahili Bölümümüzü seçelim, Minimum yükseklik uzeri 225.

portföy efektli bir kart oluşturun

Ayrıca sayfamızı akıllı telefon modunda gösterelim herhangi bir sorun teşkil etmez. Ama varsa Dahili Bölümümüzü seçelim, İçerik bölümünde Minimum Yüksekliği değiştirelim.

Şimdi ortadaki sütunumuzu 2 kez çoğaltalım, ardından diğer 2 boş sütunu silelim.

portföy efektli bir kart oluşturun

Bu sütunların Başlıklarını değiştirelim, ardından görüntüleri değiştirelim

İşte sonuçları olan muhteşem bir bölüme sahip olmanız gerekecek:

portföy efektli bir kart oluşturun

İşte, bu görevi kolayca yaptınız.

Elementor Pro'yu Hemen Alın!

Sonuç

İşte burada ! Portföy etkisi ile bir kartı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ş.

...

Elementor: Bir Resim Galerisi Nasıl Oluşturulur

Elementor: Bir Resim Galerisi Nasıl Oluşturulur

Elementor ile nasıl resim galerisi oluşturacağınızı bilmek ister misiniz?

Resim galerisi, Elementor tarafından değiştirilebilecek eklenti türlerinden biridir. WordPress web sitenize Elementor yüklenip etkinleştirildiğinde, bir resim galerisi oluşturmak için yeni bir eklenti yüklemeniz gerekmez.

Elementor, bir resim galerisi oluşturmak için kullanabileceğiniz iki widget'a sahiptir: Temel Galeri ve Galeri. Bir resim galerisi oluşturmak için Temel Galeri pencere aracını kullanabilirsiniz. Galeri widget'ını daha gelişmiş bir galeri oluşturmak için kullanabilirsiniz.

Ayrıca Oku: Elementor'da degrade ilerleme çubuğu nasıl oluşturulur

Eğer bilmiyorsan, Elementor bir WordPress sayfa oluşturucu eklentisidir. CSS ile uğraşmak zorunda kalmadan web sitenizde bir web sayfası oluşturmak için kullanabilirsiniz.

Elementor ile WordPress'te bir resim galerisi nasıl oluşturulur

Başlamadan önce, WordPress web sitenizde Elementor'un kurulu olduğundan ve etkinleştirildiğinden emin olun. Resmi bir makaleye veya bir sayfaya ekleyebilirsiniz. Elementor ile bir makaleyi / sayfayı düzenlemek için düğmesine tıklayın Elementor ile düzenle Gutenberg editörünün üstünde.

Tıkladıktan sonra Elementor Düzenleyicisine yönlendirileceksiniz. Elementor ile düzenle yukarıda. Düzenleme kutusuna içerik eklemeye başlamadan önce düzeni ayarlayabilirsiniz. Bunu yapmak için sol alt köşedeki dişli simgesine tıklayarak ayarlar panelini açın. Seçenekte düzeni ayarlayabilirsiniz Yerleşim.

Temel Galeri widget'ını kullanarak bir resim galerisi oluşturun

Hazır olduğunuzda, yeni bir bölüm ekleyin ve Temel Galeri widget'ını sol panelden düzenleme kutusuna sürükleyin.

Galeriye eklemek istediğiniz resimleri seçmek için resim seçiciyi tıklayın. Görüntüler WordPress medya galerinizde mevcut değilse, bunları yüklemeniz yeterlidir.

düğmesine tıklayın Yeni galeri oluştur Seçilen resimleri galeriye eklemek için Sonra onları yeniden düzenleyin.

Ayrıca bakınız: Elementor'da metne resim nasıl eklenir

Bloktaki görüntü boyutunu, sütun sayısını ve ışık alanını ayarlayabilirsiniz. Resim galerisi altında İçerik sekmesi.

Elementor ile bir resim galerisi nasıl oluşturulur

sekmesine ulaşabilirsiniz stil galeriyi özelleştirmek için Blokta boşluk ve kenarlık tipini ayarlayabilirsiniz. Görüntüler. Efsaneyi özelleştirmek için bloğu açabilirsiniz. Efsane.

Galeri widget'ını kullanarak bir resim galerisi oluşturun

Galeri pencere aracı, temel Galeri pencere aracından daha fazla özelleştirme seçeneği sunar. Üç farklı düzen kullanabilirsiniz: Izgara, Yaslanmış ve Duvar. Ayrıca kaplama rengini, açıklamayı, işaretleme animasyonunu vb. ayarlayabilirsiniz.

Ayrıca okuyun: Elementor'da çalışmayan video otomatik oynatma nasıl düzeltilir

Galeri widget'ının yalnızca Elementor'un profesyonel sürümünde mevcut olduğunu lütfen unutmayın.

Galeri widget'ıyla bir resim galerisi oluşturmaya başlamak için, onu sol panelden düzenleme alanına sürükleyin. Resim seçiciye tıklayın ve yukarıda yaptığınız gibi galeriye eklemek istediğiniz resimleri seçin.

Resim eklemeyi bitirdikten sonra, bloğa tıklayın Ayarlar sekmenin altında İçerik. Galeri türünü seçeneğe ayarlayın Tür.

Galeri widget'ı, aşağıdaki gibi birden çok sekmeli bir resim galerisi oluşturmanıza olanak tanır. Sadece seçeneği seçin çoklu aşağıdaki gibi birden çok sekmeli bir galeri oluşturmak istiyorsanız.

Elementor ile bir resim galerisi nasıl oluşturulur

Hala blokta Ayarlar, galeri düzenini, sütun sayısını, resimler arasındaki boşluğu, en boy oranını ve resim boyutunu ayarlayın.

Elementor ile bir resim galerisi nasıl oluşturulur

bloğu aç Kaplama bindirmeyi etkinleştirmek için İsterseniz bindirme ipucunda görüntünün başlığını ve açıklamasını görüntüleyebilirsiniz.

Resim başlığını veya resim açıklamasını göstermeyi seçerseniz, galerideki resmi tek tek düzenlemeniz gerekir. Görsel puanında ne görüntülemek istediğinize bağlı olarak alternatif metni, başlığı, başlığı veya açıklamayı düzenleyin.

Sekmeye git stil galerinizi özelleştirmek için. Kullanılabilir 3 seçenek bloğu vardır (birden çok sekme galerisi oluşturuyorsanız 4).

  • Resim

Bu bloktan görüntü kenarlığı rengini, kenarlık yarıçapını, görüntü animasyonunu ve CSS filtresini ayarlayabilirsiniz.

  • Elementor ile bir resim galerisi nasıl oluşturulurKaplama

Bu blok, kaplamayı özelleştirmenizi sağlar. Kaplama rengini, nokta animasyonunu ve karışım modunu ayarlayabilirsiniz.

  • içerik

Bu blok, resminizin içeriğini özelleştirmenize olanak tanır. İçerik, blokta tanımladığınız görüntünün başlığını ve açıklamasını ifade eder. üstüne koyma sekme İçerik.

Hizalama, dikey konum, dolgu, metin rengi, tipografi (yazı tipi stili, yazı tipi ailesi, yazı tipi boyutu) ve işaretleme animasyonunu ayarlayabilirsiniz.

Elementor ile bir resim galerisi nasıl oluşturulur

Galerinizi özelleştirmeyi tamamladığınızda, düğmesine tıklayabilirsiniz. YAYINLA sol panelin alt kısmında. Ayrıca göz simgesine tıklayarak sayfanızı önizleyebilirsiniz.

Elementor Pro'yu Hemen Alın!

Sonuç

Burada ! Elementor ile nasıl resim galerisi oluşturacağınızı gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa fbize 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ş.

...

Elementor: Sekmeli Resim Galerisi Nasıl Oluşturulur

Elementor: Sekmeli Resim Galerisi Nasıl Oluşturulur

Elementor'da sekmeli resim galerisi oluşturmanız mı gerekiyor?

Sürekli söylediğimiz gibi, Elementor sadece bir sayfa oluşturucu eklentisinden daha fazlasıdır. Aynı anda birden fazla WordPress eklentisinin yerini alabilen çok yönlü bir eklentidir. Elementor tarafından değiştirilebilecek eklentilerden biri de Resim Galerisi eklentisidir.

kazanımı için idealdir.  Elementor, için herhangi bir ek eklenti yüklemeniz gerekmez resim galerisi oluştur WordPress web sitenizde. Bir resim galerisi oluşturmak için Elementor tarafından sunulan iki widget vardır: Temel Galeri ve Galeri.

Elementor Free'de bulunan Temel Galeri widget'ı, temel bir resim galerisi oluşturmanıza izin verirken, Galeri widget'ı sekmeli bir resim galerisi de dahil olmak üzere daha gelişmiş bir resim galerisi oluşturmanıza olanak tanır.

Bir fotoğraf web sitesinde bir galeri oluşturmak istiyorsanız bu harika. Bu yazıda size Elementor'da sekmeli bir resim galerisinin nasıl oluşturulacağını göstereceğiz.

Elementor'da sekmeli bir resim galerisi nasıl oluşturulur

Galeri widget'ı, Elementor'un profesyonel sürümünde mevcuttur. Bu nedenle, Elementor'unuzu yükseltmediyseniz, profesyonel sürüme yükselttiğinizden emin olun. Kodlama olmadan bir WordPress teması oluşturma yeteneği de dahil olmak üzere Elementor Pro'yu kullanarak elde edeceğiniz birçok avantaj vardır.

Ayrıca Oku: Elementor'da sekmeli bir resim galerisi nasıl oluşturulur

Bu örnekte, bir manzara fotoğraf galerisi oluşturacağız. Fotoğraflar üç türe ayrılır: dağ, deniz ve şelale. Her manzara türünü barındırmak için üç sekme ve tüm fotoğrafları görüntülemek için bir sekme oluşturacağız.

Başlamak için yeni bir sayfa oluşturun ve Elementor ile düzenleyin. Mevcut bir sayfayı da düzenleyebilirsiniz. Bir bölüm ekleyin ve Galeri widget'ını içine sürükleyin.

Elementor'da sekmeli bir resim galerisi nasıl oluşturulur

bloğun altında Ayarlar sekmenin altında içerik, seçeneği ayarla Tip uzeri çoklu.

Varsayılan olarak galeriniz yalnızca bir sekme içerir. Yeni bir sekme eklemek için düğmeye tıklamanız yeterlidir BİR ELEMAN EKLE.

Ayrıca bakınız: Elementor'da degrade ilerleme çubuğu nasıl oluşturulur

Öğelerden (sekmeler) birini açın. Alandaki sekme etiketini tanımlayın Başlık. Sekmeye eklemek istediğiniz resimleri seçmek için artı düğmesine tıklayın.

WordPress medya kitaplığınızdan görüntüleri seçin. Eğer bir tane yoksa, onları indirin. düğmesine tıklayın Yeni bir galeri oluştur -> Galeri ekle galeriyi sekmeye eklemek için

Elementor'da sekmeli bir resim galerisi nasıl oluşturulur

Diğer öğeleri (sekmeler) açın ve sekme etiketini ayarlamak ve görüntüleri eklemek için yukarıdaki adımları tekrarlayın.

Galeriyi özelleştir

Her sekmeye resim ekledikten sonra galerinizi özelleştirebilirsiniz. blokta Ayarlar, düzeni, satır yüksekliğini, resimler arasındaki boşluğu ve resim boyutunu ayarlayabilirsiniz. Tembel Yükleme özelliğini etkinleştirmek için bir seçenek de vardır.

bloğu aç Filtre Çubuğu ana sekmenin ("Tümü" sekmesi), işaretçinin ve animasyonun etiketini tanımlamak için.

bloğu aç Kaplama bindirmeyi etkinleştirmek için Bir resmin üzerine geldiğinizde resmin başlığını ve açıklamasını görüntüleyebilirsiniz. başlık ve  tanım.

Başlık ve açıklamayı fare üzerinde görüntülemek istiyorsanız, galerideki tek tek resmi düzenlemeniz ve tanımladığınız parametreyi (alt metin, başlık, başlık veya açıklama) eklemeniz gerekir.

Sekmeyi aç stil galerinizi özelleştirmek için. Açabileceğiniz 4 blok vardır: Görüntü, Yerleşim, İçerik ve Filtre Çubuğu.

Resim

Bu blok, görüntü kenarlık rengini, işaretleme kenarlık rengini, kenarlık genişliğini, kenarlık yarıçapını, CSS filtresini ve işaretleme animasyonunu ayarlamanıza olanak tanır.

Elementor'da sekmeli bir resim galerisi nasıl oluşturulur

Kaplama

Bu blok, kaplama rengini, vurgulu kaplama rengini, karışım modunu ve vurgulu animasyonu ayarlamanıza olanak tanır.

içerik

Bu blok, görüntünün içeriğini özelleştirmenizi sağlar. İçerik, görüntünün başlığını ve açıklamasını ifade eder. Hizalamayı, dikey konumu, dolguyu, metin rengini ve tipografiyi (yazı tipi stili, yazı tipi ailesi ve yazı tipi boyutu) ayarlayabilirsiniz.

Filtre Çubuğu

Bu blok, filtreyi özelleştirmenizi sağlar. Hizalama, normal renk, işaret rengi, aktif renk, metin rengi, sekmeler arası boşluk ve tipografi ayarlayabilirsiniz.

Sonuçtan memnun kalana kadar bu ayarları değiştirebilirsiniz. Bittiğinde, düğmeye tıklayın YAYIN / GÜNCELLEME Sayfanızı yayınlamak veya güncellemek için sol panelin alt kısmındaki

Elementor Pro'yu Hemen Alın!

Sonuç

Burada ! Elementor'da sekmeli resim galerisinin nasıl oluşturulacağını gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa fbize 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ş.

...

Elementor: Bir Profil Kartı Nasıl Yakınlaştırılır

Elementor: Bir Profil Kartı Nasıl Yakınlaştırılır

Elementor sayfa oluşturucu eklentisi ile profil kartını nasıl yakınlaştıracağınızı öğrenmek ister misiniz?

Bu yeni Elementor eğitiminde, profilin adını ve sosyal ağ simgelerini gösterirken 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 Elementor'un bu sürümü tarafından desteklenen özel CSS kodunu kullanacağız.

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.

3 sütun bölümü

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.

Bir İç Bölüm widget'ı ekleyin

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 gölgesinde 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ın Başlık widget'ı. Başlık olarak Steve Jobs'a girin, Stil sekmesinde beyaz rengi seçin # FFFFFF. Tipografi'de, 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.

Elementor ile bir haritaya Yakınlaştırma uygulayın

Şimdi Sosyal Medya Simgeleri pencere aracını Dahili bölümüne sürükleyerek sosyal medya simgelerini ekleyin.

İçerik sekmesindeki sosyal ağ bağlantılarını Her sosyal ağ üzerine tıklayarak düzenleyin. Başka sosyal ağlar eklemek istiyorsanız, Ekle düğmesine tıklayın.bir 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.

Elementor ile bir haritaya Yakınlaştırma uygulayın

Ş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.

Elementor ile bir haritaya Yakınlaştırma uygulayın

Bu sütunu 2 kez çoğaltalım ve diğer 2 sütunu silelim.

Elementor ile bir haritaya Yakınlaştırma uygulayın

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ş.

...

Elementor: Efektli Hex Haritası Nasıl Oluşturulur

Elementor: Efektli Hex Haritası Nasıl Oluşturulur

Güçlü Sayfa Oluşturucu Elementor'u kullanarak vurgulu efektli bir altıgen harita oluşturmanız mı gerekiyor? 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:

vurgulu efektli altıgen harita oluşturma - Elementor

Bu öğreticiyi tamamlamak için ihtiyacınız olacak Elementor'un Pro sürümü, çünkü yalnızca Elementor'un bu sürümü tarafından desteklenen özel CSS kodunu kullanacağız.

Ayrıca şu kılavuzumuzu okuyun: Bir Web Sitesine Ekmek Kırıntıları Nasıl Eklenir Elementor ile

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.

3 sütun bölümü

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ı.

Bir İç Bölüm widget'ı ekleyin

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.

vurgulu efektli altıgen harita oluşturma - Elementor

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 #1917BC ve konumu 50, açı 140 ve opaklık 0.85

vurgulu efektli altıgen harita oluşturma - Elementor

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;
}
vurgulu efektli altıgen harita oluşturma - Elementor

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;
}
vurgulu efektli altıgen harita oluşturma - Elementor

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);
}
vurgulu efektli altıgen harita oluşturma - Elementor

Ardından orta sütunu seçelim ve sekmede gelişmiş, giriş altıgen anne alan içerisinde CSS sınıfları.

vurgulu efektli altıgen harita oluşturma - Elementor

Bu sütunu 2 kez çoğaltalım ve diğer 2 sütunu silelim.

vurgulu efektli altıgen harita oluşturma - Elementor

Diğer widget'ların arka plan resmini değiştirelim İç Bölüm, metin düzenleyicinin Başlığı ve içeriği ve ayrıca Arka Plan Yerleşimi degradelerinin renkleri. Şuna benzeyen bir sonuca sahip olmalısınız:

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ş.

...