Mutlu Eklentilerin Ücretsiz Widget'larını Kullanarak Elementor Sitenizi Geliştirin
Yayınlanan: 2020-03-13İyi tasarlanmış bir web sitesi her zaman ziyaretçiler üzerinde büyük bir etki bırakır. Bu dijital çağda olduğu gibi, kullanıcılar her zaman olağanüstü bir şey bekler. Özellikle trafik ile sürdürülebilir bir ilişki kurmak için, dikkat çekici bir görünüme sahip bir web sitesi bir artı puandır.
Acemiyseniz veya teknoloji uzmanı değilseniz korkmayın. Elementor ile önceden herhangi bir kodlama bilgisine sahip olmadan bir web sitesi tasarlayabilirsiniz. Ancak bazen Elementor tek başına hayal gücünüzü gerçek dünyada portrelemek için tüm olanakları sağlayamaz.
Bu durumda, Elementor iş akışının geliştiricisi olan Happy Elementor Eklentileri sizi kurtarabilir. Eşsiz özellikler ve widget'lardan oluşan zengin bir kitaplık ile birlikte gelir. Bu nedenle, sıfırdan yüksek işlevli bir web sitesi tasarımı oluşturmanıza yardımcı olabilir. ?
Bu makale boyunca, Happy Addons'un Image Compare , Image Carousel , Slider , Image Grid ve Logo Grid gibi bazı ücretsiz widget'larını kullanarak web sitenize nasıl benzersiz bir görünüm kazandırabileceğinizi göstereceğiz.
Her neyse, yeterince konuşma! tartışmaya geçelim.
Mutlu Eklentilerin Ücretsiz Widget'ını Kullanarak Sıfırdan Web Sitesi Tasarımı

Bu bölümde, Happy Addons'un ücretsiz widget'larını adım adım nasıl uygulayabileceğinizi göstereceğiz. Ancak prosedürü göstermeden önce, kısaca Happy Addons'un ne olduğunu ve nasıl çalıştığını öğrenelim.
Piyasada tonlarca muhteşem Elementor eklentisi bulunmaktadır. Ancak Happy Addons, güçlü widget'ları ve şaşırtıcı özellikleriyle kısa sürede kullanıcılardan büyük tepki aldı.
Genel olarak, Happy Addons'un temel amacı, Elementor web sitesi tasarımınızı bir sonraki seviyeye taşımaktır. Bu nedenle herhangi bir Elementor web sitesiyle mükemmel şekilde çalışır. Sonuç olarak, kullanıcıların birkaç saniye içinde olağanüstü tasarımlar oluşturmasına yardımcı olur.
Ancak, Happy Addons hakkında daha fazla bilgi edinmek için aşağıdaki videoyu kontrol edebilirsiniz.
Tamam, Happy Addons'un bazı popüler ücretsiz widget'larını tek tek tanıtalım. Ayrıca bunları web sitenize nasıl mükemmel şekilde uygulayacağınızı da bilin.
Ancak, başlamadan önce aşağıdaki gereksinimleri kontrol edin.
Gereksinimler
- WordPress
- eleman
- Mutlu Eklentiler (Ücretsiz)
WordPress , Elementor & Happy Addons'u sitenize başarıyla yüklediğinizi varsayalım.
? Resim Karşılaştırma Nasıl Kullanılır
Resim karşılaştırma widget'ı, Happy Addons'un kullanışlı bir özelliğidir. Bir ürün tanıtımcısı, tasarımcı veya e-ticaret mağazası sahibiyseniz, ürünlerinizi sergilemeniz için mükemmel bir araç olabilir. Bunu kullanarak aynı anda hem mevcut hem de önceki demoyu görüntüleyebilirsiniz.
Bunu yapmak için bir web sayfasına ihtiyacınız olacak. Ayrıca mevcut web sayfanıza da uygulayabilirsiniz.
Önce Pano>Sayfalar>Yeni sayfa ekle>Başlık>Elementor Canvas Seç>Elementor ile Düzenle'ye gidin

Ardından, sol kenar çubuğundan ' Görüntü Karşılaştırma ' widget'ını seçin. Ve işaretli alana sürükleyin.

