WordPress, basit arayüzü, son derece özelleştirilebilir temaları ve sonsuz çeşitliliği nedeniyle dünya çapında yaygın olarak kullanılan bir CMS'dir. eklentileri Güçlü. En amatör kullanıcılar için bile web sitelerinin oluşturulmasını, geliştirilmesini ve yönetilmesini kolaylaştırmıştır.

Bugün ve WordPress sayesinde artık çekici web sayfaları oluşturmak için özel bilgiye sahip olmanıza gerek yok. Ancak sen -ebilmek olmak Zaten gerçekten inanılmaz bir tasarım sunan bir web sitesinde tökezledi ve muhtemelen merak ettiniz: Nasıl yapıldı?

Maalesef, amatör veya acemi iseniz, çok bile yapamazsınız WordPress, çünkü temanızı değiştirmek için, temanızın doğasına ve ayrıca projenize veya hedefinize bağlı olarak HTML, CSS, PHP ve diğer birkaç beceride belirli bir uzmanlığa ihtiyacınız var.

Bununla birlikte, deneyimli bir kodlayıcı olsanız bile, sonuçta zaman ve kaliteden tasarruf etmenizi sağlayacak bir araca kesinlikle ihtiyacınız var.

Heureusement, le fişe takmak WordPress « WPBakeri Sayfa Oluşturucu Daha önce "olarak bilinen Görsel Besteci » bu soruna bir çözüm sunar. İkincisi ile, hatta çoğu acemi blogcular web siteleri için tamamen benzersiz bir görünüme sahip sayfalar oluşturabilir.

Bu eklenti ile oluşturabilirsiniz:

  • Çekici açılış sayfaları (açılış sayfası)
  • Satış sayfalarından profesyonel görünüm
  • İşletmeniz için "vitrin" siteleri
  • eğitimin için modüller sayfalar
  • kısa süre

Bence internetteki en iyi biçimlendirme (veya düzen) aracı. Özellikle WordPress kullanıcıları için.

Bu nedenle bu derste size web sitenize nasıl eşsiz bir görünüm vereceğinizi göstereceğim. (Ya blog) ile fişe takmak Görsel Besteci.

Öyleyse ...

yüklemek ve nasıl yapılandırılır WPBakery Page Builder eklentisi

WPBakeri Sayfa Oluşturucu ,  fişe takmak satın alabileceğiniz premium Codecanyon : İnternet eklentileri en iyi satış platformu.

TAMAM. Bu düzen eklentisini WordPress'te satın alıp indirdikten sonra, yapmanız gereken tek şey onu yüklemek ve etkinleştirmek.

Sonra bazı temel düzenlemeler yaparak başlayacağız. Bunu yapmak için konuma gidin "Ayarlar >> Görsel Besteci » senin gösterge paneli üzerinde.

Genel ayarlar

genel ayarlar görsel besteciİlk sekme (genel ayarlar), Değiştirmek verir:

  • İçerik üzerinde görsel oluşturmak mevcut olacak. Öğeleri kontrol edebilirsiniz ( Facebook post) ve / veya sayfalar (Kanal)
  • Farklı kurallarıgiriş farklı roller Bu seçenekle belirleyebilirsiniz bu ne değiştirir. Mevcut farklı roller gösterilecektir. Hangi elementleri kontrol etmek için üzerine tıklamanız gerekecek (rol) erişebilecek. Kullanımını yasaklama seçeneğiniz var " görsel composer "belirli bir role sahip kullanıcılara.
    WPbakery sayfa oluşturucudaki düzenleyiciyi etkinleştirin
  • Öğeleri etkinleştir veya devre dışı bırak duyarlı
  • Google fontları için altkümeleri tanımla

wpbakery rollerinin seçimiDizayn Seçenekleri

