Divi ile Düğün Duyuru Ana Sayfası Nasıl Oluşturulur

Yayınlanan: 2017-05-16

Bu gönderi, Divi ile Zarif Bir Düğün Web Sitesi Nasıl Oluşturulur mini dizimizdeki 5 bölüm 1'lik bölümdür . Bu dizide, Divi ile kendiniz veya bir müşteriniz için bir düğün web sitesi oluşturmanın en önemli bölümlerinde size rehberlik edeceğiz.

Bir düğün duyuru sayfası oluşturmak, konuklarınıza evleneceğinizi bildirmenin yaratıcı bir yoludur. Onlara web sitenizin URL'sini sağlayarak iletişim halinde kalacaklardır. Ayrıca düğün detaylarını istedikleri zaman online olarak görebilecekler.

Adım adım oluşturmanıza yardımcı olacağımız ana sayfa düzenine bir göz atalım:

Navigasyon Menünüzü Oluşturma

Düğün web siteniz için nasıl duyuru sayfası, galeri sayfası ve hediye listesi sayfası oluşturacağınızı tam olarak göstereceğiz. Bu ilk gönderi, duyuru sayfasını yapmaya adanmıştır. Ancak oraya gitmeden önce, konukların web sitenizde sorunsuz bir şekilde yollarını bulabilmelerini sağlamak istiyoruz.

Bu yüzden önce düzgün ve şık bir navigasyon menüsü oluşturmanız gerekecek.

Divi > Tema Seçenekleri >'ne giderek başlayın ve web sitenizin tamamında kullanmak istediğiniz logoyu yükleyin .

Değişiklikleri Kaydet'e tıklayın ve WordPress web sitenizin sayfalarına gidin. Duyuru sayfasını oluşturacağınız yeni bir sayfa ekleyin. Sonraki gönderilerde nasıl oluşturulacağını göstereceğimiz galeri sayfası ve hediye listesi sayfası için de aynı şeyi yapın.

Şimdilik içeriği boş bırakalım ve gezinme menüsünü değiştirmek için web sitenizin Tema Özelleştiricisine gidelim. Menüler > Menü ekle > Sayfaları menünüze ekleyin seçeneğine giderek web sitenizin sayfalarını menünüze ekleyerek başlayın. Bu menü web sitenizin ana menüsü olmalıdır.

Ardından, Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin ve aşağıdaki değişiklikleri yapın:

  • Menü Yüksekliği: 66
  • Resmin boyutlarına bağlı olarak Logo Max Yüksekliğini ayarlayın
  • Metin Boyutu: 16
  • Harf Aralığı: 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 Gezinme'ye geri dönün ve Başlık Biçimi içinde başlık stilini 'Ortalanmış' olarak değiştirin.

Yaptığınız değişiklikleri kaydedin ve yayınlayın.

Duyuru Sayfasına Başlayın

Web sitesinde dört bölüm vardır ve her biri web sitesine değerine katkıda bulunur - düğün duyurunuzu tamamlar. 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.

Kahraman Bölümü (Geri Sayım Dahil)

Tasarımın ilk kısmı başlıktır. İçerisine bir Geri Sayım Modülü koyarak misafirlerimizin web sitesi ve düğün ile anında etkileşimde olduklarını hissettirmeye karar verdik. Divi oluşturucunun içinde başlık bölümü şöyle görünür:

Web sitesinin bu bölümünde tam genişlikte bir tam satırlı standart bir bölüm kullanacağız. Satır bölümünde, üç modül eklemeniz gerekecek; iki Metin Modülü ve bir Geri Sayım Modülü. Geri Sayım Modülü, her iki metin modülünün ortasında bulunur.

İlk Metin Modülüyle Başlayın

Satıra bir Metin Modülü ekleyerek başlayın. Kullanmak istediğiniz metni yazın, Metin Yönlendirmesini 'Merkez' olarak değiştirin ve Gelişmiş Tasarım Ayarları sekmesine aşağıdaki değişiklikleri uygulayın:

  • Metin Yazı Tipi Boyutu: 100px (masaüstü), 80px (tablet), 66px (telefon)
  • Metin Yazı Tipi: Mandalina
  • Metin Rengi: #9b857b

Aynı sekmede, yukarıya '%10' ve alta '%5' ekleyerek Metin Modülünüzün kenar boşluklarını aşağı kaydırın ve değiştirin.

