Elementor ve WidgetKit Kullanarak PSD'yi WordPress'e Dönüştürme

Yayınlanan: 2019-12-12

Bir PSD'den WordPress'e dönüştürme çözümü mü arıyorsunuz? Hazır web sitesi PSD'nizi WordPress'e dönüştürmek istiyor ancak nasıl yapacağınızı bilmiyor musunuz? Tamam, bu konuda sana yardımcı olabilirim.

WordPress'in son zamanların en çok kullanılan ve çok yönlü CMS platformlarından biri olduğunu zaten biliyorsunuz. Artık, Elementor gibi bir sayfa oluşturucu ile PSD'den WordPress temasına kodlama olmadan tamamen işlevsel bir web sitesi oluşturmak çok daha rahat.

Bu yazıda size adım adım “Elementor & WidgetKit Kullanarak Bir PSD'yi WordPress'e Dönüştürme” yi göstereceğim.

Nasıl olduğunu görelim.

PSD tasarımı seçme

Elementor & WidgetKit 1 Kullanarak PSD'yi WordPress'e Dönüştürme

Bir PSD'yi WordPress temasına dönüştürmeden önce yapmanız gereken ilk şey, bir web sitesinin PSD tasarımını seçmektir. Kısacası, PSD, çoğu WordPress web sitesi tasarımının oluşturulduğu en popüler tasarım araçlarından biri olan PhotoShop Design'ın kısaltmasıdır.

Kapsamlı PSDHUB koleksiyonundan tercih ettiğiniz PSD tasarımlarından herhangi birini seçebilirsiniz.

Web siteniz için hem kişisel hem de ticari kullanım için üstün kaliteli ücretsiz PSD şablonları sağlarlar. Seçtiğiniz PSD tasarımınızın sade ve çağdaş tasarımlı olması gerektiğini unutmayın.

Bir PSD tasarımı seçerken aşağıdaki faktörleri kontrol edin,

  • Tasarım Yapısı: Göz önünde bulundurmanız gereken ilk şey tasarım yapısıdır. Tasarımın sınırı yoktur ama kodlamanın vardır.
  • Temiz ve Zarif Düzen: Üçüncü şey, tercih ettiğiniz PSD tasarımının temiz ve zarif olması gerektiğidir. Geliştiricinin temiz ve zarif bir düzenden piksel mükemmel bir web sitesi yapmasına yardımcı olur.
  • Amaca Uygunluk: İkinci konu, tasarımın amacınızı karşılayıp karşılamadığıdır. Bir seyahat web sitesine ihtiyacınız olduğunu varsayalım, o zaman PSD tasarımınız bir seyahat web sitesi PSD olmalıdır.
  • Karmaşıklık: Son olarak, degn seçiminde PSD için olduğu gibi karmaşıklığı göz ardı etmeye çalışın.

Burada PSDHUB'dan Eventia-Konferans ve Etkinlik Yönetimi Şablonu kullanıyoruz.

WordPress'i yükleyin

Elementor & WidgetKit 2 Kullanarak PSD'yi WordPress'e Dönüştürme

WordPress, kurulum kolaylığı ile ünlüdür. Çoğu durumda, WordPress'i yüklemek çok basit bir işlemdir ve tamamlanması beş dakikadan az sürer. Bir PSD'yi WordPress temasına dönüştürmek için WordPress'i yüklemek, dikkate alınması gereken ikinci adımdır.

WordPress.org, sitelerinin destek sayfasında “WordPress nasıl kurulur” hakkında ayrıntılı bir makale sunar. Ancak; İşte size WordPress kurulumunun temel talimatları,

  1. İlk önce WordPress paketini indirin ve açın.
  2. MySQL'in yanı sıra web sunucunuzda WordPress için bir veritabanı oluşturun.
  3. WordPress dosyalarını web sunucunuzda istediğiniz konuma yükleyin:
  4. WordPress'i etki alanınızın kök dizinine entegre etmek istiyorsanız, sıkıştırılmamış WordPress dizininin tüm içeriğini web sunucunuzun kök dizinine taşıyın veya yükleyin.
  5. WordPress kurulumunuzu web sitenizde kendi alt dizininde yapmak istiyorsanız, sunucunuzda blog dizini oluşturun ve sıkıştırılmamış WordPress paketinin içeriğini FTP aracılığıyla dizine yükleyin.
  6. URL'ye bir web tarayıcısında erişerek WordPress kurulum komut dosyasını çalıştırın.

