Ücretsiz WordPress ve Beaver Builder ile bir açılış sayfası nasıl yapılır
Bu Sahalot Puneet’in bir katkısı. Kendi web sitenizi oluşturmak istiyorsanız, Yön sayfası başlamak için iyi bir yerdir. Ve WordPress ile birkaç olasılık var. Hatta bazılarını bir süre önce söyledik (burada). Ancak o zamandan beri, bina eklentileri ve genel olarak kodsuz sitelerin oluşturulması alanında birçok gelişme gördük. Öyleyse bugün bazılarını keşfedelim. Okuyacağınız şey, Beaver Builder + kendi Hestia temamızla nasıl harika bir yön sayfası oluşturulacağına dair doğrudan bir öğreticidir. Beaver Builder PowerPack eklentisi adı verilen ve hepsi ücretsiz ürünler (“Lite” sürümünü kullanıyoruz).
Birçok insanın söylediği gibi en iyi yanı, bunu yapmak için kodlama hakkında bilgiye sahip olmanız gerekmediğidir. Bu, tüm süreci açıklayan Puneet Sahalot’dur: Yön sayfaları oluşturmak veya hatta tüm web sitelerini oluşturmak için ücretsiz olarak WordPress ve Beaver Builder ile bir sayfa nasıl oluşturulur. Örneğin Beaver Builder, bu konuda çok güçlü bir araçtır. Bu sürükleme ve gevşek alet kullanımı kolaydır ve yeni başlayanlar bile dakikalar içinde tam bir yön sayfası oluşturmak için alabilir.Bununla birlikte, Beaver Builder’ın çoğu hafif versiyonla sınırlı olan bazı olağanüstü özelliklere sahip olması gerekir. Bu nedenle, telafi etmek için ek bir eklenti-maviye üreticisi PowerPack eklentisi kullanacağız. Bu araç, daha fazla modül ve sayfa şablonları ekleyerek Beaver Builder’ın gücünü arttırır.
Ayrıca, bu makalede WordPress ile talimatlar oluşturma şekli, Hestia temasını kullanmaktır. Bu iyi tasarlanmış bir temadır ve özellikle başlık navigasyon alanında ve sitelerde iyi ayarlama özellikleri sunar – daha sonra çok yararlı olacak bir şeydir. Bu makalenin sonunda: Beaver Builder’ı iyi anlayacaksınız,
Hestia temaları ve sahip olabileceğiniz diğer temalarla nasıl kullanılacağını bileceksiniz,
Çok ilginç bir yön sayfası oluşturabileceksiniz,
Beaver Builder PowerPack eklentisi gibi yeni sofistike araçlar hakkında bilgi edineceksiniz.
#Wordpress ve @Beaverbuilder ile bir yön sayfası nasıl oluşturulur
Tweet için tıklayın
Şimdi, bu WordPress ile bir yön sayfasının nasıl oluşturulacağına dair bir eğitim için, üç ürünün (Hestia, Beaver Builder ve Beaver Builder PowerPack eklentisi) Lite sürümünü (ücretsiz) kullanacağım.
Yukarı git
Başlamadan önce tam olarak inşa ettiğimiz şey, önce aynı sayfada olduğumuzdan emin olalım ve Beaver Builder’ın yardımıyla ne yapacağımızı anlayalım. Buradaki ana amacımız, WPBeaaverAddons.com-Home Beaver Builder PowerPack eklentisiyle mümkün olduğunca yakın görünecek bir web sitesi oluşturmaktır. İnandığım tasarım evrenseldir ve Beaver Builder’ın etkili bir şekilde nasıl kullanılacağı konusunda bizi eğitmek için yeterli bireysel unsura sahiptir. Tabii ki, yaptığımız tasarım evrenseldir, böylece her türlü ürün veya hizmet için devam edebilir ve kullanabilirsiniz.
Nihai sonuçlar aşağıdadır:
İsterseniz sayfayı kolayca değiştirebilirsiniz ve en iyi yanı, bir kod satırına dokunmadan yapabilmenizdir. İhtiyacınız olan araçlar ve bu yön sayfasını oluşturmak için nerede bulabileceğiniz, şunları kullanacağız:
Hestia Yazar: Temaisle
% 96 Sıralama 3.085.688 İndir Sürüm 3.0.20
Daha fazla bilgi
Hestia.3.0.20.zip Önizleme Son tema güncellendi: 14 Aralık 2021
% 96 Sıralama 3.085.688 İndir Sürüm 3.0.20
Wordpress.org tema sayfası
Hesti
WordPress Page Maker-Author’s Otter Maker: Berangan Bina Ekibi
% 96 sıralama 200.000+ WP 4.6+ kurulum gerektirir
Daha fazla bilgi
Beaver-Builder-Lite-Commercial.2.5.1.1.zip Güncel Sürüm: 2.5.1.1 Son Güncelleme: 24 Ocak 2022
% 96 sıralama 200.000+ WP 4.6+ kurulum gerektirir
Wordpress.org eklenti sayfası
WordPress Page Maker-Beaver Maker
Beaver Builder için Powerpack Lite Yazar: Beaver Addons
% 100 sıralama 10.000+ WP 4.6+ yükleme gerektirir
Daha fazla bilgi
PowerPack-Addon-For-Beaver-Builder.zip Mevcut Sürüm: 1.2.9.3 Son Güncelleme: 10 Ocak 2022
% 100 sıralama 10.000+ WP 4.6+ yükleme gerektirir
Wordpress.org eklenti sayfası
Beaver Builder için Powerpack Lite
Yukarıdaki üç ürünün pro sürümü ile daha zengin bir yön sayfası oluşturabiliriz. Ancak, para harcamak zorunda kalmadan önce bu aracın gücünü anlamanızı istiyorum, bu yüzden ücretsiz sürümü kullanmanın en iyi adım olacağını düşünüyorum.
Yukarı git
Bir sayfa yapmaya başlamadan önce Berang Builder’ı anlayın, önce bazı temel bilgileri anlayalım. Beaver Builder, içeriği sayfaya nasıl ayarlar: a) Hat hattı oluşturma sayfaları düzeni. Her satır sütunlara bölünebilir ve ardından sütuna farklı öğeler (modüller) ekleyebilirsiniz. Çizgiler nasıl eklenir ve değiştirilir:
Adım 1: İçerik Ekle düğmesini ve ardından Hat Düzeni düğmesini tıklayın.
Adım 2: Sürükleyin ve satırı sayfaya çıkarın.
Adım 3: Bunu bitirdikten sonra, köşedeki küçük montaj kilit simgesini tıklayın. Bu, genişlik, yükseklik, yanıt verme, arka plan vb. Gibi çizgi ayarlarını düzenlemenize olanak tanır.
b) Modül modülü, avlunun kendisinin yapı taşıdır. Bunlar sayfaya sürüklediğiniz ve kaybettiğiniz öğelerdir. Her şey olabilir, başlıklar, metinler, görüntüler, kaydırıcılar, zamanlayıcılar ve daha fazlası.
Modül nasıl eklenir ve değiştirilir:
Adım 1: İçerik Ekle düğmesini ve ardından modül seçeneğini tıklayın.
Adım 2: Modülü sayfaya sürükleyin ve çıkarın.
Adım 3: Bunu yaptıktan sonra modül ayarları görünecektir. Bu, verilen modül ayarlarını düzenlemenize olanak tanır. Ayarlar penceresi modülden modüle değişir.
Bu, Beaver Builder ile nasıl çalışılacağının temellerini özetler. Basit, değil mi?
Yukarı git
Hazır olmak
WordPress ve Beaver Builder ile bir yön sayfası oluşturacağımız ve bunun sonuncusunu ilk kez kullandığınızı varsayalım, Beaver Builder’ı tam geniş bir şablonla nasıl başlatacağınızı öğrenelim.
Bunu yapmak için önce gösterge tablosundan yeni bir sayfa ekleyin:
Şimdi, sayfanızı adlandırın ve sayfa özniteliğinin altında, sayfa üreticisinin tam genişliğini şablon olarak seçin. Ardından, Beaver’ı etkinleştirmek için Sayfa Oluşturucu düğmesini tıklayın: Tam Genişlik Sayfa Oluşturucuyu bir şablon olarak kullanmamızın nedeni, tam genişliğin genellikle standart yön sayfası için en iyi düzen türü olmasıdır. Sisi Bilah, kullanıcıları ana içerikten uzaklaştırma eğilimindedir ve bunun raf sayfamızda olmasını istemiyoruz.
Yukarı git
Başlayalım! Burada, Powerpack ile birlikte Beaver Builder’ı kullanarak adım adım WordPress ile bir açılış sayfası nasıl oluşturacağınızı göstereceğim. Ancak, daha önce tasarlanmış yönlendirilmiş sayfa ile başlamayı tercih ediyorsanız, Pro Beaver Builder sürümüyle alabilirsiniz. Bu zamandan tasarruf edebilir. Daha fazla sayfa şablonu almak için Beaver Builder PowerPack Add-on Pro’yu da satın alabilirsiniz. İçinde 250’den fazla şablon var. İlgileniyorsanız tam listeye bakın. Yukarı git
Adım 1: Kahraman Bölümü Önce, sayfanın üstünde bir sıra sütuna ihtiyacımız olacak.
Yeterince sessiz ve başlamak için sütunu çıkarın. Düzenimi tam olarak değiştirdim (bunu tüm çizgiler için yapacağız).
Şimdi arka plan için; Arka plan seçeneğini hiçbirinden gradyan olarak değiştirin ve rengin seçin. Değişiklikleri kaydetmek için Kaydet’i tıklayın:
Sonra bir başlığa ihtiyacımız var. Bu nedenle, PowerPack modülünden akıllı başlık modülünü ekleyin. Lütfen ve kendi alanlarına başlık ve altyazıları girin. Tipografiyi dileklerinize göre değiştirin. Tamamlandığında Kaydet’i tıklayın:
Şimdi bir düğmeye ihtiyacımız olacak. Çift düğme modülünden geçelim. Lütfen ve ekleyin. Bunu yaparken etiketi düğmeye değiştirin ve ardından metinden sonra istenen simgeyi ekleyin. Bunu her iki düğme için de yapın. Şimdi, stil sekmesini açın ve her iki düğmenin arka plan rengini, havada kalmayı ve kenar rengini değiştirin. Düğme için farklı renkler ayarladım, böylece ilk düğme daha fazla dikkat çekecek. Bir tipografi sekmesi açabilir ve isterseniz yazı tiplerini değiştirebilirsiniz. Büyük bir kahramanın her kısmı bir görüntü gerektirir, bunun için görüntü modülünü ekleyin ve galeriden bir resim seçin. Kenar boşluğunu, görüntünün alt kısmının satırın düzeninin mükemmel bir şekilde üzerinde olacak şekilde ayarlayın. Bittiğinde Kaydet’i tıklayın:
Sonuç bu – en iyi kahramanlarımız:
Şimdi, her sütuna bilgi kutusu modülünü ekleyin. Ayarlar göründüğünde, uygun başlık ve açıklama kutusunu verin. Ayrıca, başlığın üstünde bir simge istiyorsanız, listeden simgeyi seçebilirsiniz. İsteğe bağlı olarak, tipografik sekmeyi açın ve başlık metninin rengini değiştirin. Değişiklikleri tamamladıktan sonra, Kaydet düğmesini tıklayın: Diğer tüm sütunlar için bu adımları tekrarlayın ve ayrıntıları değiştirin. Tamamlandıktan sonra özellik bölümü gibi görünecek olan budur:
Yukarı git
Adım 3: İnceleme Bölümü İnceleme Bölümü, aynı yöntemle başka bir satır ekleyin ve bu çizgiyi de dolu hale getirin. Görüntü modülünü satıra ekleyin ve istenen görüntüyü seçin. Budama seçeneğini tıklayın ve listeden Circle seçeneğini seçin. Resmin ortasını düzleştirin ve boyutu küçük resim boyutuna değiştirin. Bittiğinde Kaydet’i tıklayın:
Şimdi inceleme için:
Görüntünün altına metin düzenleyici modülünü ekleyin, Bir inceleme yıldızının resmini ekleyin, Yorum ekle, Her şeyi ortaya uyumlu hale getirin.
Bittiğinde Kaydet düğmesini tıklayın: Ardından, metin düzenleyicisinin altındaki iki sütunun düzenini ekleyin.
İlk sütunda, oradaki müşterileriniz hakkında/hakkında metin editörleri ve bazı metinler ekleyin.
İkinci sütunda bir fotoğraf modülü ekleyin ve en ünlü müşteri loganızı ekleyin. Sütunun boyutunu buna göre değiştirin:
Bu son sonuç – Müşteri İnceleme Bölümümüz:
Yukarı git
Adım 4: Bu şablon bölümü, daha önce üzerinde çalıştığımız kahramanla aşağı yukarı aynıdır. Buna akıllı başlık, çift düğmeler ve alttaki görüntüler dahildir. Satırın arka planı da gradyana ayarlanmıştır – eskisi ile aynıdır. Böylece, kolaylaştırmak için, kahramanın bir kopyasını yapabilir ve daha sonra sadece metin özelliğini, görüntülerini ve düğmelerini değiştirebiliriz. Bunun nihai sonucu bu: yukarı çık Adım 5: SSS Bölümü Diğer çizgilerin düzenini ekleyerek ve genişliği tam genişliğe değiştirerek başlayalım. Akıllı başlık modülünü satırın üst kısmına ekleyin ve uygun başlığı ve altyazıları değiştirin:
SSS için, Cordeon’un modülü en iyisi olacak, ancak hafif bir sürümde bulunmadığımız için bilgi kutusu modülünden memnun kalacağız. Başlığın altındaki iki sütunun düzenini sürükleyin ve çıkarın ve tam da geniş bir hale getirin. Kopyala düğmesini tıklayarak birkaç kez kopyalayın. Bilgi kutusunu sütuna ekleyin ve açıklama kutusundaki tek tek SSS öğesine soruyu + yanıtlayın:
Solda seviyelendirmeyi değiştirin ve mükemmel SSS kutusuna sahipsiniz. Tüm sütunlar için adımları tekrarlayın. Nihai sonuçlar aşağıdadır: Yukarı git Adım 6: Davet Paneli Son Eylem Çağrısı Bölümü için hareket eder, diğer iki sütun ekleyerek başlar ve tam genişliğe ayarlayın. İlk sütunda akıllı başlık modülünü ekleyin ve metninizi girin. Tipografide gerekli değişiklikleri yapın ve bitirdikten sonra Kaydet’i tıklayın:
Diğer çift düğme modülünü ekleyin ve düğmenin başlığını ve stilini isteklerinize göre değiştirin. Bittiğinde Kaydet düğmesini tıklayın: Ardından, fotoğraf modülünü sağdaki sütuna ekleyin. Ayarlar menüsünde, görüntüyü seçin ve satıra mükemmel şekilde uyacak şekilde marj ve dolgu değerlerini değiştirin. Bittiğinde, Kaydet’i tıklayın: Sonuç – Harekete geçme davetimizin bloğu:
Yukarı git Son adım: Hestia’daki başlık ve menü görüntülerini değiştirme Bu noktada, yapılması gereken tek bir görev vardır ve bu da Hestia’daki varsayılan başlığı ayarlamaktır. Bunu yapmak için aşağıdaki adımları izleyin: Tema ayarını açın ve Site Kimliği bölümünü açın. Logo Seç düğmesine tıklayın. Uygun olduğunu ve gerektiğinde kesin olduğunu düşündüğünüz herhangi bir görüntü seçin.
Menü bölümünü açın ve başlıkta görmek istediğiniz menüyü seçin. Ve … Bitirdik! Tebrikler, WordPress siteniz için bir kod satırına dokunmadan tam işlevsel bir sayfa oluşturdunuz! Bir kez daha, görülen bitmiş sayfalarımız şöyle görünüyor: Yöne sayfanız ne olacak? Oluşturduğunuz tasarımı aşağıdaki yorumlarda paylaşın! Umarım WordPress ile bir sayfa oluşturma ve ondan bir şeyler öğrenme konusunda bu öğreticiyi beğenirsiniz. #Wordpress ve @Beaverbuilder ile bir yön sayfası nasıl oluşturulur Tweet için tıklayın
Bonus! Sitenizde burada oluşturduğumuz yön sayfasını taklit etmek istiyorsanız, sizin için harika bir indirimimiz var! Bu, SetChPage sayfasının tam XML dışa aktarılmasıdır. Tek yapmanız gereken Beaver Builder üzerinden ithal etmek.
Yazar hakkında: Puneet Sahalot, PowerPack Beaver eklentilerinin kurucusu ve IdeaBox Creations CEO’sudur. WordPress, eklentiler ve ilginç WordPress web siteleri ile birlikte çalışmayı seviyor.
Düzen ve Sunum Karol K.
