HappyAddons ile WordPress'te Elementor Loop Grid Widget'ı Nasıl Kullanılır?

Görsel olarak çekici ve iyi işlevsel web siteleri tasarlamak, etkileşim oluşturmak, hedef kitleyi yakalamak ve satışları artırmak isteyen herkes için bir zorunluluktur. Bu süreci basitleştirmek için Elementor gibi web tasarım araçları ve eklentileri sürekli olarak yenilikçi özellikler ve modüller sunmaktadır.

Döngü Izgarası o kadar yeni bir widget ki Elementor ve eklentileri bizim için çok yakın zamanda geliştirip yayınladı. Yenilikçi widget, içeriğinizi güzelce organize edilmiş ızgara düzenlerinde oluşturmanıza ve görüntülemenize olanak tanır.

Bu widget hakkında ayrıntılı olarak fazla bir şey bilmiyorsanız endişelenmeyin. Bu eğitim yazısında, Elementor Loop Grid widget'ının WordPress'te HappyAddons ile nasıl kullanılacağına dair adım adım bir kılavuzu ele alacağız. Bu öğreticiyi hem yararlı hem de ilginç bulacağınızı umuyoruz.

Elementor'da Döngü Izgarası Nedir?

Döngü Izgarası, web sitenizde farklı içerik türlerini görüntülemek ve bunları istediğiniz zaman özelleştirmek için dinamik düzenler oluşturmanıza olanak tanıyan çok işlevli bir Elementor widget'ıdır. Bu widget özellikle blog yazılarını, ürünleri ve portföy içeriğini ızgara formatında görüntülemede kullanışlıdır.

Bu widget, dinamik içeriği görüntülemek için oldukça kullanışlıdır. Yeni gönderiler, ürünler veya istenen içerik yayınlanır yayınlanmaz, bunlar manuel girişe gerek kalmadan widget aracılığıyla otomatik olarak görüntülenir. İçeriği dilediğiniz gibi göstermek için benzersiz şablonlar oluşturabilirsiniz.

Bir sonraki bölümde widget'ın WordPress'te nasıl kullanılacağını açıklayacağız. Okumaya devam edin!

Elementor Döngü Izgarası Widget'ı Nasıl Kullanılır

Bu widget'ı web sitenizde kullanabilmeniz için aşağıdaki eklentilerin yüklü olması gerekir. Aşağıdaki ekteki bağlantılara tıklayarak bunları edinin.

• Elementor
• Mutlu Eklentiler
• HappyAddons Pro

Hazır olduklarında, eğitimin adımlarını açıklandığı gibi izlemeye başlayın.

Adım 01: Döngü Izgarası Widget'ını Sayfanıza Sürükleyip Bırakın

Widget'ı eklemek istediğiniz sayfayı açın. Daha sonra widget'ın ekleneceği bölüme karar verin.

Elementor paneli arama kutusuna Mutlu Döngü Izgarası yazın. Widget göründüğünde, onu tuvalin istediğiniz alanına sürükleyip bırakın.

Adım 02: Döngü Izgarası Şablonu Oluşturun

Widget'ı ekledikten sonra bir döngü şablonu seçmeniz istenecektir. Zaten hazır bir şablonunuz varsa onu seçebilirsiniz. Aksi takdirde sıfırdan bir tane oluşturmanız gerekir.

Yani sıfırdan oluşturmak için Şablon Oluştur düğmesini tıklayın.

Yeni bir sayfaya yönlendirileceksiniz. Döngü Şablonu sekmesi seçiliyken Yeni Ekle düğmesini tıklayın.

Şablona bir ad verin . Örneğin, buna 'Döngü Şablonu Bir' adını verdik. Ardından Şablon Oluştur düğmesine basın .

Yeni bir tuval açılacak. Burada yine Döngü Izgarası şablonunuzun düzenini tasarlamak istediğiniz widget'ları sürükleyip bırakabilirsiniz.

Elementor web sitelerinde nasıl açılır pencere oluşturulacağını öğrenmek için bu kılavuza göz atın.

Adım 03: Döngü Izgarası Şablonu için Bir Düzen Tasarlayın