Kaydet ve Çık'a tıklayın.

Sayma Modülü (Masaüstü)

Yeni oluşturduğunuz Metin Modülünün altına bir Geri Sayım Modülü 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üstlerinde kullanacağız, devam edin ve tabletler ve telefonlar için devre dışı bırakın.

Gelişmiş Tasarım Ayarlarına gidin ve aşağıdaki değişiklikleri yapın:

  • Sayı Yazı Tipi: Mandalina
  • Sayılar Yazı Tipi Boyutu: 74px
  • Sayılar Yazı Tipi Rengi: #9b857b
  • Sayılar Satır Yüksekliği: 70px
  • Etiket Yazı Tipi: Raleway Light
  • Etiket Yazı Tipi Boyutu: 14px
  • Etiket Metni Rengi: #9b857b
  • Etiket Satır Yüksekliği: 25px

Aynı sekmede, en alta gidin ve Üst Özel Dolguyu '%10' ve Alt Özel Dolguyu '%10' olarak ayarlayın.

Ardından, üçüncü Özel CSS sekmesine gidin ve ana öğeye aşağıdaki kodu ekleyin: 

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Geri sayımınız şimdi tam olarak yukarıda size gösterdiğimiz düzen görüntüsündeki gibi görünecek.

Geri Sayım Modülü (Tablet & Telefon)

Şimdi devam edin, yaptığınız önceki geri sayımı kopyalayın ve masaüstünde devre dışı bırakın (tablet ve telefon yerine). Ardından, modülde aşağıdaki değişiklikleri yapın:

  • Sayılar Yazı Tipi Boyutu: 72px (hem tablet hem de telefon)
  • Sayılar Satır Yüksekliği: 70px
  • Etiket Yazı Tipi Boyutu: 14px (tablet), 12px (telefon)

Ve CSS sekmesinin Ana Öğesindeki kodu şu şekilde değiştirin: 

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

İkinci Metin Modülü

Şimdi Geri Sayım Modülünün altına başka bir Metin Modülü ekleyin. Genel Ayarlar sekmesinde, Metin Yönünü 'Merkez' olarak değiştirin. Damat ve gelinin adını ekleyerek ve Gelişmiş Tasarım Ayarları sekmesine giderek devam edin.

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
  • Metin Satırı Yüksekliği: 1.7em

Gelişmiş Tasarım Ayarları sekmesinde Özel Kenar Boşluğu'na kaydırmaya devam edin ve üst kenar boşluğuna '%10' ekleyin.

bölücü

Bu kahraman bölümünün son kısmı bölücüdür. Bir ayırıcı ekleyin ve Genel sekmesindeki rengi '#9b857b' olarak değiştirin. Ayırıcının da 'görünür' olduğundan emin olun.

Ardından, Tasarım sekmesine gidin ve Bölücü Stilini 'Solid', Bölücü Konumunu 'Üst' yapın, bölücü ağırlığını '1px' olarak değiştirin ve mobilde gizleyin.

CSS sekmesine gidin ve ana öğeye aşağıdaki kodu ekleyin: 

margin-left: auto;
margin-right: auto;
width: 30%;

Kaydet ve Çık'a tıklayın. Web sitesinin aşağıdaki gibi görünmesi gereken ilk bölümünü bitirdiniz:

Şimdi hikayenizi misafirlere anlatmaya başlayabileceğiniz bu düzenin ikinci bölümüne geçebiliriz.

Hikaye Anlatımı Duyuru: İkinci Bölüm

Bu ikinci bölüm, düğün ana sayfasının bir bölümünü oluşturan iki simetrik sıraya sahiptir. Bu bölüm biraz daha küçük bir genişliğe sahiptir ve bu da web sitenize biraz daha fazla bakış açısı sağlar.

Bölümün İlk Sırası

Standart bir bölüm oluşturarak başlayın, arka plan rengini '#fffaf6' olarak değiştirin ve Alt Dolguya '%5' ekleyin. Ardından, bu bölüme iki sütunlu bir satır ekleyin.

Ardından, satır ayarlarını açın. Genel Ayarlar'da, özel genişliği kullanmak için 'EVET'i seçin, birimi yüzde olarak değiştirin ve '%90' değerini doldurun. Aynı sekmede aşağı kaydırın, Oluk Genişliğini etkinleştirin ve telefon ve tablet için gizleyin.