Tasarım seçeneklerinde, çeşitli unsurların varsayılan görsel görünümünü değiştirme olanağına sahipsiniz. görsel besteci '. Kullanmadan önce seçeneği işaretlediğinizden emin olun. « Özel tasarım seçeneklerini kullanın ».

css ayarları

Bu seçenekler, tüm öğeler için geçerli olan rengi tanımlamanıza olanak tanır. 

  • " Özel CSS »Size her bir öğeyi daha fazla özelleştirme fırsatı verir, yalnızca geliştiriciler onun ne olduğunu bilebilir.
  • «Sekmesi Ürün Lisansı »Etkinleştirmenizi sağlar. fişe takmak otomatik güncellemeler almak için.
  • «Sekmesi kısa kod varlıklar Temel olarak geliştiriciler hakkında.

Tamam, şimdi özel bir web sayfası oluşturacağız. Görsel Besteci.

İle özel bir sayfa nasıl oluşturulur görsel besteci

Kişiselleştirilmiş web sayfalarını kolayca oluşturmak için, " arka ofis ", Yani siteyi WordPress panonuzdan değiştirdiğiniz anlamına gelir." ön büro '.

editör-ön-uç-editör-arka uç

Gutenberg kullanıyorsanız, üst görev çubuğunda bir "Sayfa Düzenleyici" düğmesi göreceksiniz.

editör görsel besteci gösterge paneli editörü gutenberg

Editörünün avantajı Ön büro sayfalarınızı canlı düzenleyebilir ve farklı öğelerin temanızda nasıl göründüğünü görebilirsiniz.

Arka ofis editörü ile

"Editörüne erişmek için" arka ofis », Seni tıklamaya davet ediyorum« Yayımcı YEDEK OFİS '. WordPress görsel düzenleyicisine istediğiniz zaman " Klasik mod ". Ama gerekli olmayacağını düşünüyorum, bu yüzden bu eklenti web sayfası biçimlendirme tamamlandı.

Arka ofis düzenleyicisine girdikten sonra, sayfaya uygulanacak genel bir düzen seçebilirsiniz.

Güncellemeler Kanal sayfa ile ne yapmayı planladığınıza bağlı olarak değişir. Böylece seçebilirsiniz « iniş sayfa » bir ana sayfa oluşturmak için, "Hizmetlerin listesi" hizmetleri gösteren bir sayfa için vb. Tecrübe ile bahis bile yaratabileceksiniz en sayfaları özel çok profesyonel tasarlanmış.

Ayarın seçimi ne olursa olsun Kanalelemanların sunumu, hepsinde benzer. Yeni ekleyebilirsiniz eleman üzerine tıklayarak "+" en üstünde meta kutu « görsel Editör », Veya simgeye tıklayarak bir model ekleyin "Şablon".

Her satırda, yapabilirsiniz (soldan sağa) :

  • Çizgiyi taşı
  • Satırdaki sütunları yönet
  • Yeni bir sütun ekleme

wpbakery sayfa oluşturucu arayüzüKutunun sağ tarafında diğer seçenekler mevcuttur. Bu seçenekler size izin verir (soldan sağa) Için:

  • çizgiyi azalt
  • satır düzenle
  • satır çoğalt
  • satır sil

wpbackery düzeniHer sütunun ortasında, daha önce bir öğe ekleyebilir, bir sütunu düzenleyebilir veya silebilirsiniz.

wpbackery bölüm seçenekleriwpbackery bölüm seçenekleri

Önerilen Kaynaklar

Aşağıda, önerdiğimiz bazı görsel besteci uzantıları bulunmaktadır:

1 - Sütunlar nasıl yönetilir

Sütun yönetimi sekmesinde, satıra eklemek istediğiniz sütun sayısını seçebilirsiniz. Farklı sütun modellerini anlamak için, her kesirin sütunun kaplayacağı genişliğe karşılık geldiğini bilin. Bir şablonun kesirleri olduğu kadar, sayfanın da sütunları olacaktır.