Ardından genel bir pencere açılacaktır. Buradan özelleştirmek için mevcut seçenekleri görebilirsiniz. Görüntüler, Ayarlar ve Sarıcı Bağlantı .

Şimdi, 'Sonra' ve 'Önce' bölümlerine resim ekleyin. Ve aşağıdaki gibi görünecek. Web sitenizin düzenine göre oranı seçin. Burada orta boy 300*300 seçtik. Ve sonra bir etiket ekleyin.

Ardından, içeriği stilize etme zamanı. Bunu yapmak için ' Stil ' düğmesine tıklayın. Burada size en uygun seçenekleri deneyimleyebilirsiniz.

Son Önizleme

Ancak, Görüntü Karşılaştırma Widget'ı hakkındaki belgeleri okuyabilirsiniz. Ayrıca görsel bir fikir edinmek için aşağıdaki video eğitimine göz atın. ?
? Görüntü Döngüsü Nasıl Kullanılır
Image Carousel kullanma prosedürü, Happy Addons'un diğer widget'larına benzer. Yani endişelenecek bir şey yok. İlk işlemi onaylarsanız bu işlem sizin için daha kolay olacaktır. Sadece adımları takip edin ve alışın.
Genel olarak, bu widget kapsamlı bir şekilde ilginç bir resim ve metin döngüsü oluşturmaya yardımcı olur. Yine, bu widget, görüntüleri farklı şekillerde sergilemenize olanak tanır. Örneğin, ürün resimleri, profiller, hizmet resimleri vb. Bu nedenle, bunları verimli bir şekilde özelleştirmek için birçok seçeneğe sahip olacaksınız.
Bu widget'ı kullanmak için, widget'ı kullanmak istediğiniz sayfada gezinin. Ve sonra ' Elementor ile Düzenle'yi tıklayın. Widget'ı seçmeniz ve işaretli alana sürüklemeniz gereken bir sayfa açılacaktır.

Burada tam widget'ı özelleştirmek için bazı yararlı seçenekler bulacaksınız. ' Ön Ayar ', ' Slaytlar ', ' Ayarlar ' ve ' Sarmalayıcı Bağlantı ' gibi. Bu seçenekleri kullanarak her türlü tasarımı oluşturabilirsiniz.

Not: Ön ayar, listeden seçim yapmanız gereken önceden oluşturulmuş bir tasarım koleksiyonudur ve ardından tasarımınıza otomatik olarak uygulanır.
Bir sonraki adım, slaytların içine resimler eklemek ve bunları özelleştirmektir. Böylece resimleri ekledikten sonra daha fazla düzenleyebilirsiniz. Örneğin, Resim Başlığı , Açıklama , vb.

Ayar seçeneğinde, görüntülerin hareket hızını kontrol edebilirsiniz. Ayrıca otomatik oynatma hızını, slayt hızını ve daha fazlasını düzenleyebilirsiniz.

Ardından, web sitenizi sıfırdan tasarlamak için stilize etmeniz gerekir. Evet, ' Stil ' seçeneğinden bunu yapabilirsiniz. Peki bu kısımda neler yapabilirsiniz?
Düzenleyebilir, dönen öğe , slayt içeriği , gezinme oku ve noktalar vb.

Tüm süreci tamamladıktan sonra tasarımınızı tamamladığınızda 'Yayınla' butonuna tıklayın.
Happy Addons Image Carousel'i Uyguladıktan Sonra Son Önizleme

Ancak, net bir fikir ve adım adım kılavuz için belgelerimizden daha fazlasını bulun.
? Kaydırıcı Nasıl Kullanılır
Hepimiz bir kaydırıcının ne olduğunu veya temel işlevlerinin ne olduğunu biliyoruz. Bununla birlikte, genel anlamda, bir kaydırıcı resimlerden oluşur ve bir Web Sitesinin başlangıcında, özellikle başlık kısmından sonra veya kahraman afişi yerine kullanılır.
Farklı programlama dilleriyle bir kaydırıcı tasarlamak çok telaşlı. Ancak bu widget'ı kullanarak bir saniye içinde güzel kaydırıcılar oluşturabilirsiniz. Bu yüzden bunu nasıl yapabileceğinizi göstereceğiz.
Bunu yapmak için önce sol kenar çubuğundan widget'ı seçin ve işaretli alana sürükleyin.

