Divi ile Üyelik Sitesi Nasıl Oluşturulur – Bölüm 2
Üyelik ve Divi’yi birleştirerek tam bir üyelik sitesinin nasıl oluşturulacağını göstereceğim bu bölümün 2. Serisi 2. Bölümüne hoş geldiniz. Üyelik sitenizi, özel kayıt sayfası, e -posta bildirimi ve belirli bir süre içinde damlayan üç üyelik seviyesi dahil olmak üzere kurslar veya çevrimiçi ürünler satmak için ihtiyacınız olan her şeyle nasıl düzenleneceğimde size katılın. Artı daha. Ayrıca, Divi üreticileriyle birlikte kısa bir üyelik kodu kullanarak üyelik sayfalarınızı nasıl tasarlayacağınızı da göstereceğim. Onu kaçırmak istemezsin!
Divi ile tamamlanmış bir üyelik sitesi oluşturma görevimize devam etmeye istekliyim. Önceki gönderide, üyelik sitesi işlevlerinizi üye basıncını kullanarak nasıl oluşturacağınız konusunda size rehberlik ediyorum. Bu nedenle, sürece katılırsanız, bugünün öğreticisi için uygun olmalısınız. Bugün tamamen tasarımla ilgili. Daha spesifik olarak, DIVI Builder kullanarak üyelik sitenizi nasıl tasarlayacağınızı (Üyeler tarafından oluşturulan üyelik sayfaları bile) nasıl tasarlayacağınızı göstereceğim. Tasarım sürecini önemli ölçüde hızlandırmak için Divi Düzen Paketi Öğrenme Yönetim Sistemini kullanacağım ve bizi soğuk bir durumda bırakmamızı sağladığında nadir anlar için ve Divi Builder’ı kullanamayız, bunun için birkaç CSS’im var. Ama genel olarak amacım daha az özel CSS ve daha fazla Divi Builder.
Gizlice göz atma Aşağıdaki kontrol listesi, bu öğreticiye başlamadan önce sahip olmak istediğiniz bazı şeylerdir. Düzen Paketi Öğrenme Sistemi Öğrenme Bu öğreticide üyelik sayfaları tasarlamak için Öğrenme Yönetim Sistemi Düzen Paketini kullanacağım. Yapmadıysanız ve Divi kütüphanenize aktardıysanız kopyanızı aldığınızdan emin olun. Divi düzen paketlerinin nasıl hazırlanacağına dair ek yardım için bu ipuçlarına bakın. Üyelik sayfaları şimdiye kadar bir sonraki sayfayı oluşturmanız gerekir. Bu sayfada içeriğe sahip olmanıza gerek yok. Sadece WordPress kontrol panelinizde yapılmaları gerekir. Bu sayfaların bazıları özellikle çevrimiçi kurslar sunan üyelik siteleri içindir. Kendi sitenize ayarlamanız gerekebilir.
Fiyat sayfası
Üyelik kursu özeti
Ders sayfaları
Kayıt sayfası
Membetpress ön uç (ayrılmış) sayfası oluşturuldu
Hesap sayfası
Gelen sayfa
Teşekkürler Sayfa
Divi ile Üyelik Siteleri Nasıl Oluşturulur – Bölüm 2 YouTube kanalımıza abone olun, temayı ayarlamayı ayarlayın Divi düzenlerinden birini kullansa bile, temanızın ayar ayarlarını göz ardı etmek istemezsiniz. Tabii ki burası, başlıklarınızı, navigasyon ve altbilginizi tasarlamak zorunda olduğunuz yerdir, çünkü ithal ettiğiniz divi düzeninin bu öğeler üzerinde bir etkisi yoktur. Ayrıca, kesinlikle Divi Builder tarafından ayarlanamayan bir sayfanız veya içeriğiniz olacağından, varsayılan ayar temasını ayarlamak, bu öğeleri Divi oluşturucunun dışındaki hedeflemenin bir yoludur.
Tema ayarını güncellemek için Divi> Tema Ayarlaması. Sadece bazı değişiklikler yapacağım ama daha fazlasını yapmaktan çekinmeyin. Renk Teması Renk Teması Renk Temaları, sitenizdeki birçok farklı öğeyi etkileyecektir. Daha spesifik olarak, bu öğretici için, bu rengi ayarladığınız her şeyin bağlantınızın varsayılan rengi olacağını göreceksiniz, hatta üyeler brifing kodlarında (hesap sayfası gibi) bulunanlar bile. Tema aksanının rengini güncellemek için, Tema Davranış menüsünden Genel Ayarlar> Düzen ayarlarını açın. Kodlama okulu düzeni boyunca kullanılan mor rengi ekledim: #7272ff. Bu eğitim için kullandığım Codean Okulu Düzeni Paketinde tipografik ayarları değiştirin, aslında modül seviyesinde özel bir yazı tipi yoktu, bu yüzden yapabilirim Tema ayarından varsayılan yazı tipini ayarlayın, tüm düzenlere uygulanır. Her neyse, bu tipografik ayarlarınızı burada siteniz için bir yedek olarak yönetmek için iyi bir fikirdir. Tipografik ayarları güncellemek için Genel Ayarları Aç> Tema Ayarlama Menüsünün Tipografisi.
Üyelik sayfaları için kullanım için genel bir düzen oluşturun Genel düzen, temel olarak ihtiyacınız olabilecek ek sayfalar için kullanabileceğiniz çok yönlü bir düzendir. Genel düzenimizi oluşturmak için hesap sayfasını kullanacağım. Bir hesap sayfası oluşturmalı ve bunu üyePress seçeneğinde varsayılan hesap sayfası olarak ayarlamalısınız (bu öğreticinin Bölüm 1’e bakınız). Not: Üyeler tarafından sizin için otomatik olarak oluşturulabilecek varsayılan bir hesap sayfası vardır. Ancak, bu sayfa Divi Builder’ı kullanamadığından, en iyisi kendi hesap sayfanızı oluşturmak ve varsayılan hesap sayfanız olarak ayarlamaktır. Bu şekilde Divi Builder ile tasarlayabilir ve ardından bir modülle bir kullanıcı hesabı bilgi formu oluşturmak için kısa bir kod ekleyebilirsiniz. Şimdi gidip hesap sayfasını düzenleyin. Sayfanıza görsel üreticileri ve iletişim sayfası düzeni içe aktarın. “Hesabım” demek için sayfa başlığını güncelleyin. Ardından, bir sütun satırında hiçbir şey olmayacak şekilde sütundaki tüm modülleri silin. Sağ tıklama menüsünü kullanarak, metni “sık sık sorulan sorular” nın hemen altında tutmak için metin modülünü kopyalayın. Ardından, yeni oluşturduğunuz sütunun bir satırına yapıştırmak için sağ tıklama menüsünü kullanın.
Şimdi tasarım sekmesinin altındaki aşağıdaki seçeneğe eklediğiniz metin modülü ayarlarını güncelleyin: Metin Oryantasyonu: Sol Genişlik:% 100 (Varsayılan) Sayfanızı kaydedin. İsterseniz aşağıdaki parçaları silebilirsiniz, ancak bu öğelerden birini belirli bir sayfa için istiyorsanız, bırakmanız iyi bir fikir olabilir. Not: Hesap sayfanız tamamlanmadı (yine de kısa bir kod eklememiz gerekiyor), ancak yakında mevcut olacak. Şu anda bu düzeni sadece genel düzen şablonumuz için kaydetmemiz gerekiyor. Ardından, bu düzeni Divi kütüphanenize kaydetmeniz gerekir. Sayfa Ayarları menünüzü açın (görsel yapımcınızın altındaki Mor Simge). Kütüphaneye kaydet’i seçin ve yeni şablonu “Genel Düzen” adını adlandırın. Ardından kütüphaneye kaydet’i tıklayın. Artık sitenizde ihtiyacınız olabileceği diğer üyelik sayfaları için kullanım için tam geniş bir düzeniniz var. Tek yapmanız gereken, rahatça başlamak için bu genel düzeni kütüphanenizden çekmek. Artık genel bir düzenimiz olduğuna göre, Üyeler PREMPress’in ön uç sayfasını ele alalım. Üyeliğin ön sayfasının ön sayfasının ön sayfasını tasarlamak hakkında bir kelime, üyelik işlevleri için özel bir sayfadır. Genellikle bu sayfa kullanıcı hesabı bilgilerini, ödeme sayfasını (ücretli üyelik için) ve giriş veya kayıt sayfasını yönetmek için bir hesap sayfası içerir. Belki eklentiye bağlı olarak daha fazla sayfa vardır. Genel bir kural olarak, Divi’nin üçüncü taraf eklentisi tarafından üretilen sayfalarla neler yapabileceği için sınırlar olacaktır. Sayfa içeriği kısa bir kodla üretilirse (örneğin WooCommerce veya MussPress gibi), bir sayfadaki bir modülde Divi Builder’ı kullanabilen kısa bir kod kullanabilirsiniz. Bu şekilde, metin modülüne kısa kod ekleyerek ve Modül Tasarım sekmesindeki tasarım ayarlarını değiştirerek üretilen içerik tasarımını ayarlayabilirsiniz. Bu öğreticinin 1. Bölümünde tartıştığım gibi Üyeler Alt sayfasının ön sayfasını tasarlayan Kembikpress, sipariş etmeniz gereken 3 ön sayfaya sahiptir: Teşekkürler sayfası, hesap sayfası ve giriş sayfası. Bu sayfalar sekme Üyeleri Seçenek sayfası altında seçilir. Varsayılan kayıt sayfasını kullanmayacağımız için, bir kayıt sayfası da tasarlamamız gerekiyor. Ama önce, hesap sayfamızla başladığımızı bitirelim. Kullanılan Düzen Hesabı Sayfası: Kullanılan Kısa Kodun Genel Düzeni: [MEPR-Accunt-Form] Tasarım Değişikliği: Genel düzenimizi oluştururken hesap sayfasını tasarladık, burada yapılması gereken ana şey kısa eklemektir Metin modülüne kodlar ve ardından tasarım ayarlarını kısa koddan görüntülenen formdaki metin ve bağlantıları hedeflemek için güncelleyin. Örneğin, metnin boyutunu 18px olarak değiştirmek tüm hesap bilgileri metnini 18px olarak değiştirir. Ve bağlantının metnini ayarlamak, hesap bilgileri boyunca hesap gezinme menüsü bağlantılarını ve diğer bağlantıları da etkiler. Özel CSS: Hesap bilgilerinden belirli öğelerin hedeflenmesinin sınırlamaları nedeniyle, ek CSS: /* hesap sayfası düğmelerinin altındaki ayar temalarına aşağıdaki özel CSS eklemenizi öneririm* /. MEPR- Gönder, .Button- Birincil, .mepr-aktif-nav-tab a {
Renk: #ffffff! Önemli; Sınır genişliği: 10 piksel! Önemli;
Sınır rengi: #7272ff;
Border-Radius: 100px;
Harf alanları: 1px;
yazı tipi boyutu: 16px;
Yazı tipi-ağırlık: 700! Önemli;
Text-Transform: Büyük harf! Önemli;
Dolgu-sol: 2em;
Dolgu-Sağ: 2em;
Arka Plan Renk: #7272ff! Önemli;
}
#Mepr-account-nav {
Metin-align: merkez;
}
.mepr-nav-ı a, .mepr-ödemeler a {
Arka plan: #eeeeee;
Dolgu: 0.5EM 1EM;
Border-Radius: 100px;
}
/*Styles Form alanları ve metin formu alanı metni*/
.mp_wrapper textarea, .mp_wrapper seç, .mp_wrapper girişi [type = text], .mp_wrapper girişi [type = url], .mp_wrapper girişi [type = e -posta], .mp_wrapper giriş numarası], .mp_wrapper girişi [tip = şifre] {parola] {
Sınır: 1 piksel katı RGBA (71,74,182.0.12)! Önemli;
Renk: RGBA (114,114,255.0.91)! Önemli;
Dolgu: 12px 10px! Önemli;
Arka plan: #f8f8f8
}
Bu CSS, hesap gezinme navigasyonuna, form alanlarına, form düğmelerine ve bağlantılara stil ekleyecektir. Bu aynı zamanda formunuza ve kayıt düğmenize de benzer bir stil ekleyecektir.
Teşekkürler Kullanılan Katmanlar: Genel Düzen Tasarımı Modifikasyonu: Yapılması gereken tek şey düzeni yeni içerikle güncellemektir. Önemli bir ek, kullanıcıları kaydoldukları kursa yönlendiren CTA’dır. Teşekkürler sayfası, kullanıcının kayıt işlemini tamamladıktan sonra yönlendirildiği yerdir. Bu özel bir eklenti sayfası değil, bu nedenle bunun için Divi Builder’ın gücüne sahipsiniz. Genel Düzeni Divi Kütüphanesi sayfasına aktarın, sayfa başlığını güncelleyin ve içerik ekleyin. Teşekkürler Varsayılan bir sayfayı Üyeler basınçında ayarlayabilirsiniz. Ve sayfanın altındaki Üyelik Seçeneği Kayıt sekmesinde “Özel Teşekkür Sayfası Mesajını Etkinleştir” i seçerek yaptığınız her üyelik için değiştirebilirsiniz. Hatırlatma: Her üyelik için CTA’yı ayarlayabilmeniz için diğer üyeliğiniz için devam etmek ve başka bir şükran sayfası oluşturmak isteyebilirsiniz. Pregness Giriş] Not: Üyelipress seçeneğinde sayfa sekmesinin altında seçtiğiniz herhangi bir oturum açma sayfası, yerleştirmek için bir seçeneğe sahip olacaktır. Sayfayı düzenlerken sayfada oturum açma formu.
Tasarım Değişikliği: Codean Kişiye Düzenini kullanıyorum çünkü üyeliği kaydetmek için Oturum Açma ve CTA Formunu girmek için İletişim Formu bölümündeki iki sütun düzenini kullanmak istiyorum. Özel CSS: Neyse ki, hesap formumuz için daha önce girdiğimiz özel CSS bize de iyi görünen bir form verdi.
Kayıt Sayfası Düzeni Kullanılan: Kullanılan Kısa Kodlama Kurslarının Düzeni: Tasarım Değişikliğinin Üyeliğine Bağlı: Başlık Hattını Tek Sütun Satırına Değiştiriyorum ve Görüntüleri Sil. Sonra sol içerik bölümündeki bir açıklama dışında her şeyi sildim ve kayıt formumun kısa kodunu içerik modülü içeriğine ekledim. MemberPress, yaptığınız her üyelikle otomatik bir kayıt sayfası oluşturur. Her sayfada kullanılan kayıt formu, Üyeler Seçeneğinde Alan sekmesi altında oluşturduğunuz Kayıt Formundan alınır. Ancak, bu kayıt sayfasını kullanmanız gerekmez. Bir üyelik hazırlarken, Kayıt sekmesinin altındaki Üyelik Seçenek Kutusu’ndaki Üyelik Düzenleme sayfasının altındaki kısa kodların bir listesini kısa üyelik kodunu tıklayarak bulabilirsiniz. Bir kısa kod, özel üyelik için bir kayıt formu oluşturmanıza olanak tanır. Bu, üyelik için oluşturduğunuz kayıt sayfasına eklemeniz gereken kısa bir koddur. Kayıt sayfası ekranı aşağıdadır.
Not: Ne yazık ki, üyelik ödenirse ve bir check -out işlemi gerektiriyorsa, kullanıcı satın alma işlemini tamamlamak için varsayılan kayıt sayfası şablonuna yönlendirilir. Bu nedenle, ödeme yaparken tasarımı tutarlı tutmak için varsayılan kayıt sayfasına bazı özel CSS eklemelisiniz. Hayır, size üyelik sayfamın geri kalanını yapmak için kullandıklarımın düzenini ve değişikliklerini göstereyim. Kullanılan ev sayfalarının üyelik sitesi sayfasının tasarlanması: Kodlama Ana Sayfa Modifikasyon Tasarımı: Grafikleri görüntüleyen bir görüntü modülü yayınladım. Başlığı yaptım ve sütun düzeninin bir kısmı “1..2..3 …” kadar kolay yaptım. Düğmeyi metne değiştiriyorum. Ve kurs bölümünü sunduğum üç kursla güncelleyin (ücretsiz, gümüş ve altın). Yaklaşık 3 dakika sürer, bu yüzden çok yargılamayın :). Kullanılan düzenin üyelik sayfası: Kodlama Kursu Modifikasyon Tasarımı: Başlığı değiştiriyorum. Kurslar içeren satırlar için, sütunun düzenini bir sütuna ve 680px’lik özel genişliğe dönüştürüyorum. Sonra üç kutu hariç her şeyi sildim (aslında açıklama modülü idi). Her birinin altına uygun kayıt sayfasına veya fiyat sayfasına gidecek bir bağlantı ekleyin.
Fiyatlar Sayfaları Kullanılan Düzen: Kodlama Modifikasyon Fiyatı: Bu kolaydır. Tek yaptığım fiyat tablosu içeriğini güncellemek ve her üyelik için kayıt sayfasını açmak için bağlantılar eklemek.