Bu kadar! WordPress şimdi yüklenmiş olmalıdır.

Elementor'ı yükleyin

Elementor & WidgetKit 3 Kullanarak PSD'yi WordPress'e Dönüştürme

Makale, Elementor kullanarak bir PSD'yi WordPress temasına dönüştürmekle ilgilidir. Bu nedenle, PSD dosyasını düzenlemenin yanı sıra özelleştirmek için Elementor'a ihtiyacımız var. Öyleyse, Elementor'un nasıl kurulacağını görelim.

Elementor, WordPress'te mükemmel piksel tasarımı oluşturmak için en iyi eksiksiz tasarım platformlarından biridir. Genişletilebilir kullanıcı dostu tasarım yaklaşımı için en iyisidir. Elementor için kurulum süreci de basit bir iştir. Sadece bazı basit adımları izleyin ve PSD'nizi Elementor sayfa oluşturucuda tasarlamaya hazırsınız.

Elementor eklentisini kurmanın iki yolu vardır. Kurulum işlemi aşağıda açıklanmıştır,

Elementor Sitesi Üzerinden

  • Önce elementor.com'a gidin ve indir'i tıklayın .
  • WordPress panosunda, Eklentiler > Yeni Ekle'yi tıklayın.
  • Eklenti Yükle 'yi tıklayın ve Elementor için indirdiğiniz dosyayı seçin.

WordPress kontrol paneli aracılığıyla

  • Panodan Eklentiler > Yeni Ekle'ye tıklayın.
  • Arama alanına Elementor yazın ve yüklenecek Elementor sayfa oluşturucuyu seçin.
  • Kurulumdan sonra Etkinleştir'e tıklayın.

Elementor sayfa oluşturucuyu kurmak için tek yapmanız gereken bu. Kurulum süreci hakkında daha fazla bilgi edinmek için aşağıdaki videoyu da takip edebilirsiniz.

WidgetKit'i yükleyin

Elementor & WidgetKit 4 Kullanarak PSD'yi WordPress'e Dönüştürme

Elementor için WidgetKit-Daha fazla öğe ve düzen ekleyerek web sitenizin oluşturma yeteneklerini geliştiren en gelişmiş ve güçlü Elementor Eklenti Kiti. Burada, PSD'den WordPress'e dönüştürme için widget'larını ve öğelerini kullanıyoruz.

WordPress ve WidgetKit kullanarak bir PSD'den hemen hemen her türde sayfa oluşturabilirsiniz. Widgetkit'in kurulumu, onunla bir PSD to WordPress teması tasarlamak kadar basittir. WordPress panosundan bazı kolay adımları izleyerek WidgetKit'i kolayca ekleyebilirsiniz. Bakalım,

WidgetKit'i WordPress panosu aracılığıyla yükleyin

  • Pano'dan Eklentiler > Yeni Ekle'ye tıklayın.
  • Arama alanına WidgetKit yazın ve Elementor'un yüklemesi için WidgetKit'i seçin.
  • Başarılı kurulumdan sonra Etkinleştir'e tıklayın.

WidgetKit artık Elementor ile kullanıma hazır. Kafanız karıştıysa videoyu izlemeniz yeterli. Bu, WidgetKit'in nasıl kullanılacağı konusunda da size yardımcı olacaktır.

PSD'nizi WordPress'e dönüştürün

Elementor & WidgetKit 5 Kullanarak PSD'yi WordPress'e Dönüştürme

Kurulum kısmı tamamlandı. Şimdi PSD'yi WordPress Elementor ve WidgetKit'e dönüştürme zamanı. Şu anda WordPress'e PSD'nin yanı sıra PSD'den Joomla'ya dönüşüm sağlayan birçok PSD'den WordPress'e hizmet sağlayıcısı var. Ancak; kendi tercih ettiğiniz şekilde tasarlayabilirsiniz. Burada sadece bir PSD'yi WordPress'e dönüştürmenin temel bir yolunu gösteriyoruz.

Ayrıca, WordPress Temalar ve Eklentiler dizinimizin kapsamlı koleksiyonundan hazır Tema ve Şablonlarımızdan herhangi birini de seçebilirsiniz.

PSD'den bir Düzen tasarlarken sırayı takip etmeye çalışın. Bu size çok yardımcı olacaktır,

Yeni Sayfa Oluştur

