Divi ile Düğününüz için Hediye Listesi Sayfası Nasıl Oluşturulur

Bu gönderi, Divi ile Zarif Bir Düğün Web Sitesi Nasıl Oluşturulur mini dizimizin 3. bölümüdü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.

---

Mini dizimizin ilk iki bölümünde Divi ile nasıl şık bir düğün duyuru sayfası ve galeri sayfası oluşturabileceğinizi gösterdik. Bu üçüncü bölüm, düğün web sitenizde bir hediye listesi sayfası oluşturmaya ayrılacaktır.

Divi'nin Görsel Oluşturucusu ile aşağıdaki düzeni nasıl oluşturabileceğinizi adım adım göstereceğiz:

Düzen beş bölümden oluşuyor ve her biri bütüne kendi değerini katıyor. İlkine dalalım!

Kahraman Bölümü

Kahraman bölümü gerçekten basit ama bu mini dizide tam olarak aradığımız şey bu; sadelik ve şıklık. Önceki iki düğün eğitiminde olduğu gibi aynı renk paletini kullanıyoruz, bu yüzden takip ediyorsanız, bu sayfayı zaten oluşturmaya başladığınız düğün web sitesine kolayca ekleyebilirsiniz.

Başlamak

WordPress web sitenize yeni bir sayfa ekleyerek ve ona bir ad vererek başlayın. Bundan sonra Divi Builder'ı etkinleştirin ve hemen Visual Builder'a geçin.

Yeni oluşturduğunuz sayfaya yeni bir bölüm ekleyin. Bölüm ayarlarını açın ve İçerik sekmesinin Arka Plan alt kategorisinde arka plan görüntüsünü değiştirin. Bu örnekte, bu ekstra efekti vermek için bölümün arka planı için simetrik bir görüntü aldık.

Bölüme tam genişlikte bir satır ekleyerek devam edin. Satırın ayarlarını açın ve İçerik sekmesinin Arka Plan alt kategorisinde Arka Plan Rengini 'rgba(122,122,122,0.56)' olarak değiştirin.

Devam ederek Tasarım sekmesine gidin. Boyutlandırma alt kategorisini açın, satırı tam genişlikte yapın ve Cilt Payı Genişliği için '1' girin.

Aşağı kaydırın ve Aralık alt kategorisini açın. Masaüstü bilgisayarlar için üst ve alt dolguya '200px' ve tabletler ve telefonlar için üst ve alt dolguya '150px' eklememiz gerekecek.

Aynı alt kategoride, tabletler ve telefonlar için üst ve alt kenar boşluğuna '-50 piksel' ekleyin.

İlk Metin Modülü

Devam ederek, satıra yeni bir Metin Modülü ekleyin. Metninizi İçerik sekmesinin Metin alt kategorisine ekleyin. Bundan sonra Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Mandalina
• Metin Yazı Tipi Boyutu: 100 (Masaüstü ve Tablet), 68 (Telefon)
• Metin Rengi: #fffaf6
• Metin Satırı Yüksekliği: 1.5em

İkinci Metin Modülü

Hemen altında başka bir metin modülü oluşturun. İçerik sekmesine gidin ve metninizi Metin alt kategorisine girin. Ardından Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Raleway Light
• Metin Yazı Tipi Stili: Kalın
• Metin yazı tipi Boyutu: 20px (Masaüstü), 14px (Tablet ve Telefon)
• Metin Rengi: #fffaf6
• Metin Satırı Yüksekliği: 1.5em

Başlığınız şu ana kadar şöyle görünmelidir:

Giriş Bölümü

Bu düzende insanlara bir seçenek sunmak istiyoruz. Gelin, damat veya her ikisi için de bir şeyler satın almak isteyip istemediklerini seçebilirler.

Yeni bir bölüm oluşturarak başlayın ve bir sütunlu bir satır ekleyin. İçerik sekmesinin Arka Plan alt kategorisinde arka plan rengini '#fffaf6' olarak değiştirin. Bundan sonra, satır ayarlarını açın ve Tasarım sekmesine gidin. Yalnızca masaüstü bilgisayarlar için üst ve alt kenar boşluğuna '%5' ekleyin.