Blog yazılarımızı dinamik olarak sergilemek için bu döngü ızgarasını oluşturacağımızı varsayalım. Bu nedenle şablonu oluşturmak için gönderi widget'larını kullanacağız.

# Öne Çıkan Resim Gönderin

Gönderi özelliği görsellerinin görüntülenmesi, yazı ızgarası bölümünde bir zorunluluktur. Bunu yapmak için widget'ı bulun ve tuvalin üzerine bırakın.

# Gönderi Bilgisi

Gönderi Bilgileri widget'ını ekleyerek gönderinin yazarını, yayınlanma tarihini ve ne zaman yayınlandığını gösterebilirsiniz. Widget'ı öne çıkan görselin altına eklemek daha iyidir.

Widget'ın herhangi bir öğesini kaldırmak istiyorsanız yanındaki çarpı (x) simgesine tıklamanız yeterlidir. Benzer şekilde, yeni bir öğe eklemek için + Öğe Ekle düğmesini tıklayın.

Stil sekmesine gelin. Widget'ın metinlerinin ve simgelerinin rengini, kalınlığını ve hizalamasını değiştirmek için bu sekmede seçenekler bulacaksınız.

# Gönderi Başlığı

Gönderi Başlığı widget'ını Gönderi Bilgileri widget'ının altına sürükleyip bırakın.

İçerik sekmesinin altında HTML etiketini, boyutunu ve hizalamasını özelleştirme seçeneklerine sahip olacaksınız. Gerekli değişiklikleri gerektiği gibi yapın.

Stil sekmesine gelin. Başlık rengini ve tipografisini istediğiniz gibi stilize edebilirsiniz.

# Yazıdan Alıntı

Şablona Gönderi Alıntısı widget'ını ekleyerek, Döngü Izgarası bölümünde ilgili gönderilerin özetini veya alıntılarını görüntüleyebilirsiniz. Başlığın altına Yazı Alıntısı widget'ını bulun ve ekleyin.

Aynı şekilde yukarıda gösterildiği gibi Stil sekmesinden metin rengini ve tipografisini özelleştirebilirsiniz.

Adım 04: Mobil Cihazlar için Şablon Düzenini Optimize Edin

Şablon düzeninizi masaüstü bilgisayarların yanı sıra tüm cihaz türleri (tabletler ve cep telefonları) için optimize etmelisiniz. Aksi takdirde, diğer cihazlardaki kullanıcılar bu widget'ı mobil ve tablet cihazlarda keşfederken iyi bir deneyim yaşamayacaktır.

Bu nedenle şablon düzenini optimize etmek için Elementor panelinin alt kısmındaki Duyarlı Mod seçeneğini tıklayın. Şablonda, farklı cihaz modları (masaüstü, tablet ve cep telefonu) arasında geçiş yapma seçeneğini de içeren bir üst çubuk görünecektir.

Şimdi farklı cihaz modlarına geçin ve şablon düzeninin farklı cihazlar için mükemmel olup olmadığına bakın. Mükemmel değilse şablon öğelerini gerektiği gibi yeniden boyutlandırın ve özelleştirin.

Umarım bunu yaparak şablonu tüm ekran boyutlarına duyarlı hale getirebilirsiniz.

Burada, bir siteyi mobil duyarlı hale getirirken dikkate alınması gereken hususlara ilişkin bir kılavuz bulunmaktadır.

# Şablonu Yayınla

İşiniz bittiğinde Elementor panelindeki Yayınla düğmesini tıklayarak şablonu yayınlayın .

Adım 04: Ana Kanvasa Gelin ve Döngü Şablonunu Seçin

Ana Elementor tuvaline gelin. Döngü Izgarası bölümünü seçin. Düzen bölümünün altında Döngü Şablonu Seçme seçeneğini bulacaksınız.

Şablonu kaydettiğiniz adı yazın. Yazıldıktan sonra şablon gerçek zamanlı olarak görünecektir. Kanvas üzerinde görüntülemek için şablonu tıklayın.

Döngü Izgarası şablonu seçildiğinde, yayınlanan gönderilerinizi aşağıdaki resimdeki gibi ızgara formatında gösterecektir.

Izgara, varsayılan ayarlarla birlikte geldiğinden garip görünebilir. Artık düzenini daha da özelleştirebilirsiniz.

