Profesyonel görünümlü bir web sitesi tasarlamak herkes için değildi, özellikle de hepimiz bir kodlama ve web tasarım uzmanı olmamız gerektiğini düşündüğümüz için. Günümüzde, bir web sitesi tasarlamak için daha kolay bir çözüm sağlamak için WordPress ekosistemi için yeni araçların ortaya çıktığını görüyoruz ve bu, en yeni başlayanların ulaşabileceği bir yerde.

WordPress mizanpajlarının tasarımına ilişkin olarak, eklentiyi zaten sunmak zorunda kaldık Görsel Besteci, düzen tasarımı söz konusu olduğunda kesinlikle en iyi araçlardan biridir. Ancak bu çözümün herkes için uygun olmadığı belirtilmelidir. Bu eğitimde sizi daha fazla tanıtacağız nedeni budur. WordPress Plugin Elementor, bir WordPress Plugin freemium (ücretsiz, ancak abonelik kapsamında genişletilebilir).

WordPress için Elementor nereden edinilir

Eklentinin potansiyelini görmenizi ciddiye almayı düşünüyoruz ve ücretsiz çözüm bir kuruş ödemeden başlamanıza yardımcı olacak. Bu ücretsiz çözüm şurada mevcuttur: WordPress.org. Olmak WordPress Pluginikincisi diğerleri gibi kurulur panodan eklenti. 

Eklenti sizi tamamen tatmin etmeyi başarırsa, sitedeki tüm işlevlerle birlikte tam lisansı alabileceksiniz. resmi elemen.

Elementor'un başlıca özellikleri

Eklentiye genel bir bakışla öğreticiye başlamadan önce, size eklentinin ana özelliklerini (ücretsiz sürüm ve tam sürüm) tanıtacağız.

versiyon Ücretsiz Tam sürüm
Birden çok sütun Gezinme menüsü, makale
Modüller Metinler, Başlıklar modül WooCommerce (ürünler, kategoriler)
Video Modülleri, Görüntü, Atlıkarınca, Galeriler, Soundcloud Facebook entegrasyonu (sayfa, düğme, yorumlar)
Paylaşım modülü Tablo fiyatları
HTML modülü Portföy, Form
WordPress widget'ı için modül Araştırma Modülü

 

Bunun, eklenti tarafından sunulan farklı özelliklerin biraz kapsamlı bir listesi olduğunu unutmayın. Daha fazla ayrıntı bulacaksınız web sitelerini keşfetmek.

Elementor ile başlayın

Burada tüm kurulum sürecini ele almayacağız. Bu bir WordPress eklentisi olduğundan, kurulum prosedürü aşağıda açıklanmıştır. önceki bir öğretici. Ancak kurulumdan sonra eklentinin ana sayfasına yönlendirileceksiniz.

delementor.png sunum sayfası

Ekranınızda bu sayfa varsa, doğru şekilde yüklediniz demektir. Elementor eklentisi. Şu anda bu eğitim için tam sürümü kullanıyoruz, ancak arayüz ücretsiz sürümden çok farklı olmamalıdır.

Düzenleme arayüzüne gitmeden önce sizi lisansınızı kaydettirmeye davet edeceğim. Bu sadece tam sürümü tercih edenler için geçerlidir. Ücretsiz sürüme sahipseniz, sonraki bölüme geçebilirsiniz. Lisansınızı kaydetmek için, WordPress'te lisansınızı kaydettirmenizi isteyen bir bildirim göreceksiniz.

bildirim eklentisi elementor.png

Bu yüzden kayıt sayfasına gitmek için üzerine tıklayın ve etkinleştirmek.

bir lisansın kaydı elementor.png

Lisansınız geçerliyse normalde onay sayfanıza ihtiyacınız olacaktır.

aktif lisans elementor.png

Bu sayfaya gelmezseniz, sizi daha fazla bilgi için eklentinin geliştiricileriyle iletişime geçmeye davet ediyorum. problemle ilgili yardım.

Elementor nasıl kullanılır

Elementor, WordPress'teki Sayfalar ve Gönderiler üzerinde çalışır. İster klasik arayüzü, ister yeni Gutenberg arayüzünü kullanıyor olun, sizi Elementor oluşturucuyu kullanmaya yönlendirecek bir düğme göreceksiniz.

kurucu elementor.png

Pratikte, yazılarınızı her zaman Elementor kullanarak düzenlemeniz gerekmez. Bu nedenle sizi eklentiyi yalnızca sayfalarda kullanmaya davet ediyorum. Düğmeye tıklayarak, bir dejà vu havası veren Elementor tasarım arayüzüne erişeceksiniz (WordPress Özelleştiriciyi kullananlar için).