Bölüm başlığı

Bu satırda. Eklememiz gereken tek şey bir Metin Modülü. İçerik sekmesinin Metin alt kategorisinde görünmesini istediğiniz başlığı yazın. Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Mandalina
• Metin Yazı Tipi Stili: Kalın
• Metin yazı tipi Boyutu: 60px (Masaüstü), 50px (Tablet ve Telefon)
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1.7em

Şimdi Boyutlandırma alt kategorisini açın ve Maksimum Genişliği '500px' olarak değiştirin.

Aynı sekmede Aralık alt kategorisini açarak devam edin ve üst ve alt dolguya '%3' ekleyin.

Ardından, Gelişmiş sekmesine gidin ve Özel CSS alt kategorisindeki Ana Öğeye aşağıdaki kodu ekleyin:

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

Şimdi, aynı bölüme bir sütunlu başka bir satır ekleyin. Bu satırın ayarlarında hiçbir şeyi değiştirmemize gerek yok.

Görüntü Modülü

Satıra bir Görüntü Modülü ekleyin ve görüntüyü İçerik sekmesinin Görüntü alt kategorisine yükleyin. Ardından, Tasarım sekmesine gidin, görüntünün altındaki boşluğu kaldırın, Görüntü Hizalama için 'Merkez'i seçin ve görüntüyü her zaman mobilde ortalayın.

Ardından, Gelişmiş sekmesine gidin ve Özel CSS alt kategorisindeki Ana Öğe alanına aşağıdaki kodu ekleyin:

height: 100px;
width: 150px;

İlk Metin Modülü

Görüntü Modülü altında, bölümün ilk Metin Modülünü ekleyin. İçerik sekmesinin Metin alt kategorisindeki metin kutusuna metni girin ve Tasarım sekmesine geçin. Metin alt kategorisinde aşağıdaki ayarlamaları yapın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Raleway Light
• Metin yazı tipi Boyutu: 24px
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1.5em

Aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisinde üst kenar boşluğuna '30 piksel' ekleyin.

Son olarak, aynı Metin Modülünün Gelişmiş sekmesine gidin ve Özel CSS alt kategorisindeki Ana Öğeye aşağıdaki kodu ekleyin:

font-weight:400;

İkinci Metin Modülü

Bölüme başka bir Metin Modülü ekleyin ve İçerik sekmesinin Metin alt kategorisindeki metin kutusuna metni yazın. Ardından Tasarım sekmesine geçin ve aşağıdaki değişiklikleri yapın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Raleway Light
• Metin Yazı Tipi Stili: Kalın
• Metin yazı tipi Boyutu: 16px
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1.5em

Aynı sekmeyi aşağı kaydırın ve Boyutlandırma alt kategorisinde Maksimum Genişliği '300 piksel' olarak değiştirin. Aralık alt kategorisinde de üst kenar boşluğunu '%5' olarak değiştirin.

Ardından, Gelişmiş sekmesine gidin ve Özel CSS alt kategorisindeki Ana Öğeye aşağıdaki kodu ekleyin:

font-weight: 300;

Klon Görüntü Modülü ve Metin Modülleri

Aynı bölüme başka bir satır ekleyin, ancak bu sefer üç sütunlu.

Satırın ilk sütunu ve son sütunu, önceki satırla aynı modüllere ihtiyaç duyar; bir Görüntü Modülü ve iki Metin Modülü. Bu modüllerin daha önce oluşturduklarımızla aynı ayarlara sahip olması gerekiyor, bu yüzden yapacağımız tek şey onları klonlamak. Her modülü iki kez klonladıktan sonra, onları yeni satırın sol ve sağ sütunlarına koyun ve resmi ve metni değiştirin.

Ardından, satırın Tasarım sekmesine gidin ve Aralık alt kategorisindeki alt kenar boşluğuna '%5' ekleyin.