Adım 05: Döngü Izgarası Bölümünü Özelleştirin ve Stilize Edin

Düzen bölümünden sütun numarasını, sayfa başına gönderiyi ve eşit yüksekliği seçersiniz. Gerektiğinde gerekli yapılandırmayı yapın.

Bu eğitim için sayfa başına üç sütun ve üç gönderi tuttuk.

# Sorguyu Yapılandır

Daha sonra Sorgu kısmına gelin.

Döngü Izgarası widget'ında çeşitli kaynaklardan gelen içeriği görüntüleyebilirsiniz. Varsayılan olarak gönderiler ızgara biçiminde görüntülenir. Ancak isterseniz sayfaları veya açılış sayfalarını görüntüleyebilirsiniz.

Gönderi Türü seçeneğinin yanındaki açılır simgeye tıklayın. İstediğiniz içerik türünü seçin.

Her gönderiyi bir etiket veya kategoriyle kaydetmelisiniz. Yalnızca belirli bir yazara, etikete veya kategoriye ait içeriği görüntülemek istiyorsanız Dahil Etme Kişisi'nin altındaki + artı simgesini tıklayın.

Yazarlar veya Koşullar'ı seçin. Her ikisini de seçebilirsiniz.

Dahil etme ölçütü seçildiğinde, yazar adlarını ve terimlerini ilgili alanlara yazın. İçerik anında filtrelenecek ve döngü kılavuzunda yalnızca bu belirli yazar ve terimin içerikleri görüntülenecektir.

Diğer sorgu seçeneklerini istediğiniz gibi yapılandırın. Umarım bunları kendin yapabilirsin.

Adım 06: Döngü Izgarası Bölümü için Sayfalandırma Seçeneğini Yapılandırma

Sayfalandırma ve Daha Fazlasını Yükleme bölümünü genişletin.

Sayfalandırma'nın yanındaki açılır simgeyi tıklayın. İstediğiniz seçeneği seçin.

Sayılar + Önceki/Sonraki'yi seçtik. Resimde bu sayfalandırma seçeneğinin widget'ın altında görüntülendiğini görebilirsiniz.

Adım 07: Döngü Izgarası Widget'ının Düzenini Stilize Edin

Stiller sekmesine gidin. Widget'ın Düzenini, Öğe Kutusunu ve Sayfalandırmasını özelleştirmek ve stilize etmek için seçenekler bulacaksınız.

Öncelikle Düzen bölümünü genişletelim. Sütun Boşluğunu ve Satır Boşluğunu yapılandırmanıza olanak tanır. Bunu gerektiği gibi yapın.

Benzer şekilde Öğe Kutusu bölümünü genişletin. Dolgu , Arka Plan Türü (renk veya görüntü), Kutu Gölgesi, Kenarlık Türleri ve Kenarlık Yarıçapı ekleyebilirsiniz.

Bu eğitim için dolgu, yarıçap ve arka plan rengi ekledik. Aynısını kendiniz de yapın.

Aynı şekilde widget'ın rengini, tipografisini, dolgusunu, yarıçapını, boşluğunu ve sayfalandırma seçeneklerini stilize edebilirsiniz.

Not: Biraz göz alıcı görünüyor, değil mi? Tasarımın bu aşamasında döngü ızgarası şablonunun biraz daha stilize edilmesi ve özelleştirilmesi gerektiğini görebilirsiniz. Ama nasıl yapmalı? Bir sonraki adımda gösterilir.

Adım 08: Döngü Izgarası Şablonunu Yeniden Özelleştirin

İlk önce şablonu bulmanız gerekiyor. HappyAddons ile tasarladığınız gibi WordPress Kontrol Panelinize gidin. Ardından HappyAddons > Tema Oluşturucu > Döngü Şablonu'na gidin.

Şablonu bulun ve Elementor ile Düzenle seçeneğiyle açın.

Örneğin Okumaya Devam Et >> metninin tipografisini değiştirdik.

İşlem tamamlandıktan sonra değişiklikleri güncelleyin .

Adım 09: Değişiklikleri Önizleyin

Tekrar ana tuvale gidin. Açılır simgeyi seçin. Ardından Taslağı Kaydet seçeneğini tıklayın.

