Elementor ve PowerPack ile Açılış Sayfası Nasıl Oluşturulur

WordPress, ister bir blog, ister bir iş web sitesi veya karmaşık bir ERP olsun, herkesin çevrimiçi varlığını oluşturmasını kolaylaştırdı. WordPress temaları ve eklentileri, kullanıcıların bir uzman işe alma konusunda endişelenmelerine gerek kalmadan web sitelerini oluşturmalarını daha da kolaylaştırır. Sayfa Oluşturucu eklentileri, web sitelerinin WordPress ile oluşturulma şeklini dönüştürmede hayati bir rol oynamıştır. Elementor, böyle popüler bir sayfa oluşturucu eklentisidir.

Bir web tasarımcısıysanız ve kodlar hakkında endişelenmenize gerek kalmadan tasarımlarınızı hayata geçirmek istiyorsanız Elementor'u kullanabilirsiniz. Ama ya bir geliştirici iseniz? Bir geliştiriciyseniz, geliştirici dostu işlevselliği ve genişletilmesi kolay API'si nedeniyle Elementor'u da kullanabilirsiniz.

Bu gönderide, Elementor hakkında daha fazla bilgi edineceksiniz ve onu hızlı bir şekilde web siteleri, açılış sayfaları, açılır pencereler oluşturmak için Elementor eklentileriyle nasıl kullanabilirsiniz.

Elementor Nedir?

Elementor, WordPress için popüler bir Sayfa Oluşturucu eklentisidir. Elementor, bölümler ve sütunlar gibi temel yapısal öğelerle birlikte Widget adı verilen kullanıma hazır içerik blokları sağlar.

Bu widget'ları WordPress web sitenizdeki herhangi bir sayfaya sürükleyip bırakabilir ve ihtiyaçlarınıza göre özel bir düzen oluşturabilirsiniz.

Elementor Pro, herhangi bir sayfayı tasarlamak için kullanabileceğiniz 60'tan fazla widget ve bir sürü önceden tasarlanmış şablonla birlikte gelir.

Elementor'un Özellikleri

Elementor, web sitesi geliştirmenizi daha rahat ve daha hızlı hale getirebilecek birçok özellik ve işlevsellik ile birlikte gelir. Elementor'u sahip olmaya değer kılan tüm etkileyici özelliklerini görelim.

Hızlı ve Kullanımı Kolay

Elementor performans için optimize edilmiştir. Acemi bir kullanıcı olsanız bile, Elementor'da kullanımı ve zahmetsizce gezinmeyi çok kolay bulacaksınız. Elementor'un tasarım sürecinizde sizi geri çektiğini asla hissetmeyeceksiniz ve işleri sizin için sadece hızlı ve kolay hale getirecek.

Elementor hızla parlarken, Cloudways Elementor barındırma kullandığınızda Elementor'dan daha fazlasını elde edebilirsiniz. CW tamamen performansla ilgilidir ve sunucunuzun nasıl çalıştığı üzerinde süper kontrol sağlar. Güvenlik söz konusu olduğunda, Cloudways , sunucularınızı güvende ve emniyette tutmak için proaktif güvenlik uygulamaları tarafından yönetilen gerçekten güvenilir ve güvenli sunucular sunar. Cloudways ile gelen özelliklerin sayısı, bugün sektörde bulunması zor bir şeydir.

Önceden Tasarlanmış Sayfa Şablonları

Elementor ile, tek bir tıklamayla bir web sayfası oluşturmak için kullanabileceğiniz bir sürü önceden tasarlanmış şablon elde edersiniz. Açılış sayfası, hakkında sayfası vb. gibi hemen hemen her web sayfası kategorisi için şablonlar vardır ve web sitesi tasarım sürecini çok daha hızlı hale getirebilir.

Elementor Kitaplığı'nda iyi bir şablon bulamazsanız, üçüncü taraf Elementor şablonlarına göz atabilirsiniz. Gelişen bir tasarımcı ve geliştirici topluluğuyla Elementor'u bir sonraki seviyeye taşımak çok kolay.

Widget'larla Yüklendi

Hem Ücretsiz hem de Pro sürümleri Elementor, özellik yüklü widget'larla birlikte gelir. Başlıklar, metin düzenleyici, düğmeler gibi basit içerik widget'larından gönderiler ızgarası, oturum açma formu, WooCommerce, sosyal paylaşım gibi gelişmiş widget'lara kadar Elementor ile birçok işlevsellik elde edersiniz.

Widget'lar söz konusu olduğunda daha fazla güce sahip olmak istiyorsanız, üçüncü taraf Elementor eklentilerini deneyebilirsiniz. Elementor için PowerPack ile gitmenizi öneririz. Elementor için önde gelen bir eklentidir ve popüler PowerPack Beaver Builder eklentisinin arkasındaki aynı ekip tarafından oluşturulmuştur.

Elementor Açılır Pencere Oluşturucu

Pop-up oluşturucu, Elementor oluşturucuya yapılan en son eklemelerden biridir. Açılır pencere oluşturucu özelliği, web sitenizde üçüncü taraf bir açılır pencere oluşturucu eklentisi kullanma ihtiyacını ortadan kaldırır. Gelişmiş hedefleme kuralları ve işlevleriyle etkileyici açılır pencereler tasarlamak için Elementor'u kullanabilirsiniz.

Giriş formları, tam ekran paspaslar, indirimli açılır pencereler ve açılır pencere oluşturucu özelliğiyle olmayanlar oluşturabilirsiniz.

Genel Ayarlar

Bir web sitesi oluşturduğunuzda, tutarlı renk ayarlarına, tipografiye vb. sahip olmak önemlidir. Elementor'daki Global ayarlarla tasarım sürecinizi kolaylaştırmak için renkleri, yazı tiplerini ve hatta renk seçiciyi önceden özelleştirebilirsiniz.

Üstbilgi, Altbilgi, Arşivler vb. gibi Tema Parçaları oluşturun.

Elementor ile tasarımınız yalnızca bir sayfanın içerik alanıyla sınırlı değildir . Kod yazma konusunda endişelenmenize gerek kalmadan özel bir üstbilgi, altbilgi, kenar çubuğu ve web sitesinin hemen hemen her bölümünü oluşturabilirsiniz. Tüm bunlar, Elementor Pro'daki Tema Oluşturucu işlevi kullanılarak kolayca oluşturulabilir.

Dinamik İçerik

Elementor Pro'daki Dinamik İçerik işleviyle, WordPress özel alanlarından, ACF'den, Araç Setinden, Pod'lardan, MetaBox'tan veya diğer herhangi bir özel alan eklentisinden Dinamik Verileri/İçeriği görüntüleyebilirsiniz. Özel alanlardaki verileri kullanabilir ve bunları sitenizin herhangi bir bölümünde Elementor widget'ları ile görüntüleyebilirsiniz. Dinamik içerik hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Lite ve Pro sürümü

Elementor'un sunabileceği çok şey olsa da, kullanıcıların ona erişmek için büyük bir meblağ ödemesi gerekmez. Aslında Elementor'un Lite ve Pro olmak üzere iki sürümü vardır. Lite sürümünün kendisinde Elementor'un birçok özelliğine erişebilirsiniz. Her iki versiyonun da sunduğu kendi özellikleri vardır. İşte karar vermenize yardımcı olabilecek Elementor Lite ve Pro'nun ayrıntılı bir karşılaştırması.

Elementor için Güç Paketi

Elementor kesinlikle tüm pakettir. Minimal bir öğrenme açısıyla web sayfaları tasarlamaya başlamak için ihtiyacınız olan tek araç.

