Selam millet,
Bu derste size nasıl bir sağlık, kilo verme, fitness veya yaşam tarzı web sitesi yapacağınızı öğreteceğim.
İşte video eğitimi:
Kanalıma abone ol:
Ve şimdi adım adım metinde 😉
Studiopress'in Wellness şablonu bu temalar için idealdir ve en iyisi Genesis 😉
Şablonun fiyatı 99,95 $'dır, ancak benim öğrencimseniz, şablonu ücretsiz olarak indirebilirsiniz. özel alan bu sitenin 😉
Nasıl görüneceğine dair bir demo görmek isterseniz, buradan yapabilirsiniz: Studiopress.com/Sağlık
Kitap veya dijital ürünler satıyorsanız, daha sonra kuracağımız eklentiler sayesinde ürün sayfaları olduğu için bu şablon bunun için hazırlanmıştır.
Beyaz arka planı ve büyük fotoğrafları olan çok temiz bir şablon.
Öncelikle ihtiyacımız olan şey sunucumuzda wordpress kurulu olması. Bu noktaya nasıl geleceğinizi bilmiyorsanız veya WordPress'i daha iyi tanımanız gerekiyorsa, bunun için şu adreste bir kursa sahipsiniz. Premium Bölge. Zaten wordpress'iniz varsa devam edelim 😉
Wellness şablonunu yüklemeden önce Genesis ana şablonunu yüklememiz gerekir.. Bir Genesis alt şablonu kullandığımızı unutmayın.
Kurulduktan sonra onu etkinleştiririz, ardından Wellness kızı şablonunu etkinleştiririz.
Yüklemek için WordPress menüsü Görünüm -> Temalar -> Yeni Ekle -> Tema Yükle seçeneğine gitmeniz ve Şimdi yükle'ye tıklamanız yeterlidir:
Kurulduktan sonra etkinleştirin.
Hatayı alma konusunda endişelenme «Lütfen bir Genesis Alt Temasını Etkinleştirin: Yalnızca Genesis Framework ana temasını kullandığınızı fark ettik. Bununla bir Genesis alt teması çalıştırmanızı şiddetle tavsiye ederiz (hatta kullanabileceğiniz ücretsiz bir temamız bile var). Daha fazla bilgi için https://www.studiopress.com/genesis-always-use-child-theme/ adresindeki makalemize bakın.»
Bu hata, herhangi bir alt şablon kullanmadan ana Genesis şablonunu kullandığımıza dair bir uyarıdır.
Bunu daha sonra değiştireceğiz.
Şimdi web'in düzgün çalışması için gerekli olan birkaç eklenti yükleyeceğiz, bunlar ücretsiz ve şunlar:
Eklentileri yüklemek için eklentilere gitmemiz gerektiğini unutmayın -> Yeni Ekle ve kurmak istediğimiz eklentiyi arayın:
Ve her zaman bir eklenti yükledikten sonra etkinleştirin çünkü etkinleştirmezseniz kullanamazsınız 😉
Şimdi Wellness şablonunu, yani Genesis'in kızı şablonunu yükleyebiliriz.
Bunu yapmak için Görünüm -> Temalar -> Yeni Ekle -> tema yükle'ye gitmeli ve Wellness şablonunu yükleyip etkinleştirmeliyiz.
Şablonu zaten yüklemiş olmamıza rağmen, sonuç yine de demonunki değil.
Yine de test içeriği eklememiz ve sayfaların, menülerin ve widget'ların içeriğini yapılandırmamız gerekiyor.
Tema Sağlık demo içeriğini içe aktarın:
Bu şablon, test içeriği ile hazırlanmış olarak gelir. Bu sayede şablona özel hazırlanmış demo içeriği ile nihai sonucu görebiliriz.
Şablonu oluşturanların istediği nihai sonucu görebileceğiniz ve onu kullanmayı öğrendiğinizde zaten kendi içeriğinizi eklediğiniz için kullanmanız önerilir.
Demo içeriğini yüklemek için şablonu açmamız ve aşağıdaki resimde görebileceğiniz gibi XML klasöründeki Wellness.xml dosyasını aramamız gerekiyor:
Şimdi içe aktaracağımız xml dosyasını bulduk, bunu yapmaya devam ediyoruz.Bunu yapmak için, WordPress yönetim panelinde Araçlar menüsü -> İçe Aktar -> WordPress -> İthalatçıyı yükle -> İthalatçıyı çalıştır seçeneğine gidin. ve aşağıdaki resimde gördüğünüz gibi içe aktarmak istediğimiz dosyayı yükleyin:
Bize içe aktarılan içerikten hangi yazarın olmasını istediğimizi soracaktır, kullanıcımızı seçip "Ekli dosyaları indir ve içe aktar" kutusunu işaretleyip gönder'e tıklıyoruz:
Her şey yolunda giderse, web sitenizde oluşturulmuş çok sayıda içerik olduğunu göreceksiniz, örneğin gönderilere giderseniz bunu görebilirsiniz:
Şimdi içe aktardığımız tüm içeriği web'in demodaki gibi görünmesi için yerleştirmemiz gerekiyor.
Bunu yapmak için önce menüyü ve ardından Widget'ları yapılandıracağız.
Menüyü Yapılandır
Bir demo menüsü de içe aktarıldı, bu yüzden çok kolaylaştık.
Görünüm –> Menüler –> Yerleri Yönet seçeneğine gidiyoruz ve Üst Bilgi Menüsü seçeneğinde Üst Bilgi Sonrası Gezinme menüsünü seçiyoruz ve Alt Bilgi Menüsü konumunda bu ekran görüntüsünde görebileceğiniz “Alt Bilgi Gezinme” menüsünü seçiyoruz:
Bu yapıldıktan sonra, web sitemize yerleştirilmiş menümüz zaten var:
Son öğeye bakarsanız, altında yeşil bir çizgi var. Bir menü öğesini bu şekilde vurgulamak için bunu menü konfigürasyonundan yapmalıyız.
Üst kısımda "Ekran Seçenekleri" yazıyor, onu görüntülememiz ve CSS sınıflarını seçmemiz gerekiyor:
Bu seçeneğin seçilmesi sayesinde, artık her menü öğesinde bir sınıf ekleme ve böylece herhangi bir öğeyi vurgulanmış olarak işaretleme olanağına sahibiz.
Bunu yapmak için herhangi bir menü öğesini görüntüleriz ve koyduğumuz css sınıflarında yüksek ışık ve bu şekilde öğenin altındaki yeşil çizgi ile görünecektir.
Widget'ları Yapılandır
Şimdi web sitemizi biçimlendirecek kısımla çalışmaya başlıyoruz.
Ana sayfa, nihai sonucu elde etmek için tamamen widget'lardan oluşur. Görünüm -> Widget'lara gidersek aşağıdakileri buluruz:
"Ön Sayfa" ile başlayan ve ana sayfaya ait olan tüm widget bölgeleri ve görebileceğiniz gibi 6 bölgemiz var. Herhangi bir widget seçmediğimiz takdirde ana sayfamız en güncel blog yazıları olacaktır. Bir widget eklersek, artık en son gönderiler değil, bu widget'lara eklediklerimiz görünecektir.
Bölgelerin her birini yapılandıralım
Ön Sayfa 1
Bu alanın nihai sonucu aşağıdaki gibidir:
Bir arka plan resmi ve bir metin kutusu olduğunu görebilirsiniz. Widget'tan metni ekleyeceğiz ancak görüntü buradan yapılmadı.
İlk önce metin kutusunu ekleyeceğiz, bunun için istediğimiz içeriğe sahip bir metin widget'ı ekliyoruz, biçimlendirme ve her şeyi içeren bir test olanı paylaşıyorum:
<h3 class="large-title accent-color">It Shouldn’t Be This Hard to Be Healthy…</h3> Sign up for a free membership and you’ll get instant access to a lot more valuable information created exclusively for you! <a class="button hexagon" href="#">Want to know more?</a>
"Paragrafları otomatik olarak ekle" seçeneğini işaretliyoruz
bu widget'ın bir ekran görüntüsü:
Bahsettiğim gibi, arka plan görüntüsü başka bir yerde yapılandırılmıştır. Yapılandırmak için Görünüm -> Özelleştir -> Ön Sayfa Arka Planları görüntülerine gidiyoruz. ve aşağıdakileri buluyoruz:
Burada, her bir widget için aynı numaralandırmaya sahip bir tane olmak üzere 3 resim eklemeliyiz; yani, Ön Sayfa widget'ı 1 için bu, "Öne Çıkan Bölüm 1 Resmi" resmidir, Ön Sayfa widget'ı 3 için "Öne Çıkan Bölüm 3 Resmi" resmidir. " ve Widget Ön Sayfa 5 için «Öne Çıkan Bölüm 5 Resmi» resmi
Örnekte bunlar demoda gelen resimlerdir, ancak kendinizinkini eklemek isterseniz 1800 × 1000 piksel boyutundadır.
Widget'lara geri dönelim 😉
Ön Sayfa 2
Bu alanın nihai sonucu aşağıdaki gibidir:
Bu alana küçük bir değişiklikle 4 adet birbirinin aynı widget'ı ekleyeceğiz. Ekleyeceğimiz widget “Genesis – Öne Çıkan Gönderiler” ve “Yazı Başlığını Göster”, “Gönderi bilgilerini göster” ve “Öne Çıkan Görseli Göster” seçeneklerini “Yazar pro görseli 640×640” boyutunda işaretliyoruz.
İşte nasıl görüneceğinin bir ekran görüntüsü:
“Ofsetlenecek Gönderi Sayısı” alanında tek bir değişiklik yaparak bu alana 3 özdeş widget (toplamda 4) daha ekledik. İlk widget'ta onu 0'da, sonrakinde 1'de, sonrakinde 2'de vb. bırakın. Bu sayede her birinde farklı yazılar karşınıza çıkacaktır.
Ön Sayfa 3
Bu alanın sonucu aşağıdaki gibidir:
Bunu başarmak için, bunu Ön Sayfa 1 alanındaki ile aynı şekilde yapardık.
Ön Sayfa 4
Bu alanın sonucu aşağıdaki gibidir:
Bunu başarmak için, Ön Sayfa 2 alanında yaptığımıza çok benzer, ancak Genesis Author Pro – Öne Çıkan widget'ı kullanarak yapacağız.
4 özdeş widget ekleyeceğiz, ancak her durumda farklı bir kitap seçeceğiz.
Aşağıdaki seçenekleri işaretlememiz gerekiyor:
Kitap: İstediğimiz kitap
Öne Çıkan Resmi, Öne Çıkan resim boyutunda 640×640 ile göster
Kitap Başlığını Göster
Kitap Yazarını göster
İçerik türü: İçerik yok
Bu resimde görebilirsiniz:
Ön Sayfa 5
Bu alanın sonucu aşağıdaki gibidir:
Bunu başarmak için, bunu Ön Sayfa 1 alanındaki ile aynı şekilde yapardık.
Ön Sayfa 6
Sonuç aşağıdaki gibidir:
Bunu, içinde aşağıdaki içeriğe sahip bir metin widget'ı ekleyerek elde ederiz:
<div class="one-fourth first"> <img class="avatar alignleft" src="http://demo.studiopress.com/wellness/files/2016/06/gracie.jpg" /> </div> <div class="three-fourths"> <blockquote>For someone who was convinced that it was easier and less expensive to buy items than put effort into making them with all natural ingredients, this website has been a complete life change! I feel so amazingly good! I sleep better, I have way more energy, my skin is bright, my smile is whiter and overall I FEEL GOOD! I am so thankful for this blog! I access it daily for recipes, information and ideas! <cite>Gracie, New York</cite> </blockquote> </div>
Altbilgiden önce
Sonuç aşağıdaki gibidir:
Bu alana instagram widget'ını ekleyeceğiz.
Instagram widget'ını buraya sürükleyip kullanıcı adımızı ekliyoruz ve karşınıza 5 adet "büyük" boyutlu görsel çıkıyor
Burada nasıl yapılacağını görebilirsiniz:
Altbilgi
Bu alanın sonucu:
Bunu başarmak için iki widget eklemeliyiz:
Aşağıdaki içeriğe sahip ve “Paragrafları otomatik olarak ekle” seçeneğini işaretleyen bir Metin Widget'ı:
The Wellness blog provides simple answers for healthier families through research, tutorials, recipes, and living life with lots of kids! <div class="one-half first"> <ul> <li><a href="http://demo.studiopress.com/wellness/category/health/">Health</a></li> <li><a href="http://demo.studiopress.com/wellness/category/natural-home/">Natural Home</a></li> <li><a href="http://demo.studiopress.com/wellness/category/motherhood/">Motherhood</a></li> </ul> </div> <div class="one-half"> <ul> <li><a href="http://demo.studiopress.com/wellness/category/recipes/">Recipes</a></li> <li><a href="http://demo.studiopress.com/wellness/category/remedies/">Remedies</a></li> <li><a href="http://demo.studiopress.com/wellness/category/reviews/">Reviews</a></li> </ul> </div>
Ve Enews Genişletilmiş widget'ı.
Enews Extended widget'ı, kullanıcıların bize e-postalarını bırakmaları için kullanılır. Bu eğitimde sadece görsel olarak nasıl yapılandırılacağını görüyoruz, ancak bunu otomatik yanıtlayıcınız ile yapılandırmak istiyorsanız burada nasıl yapıldığını görebilirsiniz. Mailchimp ile yap y burada aweber'de
"Form Öncesinde Gösterilecek Metin" seçeneğinde örnekte formdan önce görünmesini istediğimiz metni ekliyoruz:
<h3>Get Free Education</h3> <p>When you claim your free Wellness membership, you’ll get instant access to a library of resources for moms, including our ebooks.</p>
Form eylemi: otomatik yanıtlayıcımızın url'si, örnekte #
E-posta Alanı: E-posta
İsim Alanı: İsim
Ve buraya kadar geldiyseniz, demoda göründüğü gibi şablona zaten sahipsiniz. Bu harika şablon üzerinde daha fazla eğitim yapacağım 😉