sunum arayüzü elementor.png

Sol tarafta eklenti tarafından sunulan çeşitli kontrollere ve sağ tarafta değişikliklerinizin canlı önizlemesine sahipsiniz. Bu eğiticide Twenty Sixteen WordPress temasını kullanıyoruz.

Elementor bölümleri

Elementor'daki bölümler, Elementor'un sunduğu işlevsellik blokları gruplarıdır. Bölümlerin sayısı, tam sürümü kullanıp kullanmadığınıza ve kullanıp kullanmadığınıza bağlıdır. WooCommerce, Yoast SEO veya diğer uyumlu eklentiler. Bu koşullara bağlı olarak arayüzünüzde daha fazla veya daha az bölüm olacaktır. Eklentinin tam sürümünü kullandığımız için WooCommerce etkinleştirildiğinde arayüzümüz böyle görünüyor.

bölüm elementor.png

Elementor bloğu nasıl yerleştirilir

Bir bölümü genişlettiğinizde, Elementor Bloklarını bulacaksınız. Çeşitli Elementor blokları, noktalı çizgilerle vurgulanan alana "Sürükle ve Bırak" ile yerleştirilir.

blok ekle elementors.png

Elementor'da bir düzen nasıl seçilir

Elementor'a bir blok eklemeden önce, vurgulanan bölümdeki "+" düğmesine tıklayarak bir düzen seçmeyi hatırlamanız gerekir.

bir düzen seçin elementor.png

İhtiyaçlarınıza bağlı olarak, en uygun düzeni seçeceksiniz. Bir düzen seçtikten sonra, vurgulanan aynı alanda o bölümün bir temsiline sahip olursunuz. Bu bölüm, seçiminize karşılık gelen aynı sayıda sütunu gösterecektir. Benim durumumda 3 sütunlu bir sütun seçtim.

zone.png ile elementor bölümü

İçinde "+" işareti bulunan farklı bloklar, Elementor bloklarını kabul edebilen alanlardır. Önce bir düzen seçmeden bir Elementor bloğu eklerseniz, tek sütun düzeni varsayılan olarak seçilecektir.

Elementor bölümleri, aynı "sürükle ve bırak" ilkesi izlenerek kendi aralarında yeniden düzenlenebilir. Artık kullanmak istemiyorsanız bir bölümü de silebilirsiniz.

bir bölümün taşınması elementor.png

Burada başlık bloğu ve metin bloğu olmak üzere 2 blok içeren bir bölüm örneği bulunmaktadır.

2 blocs.png ile bölüm öğesi

Diğer tasarım araçları nasıl kullanılır?

Tasarımınızı bitirdikten sonra, yapmak isteyeceğiniz şeylerden biri çalışmanızı kaydetmek. Bu seçeneği, farklı Elementor bölümlerini görüntüleyen bölümün en altında bulacaksınız.

elementor.png yedekleme

Doğrudan kaydetmeyi (Yayınla) ve taslak veya şablon olarak kaydetmeyi seçebilirsiniz. Bu farklı noktaları daha sonra keşfedeceğiz.

Tasarımınız sırasında, değişiklikleri Elementor'un ek arayüzü olmadan da önizlemek isteyebilirsiniz. Tek yapmanız gereken göz simgesine tıklamak.

değişikliklerin önizlemesi elementor.png

Tasarım sırasında bir hata meydana gelir (istemsiz bir eylem). Bu durumda, Elementor tüm eylemlerinizde gezinmenizi sağlayan bir geçmiş sunar.

hareketler elementor.png

Bu kolayca geri dönmenizi sağlayacaktır.

Geçmiş düğmesinden hemen önce gelen "Tarayıcı" seçeneği, ziyaretçiler tarafından kullanılan tarayıcıya göre farklı bölümleri daha fazla değiştirmenize olanak tanır. Bu seçenek size kesit yapılarının (sütun genişliği) gelişmiş modifikasyonuna erişim sağlar. Burada çok dikkatli bir şekilde değişiklik yapmalısınız.

tarayıcı seçeneği elementor.png

"Ayarlar" düğmesi, başlık, öne çıkan görüntü veya diğerleri arasında durum gibi sayfaya özgü belirli seçenekleri değiştirmenize olanak tanır.

elementor.png ayarları

Bu eğitim için bu kadar, bir sonraki eğitimimizde Elementor'u daha fazla keşfedeceğiz. Bir göz atmaktan çekinmeyin Resmi Sitesi çok daha başarılı örnekler sunuyor.