Elementor'u kullanırken kendinizi biraz kısıtlanmış hissettiğiniz zamanlar olabilir. Bunun için PowerPack Elementor eklentisi gibi iyi kodlanmış üçüncü taraf eklentiler kurtarmaya gelir. Bu eklenti, kategorisindeki en iyilerden biridir ve kullanıcılar için birçok özelleştirme seçeneğiyle mükemmel ve etkileyici widget'lar sunar.

Şu anda, PowerPack'in Pro sürümünde 50'den fazla widget var ve ekip, onu Elementor eklentileri arasında mükemmel bir seçim haline getiren yeni widget'lar eklemeye devam ediyor.

PowerPack, performans göz önünde bulundurularak uzman WordPress geliştiricileri ve tasarımcılarından oluşan bir ekip tarafından oluşturulmuştur. Eklenti iyi kodlanmıştır ve Elementor ve WordPress'in en son sürümleriyle uyumluluk için düzenli olarak güncellenir.

Harika web sayfaları oluşturmak için Elementor ve PowerPack eklentisini birlikte nasıl kullanabileceğinizi görelim.

Açılış Sayfası Oluşturma

Bu eğitimde, Elementor ve PowerPack Elementor eklentisi ile nasıl hızlı bir açılış sayfası oluşturabileceğinizi öğreneceksiniz. Kullanıcı dostu arayüz sayesinde Elementor'a Başlamak çok kolay.

Lütfen sitenizde hem Elementor hem de PowerPack'in kurulu olduğundan emin olun. Ücretsiz sürümleri aşağıdaki bağlantılardan edinebilirsiniz:

1. eleman
2. Elementor için PowerPack Lite

Elementor ile sayfa oluşturma

WordPress Yönetici Kontrol Panelinizde oturum açın ve Sayfalar altındaki Yeni Ekle seçeneğine tıklayın . Şimdi sayfanıza bir başlık/ad verin ve Elementor ile Düzenle düğmesini tıklayın.

Bu eğitimde, bir Pizzacı için bir açılış sayfası oluşturuyoruz, bu nedenle Sayfamızı buna göre adlandıracağız. İşte nihai sonucumuzun nasıl görünmesi gerektiği:

İlk bölümle başlayalım . Bunu yapmadan önce, düzenleyicide sol alt köşedeki küçük ayarlar simgesine tıklayarak düzeni Elementor Canvas olarak değiştirin.

Adım 1: Kahraman Bölümü

Kahraman bölümü bir arka plan görüntüsü, iki başlık widget'ı ve bir CTA düğmesinden oluşur.

Öncelikle artı simgesine tıklayın ve seçeneklerden tek bir sütun yapısı ekleyin. Şimdi bölüm ayarlarına gidin ve bölüm uzat seçeneğini etkinleştirin ve gelişmiş sekmesinden alt ve üst dolguyu 250'ye ayarlayın.

Şimdi, stil sekmesi> arka plan türü> Klasik'ten arka plan için istediğiniz görüntüyü seçebilir ve medya ekranından görüntüyü seçebilirsiniz.

Arka planı hazır hale getirdik. Şimdi kahraman bölümümüze başlıkları ve butonları ekleyelim.

Çift Başlık widget'ını sayfaya sürükleyip bırakın ve metni sırasıyla değiştirin. Şimdi, aşağıdaki resimde yaptığımız gibi fiyatı daha fazla vurgulamak için birinci ve ikinci başlığı buna göre ayırdığınızdan emin olun. Başlığın her iki kısmı için tipografiyi değiştirin .

Kahraman unvanınızı istediğiniz gibi yapmak için yapabileceğiniz başka birçok değişiklik var.

Değişiklikleri yaptıktan sonra, ikili başlığın altına başka bir Başlık widget'ını sürükleyip bırakın ve metin ve tipografi ayarlarını gerektiği gibi değiştirin, burada metin boyutunu 90 , yazı tipini Elsie ve yazı tipi ağırlığını 600 olarak değiştirdim .

Şimdi CTA butonunu ekleyeceğiz .