Tabii ki, 11 farklı sütun şablonları mevcuttur, ancak linke tıklayarak istediğiniz kadar oluşturabilirsiniz "Özel" sütun listesinin hemen altında.

Örneğin, sayfanın bir bölümünü eşit genişlikte 2 sütunlarla görüntülemek için (Ya ekle) "1 / 2 + 1 / 2". 

Sütunlar blogunuzda gösterilecek ve genişlikleri temanın boyutlarına orantılı olarak dağıtılacaktır. Bir sütun olabildiğince çok öğe içerebilir, bu nedenle bu düzeyde bir sınır yoktur.

düzen wpbakery bölümü

Farklı öğeler herhangi bir sütuna taşınabilir.

wordpress hareketli metin kutusu wpbakeryHer bir öğenin üzerine gelindiğinde, seçeneklerine, özellikle şunlara izin veren düğmeye erişebilirsiniz:

  • hamle element
  • niteleyici element
  • çift element
  • Sil element

seçenekleri-elementler

2 - Elementler nasıl eklenir?

Her sütunu "tarafından önerilen öğelerle özelleştirme seçeneğiniz var Görsel Oluşturmak '. Bir öğe eklemek için düğmeye tıklayın "+" belirli bir sütunda veya düğmede "+" Ana Menü eklentisi.

wpbakery elemanı ekle
Bir sütun boş olduğunda (ne contient içerik yok)düğmesi var "+" içeride.
 Örneğin bir video eklemek için bu düğmeye tıklayın ve video öğesini seçin.

add-a-videoyu

Üzerine tıklamak yeni bir pencere açacaktır. Bu pencerede, başlığı, videonun bağlantısını ve ek bir sınıf sağlamanız gerekir (zorunlu olmayan). Videonuz hakkında çeşitli bilgileri girmeyi bitirdiğinizde, değişikliklerinizi kaydetmeyi unutmayın.

wpbakery video ayarıVideonuz arka ofis düzenleyicisinde mevcut olacak. Değişikliklerinizi bir kez daha kaydedin. Şimdi tıklatarak görüntüleyebilirsiniz " Ön izleme ".

video ekle wpbakery wordpressBir öğe ekleme süreci, birkaç istisna dışında diğerleri için aynıdır. Tamamlanacak bilgiler elementlere bağlı olarak değişebilir. 

Örneğin metin öğesini seçerek, klasik bir görsel düzenleyici bulacaksınız. (makale veya sayfa yazarken kullanılabilir olanı), aynı zamanda öğenin görüntülenmesi sırasında bir animasyon eklemenize izin veren bir seçenek. İkincisi, ayarlarınıza bağlı olarak bir konumdan diğerine geçebilir.

metin bloğu ayarlarıBununla en ilginç fişe takmak, yaratabileceğin sidebars örneğin temanız yoksa. Bunu yapmak için ekle düğmesine tıklayın (" + ")ve öğesini seçin " WP Yorumlar son "" Facebook sevmek Ve sonunda « Wp Kategorileri '.

Şimdi bu özel sütun şablonunu oluştur 1 / 3 + 2 / 3 »Veya herhangi bir başkası ve öğeyi ekleyin kenar çubuğu sol sütunda veya sağ sütunda. Önemli değil çünkü her şey, bu düzen uzantısı altında oluşturulan kenar çubuğunuzu Visual Composer'da olduğundan ne kadar geniş vermek istediğinize bağlıdır.

wpbakery sütun konfigürasyonu

Sağda yeni bir boş sütun göreceksiniz, tercih ettiğiniz yeni bir öğe ekleyin (Basit bir metin eklemenizi tavsiye ederim). Şimdi sayfayı kaydedin ve bu alıştırmanın sonucunu görmek için önizlemeye gidin.

3 - Sayfa şablonunu kaydetme ve yeniden kullanma