Taslak kaydedildikten sonra tuvali yeniden yükleyin . Şablonda yaptığınız değişiklikleri sayfada göreceksiniz.

Böylece Döngü Izgarası şablonunu istediğiniz zaman özelleştirebilirsiniz.

Adım 10: Döngü Izgarası Tasarımını Yayınlayın

Umarım Döngü Izgarası bölümünüz yayınlanmaya hazırdır. Elementor panelinin altındaki Yayınla düğmesini tıklayın.

Not: Yukarıda Döngü Izgarası şablonunu optimize ederken size gösterdiğimiz gibi, widget'ı mobil duyarlılık için mükemmel şekilde optimize ettiğinizden emin olun. Burada da süreç aynı olacak.

Elementor Döngü Izgarası Widget'ının Yaygın Kullanım Durumları

Şu ana kadar Döngü Izgarası widget'ının ne olduğunu ve onu Elementor web sitelerinizde nasıl kullanacağınızı anlattık. Şimdi widget'ın çok değerli bir izlenim bırakabileceği bazı önemli kullanım durumlarına hızlıca göz atalım.

1. Blog Düzenleri

Elementor Loop Grid, gönderileri dinamik ve hoş bir ızgarada oluşturmanıza olanak tanıdığı için blog düzenlerini basitleştirir. Uyumlu bir görünüm sağlamak için yazı başlıkları, alıntılar, resimler, meta veriler ve diğer şeyler de dahil olmak üzere içeriğin (yayınlar veya sayfalar) nasıl görüneceğini özelleştirebilirsiniz.

Elementor ile blog yazısı şablonunu nasıl tasarlayacağınızı öğrenin.

2. Ürün Izgaraları

Döngü Izgarası, e-Ticaret sitelerinde ürünleri düzgün ve düzenli bir ızgarada görüntülemek için çok değerlidir. Müşterilerinizin sitenizdeki ürünleri keşfederken iyi bir deneyim yaşaması için ürün resimlerini, fiyatlarını ve açıklamalarını göstermenize olanak tanır.

3. Portföy Vitrini

Döngü Izgarası widget'ı çizimlerinizi, makalelerinizi, vaka çalışmalarınızı ve portföy parçalarınızı ilgi çekici bir düzende düzenlemenize olanak tanır. Hatta portföyünüzü müşterileriniz ve çalışanlarınız için vurgulayabilmek için markanıza uyacak şekilde ızgarayı bile değiştirebilirsiniz.

Portföy sitesi oluşturmayı öğrenin.

4. Etkinlik Listeleri

Loop Grid ile etkinliklerinizi grafiksel olarak düzenleyebilirsiniz. Tarihler, yerler ve açıklamalar gibi etkinlik bilgilerini görsel olarak listelemenize olanak tanır; böylece insanlar yaklaşan etkinlikleri hızlı bir şekilde öğrenebilir.

5. Hizmet Listeleri

Ayrıca hizmetlerinizi stil seçenekleriyle ızgara formatında da sunabilirsiniz. Müşterilerin sunduklarınızı bir bakışta kolayca görebilmesi için hizmet başlıkları, açıklamalar ve fotoğraflar gibi temel öğeleri gösterebilirsiniz.

Kapanış

Artık Elementor Loop Grid widget'ının tüm ayrıntılarını bildiğinizi umuyoruz. Widget'ı nasıl kullanacağınızı öğrendikten sonra web siteniz için sonsuz tasarım olanakları yaratabilirsiniz. Sezgisel özellikleri ve kullanıcı dostu olması sayesinde, web sitenizde tutsak ziyaretçilere profesyonel bir etki bırakabilirsiniz.

Bu yazıda aradığınız her şeyi ele almak için elimizden geleni yaptık. Bir şeyi kaçırdığımızı fark ederseniz, aşağıdaki yorum kutusunu kullanarak bize bildirin. Ürünümüz hakkında daha fazla bilgi edinmek isterseniz destek kutusuna da sohbet bırakabilirsiniz.

Son olarak, zaman ayırdığınız ve sonuna kadar bizimle olduğunuz için teşekkür ederiz. Tadını çıkarın, mutlu okumalar!