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ı

Website Design From Scratch

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

Website Design From Scratch
Yeni Sayfa Ekleme

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

Adding Widget
Widget Ekleme

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

General settings

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

Website Design From Scratch

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.

Website Design From Scratch
Stil Seçeneği

Son Önizleme

Website Design From Scratch

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.

Adding Carousel Widget
Carousel Widget'ı Ekleme

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.

image carousel

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.

Editing Slides
Slaytları Düzenleme

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.

Settings of Slides
Slayt Ayarları

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.

Website Design From Scratch

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

how to design a website for free
Tasarımdan sonra ö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.

Adding Slider widget
Kaydırıcı widget'ını ekleme

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

Website Design From Scratch
Widget için Seçenekler

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

Adding images
Resim ekleme

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

Stylizing the widget
Widget'ı stilize etme

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

How to design slider
Ön izleme

Daha iyi bir fikir edinmek için belgelerimizi okuyun. Veya aşağıdaki makaleyi okuyabilirsiniz?

Elementor ve Happy Addons ile WordPress'te Slider Nasıl Oluşturulur

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

Website Design From Scratch

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

Website Design From Scratch

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.

Website Design From Scratch

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

Website Design From Scratch

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.

Website Design From Scratch

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

How to design a website

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.

Website Design From Scratch
Widget Ekleme

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.

Website Design From Scratch
Logo Izgarası için Genel Seçenekler

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.

improve website design
Resim Ekleme

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.

logo-grid

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.

Website Design From Scratch
Ayarlar seçeneği

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

How to design a website
Sarıcı Bağlantı

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.

Website Design From Scratch
Stil oluşturma widget'ı

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

How to Add Logo Grid
Tasarımın sonlandırılması

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

Website Design From Scratch

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

Diğer Özellikleri Kontrol Edeyim

İ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. ?

Mutlu Eklentileri Kaçırmayın