Yapmanız gereken ilk şey, WordPress panosundan yeni bir sayfa oluşturmaktır. WordPress panosunun sol üst tarafından Sayfalar > Yeni Ekle'yi tıklayın.

Ardından Elementor Sayfa Oluşturucu'ya girmek için Elementor ile Düzenle'ye tıklayın. Aşağıda gösterildiği gibi bir Elementor paneli göreceksiniz.

Sayfanızı PSD Dosyasından Oluşturun

Bir sayfa oluşturmak veya bir PSD'yi WordPress temasına dönüştürmek için dikkate alınması gereken üç ana şey vardır; Bölümler, Sütunlar ve Widget'lar. Burada Bölümler en büyük yapı taşlarıdır ve Sütunları yakalar. Widget'ları Sütunların içine yerleştirebilirsiniz. Düzenleme seçeneğine tıklayarak Bölüm, Sütun ve Widget'ları tutamaçlarıyla kontrol edebilirsiniz.

Başlık Bölümü Ekle

Buradaki başlık bölümü için, Themexpert tarafından mevcut bir Theme Eventia kullanıyoruz. WordPress'te, bir şablon tasarlamak için çerçeve olarak mevcut bir tema kullanıyorsunuz, aksi takdirde WordPress'in kendisi sizin için bir tane ekliyor. Ardından, mevcut tema tasarımını veya düzenini kullanarak logo ve birden fazla sayfa ekleyebilirsiniz.

Kahraman Bölümü Ekle

Şimdi kahraman bölümünü dönüştürüyoruz. Önce PSD gibi bir arka plan görüntüsü ekliyoruz, ardından çoklu içerik ve simge eklemek için sütuna sütun ekliyoruz.

Buradaki sayaç seçeneği için WidgetKit Countdown elementini kullanıyoruz. Çıktı ve düzenleme seçeneği aşağıdadır.

İç Bölüm Ekle

Şimdi iç bölümü tasarlama zamanı. Burada iki sütun arasına arka plan ve metin eklemek için Elementor öğelerini kullanıyoruz.

Bu, Elementor öğesiyle Bu Etkinlik Hakkında bölümü düzenlemesidir. Burada bölüm sütununa bir miktar metin ve başlık resmi ekliyoruz. Manzara aşağıya bakıyor.

WidgetKit ekibi dikey simgesi ile PSD dosyasının hoparlör bölümünü tasarlıyoruz. Orada, ad ve atama ile farklı sütunlara resimler ve sosyal site simgesi ekliyoruz.

Bu bölümde PSD'den rastgele bir simge ekliyoruz ve bir başlık veriyoruz.

Elementor ile her şeyi yapamayız. Böyle bir durumda ne yapıyoruz? Eklentiyi farklı temalardan kullanıyoruz veya kendimiz için bir eklenti yapıyoruz. Bu, WordPress Teması için bir PSD tasarlarken yaygın bir şeydir. Burada Eventia Theme'den Schedule Addon kullanıyoruz.

Blog bölümü için WidgetKit'in blog carousel öğesini kullanıyoruz. Farklı içerik görselleri ile arkaplan ekleyebilir hatta devamını oku butonunu da ekleyebilirsiniz.

Altbilgi bölümü için, başlık bölümünden önce yaptığımız gibi, Themexpert tarafından mevcut bir Theme Eventia kullanıyoruz. Burada birden fazla sosyal site simgesi ve bir abone düğmesi alıyoruz.

Sayfanızı önizleyin ve yayınlayın

Sayfanızı PSD'den tasarlamayı tamamladığınızda, çalışmanızı Önizleyebilir ve Yayınlayabilirsiniz . Ayrıca Yayınlanan bir sayfayı düzenleyebilir ve çalışmanızı Taslak olarak kaydedebilirsiniz. Bu, çalışmanızı Taslak olarak kaydederken yayınlanan sayfanızı mahvetmeyeceğiniz anlamına gelir. İşte Eventia PSD'nin Önizleme görseli.

Son söz

Bugünlük bu kadar arkadaşlar. Umarım makaleyi beğenirsiniz ve Elementor sayfa oluşturucu ve WidgetKit kullanarak bir PSD'yi WordPress'e nasıl dönüştüreceğiniz konusunda net bir fikriniz olur. Kaynağı uygulayın ve elbette aşağıdaki yorum bölümünde deneyiminizi ve değerli görüşlerinizi paylaşmayı unutmayın.