Gelin Resmi Modülü

Şimdi, satırın ikinci sütununa bir Görüntü Modülü ekleyin. Resmi yükleyin ve Tasarım sekmesine gidin. Görüntü Hizalamasını 'Sol' olarak ayarladığınızdan ve Hizalama alt kategorisinde 'Görüntüyü Mobilde Her Zaman Ortala' seçeneğini etkinleştirdiğinizden emin olun.

Aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisindeki üst kenar boşluğuna '%5' ekleyin.

Ardından, Gelişmiş sekmesine gidin ve Özel CSS alt kategorisindeki Ana Öğeye aşağıdaki kodu ekleyin:

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

Son olarak, telefonlarda ve tabletlerde Görüntü Modülünü devre dışı bırakın.

Damadın Görüntü Modülü

Önceki Görüntü Modülünü klonlayın ve öncekiyle aynı sütuna yerleştirin. Yüklenen resmi değiştirin ve Tasarım sekmesine geçin. Hizalama alt kategorisini açın ve Görüntü Hizalamasını 'Sağ' olarak değiştirin.

Ayrıca, Aralık alt kategorisinde Üst Kenar Boşluğunu '-60%' olarak ayarlayın.

Artık düzenin hediye listesi bölümüne geçebiliriz. Düzeniniz şu ana kadar şöyle görünmelidir:

İstek listesi/Hediye listesi

Yeni bir standart bölüm ekleyin ve İçerik sekmesinin Arka Plan alt kategorisinde arka plan rengini '#fae4de' olarak değiştirin.

Metin Modülü: Başlık

Bölüme tam genişlikte bir satır ekleyin ve onu tam genişlikte yapın. Daha sonra ikinci bölümde oluşturduğumuz Metin Modülünü klonlayıp bu Satır Modülüne yerleştirin. Metin gönderilerindeki metni değiştirin ve Advanced'in Custom CSS alt kategorisinde Main Element alanında arka plan rengini '#fffaf6' olarak değiştirin. sekme.

Hediye listesi/İstek Listesi: Kaydırıcı Modülünü Kullanma

Bölüme 3 sütunlu yeni bir satır ekleyin ve Tasarım sekmesinin Boyutlandırma alt kategorisinde Özel Genişlik '%65'i değiştirin. İlk satıra bir Metin Modülü ekleyerek devam edin ve Tasarım sekmesinin Metin alt kategorisinde aşağıdaki ayarlamaları yapın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Raleway Light
• Metin Yazı Tipi Stili: Kalın
• Metin Yazı Tipi Boyutu: 24px
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1.5em

Aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisinde üst kenar boşluğuna '30 piksel' ekleyin.

Şimdi, Metin Modülünü iki kez klonlayın ve her sütuna bir tane koyun.

Ardından, bir Slider Modülü ekleyin. Kaydırıcının Gelişmiş sekmesine gidin ve Özel CSS alt kategorisindeki Ana Öğeye aşağıdaki kodu ekleyin:

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

Devam edin, yeni bir slayt ekleyin. Slayt içinde, İçerik sekmesinin Arka Plan alt kategorisindeki hediye listesine yerleştirmek istediğiniz öğelerden birinin arka plan resmini yükleyin. Ardından, aynı sekmenin Metin alt kategorisine öğenin adını ve düğme metnini girin. Bağlantı alt kategorisindeki URL'yi de değiştirin. Bir kategoriye istediğiniz kadar slayt ekleyin ve aynı şeyi tekrarlayın.

Yeni bir satır ekleyerek devam edin, ancak şimdi yalnızca 2 sütunla.

Tasarım sekmesinin Boyutlandırma alt kategorisinde Özel Genişliği '%55' olarak değiştirin ve Aralık alt kategorisinde alt kenar boşluğunu '%5' olarak değiştirin.