Daha önce olduğu gibi, widget'ı özelleştirmek için tüm seçeneklere sahip olacaksınız.

Ardından web sitenizin türüne göre resimler ekleyin.

Ardından, tasarım anlayışınıza göre benzersiz bir stil verin.


Yani özelleştirmesi çok basit. Yapmanız gereken, bir tasarım çerçevesi çizmek ve ardından bunun için gitmek.
Mutlu Eklentiler Kaydırıcısını Uyguladıktan Sonra Son Önizleme

Daha iyi bir fikir edinmek için belgelerimizi okuyun. Veya aşağıdaki makaleyi okuyabilirsiniz?
? Görüntü Izgarası Nasıl Kullanılır
Şimdi, başka bir Happy Addons widget'ını kullanma zamanı. 'Görüntü Izgarası'. Bu widget'ı, web sitenizdeki en önemli resimleri veya herhangi bir portföyü görüntülemek için kullanabilirsiniz. Ayrıca çok kazançlı görünen güzel animasyonlar, güçlü efektler uyguluyorsunuz. Böylece web sitenizin görünümünü iyileştirir.
Tamam, 'Görüntü Izgarası' widget'ını kullanmak için, onu kullanmak istediğiniz sayfaya gidin. Ardından widget'ı seçin> işaretli alana sürükleyin.

Aynı şekilde, bu widget'ı özelleştirme seçeneğine sahip olacaksınız. Ardından, üzerine en uygun tasarımı uygulamanız yeterlidir.

Görüntüleri ekledikten sonra ekranın yanında görünecektir. Ve bunları kolayca özelleştirebilirsiniz. Güzelleştirmek için görsellere bir başlık veya amaç verebilirsiniz.

Ardından, 'Ayar' seçeneğinde bazı ilginç şeyler yapabilirsiniz. Tüm ızgarayı her zamanki gibi tutabilir veya kategorilere ayırabilirsiniz.

Widget'ı stilize etmek için 'Stil' seçeneğine tıklayın. Buradan kenar boşluğunu, dolguyu, kenarlık yarıçapını, gölge efektlerini, opaklığı ve daha fazlasını düzenleyebilirsiniz.

Bu yüzden tasarımı sonlandırdıktan sonra ' Yayınla ' butonuna tıklayın. Bu kadar.
Happy Addons Images Grid Uyguladıktan Sonra Son Önizleme

Her neyse, 'Image Grid' widget'ı hakkında daha fazla bilgi edinmek için aşağıdaki eğitim videosunu inceleyebilirsiniz.
? Logo Izgarası Nasıl Kullanılır
Logo Izgarası widget'ı, web sitesinde fotoğraflar, müşteri profilleri, özellikle logolar vb. gibi önemli öğeleri görüntülemenize olanak tanır. Bu widget'ın benzersizliği, web sitenizi çok güzel ve kazançlı hale getirir. Bu nedenle, kullanıcının dikkatini çekebilir ve ayrıca potansiyel müşteri adayları oluşturma şansı yüksektir.
Her neyse, bu bölümde bu widget'ı web siteniz için nasıl kullanabileceğinizi göstereceğiz. Başlayalım.
Benzer şekilde, uygun şekilde uygulayabileceğiniz bir sayfaya veya mevcut bir sayfaya ihtiyacınız olacak. Yeni sayfa eklemeye gidin> Elementor ile düzenle'ye tıklayın . Görevinizin başlayacağı beyaz bir tuvale yönlendirileceksiniz. Ardından widget'ı seçin ve işaretli alana sürükleyin.

Widget'ı ekledikten sonra, onu özelleştirmek için tüm seçenekleri göreceksiniz. Gibi, Ön Ayar, Logo ızgarası, Ayarlar ve Sarıcı bağlantısı . Ancak, önceki bölümde ön ayardan bahsetmiştik. Umarım bunu anlamışsınızdır.

