Divi ile Düğün Duyuru Ana Sayfası Nasıl Yapılır
Bu yazı, mini dizilerimizde 5. Bölümün 1. Bölümüdür. Bu dizide, kendimiz veya Divi’li müşteriler için bir düğün web sitesi oluşturmanın en önemli kısmı boyunca size rehberlik edeceğiz.
Düğün duyuru sayfası hazırlamak, misafirlerinize evleneceğinizi söylemenin yaratıcı bir yoludur. Onlara web sitenizin URL’sini vererek, yine de iletişim halinde olacaklar. Ayrıca istedikleri zaman çevrimiçi evliliğin detaylarını görebilirler. Ana sayfanın evine bakalım, adım adım adım atmanıza yardımcı olacağımız: Navigasyon menünüzü oluşturma Düğün web siteniz için tam olarak bir duyuru sayfası, galeri sayfası ve hediye listesi sayfası nasıl oluşturulacağını göstereceğiz. Bu ilk gönderi bir duyuru sayfası oluşturmaya adanmıştır. Ancak oraya gitmeden önce, konukların web sitenizden sorunsuz bir şekilde yollarını bulabileceklerinden emin olmak istiyoruz. Bu yüzden önce doğru ve zarif navigasyon menüsünü yapmanız gerekiyor. Divi> Tema seçeneğini> açarak başlayın ve tüm web sitelerinizde kullanmak istediğiniz logoyu yükleyin. Değişiklikleri kaydet’i tıklayın ve WordPress Site sayfanıza devam edin. Bir duyuru sayfası oluşturacağınız yeni sayfayı ekleyin. Galeri sayfası ve gelecekteki yayınlarda nasıl yapılacağını göstereceğimiz hediye listesi sayfası için de aynısını yapın.
İçeriği şimdilik boş bırakın ve gezinme menüsünü değiştirmek için web sitenizin temasının ayarlanmasını açın. Menü> Menü Ekle> Sayfaları menü ekle menüyü açarak web sitesi sayfanızı menüye ekleyerek başlayın. Bu menü web sitenizin ana menüsü olmalıdır. Ardından, Başlığı ve Gezinme> Birincil Menü Çubuğunu Açın ve Aşağıdaki Değişiklikleri Yapın: Menü Yüksekliği: 66
Görüntünün boyutlarına bağlı olarak logonun maksimum yüksekliğini ayarlayın
Metin Boyutu: 16
Mektup alanı: 2
Yazı Tipi: Raleway Light
Yazı tipi stili: kalın
Metin rengi: #9b7461
Arka plan rengi: RGBA (155,116,97,0.13)
Şimdi, başlık ve navigasyona geri dönün ve başlık stilini başlık biçiminde ‘ortalanmış’ olarak değiştirin. Yaptığınız değişiklikleri kaydedin ve yayınlayın. Bu web sitesinin duyuru sayfasından başlayarak dört bölümden oluşur ve her bölüm Web Sitesi’ne değerini katkıda bulunur Düğün duyurunuzu tamamlayın. Her bölümü ayrıntılı olarak açıklayacağız ve yukarıda gösterilen düzen ile aynı tasarımı tam olarak nasıl oluşturabileceğinizi göstereceğiz. Kahramanlar (geri sayım dahil) Tasarımın ilk kısmı başlıktır. Geri sayım modülünü geri koyarak konukları doğrudan web siteleri ve düğünlerle etkileşime sokmaya karar verdik. Divi üreticisinde, başlık şöyle görünüyor: Bu web sitesinde tam bir modda bir tam satırla standart bir parça kullanacağız. Sırada üç modül eklemelisiniz; İki metin modülü ve bir geri sayım modülü. Geriye sayım modülü, iki metin modülünün ortasında bulunur. İlk metin modülü ile başlayın Metin modülünü satıra ekleyerek başlatın. Kullanmak istediğiniz metni yazın, metnin yönünü ‘orta’ olarak değiştirin ve aşağıdaki değişiklikleri Gelişmiş Tasarım Ayarları sekmesine uygulayın: Metin yazı tipi boyutu: 100px (masaüstü), 80px (tablet), 66px (cep telefonu)
Metin yazı tipi: mandalina
Metin Rengi: #9B857B
Aynı sekmede, üste ‘%10’ ve ‘%5’ aşağı ekleyerek metin modülü marjınızı aşağı kaydırın ve değiştirin. Kaydet ve Çıkış’ı tıklatın. Hesaplama Modülü (Masaüstü) Geri sayım modülünü yeni oluşturduğunuz metin modülünün altına ekleyin. Genel Ayarlar sekmesinde, düğünün tarihini ve saatini ekleyin ve arka plan rengini ‘#fae4de’ olarak değiştirin. Bu geri sayımı yalnızca masaüstünde kullanacağız, tabletler ve cep telefonları için devam edip devre dışı bırakacağız. Daha fazla tasarım ayarına geçin ve aşağıdaki değişiklikleri yapın: Yazı tipi yazı tipi: mandalina Yazı Tipi Boyut Numarası: 74px
Renkli Mektup Numarası: #9B857B
Sayı çizgisinin yüksekliği: 70px
Yazı tipi etiketi: Raleway Light
Yazı tipi boyutu etiketi: 14px
Etiket Metin Rengi: #9B857B
Etiket hat yüksekliği: 25px
Aynı sekmede, aşağı kaydırın ve en iyi özel dolguyu ‘%10’ olarak ayarlayın ve özel dolguyu ‘%10’a’ daha düşük ayarlayın.
Ardından, Üçüncü Özel CSS sekmesini açın ve aşağıdaki kodu ana öğeye ekleyin: maksimum genişlik:%50; Marj-sol: Otomatik; Marj-Sağ: Otomatik;
Box-Shadow: 0px 12px 50px #a9a9a9;
Şimdi sırtınızı hesaplayın, tam olarak yukarıda gösterdiğimiz düzen çizimlerindeki gibi görünecektir. Masaüstünde oluşturduğunuz ve devre dışı bıraktığınız önceki geri sayımı klonlayarak hesaplama modülü (tablet ve cep telefonu) şimdi devam ediyor (tabletler ve cep telefonları değil). Ardından, modülde aşağıdaki değişiklikleri yapın:
Yazı tipi numaraları boyut: 72px (tablet ve cep telefonu) Sayı çizgisinin yüksekliği: 70px
Yazı tipi boyutu etiketi: 14px (tablet), 12 piksel (cep telefonu)
Ve CSS sekmesinin ana öğesindeki kodu değiştirin: marj-sol: otomatik;
Marj-Sağ: Otomatik; Box-Shadow: 0px 12px 50px #a9a9a9; İkinci metin modülü Şimdi, geri sayım modülünün altında başka bir metin modülü ekleyin. Genel Ayarlar sekmesinde metin yönünü ‘merkeze’ değiştirin. Damat ve dişi gelinin adını eklemeye devam edin ve Gelişmiş Tasarım Ayarları sekmesine git. Gelişmiş tasarım ayarlarında aşağıdaki değişiklikleri yapın: Metin Yazı Tipi: Mandalina
Metin yazı tipi boyutu: 50px
Metin Rengi: #9B857B
Hat yüksekliği metni: 1.7em
Özel kenar boşluğuna Gelişmiş Tasarım Ayarları sekmesinde kaydırmaya devam edin ve üst kenar boşluğuna ‘%10’ ekleyin.
Kahraman bölümünün son kısmı bölücüdür. Bariyeri ekleyin ve genel sekme ile ‘#9B857B’ olarak değiştirin. Bölücünün de ‘görünür’ hale getirildiğinden emin olun.
Ardından, Tasarım sekmesini açın ve ‘sağlam’ bölücü stili oluşturun, ‘üstü’ bölücü konumu oluşturun, bölücünün ağırlığını ‘1px’ olarak değiştirin ve cep telefonuna saklayın. CSS sekmesine geçin ve aşağıdaki kodu ana öğeye ekleyin: marj-sol: otomatik; Marj-Sağ: Otomatik; Genişlik:%30; Kaydet ve Çıkış’ı tıklayın. Web sitesinin ilk bölümünü tamamlarsınız, bu da şöyle görünür: Şimdi, hikayenizi konuklara anlatmaya başlayabileceğiniz bu düzenin ikinci kısmına geçebiliriz. Hikaye anlatımı duyurusu: İkinci bölümün ikinci bölümünde, düğün verandasının bir parçasını oluşturan iki simetrik çizgisi var. Bu bölüm, web sitenizde biraz daha perspektif yaratan biraz daha küçük bir genişliğe sahiptir.
Parçanın ilk satırı standart bir parça yaparak başlar, arka plan rengini ‘#fffaf6’ olarak değiştirir ve alt dolguya ‘%5’ ekler. Ardından, bu bölüme iki sütun ekleyin. Ardından, satır ayarlarını açın. Genel ayarlarda, özel bir genişlik kullanmak için ‘Evet’i seçin, üniteyi yüzde olarak değiştirin ve içerik’%90 ‘. Aynı sekmede aşağı kaydırın, oluğun genişliğini etkinleştirin ve cep telefonu ve tablet için gizleyin. Ardından Gelişmiş Tasarım Ayarları sekmesini girin, sütunun yüksekliğini eşitleyin ve ilk sütunun arka plan rengi olarak ‘#9B857B’ ekleyin . Aynı sekmede, dolgu sütunu 1’i ‘%5’ ye, ‘%10’ sağ, ‘%5’ aşağıda ve ‘%10’ da değiştirin.
İkinci sütun için, arka plan rengini ayarlamamız, ancak bir arka plan görüntüsü yüklememize gerek yoktur. Geçerli metin modülü, metin modülünü ilk satır sütununa ekleyin. Genel Ayarlar sekmesinde, metin yönünü ‘orta’ ye yerleştirin ve metin kutusuna paylaşmak istediğiniz metni yazın. Ardından Gelişmiş Tasarım Ayarları sekmesini açın. Gelişmiş Tasarım Ayarları sekmesinde aşağıdaki değişiklikleri yapın: Maksimum genişlik: 500 piksel (yalnızca masaüstü için) Metin yazı tipi: mandalina Metin yazı tipi boyutu: 44 Metin rengi: #ffff6
Ve alt dolguya% 5 ekleyin.
Kaydet ve Çıkış tuşuna basın ve diğer metin modüllerini ekleyin. Metin yönünü ‘haklı’ hale getirin. Tasarım ayarlarında metin modülünde aşağıdaki değişiklikleri yapmaya devam edin:
Maksimum genişlik: 500 piksel
Metin yazı tipi boyutu: 14px Metin yazı tipi: Raleway Light Yazı tipi stili: kalın
Metin yazı tipi rengi: #fffaf6
Hat yüksekliği metni: 1.7em
Kaydet ve Çıkış tuşuna basın. Önceki sıra klonu şimdi, sadece yaptığınız satır klonlama. Klonlama hatları otomatik olarak az önce yaptığınız sıranın altına yerleştirilecektir. Ancak bu durumda, karşı tarafta bir modüle ihtiyacımız var. İlk değil, ikinci sütuna iki metin modülü yerleştirin. Ardından, satır ayarlarını açın ve ilk sütuna bir arka plan görüntüsü ekleyin. İlk sütunda yaptığımız tüm dolgu ayarlarını kaldırın ve ikinci sütunun dolgusuna yerleştirin. Stres ve çıkışı saklayın ve yapmaya hazırsınız. Diğer iki sütun için cep telefonları ve tabletler için çizgi ve masaüstü bilgisayarlar için saklanın. Tam genişliğe sahip bir çizgi yapın ve oluğun genişliğini ‘3’ olarak değiştirin.
Ardından, tasarım sekmesini açın ve iki sütun için arka plan resimlerini yükleyin ve iki sütunun özel dolgusunda aşağıdaki değişiklikleri yapın:
En iyi 5%
Doğru:% 10 Aşağıda:% 5 Sol:% 10 Bu ikinci bölümü ekledikten sonra, bu mevcut düzeninizin görüntülenmesidir:
En iyi adam, onur hizmetçisi, nedime ve sağdıçlar neden hayatınıza en önemli insanları düğün web sitenize koymuyorsunuz? Kime en iyi adam, gelin ve damat, gelin ve damadın eşlik et ve erkek eşlik web sitenize biraz ekstra bir dürtü olacak.
Bu bölümü sitenize eklemek için sayfanıza yeni bir standart parça ekleyerek başlayın. Bu yeni bölümde, farklı sütun ve modüllere sahip üç sıra yapmalısınız.
Şimdi, standart kısım olan bir rol yaptıktan sonra, aşağıdaki arka plan rengini verin: ‘#fae4de’. Kaydet ve Çıkış’a basabilmeniz için bölümün ayarlarında hiçbir şeyi değiştirmenize gerek yoktur. Bir sonraki metin modülünü oluşturun, ilk geniş satırınızı yapın. Girmeniz gereken tek şey metin modülüdür. Metin modülünü açın, metin kutusunu doldurun ve metin oryantasyonu alanında ‘Orta’ seçin. Ardından Gelişmiş Tasarım Ayarlarına gidin, metin yazı tipini ‘mandalina’ olarak ayarlayın, metin yazı tipinin boyutunu ‘100px’ (masaüstü ve tablet) ve ’68’ (cep telefonu) ve metin yazı tipinin rengini ‘#’ olarak ayarlayın. 9b857b ‘. Aynı sekmeyi aşağı kaydırın ve kenar boşluğunu yukarıdaki ‘%10’ ve aşağıdaki ‘%5’ olarak değiştirin. Kaydet ve Çıkış’ı tıklatın. İlk modülünüz ve hattınız bitti. Bu durumda iki sütunla başka satırlar ekleyin ve üst ve alt kenar boşluklarına% 5 ekleyin. Ardından, kişi modülünü ilk satır sütununa ekleyin. Bir sonraki görüntü ve kişi modülü, kişinin modül ayarlarını açın. Resmi yükleyin, sahaya Sosyal Medya Kanalı URL’sini girin ve metin kutusuna biraz yazın. Görüntünüzün hangi boyutlarda olması gerektiğinden emin değilseniz, bu blogun gönderisine bakın.
Ardından, gelişmiş tasarım ayarlarını açın ve aşağıdaki ayarları yapın: Yazı tipi başlığı: Raleway Light Strack Style: Kalınlık Editör yazı tipi boyutu: 14 Yolsuzluk Metin Rengi: #9B857B Gölgelik çizgisinin yüksekliği: 1em Gövde yazı tipi: Raleway Light
Vücut mektubu kuvveti: kalın
Vücut Boyutu: 14
Gövde metni rengi: #9B857B
Vücut Hattı Yüksekliği: 1.7EM
Kişinin modül ayarlarını açın ve CSS sekmesini açın. Alan görüntüsü çiziminde aşağıdaki kodu ekleyin: -Webkit-Clip-Path: Polygon (% 50% 0,% 100% 50,% 50% 100,% 0% 50); Klip-yol: Poligon (% 50 0 % 100% 50,% 50% 100,% 0% 50);
Marj-sol:%5;
Marj-sağ:%5; Şimdi devam edin ve görüntü modülünü ve kişileri klonlayın ve doğru sütuna yerleştirin.
Dört sütunla yeni bir satır ekleyerek ve görüntü ve kişi modülünü tekrar (dört kez) klonlayarak ve her sütuna koyarak devam edin. Önce kullandığımız kod ve ayarlar her şey için geçerli olacaktır.
Düzeniniz şimdi böyle görünecek:
Nerede ve ne zaman Bu, izleyicinize düğün yeriniz ve zamanınız hakkında bilgi vereceğiniz düğün verandanızın son kısmıdır. Bu bölüm için, aşağıdaki arka plan rengine sahip 3 sütunlu (1/2, 1/4, 1/4) bir satıra ihtiyacımız var: ‘#fffaf6’.
Bu bölümün ilk sütununa bir harita ekleyin, harita modülünü ekleyin. Harita özelliğini kullanabilmek için Google API tuşunu girmeniz gerekir. Bir yangın anahtarınız yoksa, burada nasıl yapılacağını okuyun. Düğün adresinizi girin ve modülün yeri bulmasına izin verin. Haritanızda bir PIN yapmak için yeni bir pim ekleyin ve konumu tekrar girin, PIN daha sonra haritada görünecektir.
Başka bir sütunda metin ve açıklama modüllerini kullanacağız. Metin modülünü ekleyin ve genel ayarlardaki metin yönlendirme ayarlarını ‘orta’ olarak ayarlayın. Ardından, gelişmiş tasarım ayarlarını açın ve aşağıdaki değişiklikleri yapın:
Metin yazı tipi: mandalina Metin yazı tipi boyutu: 50px Metin Rengi: #9B857B Hat yüksekliği metni: 1.7em Bu metin modülü ayarları her iki sütundaki metin modülü için geçerlidir. Blurb Modülü Metin modülünün altına, bulanıklık modülünü ekleyin. Konum simgesini seçin, rengi ‘#f9c8b8’ olarak değiştirin, metin kutusuna konumu ekleyin ve metin yönünü ‘Orta’ olarak değiştirin. Ardından, gelişmiş tasarım ayarlarını açın ve aşağıdaki değişiklikleri yapın: simge yazı tipi boyutu: 42px Gövde yazı tipi: Raleway Light Yazı tipi stili: kalın
Vücut Boyutu: 14
Gövde metni rengi: #9B857B
Vücut çizgisinin yüksekliği: 1em
Bir sonraki sütunda aynı şeyi yapın. Yalnızca açıklama simgesini saate değiştirin ve metin kutusundaki ‘ne zaman’ ayrıntılarını ekleyin. İşte burada. Düzeniniz artık bu öğreticideki düzen kadar pürüzsüz görünecek: Ayrıca, bu mini dizilerin ikinci bölümünde, düğünden sonra konuklarınızla fotoğraf paylaşmak için nasıl özel bir galeri sayfası oluşturduğunuzu göreceğiz. Bu öğretici hakkında bir yorumunuz varsa veya bir sonraki öğretici için bir isteğiniz varsa; Size cevap verebilmemiz için bu blog yayınının yorum bölümünde bir yorum bıraktığınızdan emin olun! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