Sayfanızın şablonunu kaydedip daha sonra kullanmanız mümkündür. Bu seçeneği seviyorum çünkü sizi bir sayfadan şablon kopyalamaya çalışırken saatlerce harcamaktan kurtarıyor. Burada her şey tek bir tıklama ile yapılır. Evet doğru duydunuz, BİR TIKLAMADA… veya ikide 🙂

Bir şablonu kaydetmek için şablonlar simgesine tıklayın. Görünen pencerede, modelinizin adını " Geçerli düzeni şablon olarak kaydet », Ardından« düğmesine tıklayın Şablonu kaydet '.

Önemli: Bunu, boş bir sayfada değil, şablon olarak kaydetmek istediğiniz sayfada yapmanız gerekir.

manken ol wpbakery

Aynı şekilde, kaydettiğiniz farklı modelleri bölümdeki aynı pencerede bulacaksınız. "Bir model yükle".

modellerim wpbakeryBu durumda tek yapmanız gereken yeni bir sayfa oluşturmak, ardından şablonlara gitmek ve sayfanıza vermek istediğinizi seçmek.

Ön büro editörü ile

Ön büro editörü avantajı var de sayfanızı gerçek zamanlı olarak düzenlemenize izin verir. Diğer bir deyişle, Visual Composer kullanarak sitenizde yaptığınız her değişikliğin nasıl görüneceğini görmenizi sağlar. Bu yaklaşımın avantajı, arka ofis sayfa düzenleyicisinde yaptığınız gibi körü körüne çalışmak zorunda olmamanızdır.

İstediğiniz zaman bir seçenekten diğerine geçiş yapabilirsiniz (Ofis arka ofis veya kenar).

Ön büro editörü, arka ofis düzenleyicisinden çok da farklı değildir, çünkü bir bar kullanıcı aynıdır, ancak aynı zamanda arka ofis düzenleyicisinin tüm seçenekleri ön büro düzenleyicisiyle aynıdır.

wpbakery araç çubuğuAncak beş yeni düğme eklenmiştir, bunlar şunları içerir:

  • Kılavuzların etkinleştirilmesi veya devre dışı bırakılması
  • Blogunuzun farklı cihazlarda nasıl görüneceğini görmenizi sağlayan emülatör
  • Ofise geri geri düğmesi
  • Değişiklikleri kaydet düğmesi
  • çıkış düğmesi görsel besteci

wpbakery seçenekleriBir sayfanın her bir öğesi değiştirilebilir, mevcut seçenekleri her öğenin üzerine gelerek görebilirsiniz. Düğme şeklinde "OYNA", bir eleman için daha fazla seçenek görüntülemenize izin verir.

ofis-of-the-ön seçenekleri-elementler

İlk adımlarınız zor olabilir, ancak uygulama ile bir ana sayfa bunun gibi.  İsterseniz, fişe takmakYou can ücretsiz test et (Oturum, kullanıcı: demo şifre: demo).

İşte evde 1 dakikada başardığım şey. Pratik yaparak çok tatmin edici sonuçlar elde edebilirsiniz. Ve bu güçlü eklenti ile WordPress web sitenizi oluşturmak için yardıma ihtiyacınız varsa, o zaman tereddüt etmeyin BlogPasCher ekibiyle iletişime geçinprojelerinizi gerçekleştirmek için mutlu olacak.

Umarım tamamen Fransızca olan bu eğitim, ilk adımlarınızı atmanıza yardımcı olur. fişe takmak « Görsel Besteci '. Eğer bir problemin varsa, biz (veya yardım) size yardımcı olmaktan mutluluk duyacaktır. Unutma: Güzel bir web sayfası daha meraklı müşteriler dönüştürür.

Önerilen uzantılar

Aşağıda, önerdiğimiz bazı görsel besteci uzantıları bulunmaktadır:

Hakkında daha fazla eklenti keşfedin Codecanyon

İhtiyacı olanlara bu öğretici paylaşın.