Ardından, Gelişmiş Tasarım Ayarları sekmesine gidin, sütun yüksekliklerini eşitleyin ve ilk sütunun arka plan rengi olarak '#9b857b' ekleyin. Aynı sekmede, sütun 1 dolgusunu '%5' üst, '%10' sağ, '%5' alt ve '%10' sol olarak değiştirin.

İkinci sütun için bir arka plan rengi ayarlamamız gerekmeyecek, bunun yerine bir arka plan resmi yüklememiz gerekecek.

Metin Modülü

Şimdi, satırın ilk sütununa bir metin modülü ekleyin. Genel Ayarlar sekmesinde, metin yönünü 'Orta'ya getirin ve paylaşmak istediğiniz metni metin kutusuna yazın. Ardından Gelişmiş Tasarım Ayarları sekmesine gidin.

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: #fffaf6

Ve alt dolguya %5 ekleyin.

Kaydet ve Çık'a basın ve başka bir Metin Modülü ekleyin. Metin Yönlendirmesini 'yaslı' yapın. Tasarım Ayarlarında Metin Modülünde aşağıdaki değişiklikleri yaparak 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
  • Metin Satırı Yüksekliği: 1.7em

Kaydet ve Çık'a basın.

Önceki Satırı Klonla

Şimdi, az önce oluşturduğunuz satırı klonlayın. Klonlanan satır otomatik olarak az önce oluşturduğunuz satırın altına yerleştirilecektir. Ancak bu durumda modüllerin karşı tarafta olmasına ihtiyacımız var. İki metin modülünü birinci sütun yerine ikinci sütuna yerleştirin.

Ardından, satır ayarlarını açın ve ilk sütuna bir arka plan resmi ekleyin. İlk sütun dolgusunda yaptığımız tüm dolgu ayarlarını silin ve bunları ikinci sütun dolgusuna yerleştirin.

Kaydet ve Çık'a basın ve hazırsınız.

Telefon ve Tablet için Satır

Başka bir iki sütunlu satır oluşturun ve masaüstü için gizleyin. Satırı tam genişlikte yapın ve oluk genişliğini '3' olarak değiştirin.

Ardından, Tasarım sekmesine gidin ve her iki sütun için bir arka plan resmi yükleyin ve her iki sütunun Özel Dolgusunda aşağıdaki değişiklikleri yapın:

  • En iyi 5%
  • Sağ: %10
  • Alt: %5
  • Sol: %10

Bu ikinci bölümü ekledikten sonra, düzeniniz şu anda şöyle görünmelidir:

Sağdıç, Nedime, Nedime ve Sağdıç

Neden hayatınızdaki en önemli insanları düğün web sitenize koymuyorsunuz? Sağdıç, nedime, nedime ve sağdıçların kim olacağını vermek, web sitenize biraz daha fazla destek verebilir.

Bu bölümü sitenize eklemek için sayfanıza yeni bir standart bölüm ekleyerek başlayın. Bu yeni bölümde, farklı sütunlara ve modüllere sahip üç satır oluşturmanız gerekecek.

Şimdi, standart bir bölüm olan bölümü oluşturduktan sonra, ona şu arka plan rengini verin: '#fae4de'. Kaydet ve Çık'a basabilmeniz için bölümün ayarlarında başka hiçbir şeyi değiştirmeniz gerekmeyecek.

Metin Modülü Oluşturma

Ardından, ilk tam genişlikli sıranızı oluşturun. Oraya koymanız gereken tek şey bir Metin Modülü. Metin Modülünü açın, metin kutusunu doldurun ve Metin Yönü alanında 'Merkez'i seçin.

Ardından Gelişmiş Tasarım Ayarları'na gidin, Metin Yazı Tipi'ni 'Mandalina', Metin Yazı Tipi Boyutunu '100px' (masaüstü ve tablet) ve '%68' (telefon) ve Metin Yazı Tipi Rengi'ni '#9b857b' olarak ayarlayın. Aynı sekmeyi aşağı kaydırın ve kenar boşluklarını üstte '%10' ve altta '%5' olarak değiştirin.

Kaydet ve Çık'a tıklayın. İlk modülünüz ve sıranız şimdi tamamlandı.

Bu durumda iki sütunlu başka bir satır ekleyin ve üst ve alt kenar boşluğuna %5 ekleyin. Ardından, satırın ilk sütununa bir kişi modülü ekleyin.