Önceki Satır Modülünde oluşturduğumuz Metin Modülü ve Kaydırıcı Modül, diğer tüm Metin Modülleri ve Kaydırıcılarda ihtiyacımız olan ayarlara sahiptir. Devam edin ve her ikisini de dört kez klonlayın ve bunları her Satır Modülünün kalan sütunlarına yerleştirin.

Düzeniniz şimdi şöyle görünmelidir:

İletişim Formu (Masaüstü)

Düzendeki İletişim Formunun amacı, insanların çift için hangi hediyeyi aldıklarını iletmelerini sağlamaktır. Bir hediye alınır alınmaz, web sitesinde başka bir hediye ile değiştirilebilir. Bunu yaparak, iki misafirin aynı hediyeyi getirmesi daha az olası hale gelir.

Yeni bir standart bölüm oluşturun ve İçerik sekmesinin Arka Plan alt kategorisinde arka plan rengini #fffaf6 olarak değiştirin.

İlk sıra

Bu bölümde ihtiyacımız olan satır diğer bölümlerdeki ile aynıdır. Daha önce kullanılan Satır Modülünü, Metin Modülü ile kopyalayın ve bölümün içine yerleştirin. Yapmanız gereken tek şey Metin Modülü ayarlarında bazı değişiklikler yapmak. Ana Öğedeki metni ve arka plan rengini #fae4de olarak değiştirin.

İkinci sıra

Şimdi, iki sütunlu bir satır ekleyin ve satırı, Gelişmiş sekmesinin Görünürlük alt kategorisinde tabletlerde ve telefonlarda gizleyin. İlk sütuna bir İletişim Formu Modülü koyun ve Tasarım sekmesinin farklı alt kategorisinde aşağıdaki değişiklikleri yapın.

Form Alanı Metni:

• Form Alanı Yazı Tipi: Raleway Işığı
• Form Alanı Yazı Tipi Boyutu: 18px
• Form Alanı Metin Rengi: #9b857b
• Form Alanı Çizgi Yüksekliği: 1.7em

Sınır:

• Giriş Sınır Yarıçapı: 15
• Kenarlık Kullan: Evet
• Kenar Rengi: #d7dce1
• Kenar Genişliği: 1px
• Kenar Stili: Katı

Buton:

• Düğme Metin Boyutu: 15
• Düğme Metin Boyutu: 15
• Düğme Metin Rengi: #fffaf6
• Düğme Arka Plan Rengi: #9b857b
• Düğme Kenar Genişliği: 9
• Düğme Kenar Rengi: #9b857b
• Düğme Sınır Yarıçapı: 4

İletişim Formu Modülünün İçerik sekmesinde artık üç alan ekleyebilirsiniz; İsim, E-posta ve Mesaj.

Her alanın arka plan rengini manuel olarak #fae4de olarak değiştirin.

Son olarak, misafirlerinizi süreç hakkında bilgilendirmek için ikinci sütuna bir Metin Modülü ekleyeceğiz. Tasarım sekmesine gidin ve Metin kategorisinde aşağıdaki değişiklikleri yapın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Raleway Light
• Tet Yazı Tipi Stili: Kalın
• Metin Yazı Tipi Boyutu: 16
• Metin Rengi: #9b857b
• Harf Satır Yüksekliği: 1.5em

Aynı sekmeyi aşağı kaydırın ve Boyutlandırma alt kategorisindeki Maks Genişliğe '300 piksel' ekleyin.

Son olarak, Aralık alt kategorisinde üst kenar boşluğuna '5px' yazın.

İletişim Formu (Tablet & Telefon)

Önceden yapılmış satırı klonlayın ve İletişim Formu Modülü ile Metin Modülünün yerleri (ve sütunları) değiştirmesini sağlayın. Gelişmiş sekmesine gidin ve masaüstleri için satırı gizleyin.

Düzeniniz şimdi ve son olarak şöyle görünmelidir:

Sıradaki

Bu mini dizinin dördüncü bölümünde, Divi ve otomatik referanslar ile düğününüz için nasıl çevrimiçi bir konuk defteri oluşturacağınızı göstereceğ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!