Başından beri WordPress ile bir açılış sayfası nasıl yapılır
Yön sayfası, esas olarak ziyaretçilerin dikkatini çekmek için tasarlanmış bir web sayfasıdır ve e -posta adresleri gibi ayrıntılarını Prospect formu aracılığıyla. Pazarlama yaptığınız ürüne bağlı olarak belirli kitleleri hedeflemek için tasarlanmıştır. Yön sayfası, trafiği ana web sitesine yönlendirmek için kullanılan bir gasp sayfası da olabilir. Sitenizde istediğiniz kadar yön sayfasına sahip olabilirsiniz. Aslında, ne kadar çok sayfanız varsa, o kadar fazla beklentiniz elde edebilirsiniz. Örneğin, yeni ürünleri bir e -posta kampanyası aracılığıyla pazarlıyorsanız, trafiği hedeflenen e -posta kampanyasından özel olarak tasarlanmış ürün talimatlarına yönlendirebilirsiniz. Aynı şey e -posta veya başka yollarla yaptığınız her promosyon için de geçerlidir. Anahtar, başlattığınız her kampanya için benzersiz bir yön sayfası oluşturmaktır.
Yön sayfalarının temelleri, neye sahip olacağınız veya yön sayfasına benzeyeceği hakkında yazılı bir kural yoktur. Bununla birlikte, yıllarca çeşitli yönleri denedikten sonra, yön sayfalarını tasarlarken belirli kilit yönlerin dikkate alınması gerektiği sonucuna vardım. İşte ilk dördü:
Özgüllük: Talimatlar tasarlarken, özellikle ne sunduğunuz hakkında. Ayrıca sizin için neyin karlı olduğunu da bilmelisiniz. Örneğin, kullanıcı yön sayfanıza kaydolduğunda ücretsiz bilgi sunarsanız. Nasıl fayda sağlayacaksınız?
Faydalar: En iyi pazarlama terimi ziyaretçilerin dikkatini çekebilir. Ancak, nasıl fayda sağlayacağını açıkça açıklamazsanız, dönüşümünüz ince olabilir. Kullanıcıların tekliften nasıl yararlanacağı konusunda iyi bir yön sayfası açık olmalıdır. Rahip: Yön sayfanızdaki kelimeler bir aciliyet duygusu yaratmalıdır. Sayfa ziyaretçilerinin neden daha sonra teklifinizi almaları gerektiğini açıklayın.
Dönüşüm: Şimdi ziyaretçilerin dikkatini çektiniz ve onları harika teklifleriniz konusunda ikna etmeyi başardınız. Peki bunu nasıl anlarlar? Yön sayfanız mümkün olduğunca basit bir potansiyel dönüşüm yapmalıdır.
WordPress WordPress ile bir yön sayfası oluşturmak, muhteşem sayfalar oluşturmak için birçok yol sunar. Yön sayfanızı oluşturmak için kullanabileceğiniz iki seçeneği ve yalnızca kodlama bilgisi ile gelişmiş geliştiriciler veya WordPress kullanıcıları için önerdiğimiz üçüncü seçeneği tartışacağım.
1. WordPress temasıyla yön sayfası nasıl oluşturulur. Özellikle yönlendirme oluşturmak için tasarlanmış birçok WordPress teması vardır. Bu bir sayfa teması genellikle yerel rulolar, çekici sürücüler, özellikler ve kendi sayfalarınızı kolayca yapmak için diğerleri gibi harika özellikler içerir. İşte bizim favorimizden bazıları. Zerif Pro WordPress teması
Bilgi ve İndir Demo
Bilgi ve İndir Demo
Tabii ki toplam WordPress teması (40+ hızlı başlangıç demosu içeren), özellikle yön sayfasının yönü için çok iyi bir seçimdir. Bu tema, 500’den fazla doğrudan tema ayarlama tasarım seçeneğini (renk, yazı tipi, sayfa genişliği, vb.), Ön uç sayfaları sürükleyip kaldırma, 100 sayfa yapım öğeleri, özel gönderi türleri (personel, portföy ve referanslar için), Terms Can Can Ayarlanmalı ve altbilgi artı daha fazlası. Toplam inşa edemeyeceğiniz hiçbir şey yok. WordPress Freelancer teması Bilgi ve İndir Demo
Serbest çalışanlar, gevşek tasarımcılar, geliştiriciler, fotoğrafçılar ve diğer reklam materyalleri için tasarlanmış esnek bir sayfa WordPress temasıdır. Bu tema, bölümler eklemesi kolay olan ve hizmetler, önceki işler, iletişim bilgileri ve diğerleri gibi önemli bilgileri görüntüleyen modüler düzen içerir. WordPress SimpleShift Teması
Bilgi ve İndir Demo
Bir WordPress teması SimpleShift, tek sayfalık bir web sitesi oluşturmak için kullanabileceğiniz temiz ve basit bir iş tarzı temasıdır. Bu tema, simge kutuları, bilgiler, referanslar ve yön sayfanız için diğerlerini kullanarak ana noktaları görüntülemek için birçok özelliğe sahiptir. WP Tek WordPress Teması Bilgi ve İndir Demo
WP Singular, basit sayfa yapımcıları, özel widget’lar, sınırsız renkler, Ajax portföyleri, Google yazı tipleri ve daha fazlası ile sezgisel olan tek sayfalık bir WordPress temasıdır. Bu, mal veya hizmetlerinizi tanıtmak için yön sayfası için iyi bir başlangıçtır. En sevdiğiniz temaya karar verdikten sonra – yükleyin ve etkinleştirin! Yeni bir tema eklemek için, görünüm> temalar> yeni ekleyin, ardından WordPress.org deposundan harika ücretsiz temayı keşfedin veya premium veya ücretsiz temaları başka yerlerden yüklemek için yükleme bağlantısını tıklayın. Verandanızı tema ile yapın Bu örnekte, web sitelerinden veya WordPress kontrol panelinizden alabileceğiniz Zerif Lite By Taceisle kullanacağız. Basit yükleyin ve başlamak için temayı etkinleştirin. Tek sayfa WordPress temasının çoğu, başlamayı kolaylaştırmak için “Ana Sayfa” sayfa şablonunu kullanır. Şablonu kullanmak için sayfaları açın> Yeni ekleyin, sayfanızı adlandırın, ardından yan çubuktaki sayfa özniteliği bölümünden sayfa şablonunu seçin. Zerif’de bu bir ön sayfa şablonudur. Ardından sayfanızı yayınlayın.
Yayınladığınız ana sayfanızla, ziyaretçiler URL’nize geldiğinde görüntülenebilmesi için ön sayfanız olarak ayarlamanız gerekir. Yalnızca Ayarları Girme> Ön Sayfa Ekran> Statik Sayfası altında yeni oluşturduğunuz sayfayı okuma ve seçme. Sonra değişikliğinizi kaydedin.
Artık yön sayfanızın içeriğini ayarlamaya başlayabilirsiniz. Zerif Lite, “Ön Sayfa” seçeneğinin altındaki özelleştiricideki tema seçeneklerini kullanır (görünüm> özelleştirme altında erişilebilir). Bazı sayfa içeriğini hızlı bir şekilde düzenlemek için Mavi Kalem simgesine de tıklayabilirsiniz. Bittiğinde, sadece kaydet ve yön sayfanız kullanıma hazır olacaktır! Yön sayfasının tüm temaları ön sayfa seçeneğiniz için WordPress ayarlamalarını kullanmayacaktır. Bazı temalar, WordPress kontrol panelinizde (genellikle gönderme seçeneğine, medya, sayfalar vb. Yakın) görünecek özel gönderi türünü kullanır, bazıları sadece veranda şablonu için sürükleme ve varsayılan öğeleri içerir ve diğerleri sayfa üreticisini içerir ( Bir sonraki hakkında konuşacağız). Temanızı nasıl kullanacağınızla ilgili sorularınız varsa, belgelere bakın veya premium bir tema iletişim desteği ise. 2. WordPress teması eklentisi temasıyla bir yön sayfası nasıl oluşturulur, ancak WordPress ile yönlendirmenin en kolay yollarından biri eklentileri kullanmaktır. Hem ücretsiz hem de premium olanlar iniş avlusunun birçok eklentisi var. Her şey aşağı yukarı aynı şekilde çalışır: Genellikle, farklı amaçlar için bir toprak alanları koleksiyonu sunarlar. Yükledikten ve etkinleştirdikten sonra, Eklenti Ayarları sayfasını kullanarak sayfa ayarını yönetebilirsiniz. Bazı eklentiler, kancalar, filtreler ve eylemler kullanarak yön sayfalarınıza daha fazla ayar ve işlevsellik ekleyebileceğiniz üçüncü taraf uzantılarına izin verir. Dikkate alınması gereken birkaç WordPress yönü eklentisi vardır: WordPress -Tensectial Setching Sayfası Paralaks Yerçekimi Yön sayfası Pres’i optimize et
Ancak şu şekilde genel sayfalar yapma eklentisini de düşünmenizi öneririz:
WP fırın sayfası üreticisi
Berang İnşaatçıları
Element
Kişisel favorimiz, en iyi yazan Total WordPress temamızla ücretsiz olarak gelen WP Bakery Page Builder.
Eklentilerle Sayfa Oluşturma Nasıl Oluşturulur Sayfa Maker eklentisi kullanmak için önce uyumlu bir temayı yüklemeli ve etkinleştirmelisiniz. Çoğu temayla ilgili sorunlar yaşamamalısınız, ancak seçtiğiniz eklenti ile çalışmak için özel olarak oluşturulan veya test edilen temaları bulabiliyorsanız her zaman daha iyidir. Örneğimizde, önerilen eklentileri yüklemenizi ve etkinleştirmenizi isteyecek olan WP Bakery Page Builder’ı toplam temalı kullanacağız.
Temanız sipariş içermiyorsa, dahil eklentilerin nasıl yükleneceğini görmek için belgeleri kontrol edin. Veya kendi sayfa yapımcınızı satın aldıysanız, eklentileri açın> Yeni Eklenti Eklentileri Yüklemek ve Etkinleştirmek için Eklentiler Yükle.
Eklenti üreticisi sonra sayfanız etkin olduğunda, sayfayı açın> Yeni ekle yapmaya başlayın.
Toplamda tesadüfen “Sandas Pages” sayfa şablonu için özel bir seçenek ekledi. Sayfanızı oluştururken, bu şablon sizin için üstbilgi ve altbilgi bölümünü siler (bu mantıklıdır, çünkü bu alan sayfalar arasında gezinmeniz gereken MultiHammal web sitesi için daha uygundur). Bir şablon seçmek istiyorsanız sayfanızı kaydettiğinizden emin olun. Sayfanız kullanıma hazır olduğunda, bu inşa etme zamanıdır. Görsel bir besteci kullanıyorsanız, artık bir arka uç düzenleyici veya doğrudan bir ön uç düzenleyici kullanma seçeneğiniz var. Total, ön uç düzenleyicisini tamamen destekler ve oluşturduğunuzda her öğeyi görebileceğiniz için bunu kullanmanızı şiddetle tavsiye ederiz. Düzenlemeyi bitirdikten sonra sayfanızı güncellediğinizden veya yayınladığınızdan emin olun. Bu özel sayfa üreticisini kullanma hakkında daha fazla bilgi edinmek istiyorsanız, görsel besteci kılavuzumuza bakın. Ayrıca, ön sayfanızı yeni oluşturduğunuz sayfaya ayarlamanız gerekir (bu adım biraz tanıdık gelecektir, çünkü çoğu tema bu ayarları düzenlemenizi gerektirir ). Bu nedenle Ayarlar> Okuma> Ön Sayfa Ekran> Statik Sayfa ve yeni ana sayfanızı seçin. Bonus: İçe Aktarma Şablonu OH kullanmaya hazır ve toplam bir WordPress teması kullanıyorsanız, bitmiş sayfaları (veya multihhammal site tasarımı) başlatmak için bir seçenek de vardır. Toplam, Tema Paneli> İthalatçı Demo’da bir ton ithalat içerir.
İçe aktarmaya başlamak için tıklayın. Toplamda, içe aktarmak istediğiniz bazı gösteriler için gereken eklentileri yüklemenizi ve etkinleştirmenizi bile isteyeceksiniz.
Oradan XML içeriğini, görüntüleri, tema ayarını ayarlama, widget ve hatta kaydırma (varsa) içe aktarma seçeneğiniz olacaktır.İçe aktarma tamamlandıktan sonra, sayfayı isteklerinize göre düzenleyebilir ve ayarlayabilirsiniz. Değişiklik yapmak için sayfanızı açın, düzenlemek istediğiniz sayfayı bulun, imleci işaret edin ve “Sayfa Maker ile Düzenle” seçeneğini tıklayın. .Bu, ön uç düzenleyiciyi açacaktır.Düzenlemek için basitçe işaret edin ve tıklayın, ardından değişikliklerinizi kaydetmek için ekranın üst kısmındaki “Güncelleme” düğmesini tıklayın.Bu gerçekten daha kolay hale gelmiyor!
Eklentiler gibi diğer çevrimiçi araçlar, yol tarifi oluşturmak için birçok çevrimiçi araç vardır (sadece Google Arama hızlı yapın ve kendiniz görebilirsiniz). Bu temel olarak WYSIWYG web sitesi üreticisi gibi çalışıyor ve kısa sürede yönün yönünü hazırlamak için kullanıcı arayüzü bileşenini seçmenize ve kullanmanıza olanak tanır. Sınırlamaları var, bazıları esnek değildir. Doğru tasarlanmış ve el kodu verilen sayfalar genellikle çok daha üstün ve çok daha esnektir. 3. WordPress Sayfa Şablonu (Devam) ile bir açılış sayfası nasıl yapılır (devam) Bilgili / yetkin bir WordPress geliştiricisi veya kullanıcı iseniz, şu anda WordPress temanızı yön sayfanız için özel bir sayfa şablonu eklemek için düzenleyebilirsiniz. Birçok ticari WordPress teması, belirli bir amaca sahip her sayfa şablonunun bir kısmı ile birlikte gelir. Bir temanın bir veya birkaç şablonu olabilir. Her ne kadar yüksek kaliteli temalar daha önce çeşitli amaçlar için yapılan birkaç plaka bitkisi sunar. Bu nedenle, boş bir sayfa şablonundan kendi yön sayfanızı oluşturabilirsiniz. Tasarım için sadece bazı CSS becerilerine ve gözlerine ihtiyacınız var. İllüstrasyon amacıyla, yirmi üç temada boş bir sayfa şablonu kullanarak basit bir yön sayfası oluşturacağım. Çekici büyük başlığı yalnızca boş bir sayfa şablonunda büyük bir düğme ile birlikte yerleştireceğim. Özel bir alana sahip olacak bir yön sayfası oluşturuyorsanız, ana sitenizin bir parçası olmayacak bir yön sayfası oluşturuyorsanız, bu yöntemin ideal olduğunu lütfen unutmayın. Multisite size tasarımda çok fazla esneklik vermez, ancak özel bir alan adı size diğer sayfalar hakkında endişelenmeden istediğiniz temayı sökme özgürlüğü verir. Not: Bu seçeneği yalnızca bilgiye ve deneyimli kodlara sahip geliştiriciler veya gelişmiş WordPress kullanıcıları için öneririz. . Sadece WordPress kullanıyorsanız, yön sayfalarınızı oluştururken temaları ve eklentileri kullanmaya devam etmenizi şiddetle tavsiye ederiz. Adım 1: Bir Çocuk Tema Klasörü oluşturun çünkü diğer temalarda değişiklik yapacağım, bir çocuğun teması yaparak başlamak önemlidir. Bu şekilde, temel tema güncellendiğinde temadaki her değişiklik kaybolmayacaktır. Başlamak için önce web sitenize FTP aracılığıyla bağlanmalı ve WP-Concent/Themes dizininizde çocuğunuzun teması için yeni bir klasör oluşturmalısınız. Düzenlediğiniz temanın sonuna “çocuk” eklemenizi öneririz (örneğin, yirmi on üç çocuk veya tanıyacağınız aynı şey). Temel temanızda değişiklikler oluşturmak için yeni dosyalar ekleyeceğiniz yer burasıdır. Adım 2: Yeni Bir Style.css Dosyası Oluşturun Çocuk Teması için Yeni Oluşturduğunuz Çocuk Tema Klasörünü Açın ve Style.css adlı yeni bir dosya ekleyin (bu yeni stil sayfanız olacaktır). Ardından, WordPress Gösterge Tablo’nuzda, görünüm> editör açın. Editör penceresinde, varsayılan stil sayfası açılışını göreceksiniz. Orijinal tema dosyasını kılavuz olarak kullanarak, stil tarzı için bir başlık bölümü oluşturun.css Az önce oluşturduğunuz çocuğunuzun teması, /* Tema Adı: Twentythirtiachild Tema: Açıklama: Bir Çocuk Teması için bir Çocuk Teması Varsayılan yirmi on üç WordPress tema sürümü: 1.0.0 */ Yeni stil sayfanız hazır olduğunda, bir sonraki adım, ana stil sayfasını bekleyerek yüklemektir. Adım 3: Çocuğunuzun teması için bir function.php dosyası oluşturun Çocuğunuzun temasını etkinleştirdiğinizde, web siteniz herhangi bir stil içermez, böylece ana temalı sayfanızı yüklemek istersiniz. Bunu yapmak için, çocuğunuzun tema klasöründe functions.php adlı yeni bir boş dosya oluşturun. Sonra aşağıdaki kodu ekleyin: <php işlevi my_theme_enqueue_styles () {$ parent_style = 'yirmi thirteen style'; wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css'); wp_enqueue_style ('yirmiThirtiachild-style', get_stylesheet_directory_uri (). } Add_action ('wp_enqueue_scripts', 'my_theme_enqueue_styles'); Bu, annenizin temasının anne teması sayfanızdan sonra düzenlenen temasının stilini içerecektir. Artık yirmi on üç tema için çalışan bir çocuk temanız var – değişiklik yapma zamanı! Adım 4: Stilinizi kullanıma hazır çocuğunuzun temasına göre ayarlayın, yön sayfanızı ayarlamaya başlayabilirsiniz. İlk olarak, bir yön sayfası oluşturduğunuz için ana gezinmeyi silmek isteyebilirsiniz. Bunu yapmak için, Style.css çocuğunuzun temasına aşağıdaki kodu ekleyin (Not: Navigasyon öğenizin adı bizim adımızdan farklı olabilir. Öğenin adını bulmak için bir tarayıcı denetçisi kullanabilir veya kontrol edebilirsiniz. header.php dosyası):/*Tema Adı: TwentyThirtiachild Tema Uri: Açıklama: Varsayılan yirmi on üç tema için bir çocuk teması: 1.0.0*//*Açılış sayfası için özel stil*/body. navbar {ekran: none; } Sitenizi şimdi görürseniz, gezinme kaybolur. Bunun yerine, kayıt sayfasına ve daha sonra ana web sitesine yol açacak büyük CTA düğmesine gireceğiz. Daha sonra, yazı tipi boyutunu değiştirerek stil sayfasındaki site üstbilgisini (H1) ayarlıyoruz. Site üstbilgisi sınıf tarafından tanımlandı. Bir kez daha, başlığınız tarafından hangi öğelerin kullanıldığını görmek için kendi temanızı kontrol edin, çünkü örnekte olandan farklı olabilir. Yazı tipi boyutunu büyütmek için, bu kodun son satırını çocuğunuzun tema stiline ekleyin: /*Tema Adı: TwentyThirdenchild Tema: Açıklama: Varsayılan yirmi üçüncü tema için bir çocuk teması: 1.0.0* / /*Özel şekillendirme açılış sayfası için*/ gövde .navbar {ekran: yok; } gövde .Site-title {yazı tipi boyutu: 90px; } Sayfanızı kaydedin ve yenileyin.Daha büyük bir başlık göreceksiniz: Adım 5: Boş bir sayfa şablonu oluşturun ve WordPress düzenleyicisinde ön sayfa.php adını adlandırın, kodu görmek için sayfa şablonunu (page.php) tıklayın.İlk satırı Get_Header () adresine kopyalayın:
Kod düzenleyicisini açın ve bir önceki adımda kopyaladığınız Front-Page.php Yapıştır Çizgisi adlı yeni bir dosya oluşturun. Bu yeni dosyayı çocuğunuzun tema klasörüne kaydedin. Ön sayfa neden.php? Bu statik bir ön sayfa olacağından, her zaman önce seçildiğinden ve görüntülenmesini ve ön sayfanın WordPress şablonu hiyerarşisinde en yüksek önceliğe sahip olduğundan emin olmak istersiniz). Ayrıca, şablon dosyanızda altbilgiye (get_footer () işlevini kullanarak girebilirsiniz veya olmayabilirsiniz. Ben ortadan kaldırdım. Yorumlar bölümündeki ilk satırı silin ve şablon adını değiştirin – buna yön sayfam diyoruz. Değişikliği kaydet. Sitenizi şimdi görmeye çalışırsanız, yalnızca değiştirilmiş bir üstbilgi ile boş bir sayfa tarafından memnuniyetle karşılanırsınız. Bu bir ön sayfa.php şablonu. Boş çünkü herhangi bir içerik eklemedik. Adım 6: Başlayıcıyı düzenledikten ve boş bir sayfa şablonu oluşturduktan sonra yön sayfası için özel içerik işaretlemesini girin, gerçek içeriği yön sayfasına ekleme zamanı. Geriye kalan tek şey büyük düğmelerimizi yeni ön sayfa şablonumuza yerleştirmektir. Bu kodu dosyanıza yapıştırın ve kaydedin. Bu sadece Div’e sarılmış bir bağlantı ve hepsi bu. /** * Şablon adı: açılış sayfam * * Bu, varsayılan olarak tüm sayfaları görüntüleyen şablondur. * Lütfen bu, sayfaların WordPress yapısı olduğunu ve WordPress sitenizdeki diğer ‘sayfaların’ farklı bir şablon kullanacağını unutmayın. * * @package wordpress * @subpackage yirmi_thirteen * @Since yirmi on üç 1.0 */ get_header (); ?>
burada büyük düğme
Sitenizi gördüğünüzde, sayfa içeriği bölümüne yeni eklediğimiz başlığı, düğmenin bağlantısının metniyle birlikte göreceksiniz: Şimdi CSS stili ile bir yaşam sayfası vermenin zamanı geldi . Açık görünüm> editör. Düzenleme için style.css dosyasını açmak için Styles sayfasına tıklayın. Bu kodu yapıştırın ve kaydet: /* Tema Adı: TwentyThirdenchild Tema Uri: Açıklama: Varsayılan yirmi on üç tema için bir çocuk teması: 1.0.0* / /* Açılış sayfası için özel stil* / gövde. } gövde .Site-title {yazı tipi boyutu: 90px; } .landing-page {genişlik:%80; Marj: 0 otomatik; Metin-align: merkez; } .button {ekran: blok; Genişlik:%50; Arka plan: #FF6600; Sınır: 2px katı #ff8533; Renk: RGBA (255, 255, 255, 0.55); Metin-align: merkez; Yazı Tipi: Bold 3.2em/100px ‘Açık Sans’, ‘Helvetica Neue’, Arial, Helvetica, Sans-Serif; Marj: 100px Auto Auto Auto; -Webkit-Sınırlı-Radius: 15px; -Khtml-Sınırlı-Radius: 15px; -Moz-Sınırlı-Radius: 15px; Border-Radius: 15px; Metin gölgesi: 0 3px 3px RGBA (255, 255, 255, 0.2); } A.Button {Text-Decoration: Yok} A.Button: Hover {Color: #fff; Arka plan: #FF8533; Arka Plan: -Webkit-Linear-Sınıflandırıcı (üst, #FF8533, #FF8533); Arka plan: -moz-linear-gradyan (üst, #ff8533, #ff8533); Arka plan: -o-lineer-gradyan (üst, #ff8533, #ff8533); Arka plan: -MS-Linear-Sınıf (üst, #FF8533, #FF8533); Arka plan: doğrusal gradyan (üst, #ff8533, #ff8533); } Şimdi sayfanız şöyle görünecek:
