Divi ile Düğününüz İçin Hediye Listesi Nasıl Oluşturulur
Bu yazı, mini dizilerimizde 5. Bölümün 3’tür. Divi ile zarif bir düğün web sitesi oluşturulur. 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.
Mini dizilerimizin ilk iki bölümünde, Divi ile zarif bir düğün duyuru sayfası ve galeri sayfasının nasıl oluşturulacağını gösteriyoruz. Bu üçüncü bölüm, düğün web sitenizde bir hediye listesi sayfası oluşturmaya adanmıştır. Divi’nin görsel yapıcısı ile aşağıdaki düzeni nasıl oluşturabileceğinizi adım adım göstereceğiz: Düzenin beş parçası vardır ve her biri kendi değerini bütüne katar. İlk gönderelim! Kahraman Kahraman bölümü çok basit ama bu mini dizilerde aradığımız şey bu; sadelik ve zarafet. Önceki iki düğün öğreticisinde olduğu gibi aynı renk paletini kullanıyoruz, bu nedenle takip ederseniz, bu sayfayı oluşturduğunuz düğün web sitesine kolayca ekleyebilirsiniz. WordPress sitenize yeni bir sayfa ekleyerek başlayın ve adlandırın. Bundan sonra Divi Builder’ı etkinleştirin ve hemen görsel oluşturucuya geçin. Yeni oluşturduğunuz sayfaya yeni bir parça ekleyin. Ayarları açın ve içerik sekmesindeki arka plan alt kategorisindeki arka plan görüntüsünü değiştirin. Bu örnekte, ekstra etki vermek için parçanın arka planı için simetrik resimler çekiyoruz. Bu bölüme tam geniş bir çizgi eklemeye devam edin. Satır ayarlarını açın ve arka plan rengini içerik sekmesindeki arka plan alt kategorisinde ‘RGBA (122.122.122.0.56)’ olarak değiştirin. Ardından, tasarım sekmesini açın. Alt kategori boyutlandırmasını açın, tam genişlik çizgisi yapın ve oluk genişliği için ‘1’ girin. Aşağı kaydırın ve boşluk alt kategorisini açın. Masaüstü için üst ve alt dolguya ‘200px’ ve tabletler ve cep telefonları için üst ve alt dolguya ‘150px’ eklememiz gerekir. Aynı alt kategoride, tabletler ve cep telefonları için üst ve alt kenar boşluklarına ’50px’ ekleyin. İlk metin modülü hareket eder, satıra yeni bir metin modülü ekler. Metninizi İçerik sekmesindeki metin alt kategorisine ekleyin. Bundan sonra, tasarım sekmesini açın ve metin alt kategorisinde aşağıdaki değişiklikleri yapın: Metin Oryantasyonu: Orta
Metin yazı tipi: mandalina
Metin yazı tipi boyutu: 100 (masaüstü ve tablet), 68 (telefon)
Metin rengi: #ffff6
Yüksek çizgi metin: 1.5em
İkinci metin modülü hemen aşağıda başka bir metin modülü oluşturur. İçerik sekmesini açın ve metninizi metin alt kategorisine girin. Ardından, Tasarım sekmesini açın ve metin alt kategorisinde aşağıdaki değişiklikleri yapın: Metin Oryantasyonu: Orta
Metin yazı tipi: Raleway Light
Metin yazı tipi stili: kalınlık
Metin yazı tipi boyutu: 20px (masaüstü), 14px (tablet ve cep telefonu)
Metin rengi: #ffff6
Yüksek çizgi metin: 1.5em
Başlığınız şimdiye kadar böyle görünecek: Ön bölüm Bu düzende seçilen kişilere vermek istiyoruz. Gelin, damat veya her ikisi için bir şeyler satın almak isteyip istemediklerini seçebilirler. Yeni bir parça yaparak başlayın ve bir sütunla 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 sekmesini açın. Yalnızca masaüstü için üst ve alt kenar boşluklarına ‘%5’ ekleyin. Bu satırdaki bölümün başlıkları. Eklememiz gereken tek şey metin modülü. İçerik sekmesinin metin alt kategorisine görüntülemek istediğiniz başlığı yazın. Tasarım sekmesine geçin ve metin alt kategorisinde aşağıdaki değişiklikleri yapın: Metin Oryantasyonu: Orta Metin yazı tipi: mandalina
Metin yazı tipi stili: kalınlık
Metin yazı tipi boyutu: 60px (masaüstü), 50px (tablet ve cep telefonu)
Metin Rengi: #9B857B
Hat yüksekliği metni: 1.7em
Şimdi, alt kategori boyutlandırmasını açın ve maksimum genişliği ‘500 piksel’ olarak değiştirin.
Aynı sekmede boşluk alanını açarak ve üst ve alt dolguya ‘%3’ ekleyerek devam edin. Ardından, Gelişmiş sekmesini açın ve CSS özel alt kategorisindeki ana öğelere aşağıdaki kodu ekleyin: arka plan: #fae4de; -Webkit-Clip-Path: Polygon (% 13 0,% 88% 0,% 100% 100,% 0% 100); Klip-yol: poligon (% 13 0,% 88 0,% 100% 100,% 0% 100);
Sınır üstü: 1px katı #9B857B;
Sınır dip: 1px katı #9B857B;
Şimdi, aynı parçaya bir sütunla başka bir satır ekleyin. Bu satır ayarında hiçbir şeyi değiştirmemize gerek yok. Görüntü Modülü Satıra bir resim modülü ekleyin ve içerik sekmesinin görüntü alt kategorisine resim yükleyin. Ardından, tasarım sekmesini açın, görüntünün altındaki alanı silin, görüntü seviyesi için ‘orta’ seçin ve her zaman cep telefonundaki görüntüye odaklanın. Ardından, gelişmiş sekmeyi açın ve aşağıdaki kodu ana öğe alanına ekleyin. CSS Özel Alt Kategorisi: Yükseklik: 100px;
Genişlik: 150px; Görüntü modülünün altındaki ilk metin modülü, o bölümden ilk metin modülünü ekleyin. İçerik sekmesinin metin alt kategorisindeki metin kutusuna metni girin ve tasarım sekmesine devam edin. Metin alt kategorisinde aşağıdaki ayarlamaları yapın: Metin Oryantasyonu: Orta
Metin yazı tipi: Raleway Light Metin yazı tipi boyutu: 24 piksel
Metin Rengi: #9B857B
Yüksek çizgi metin: 1.5em
Aynı sekmeyi aşağı kaydırın ve uzay alt kategorisindeki üst kenar boşluğuna ’30px’ ekleyin.
Son olarak, aynı metin modülünden Gelişmiş sekmesini açın ve CSS özel alt kategorisindeki ana öğelere aşağıdaki kodu ekleyin: Yazı Tipi: 400;
İkinci metin modülü, bölüme başka bir metin modülü ekler ve içerik sekmesindeki metin alt kategorisindeki metin kutusuna metni yazar. Ardından, Tasarım sekmesine geçin ve aşağıdaki değişikliği yapın: Metin Oryantasyonu: Orta Metin yazı tipi: Raleway Light Metin yazı tipi stili: kalınlık
Metin yazı tipi boyutu: 16px
Metin Rengi: #9B857B
Yüksek çizgi metin: 1.5em
Aynı sekmeyi aşağı kaydırın ve boyutlandırma alt kategorisinde maksimum genişliği ‘300 piksel’ olarak değiştirin. Uzay alt kategorisinde üst kenar boşluğunu ‘%5’ olarak değiştirin.
Ardından, Gelişmiş sekmesini açın ve CSS Kustom alt kategorisindeki ana öğelere aşağıdaki kodu ekleyin: Yazı Tipi: 300; Görüntü Modülü ve Clon Metin Modülü Bu sefer aynı bölüme diğer satır ekleyin, ancak bu sefer üç sütunla. Sıranın ilk sütunu ve son sütunu, önceki satırla aynı modülü gerektirir; Bir görüntü modülü ve iki metin modülü. Bu modüller daha önce yaptığımız ayarlara sahip olmalıdır, bu yüzden yapacağımız tek şey klon. Her modülü iki kez klonladıktan sonra, yeni satırın sol ve sağ sütunlarına yerleştirin ve görüntüyü ve metni değiştirin. Ardından, tasarım sekmesini satıra açın ve uzay alt kategorisindeki alt kenara ‘%5’ ekleyin.
Gelin Görüntü Modülü Şimdi, görüntü modülünü satırdan ikinci sütuna ekleyin. Resimleri yükleyin ve tasarım sekmesini açın. Görüntü seviyesini ‘sola’ koyduğunuzdan ve ‘her zaman hücresellere odaklan’ seçeneklerini etkinleştirdiğinizden emin olun. Aynı sekmeyi aşağı kaydırın ve uzay alt kategorisindeki üst kenar boşluğuna ‘%5’ ekleyin. Ardından, Gelişmiş sekmesini açın ve CSS Kustom alt kategorisindeki ana öğelere aşağıdaki kodu ekleyin: Yükseklik: 200px; Genişlik: 200px; -Webkit-Clip-Path: Circle (% 50% 50’de% 48.2); Clip-Path: Circle (% 50% 50’de% 48.2); Son olarak, mobil ve tablette görüntü modülünü devre dışı bırakın.
Resim Modülü Erkek Gelin Klonlama Önceki görüntü modülü ve bir önceki sütuna yerleştirin. Yüklenen resmi değiştirin ve tasarım sekmesine devam edin. Hizalama alt kategorisini açın ve görüntü hizalamasını ‘sağa’ değiştirin.
Ardından, SPASI alt kategorisinde üst kenar boşluğunu ‘-60’ olarak ayarlayın.
Artık düzenin ödül listesi bölümüne geçebiliriz. Düzeniniz şimdiye kadar böyle görünecek: arzu/hediye listesi Yeni bir standart parça ekleyin ve içerik sekmesindeki arka plan alt kategorisinde arka plan rengini ‘#fae4de’ olarak değiştirin. Metin Modülü: Başlık Parçaya tam geniş satır ekleyin ve tam geniş olun. Bundan sonra, ikinci bölümde yaptığımız metin modülünü klonlamak ve bu satır modülüne yerleştirir. Metin yayınındaki metni değiştirin ve CSS özel alt kategorisindeki ana öğedeki arka plan rengini sekmenin devam etmesinden ‘#fffaf6’ olarak değiştirin. Hediyelerin/arzuların listesi: Kaydırıcı modülünü kullanarak, bu bölüme 3 sütunlu yeni bir satır ekleyin ve tasarım sekmesinin boyut alt kategorisinde ’65’in genişliğini’ değiştirin. Metin modülünü ilk satıra eklemeye devam edin ve Tasarım sekmesinin metin alt kategorisinde aşağıdaki ayarlamaları oluşturun: Metin Oryantasyonu: Orta Metin yazı tipi: Raleway Light Metin yazı tipi stili: kalınlık Metin yazı tipi boyutu: 24 piksel Metin Rengi: #9B857B
Yüksek çizgi metin: 1.5em
Aynı sekmeyi aşağı kaydırın ve uzay alt kategorisindeki üst kenar boşluğuna ’30px’ ekleyin.
Şimdi, metin modülünü iki kez klonlamak ve her sütuna bir tane yerleştirin.
Ardından, kaydırıcı modülünü ekleyin. Kaydırıcıdan Gelişmiş sekmesini açın ve CSS Özel Alt Kategorisindeki ana öğelere aşağıdaki kodu ekleyin: Sınır: 2px katı #ffffff;
Border-Radius: 15px;
Marj-sol: 20px; Hareket et, yeni bir slayt ekleyin. Slaytın içinde, içerik sekmesinin arka plan alt kategorisindeki ödül listesine yerleştirmek istediğiniz öğelerden birinin arka plan görüntüsünü yükleyin. Ardından, aynı sekmedeki metin alt kategorisine öğenin adını ve düğme metnini girin. Ayrıca bağlantı alt kategorisindeki URL’yi değiştirin. Bir kategoride ihtiyacınız olduğu kadar slayt ekleyin ve aynı şeyi tekrarlayın. Yeni çizgiler eklemeye devam edin, ancak şimdi sadece 2 sütunla. Tasarım sekmesindeki boyutun alt kategorisinde geleneğin genişliğini ’55’ olarak değiştirin ve uzay alt kategorisinde daha düşük marjı ‘%5’e değiştirin. Önceki satır modülünde yaptığımız metin modülü ve kaydırıcı modülü, diğer tüm metin ve kaydırıcı modüllerinde ihtiyaç duyduğumuz ayarlara sahipti. Lütfen ve her iki klonu dört kez dört kez ve her satır modülünden kalan sütuna yerleştirin. Düzeniniz şimdi böyle görünecek: İletişim Formu (Masaüstü) Düzendeki temas formunun amacı, insanların satın aldıkları ödülleri çifte sunmalarını sağlamaktır. Ödül alınır alınmaz, web sitesinde başkalarıyla değiştirilebilir. Bunu yaparak, iki misafirin aynı ödülü taşıması pek olası değildir. Yeni bir standart parça oluşturun ve içerik sekmesindeki arka plan alt kategorisinde arka plan rengini #fffaf6 olarak değiştirin.
Bu bölümde ihtiyacımız olan ilk satır satırı diğer bölümlerde olduğu gibidir. Daha önce metin modülü ile kullanılan satır modülünün klonu ve bölüme yerleştirin. Yapmanız gereken tek şey, metin modülü ayarlarında bazı değişiklikler yapmaktır. Ana öğedeki metin ve arka plan rengini #FAE4DE olarak değiştirin. İkinci satır şimdi, iki sütunlu bir satır ekleyin ve devam eden sekmenin görünürlük alt kategorisinde tablet ve cep telefonu üzerindeki satırları gizleyin. Kontak formu modülünü ilk sütuna yerleştirin ve tasarım sekmesinin farklı alt kategorilerinde aşağıdaki değişiklikleri yapın. Metin alanı formu:
Yazı Tipi Alan Formu: Rale Yolu Işığı Yazı tipi Yazı Tipi Boyut Formu: 18px Renk Metin Alanı Formu: #9B857B Yüksek Alan Çizgisi Şekli: 1.7EM Sınır: Giriş sınırı yarıçapı: 15 Sınırı kullanın: Evet
Sınır rengi: #d7dce1
Sınır Genişliği: 1 piksel
Sınır Gücü: Katı
Düğme:
Metin Boyutu Düğmesi: 15
Metin Boyutu Düğmesi: 15
Metin Renk Düğmesi: #FFFAF6
Arka Plan Renk Düğmesi: #9B857B
Sınır sınır genişliği: 9
Düğme Sınır Rengi: #9B857B
Sınır sınır yarıçapı: 4
İletişim Formu Modülü İç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, konuklarınıza işlem hakkında bilgi vermek için ikinci sütuna bir metin modülü ekleyeceğiz. Tasarım sekmesini açın ve metin kategorisinde aşağıdaki değişiklikleri yapın:
Metin Oryantasyonu: Orta
Metin yazı tipi: Raleway Light
Tet yazı tipi stili: kalın
Metin yazı tipi boyutu: 16
Metin Rengi: #9B857B Hat yüksekliği: 1.5em Aynı sekmeyi aşağı kaydırın ve boyutlandırma alt kategorisindeki maksimum genişliğe ‘300 px’ ekleyin.
Son olarak, uzay alt kategorisindeki üst kenarda ‘5px’ yazın. Daha önce yapılan kontak (tablet ve telefon) klonlama formları ve Kontak Formu modülü ve metin modülü hareketini (ve sütunu) yapın.Gelişmiş sekmesini açın ve masaüstü için satırları saklayın.
Düzeniniz şimdi olmalı ve son olarak şöyle görünüyor:
Dahası, bu mini dizilerin dördüncü bölümünde, Divi ve Otomatik referansla düğününüz için çevrimiçi bir konuk defteri nasıl yapacağınızı göstereceğ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!