Ardından, logolar ekleyin ve özelleştirin. İlk olarak, logo ızgarası seçeneğine tıklayın. Resimleri yükleyin veya galerinizden seçin. Bir marka adı verin. Aynı işlemin ardından, 'Öğe Ekle ' seçeneğine tıklayarak daha fazla logo ekleyin.

Gördüğünüz gibi logoları ekledikten sonra karşınıza çıkacaktır. Ayrıca bunları düzenlemek için seçenekler de mevcuttur. Tamamen sizin tasarım yeteneğiniz ve onları nasıl üretmek istediğinizle ilgili yaratıcılık duygunuzla ilgili.

Tamam, ayarlar seçeneğinde düzenlemek için daha fazla seçenek göreceksiniz. Görüntülerin boyutu, Izgara Düzeni ve kaç sütun istediğiniz.

Ayrıca ızgarada bir bağlantı sağlayabilirsiniz. Bunu yapmak için Wrapper Link'e tıklayın.

Widget'ı stilize etmek için 'Stil' seçeneğine tıklayın. Burada dolgu, kenar boşluğu, kenarlık, kutu gölgesi, kenarlık yarıçapı ve renkleri vb. düzenleyebilirsiniz.

Son olarak, tasarımı tamamladıysanız ' Yayınla ' düğmesine tıklayın. Bu kadar!
Happy Addons Logo Izgarasını Uyguladıktan Sonra Son Önizleme

Ancak, prosedür hakkında ayrıntılı bilgi edinmek için belgelerimizi okuyabilirsiniz. Veya aşağıdaki 'Logo Grid' eğitim videosunu inceleyebilirsiniz?
Mutlu Eklentilerle Daha Fazlasını Alacaksınız

Bu makalenin temel amacı, herkesin sıfırdan bir web sitesi tasarımı yapabilmesi için basit bir kılavuz sağlamaktır. Ancak, önceki bölümde size Mutlu Eklentilere hızlı bir bakış attık.
Şimdi, son derece benzersiz ancak uygulanması kolay bazı 'Happy Elementor Eklentileri' özellikleri hakkında kısaca bilgi verelim.
- Etki Alanları Arası Kopyala-Yapıştır : Bu özelliği kullanarak öğeleri bir etki alanından diğerine kolayca kopyalayabilir veya yapıştırabilirsiniz. Bu nedenle aynı görevi tekrar tekrar yapmak zorunda değilsiniz.
- Canlı Kopya : Web sitesini sıfırdan tasarlamakta güçlük çekiyorsanız, Mutlu Eklentilerin canlı kopyalama özelliği sizin için çok yararlı olabilir. Demo çalışmasını doğrudan web sitenize kopyalayabilirsiniz.
- Görüntü Maskeleme: Görüntü maskeleme özelliğini kullanarak görüntülerin orijinal boyutunu değiştirebilirsiniz. Ve düzeninize göre uygulayın.
- Wrapper Link : Kullanmak istediğiniz herhangi bir yere bağlantı verin. Bu özellik, herhangi bir bölüme, sütuna, widget'a bağlantı eklemenize yardımcı olacaktır.
- Görüntüleme Koşulu : Tarayıcınıza, işletim sisteminize ve verilerinize bağlı olarak, duruma göre içeriği gösterebilirsiniz.
Bunlar, Happy Addons'un bazı verimli özellikleridir. Ve bu özellikler, herhangi bir Elementor web sitesi ile mükemmel bir şekilde çalışacaktır. Böylece kesinlikle sıfırdan bir web sitesi tasarımı gerçekleştirme zahmetinizi azaltır. ?
İnsanların kolay bir arayüze ve iyi bir UI/UX tasarımına sahip bir siteyi ziyaret etmeyi sevdiklerinden bahsetmiyorum bile. Ve Happy Addons, hayal gücünüzü gerçeğe dönüştürmenize yardımcı olur. Ancak, eğitimde herhangi bir zorlukla karşılaşırsanız, lütfen yorum bölümünde bize bildirin. Kesinlikle cevap vereceğiz ve size bir çözüm sunacağız. ?