İmaj ve Kişi Modülü

Devam ederek, kişi modülünün ayarlarını açın. Bir resim yükleyin, alanlara sosyal medya kanallarının URL'sini girin ve metin kutusuna onlar hakkında biraz yazın. Resimlerinizin hangi boyutlarda olması gerektiğinden emin değilseniz, bu blog gönderisine bir göz atın.

Ardından, Gelişmiş Tasarım Ayarlarına gidin ve aşağıdaki ayarlamaları yapın:

  • Başlık Yazı Tipi: Raleway Light
  • Başlık Yazı Tipi Stili: Kalın
  • Başlık Yazı Tipi Boyutu: 14
  • Başlık Metni Rengi: #9b857b
  • Başlık Çizgisi Yüksekliği: 1em
  • Gövde Yazı Tipi: Raleway Light
  • Gövde Yazı Tipi Stili: Kalın
  • Gövde Yazı Tipi Boyutu: 14
  • Gövde Metni Rengi: #9b857b
  • Gövde Çizgisi Yüksekliği: 1.7em

Kişi modülünün ayarlarını açın ve CSS sekmesine gidin. Üye Resmi alanına aşağıdaki kodu ekleyin: 

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Şimdi devam edin ve hem Görüntü hem de Kişi Modüllerini kopyalayın ve bunları sağ sütuna koyun.

Dört sütunlu yeni bir satır ekleyerek devam edin ve Görüntü ve Kişi modülünü tekrar (dört kez) kopyalayın ve her sütuna koyun. İlk defa kullandığımız kod ve ayarlar hepsi için geçerli olacaktır.

Düzeniniz şimdiye kadar şöyle görünmelidir:

Nerede ve ne zaman

Bu, düğün ana sayfanızın son bölümüdür ve izleyicilerinizi düğününüzün yeri ve zamanı hakkında bilgilendirirsiniz. 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 olacak: '#fffaf6'.

Harita Ekleme

Bu bölümün ilk sütununa bir Harita modülü ekleyin. Harita özelliğini kullanabilmek için bir Google API anahtarı girmeniz gerekir. API anahtarınız yoksa nasıl oluşturulacağını buradan okuyun. Düğününüzün adresini girin ve modülün yeri bulmasına izin verin. Haritanızda bir raptiye oluşturmak için yeni bir raptiye ekleyin ve konumu tekrar yerleştirin, ardından raptiye haritada görünecektir.

Diğer sütunlarda, metin modüllerinden ve tanıtım yazılarından yararlanacağız. Bir metin modülü ekleyin ve Genel Ayarlar'daki Metin Yönü ayarlarını 'Merkez' olarak ayarlayın. Ardından, Gelişmiş Tasarım Ayarlarına gidin ve aşağıdaki değişiklikleri yapın:

  • Metin Yazı Tipi: Mandalina
  • Metin Yazı Tipi Boyutu: 50px
  • Metin Rengi: #9b857b
  • Metin Satırı Yüksekliği: 1.7em

Bu metin modülünün ayarları, her iki sütundaki metin modülleri için geçerlidir.

Bulanıklık Modülü

Metin Modülünün altına bir Bulanıklık Modülü ekleyin. Konum simgesini seçin, rengini '#f9c8b8' olarak değiştirin, konumu metin kutusuna ekleyin ve Metin Yönlendirmesini 'Merkez' olarak değiştirin. Ardından Gelişmiş Tasarım Ayarlarına gidin 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
  • Gövde Yazı Tipi Boyutu: 14
  • Gövde Metni Rengi: #9b857b
  • Gövde Çizgisi Yüksekliği: 1em

Bir sonraki sütunda, aynı şeyi yapın. Açıklama simgesini yalnızca bir saate dönüştürün ve metin kutusuna 'ne zaman' ayrıntılarını ekleyin.

Bu kadar. Düzeniniz şimdi bu eğitimdeki düzen kadar düzgün görünmelidir:

Sıradaki

Bu mini dizinin ikinci bölümünde, düğünden sonra misafirlerinizle resim paylaşmaya adanmış bir galeri sayfasını nasıl oluşturacağınızı göreceğiz. Bu eğitimle ilgili herhangi bir yorumunuz varsa veya gelecekteki eğitimler için herhangi bir talebiniz varsa; Size geri dönebilmemiz için bu blog gönderisinin yorum bölümüne bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!