Başlık widget'ının hemen altındaki bölümde Elementor Düğmesi widget'ını sürükleyip bırakın. Şimdi düğmenin ayarlarını değiştirmeye başlayacağız.

Düğmede yaptığım değişiklikler şunlardır:

• Metin Şimdi Sipariş Edin olarak değiştirildi !
• Düğmeyi merkeze hizalayın.
• CTA bağlantısı eklendi
• Tipografi Elise olarak değiştirildi ; Yazı tipi, boyut ve ağırlık için sırasıyla 24;600 .
• Arka plan rengini kırmızı ( #ff0000 ) ve yazı tipi rengini beyaz ( #ff0000 ) olarak değiştirdi.
• Sırasıyla üst, sağ, alt, sol için 18, 40, 18, 40 dolgu eklendi.

Değişiklikleri yaptıktan sonra, kahraman bölümü böyle görünüyor.

2. Adım: Hakkında Bölümü

Şimdi Hakkında bölümünde çalışacağız, Devam edin ve “+” simgesine tıklayarak sayfaya iki sütunlu bir yapı ekleyin.

Şimdi buna benzer bir düzen oluşturmayı hedefliyoruz, bu nedenle sol sütuna bir başlık widget'ı, Metin düzenleyici widget'ı ve Görüşler widget'ını ekleyeceğiz. Sağ sütuna bir Başlık pencere aracı, Metin pencere aracı ve Düğme pencere aracı ekleyeceğiz.

Bölümdeki widget'ları sürükleyip bırakmaya başlayın ve bunları yukarıda verilen resimdeki gibi görünecek şekilde değiştirin. Başlığı ekleyin ve bunun için tipografiyi değiştirin .

İşte nasıl görüneceği:

Şimdi metin düzenleyiciyi sol sütundaki başlığın altına ekleyin ve tipografiyi aşağıda gösterilenle değiştirin.

Şimdi metin düzenleyici pencere aracının altına Referans Döngüsü pencere aracını ekleyeceğiz. Web sitenizde göstermek için "Öğeler" veya Görüşler ekleyin. Ayrıca, çok daha fazla özelleştirme gücü sunan PowerPack'in Görüşler widget'ını da kullanabilirsiniz.

Değişiklikleri yaptıktan sonra, hakkında bölümünüzün sol sütunu şöyle görünmelidir.

Şimdi sağ sütun için, bölüme biraz kontrast eklemek için arka planı ekleyin.

Şimdi sol sütunda yaptığımız başlığın bir kopyasını oluşturun ve sağ sütuna sürükleyip bırakın. Aynısını Metin Düzenleyici için de yapın çünkü bu sizi gereksiz fazlalıktan kurtaracak ve zamandan da tasarruf sağlayacaktır . Şimdi düğme için, Kahraman bölümündeki düğmeyi çoğaltın ve sürükleyip Hakkında bölümünün sağ sütununa taşıyın.

Dikey düzenleme sütununda> düzeni> dikey hizalama gelen Orta doğru sütun hizalamak ve size Hakkında bölümü hazır!

Bu, Hakkında bölümünün nihai sonucudur:

3. Adım: "Daha Fazla Bilgi" CTA bölümü

Pizzeria'dan bahseden başka bir bölüm ekleyeceğiz. Bu bölüm daha önce oluşturduğumuza benzer olacak, ancak yapı biraz farklı olacak.

Sonuç olarak, sonucumuzun şöyle görünmesini istiyoruz:

Burada benzer bir şey fark ettiniz mi?

Evet! Başlık, metin düzenleyici, daha önce oluşturduğumuza benzer. Bu nedenle, tüm widget'ları yeniden tasarlamak yerine, onları çoğaltıp yerine sürükleyeceğiz.

Haydi Yapalım şunu!

Öncelikle yeni bir iki sütunlu yapı ekleyin ve bölüm ayarlarına gidin ve medya penceresinden arka plan görüntüsünü ekleyin ve panelin daha geniş görünmesi için 100'lük üst dolgu ekleyin. Ayrıca, ayarlardan Uzatma bölümü seçeneğini etkinleştirin .

Şimdi önceki bölüme gidin ve başlığı, metin düzenleyiciyi ve düğme widget'ını çoğaltın . Bunu , widget'a sağ tıklayıp çoğaltma seçeneğini seçerek yapabilirsiniz . Kopyalandıktan sonra, yinelenen widget'ları yeni konumlarına sürükleyip bırakın.

Bu bölümün nasıl göründüğü:

Şimdi sağ sütun için görüntü widget'ını sürükleyip bırakın ve medya galerisinden görüntüyü seçin. Resmi Resim boyutu vb. açısından ayarlayın ve işiniz bittiğinde, bölüm böyle görünüyor.

4. Adım: İletişim/Sipariş bölümü

Bu, kullanıcının sipariş vermesine yardımcı olacak CTA bölümüdür. Şimdi, tüm bu bölüm neleri içermeli? Bakalım burada ne yapmayı hedefliyoruz.

PowerPack tarafından iki başlık ve metin düzenleyici widget'ı, bir iletişim formu ve fiyat listesi menüsü widget'ı oluşturmamız gerekiyor.

Her şeyden önce, başlığın ve metin düzenleyicinin tasarımını ve görünümünü aynı tutmamız gerektiğini biliyoruz. Devam edip önceki bölümden kopyalayabilir ve buraya yerleştirebilirsiniz. Şimdi oradaki metni istediğinizle değiştirin.

Basit bir sürükle ve bırak işlemiyle bir iletişim formu oluşturmak için Elementor Pro'daki Formlar pencere aracını kullanabilirsiniz. Bunu yaptığınızda, iletişim formu sayfada görünecektir. Artık formlarda daha fazla özelleştirme yapabilirsiniz. İşte yaptığım değişiklikler:

• Form alanları eklendi ve alan boyutu değiştirildi.
• Düğmenin metni, boyutu ve hizalaması değiştirildi .
• E-postayı gönder düğmesi eylemi olarak ekledi ve e-posta ayrıntılarını ekledi.
• Sütun boşluklarını ayarladı ve metin ve alanların tipografisini ve renklerini yeniden düzenledi
• İletişim formunun daha çekici görünmesi için gerekli diğer değişiklikler.

Gravity Forms, WPForms, Ninja Forms, vb. gibi herhangi bir iletişim formu eklentisi kullanıyorsanız, Forma Elementor ile stil vermek için PowerPack'in form şekillendirici widget'ını kullanabilirsiniz.

Şimdi, sağ sütunda, ürünler için Fiyat listesini ekleyeceğiz. Bunun için PowerPack'in Fiyat Menüsü widget'ını kullanacağız. Basitçe sürükleyip bırakın, ayrıntıları ekleyin ve aynı şekilde tasarımı ve düzeni değiştirin. Tüm bölüm şöyle görünecek:

Şimdi Çekiliş'e Girin!

Cloudways Tarafından Barındırılan PowerPack Giveaway

Sarıyor!

Tüm değişiklikleri yaptıktan sonra, tüm düzenimiz böyle görünecek.

Artık Elementor ve Elementor için PowerPack ile kendiniz için de güzel görünümlü bir düzen oluşturabilirsiniz. Elementor birçok özellik sunarken, PowerPack yaratıcı, işlevsellik odaklı widget'larla bunu daha da genişletiyor. Araç setinizdeki 50'den fazla son derece kullanışlı widget ile web sitelerini daha hızlı oluşturabilirsiniz.

Elementor ve PowerPack size zaman ve emek tasarrufu sağlayabilir ve web tasarım işinizi büyütmenize yardımcı olabilir. Sadece bu değil, her iki ürün de harika bir WordPress uzman ekibi tarafından destekleniyor, böylece içiniz tamamen rahat olsun.