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

Bu gönderi, Divi ile Zarif Bir Düğün Web Sitesi Nasıl Oluşturulur mini dizimizin 2. 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 bölümünde sizlere şık bir düğün duyuru sayfası nasıl yapılır onu gösterdik. Bu ikinci bölüm, düğün web sitenizde bir galeri sayfası oluşturmaya ayrılacaktır. Galeri sayfası, düğün duyuru sayfası ile aynı tarzda olup, çok fazla değişiklik yapmak zorunda kalmadan her ikisini de aynı web sitesinde kullanmanıza olanak tanır.

Divi'nin görsel oluşturucusu ile aşağıdaki düzeni nasıl oluşturacağınızı adım adım göstereceğiz:

Bu düzen, etkileşimli ve güzel bir galeri sayfası oluşturmanıza yardımcı olan 6 bölümden oluşur.

Kahraman Bölümü

Çok meşgul görünmeyen çok basit bir başlık ile gitmeye karar verdik. Galeri sayfasında zaten çok sayıda resim olacak ve insanların buna odaklanmasını istiyoruz. Basit bir kahraman bölümüne sahip olmak, sayfanın başındaki görseller tarafından çok fazla dikkati dağılmadan konukların sayfanın özünü bulmasını kolaylaştırır.

Bir sayfa yarat

Divi oluşturucuyu kullanarak bir sayfa oluşturarak başlayın ve Visual Builder'a geçin.

Yeni sayfanızda zaten bir bölümün otomatik olarak mevcut olduğunu görebilirsiniz. Bu bölüm, içinde tam genişlikte bir satır içerir. Bu bölümün ilk kısmı için tam genişlikte bir satıra ihtiyacımız olacak, bu yüzden onu kullanmaya devam edin.

Yeni oluşturduğunuz bölümün ayarlarını açın ve içerik sekmesinde Arka Plan alt kategorisini açın. Ardından, arka plan rengini '#fffaf6' olarak değiştirin.

Metin Modülü

Satırın tam genişlikli sütununa bir Metin Modülü ekleyerek devam edin. İçerik sekmesinin metin kutusuna metni girin ve Tasarım sekmesine geçin.

İçeriğinizin tasarımını düzenlemeye başlamak için Tasarım sekmesindeki Metin alt kategorisini seçin. Oluşturduğumuz düzen için Metin Modülünüzün Metin alt kategorisinde aşağıdaki ayarlamaları yapmamız gerekecek:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Mandalina
• Metin Yazı Tipi Boyutu: 90p (Masaüstü), 80 (Tablet), 66 (Telefon)
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1.7em

Aşağı kaydırmak ve değiştirmek için farklı seçenekler aramak istemiyorsanız, arama seçeneğini de kullanabilirsiniz. Bu seçenek, çok fazla çaba harcamanıza gerek kalmadan daha üretken olmanıza ve işleri anında değiştirmenize yardımcı olur. Aşağıdaki örnekte, sadece 'Metin Yazı Tipi' terimlerini arıyoruz ve seçeneğin hemen göründüğünü göreceğiz.

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

gelin & damat

Devam ederken, gelin ve damadın iki ayrı görüntüsünü içeren bir bölüm oluşturmanız gerekecek.

Devam edin ve oluşturduğunuz önceki satırın hemen altına iki sütunlu yeni bir satır ekleyin. Satır ayarlarını açın ve Tasarım sekmesine gidin.

Ardından, satır ayarlarının Tasarım sekmesine gidin ve Boyutlandırma alt kategorisini açın. Özel Genişlik seçeneğini etkinleştirin ve yüzdeyi '%60' olarak değiştirin. Aynı sekmeyi aşağı kaydırın ve alt kenar boşluğuna '%5' ekleyin.

Bir kez daha, kolay yolu seçebilir ve arama çubuğuna 'Özel Genişlik' yazmanız yeterlidir.

gelinin resmi

Satırın ilk sütununa bir Görüntü Modülü ekleyin. Görsel alt kategorisinin altındaki İçerik sekmesine gelinin bir resmini yükleyin ve Gelişmiş sekmesine geçin. Özel CSS alt kategorisine tıklayın ve Ana Öğe alanına aşağıdaki kod satırını ekleyin:

border: 10px double #9b857b; 

Daha önce de belirtildiği gibi, arama çubuğuna 'Ana Eleman' yazabilirsiniz ve hemen açılır. Arama seçeneğini kullanmak, özellikle bir eğitimin adımlarını takip etmeye çalışırken çok büyük bir zaman kazandırabilir. Çok fazla düşünmeden tam olarak gerekeni yapabilirsiniz.

Kaydet ve Çık'a basın.

damadın resmi

Fark edebileceğiniz gibi, görüntüler aynı ayarlara sahiptir. Devam edin ve görüntü modülünü klonlayın, değiştirmeniz gereken tek şey görüntüdür. Galeri sayfanız şu ana kadar böyle görünmelidir:

Teşekkürler notu

Galeri sayfası genellikle düğün gerçekleştikten sonra düğün web sitesinde açılır. İnsanlar çekilen fotoğrafları görmekten heyecan duyuyor, bu nedenle tüm konuklarınızın sayfayı ziyaret etme olasılığı yüksek. Bu, galeri sayfasını konuklara son bir şey söylemek için ideal bir yer yapar.

Başlamak için düzeninize yeni bir standart bölüm ekleyin. Bölüm içinde tam genişlikte bir satır kullanın.

Ardından, bölüm ayarlarını açın ve arka plan alt kategorisinde arka plan rengini '#fffaf6' olarak değiştirin.

İlk Metin Modülü

Yeni oluşturduğunuz satıra bir metin modülü ekleyin. İçerik sekmesinde, web sitenizde görünmesini istediğiniz metni metin kutusuna girin. Tasarım sekmesine geçerek devam edin.

Tasarım sekmesinde Metin alt kategorisini seçerek başlayın ve manuel olarak arayarak veya arama çubuğunda arayarak aşağıdaki değişiklikleri yapın:

• Metin Yönü: Merkez
• Yazı Tipi : Mandalina
• Metin Yazı Tipi Boyutu: 70 (Masaüstü ve Tablet), 50 (Telefon)
• Metin Rengi: #9b857b
• Metin Satır Yüksekliği: 1em

Şimdi aynı sekmede Aralık alt kategorisini seçin ve alt kenar boşluğunu '%5' olarak değiştirin.

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

İkinci Metin Modülü

Oluşturduğunuz ilk metin modülünün altına yeni bir metin modülü ekleyin. İçerik sekmesinde misafirlerle paylaşmak istediğiniz teşekkür notunu metin kutusuna yazıp Tasarım sekmesine geçin.

Aşağıdaki değişiklikleri Tasarım sekmesinde manuel olarak arayarak veya arama çubuğuyla seçenekleri arayarak yapın.

• Metin Yönü: Yaslanmış
• Metin Yazı Tipi: Raleway Light
• Metin Stili: Kalın
• Metin Yazı Tipi Boyutu: 14
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1,6em

Kaydet ve Çık'a tıklayın ve hazırsınız. Galeri sayfanız şu ana kadar böyle görünmelidir:

Favori Resimler Bölümü

Teşekkür notu bölümünü bitirdikten sonra gelin ve damadın en sevdiği resimleri gösterdiğiniz bölüme geçebilirsiniz. Bu bölümde, iki bölüm kullanacak ve görüntü modüllerine polaroid görünmelerini sağlamak için CSS kodu uygulayacaksınız.

Standart bir bölüm ekleyerek başlayın. Bu standart bölümde, tam genişlikte bir satıra ihtiyacınız olacak. Bölüm ayarlarını açın ve içerik sekmesinin Arka Plan alt kategorisinde arka plan rengini '#9b857b' olarak değiştirin.

Ardından, satıra bir metin modülü ekleyin. Ayarları açın ve Metin alt kategorisinin metin kutusuna göstermek istediğiniz başlığı girin. Devam ederek 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,6em

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

Polaroid Görüntüler (Masaüstü)

Bu bölüm için başka bir standart bölüme ihtiyacınız olacak. Bu bölümde 4 sütunlu bir satıra ihtiyacınız olacak. Bu bölümün arka plan rengini, Arka Plan alt kategorisinin altındaki İçerik sekmesinde '#fae4de' olarak değiştirin.

Satırın ilk sütununa bir Görüntü Modülü ekleyerek devam edin. Görüntünün ayarlarını açın ve içerik sekmesinin Görüntü alt kategorisindeki favori görüntülerden birini yükleyin.

Ardından, Gelişmiş sekmesine gidin, CSS Kimliği ve Sınıfları alt kategorisine tıklayın ve CSS Sınıfı alanına 'polaroid' yazın. Ana Öğe alanına aşağıdaki kodu ekleyin:

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

Şimdi, 'polaroid' sınıfını harekete geçirmek için web sitenizin arka ucuna gitmeniz gerekecek. Divi > Tema seçenekleri > bölümüne gidin ve sayfanın altındaki Özel CSS alanına aşağıdaki kodu girin:

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

Bundan sonra Visual Builder'a geri dönebilirsiniz. Birden fazla polaroid görüntüye ihtiyacınız olacak, bu yüzden Görüntü Modülünü 7 kez klonlamalısınız ve bunları farklı sütunlara koyduğunuzdan emin olun. Her sütunda 2 Görüntü Modülü olmalıdır.

Polaroid görüntülerin eğlenceli görünmesini sağlamak için, her Görüntü Modülünün Ana Öğe alanındaki CSS kodunu ayrı ayrı değiştirmeniz gerekir. Farklı kodu uygulamak için aşağıdaki resimde her bir Görüntü Modülüne farklı bir numara verdik:

Atanan numaraya bağlı olarak Ana Eleman alanındaki kodu uygun şekilde değiştirin. Ana Öğeyi, Özel CSS alt kategorisinin altındaki Gelişmiş sekmesinde bulabilirsiniz. Tasarım sekmesinin Aralık alt kategorisindeki Özel Kenar Boşluğu alanlarına da bir değer ekleyin:

Resim 1

Bu, yaptığınız ilk Görüntü modülüdür, öyle kalsın.

Resim 2

Özel kenar boşlukları:
Üst: -%10
Sol: – %20

Ana Eleman:

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

Resim 3

Özel kenar boşlukları:
Sol: – %20

Ana Eleman:
Hiçbiri

Resim 4

Özel kenar boşlukları:
Üst: -%10
Sol: – %20

Ana Eleman:

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

Resim 5

Özel kenar boşlukları:
Hiçbiri

Ana Eleman:

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

Resim 6

Özel kenar boşlukları:
Üst: -%10
Sol: – %20

Ana Eleman:

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

Resim 7

Özel kenar boşlukları:
Sol: – %20

Ana Eleman:

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

Resim 8

Özel kenar boşlukları:
Üst: -%10
Sol: – %20

Ana Eleman:

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

Tüm görüntüleri kurduktan sonra, satırın ayarlarını açın. Gelişmiş sekmesine gidin ve Görünürlük alt kategorisinde telefon ve tablet satırını gizleyin.

Ayrıca, İçerik sekmesinin Bağlantı alt kategorisindeki Işık Kutusunu etkinleştirerek kişilerin bu bölümdeki resmi açabildiğinden emin olun.

Favori Görüntüler (Tablet ve Telefon)

Görüntülerin duyarlı olduğundan emin olmak için aynı bölüme başka bir satır ekleyeceğiz. Tam genişlikte bir satır yapın ve 1 ve 5 numaralı Görüntü Modüllerini klonlayın. Bu klonlanmış modülleri yeni satıra yerleştirin. Mobil versiyon için ise oluşturduğumuz Image Modules'ün sadece bu iki versiyonunu kullanacağız.

Şimdi, satırın ayarlarını açın. Gelişmiş sekmesine gidin ve masaüstlerinde Görünürlük alt kategorisindeki satırı gizleyin.

Tüm bu değişiklikleri yaptıktan sonra, düzeniniz şu ana kadar masaüstünde şöyle görünmelidir:

Soyadına Göre Galeri (Masaüstü)

Genellikle düğünlerde belirli bir yapıyı bulmayı zorlaştırabilecek çok sayıda fotoğraf çekilir. Bu yüzden bu galeri sayfasının galeri bölümünü biraz daha kolay hale getirmeye karar verdik. Galeriler, konukların soyadına göre görüntülenecek ve bu da onların kendi resimlerini bulmalarını kolaylaştıracak.

İsim Listesi

Başlamak için, soyadların listesini göstermeniz ve onları sayfanın resimleri bulacakları bölümüne bağlamanız gerekir.

Yeni bir standart bölüm oluşturun ve içine tam genişlikte bir satır yerleştirin. Ardından, bir metin modülü ekleyin. İçerik sekmesinin Metin alt kategorisine görünmesini istediğiniz metni yazın. 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: Mandalina
• Metin Yazı Tipi Boyutu: 100 (Masaüstü ve Tablet), 68 (Telefon)
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1,6em

Aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisinde üst kenar boşluğunu '%2' ve alt kenar boşluğunu '%5' olarak değiştirin.

Kaydet ve Çık'ı tıklayın. Şimdi, bu durumda üç sütunlu başka bir satır ekleyin. Satır ayarlarının Tasarım sekmesinde, Aralık alt kategorisinde alt kenar boşluğunu '%5' olarak değiştirin.

Ardından, satırın sol sütununa bir metin modülü ekleyin. Metin modülünde konukların soyadlarının üçte birini ekleyin. Bu soyadların her biri, web sitesinin onları getirmek istediğiniz kısmına bir bağlantı bağlantısına ihtiyaç duyacaktır. Adlardan birini seçin, bağlantı simgesine tıklayın ve bir '#' + ad yazın. Bu blog gönderisinde daha sonra, bu adı belirli bir bölüme bağlayacaksınız. Listedeki isimlerin her biri için aynı şeyi tekrarlayın.

Adlardan birini seçin, bağlantı simgesine tıklayın ve bir '#' + ad yazın. Bu blog gönderisinde daha sonra, bu adı belirli bir bölüme bağlayacaksınız. Listedeki isimlerin her biri için aynı şeyi tekrarlayın.

Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki ayarlamaları yapın:

• Metin Yönü: Sağ
• Metin Yazı Tipi: Raleway Light
• Metin Stili: Kalın
• Metin Yazı Tipi Boyutu: 20
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1,6em

Devam ederek, Metin Modülünü iki kez klonlayın ve klonlanan modülleri diğer iki sütuna yerleştirin. Bu listelerdeki soyadlarını ve Metin Yönlendirmesini ikinci sütun için 'Merkez' ve üçüncü sütun için 'Sol' olarak değiştirdiğinizden emin olun.

Satırın ayarlarını açın ve Gelişmiş sekmesinin Görünürlük alt kategorisinde görünürlüğü yalnızca masaüstü olarak değiştirin.

Soyadına Göre Galeri (Tablet & Telefon)

Web sitesinin duyarlı olduğundan emin olmak için tabletlere ve telefonlara uyan yeni bir satır oluşturacağız. Tam genişlikte bir sütun içeren yeni bir satır ekleyin. Ardından, bu tam genişlikli satıra bir Metin Modülü ekleyin ve metin kutusuna soyadını yazın. Metin kutusunu İçerik sekmesinin Metin alt kategorisinde bulabilirsiniz.

Bağlantı simgesine tıklayarak ve URL kutusuna bir '#' + ad yazarak önceki satırda yaptığımızın aynısını tekrarlayın.

Ancak her ikinci ada farklı bir bağlantı bağlantısı atadığınızdan emin olun. Bu örnekte, hem Avery hem de Brown, masaüstlerinde olduğundan farklı bir bağlantı bağlantısına sahip olacaktır. Bunu yapmak zorundayız çünkü sitenin bir sonraki bölümünde her ikinci galeri için iki farklı galeri bölümümüz olacak. Bu şekilde, tablet ve telefon için duyarlı olacaktır.

Son olarak, satırın Gelişmiş sekmesine gidin ve Görünürlük alt kategorisinde masaüstleri için satırı devre dışı bırakın.

Galeri Bölümü (Masaüstü)

Web sitesinin son bölümünde, farklı soyadları temsil eden farklı galeri bölümleri yapmamız gerekecek. Size bunlardan ikisini nasıl yapacağınızı göstereceğiz ve buna göre başkalarını da ekleyebilirsiniz.

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

Devam ederek, bunun gibi bir satır ekleyin:

Satır bölümlerinde Özel Genişlik'i kullanın. Tasarım sekmesine gidin Boyutlandırma alt kategorisinde Özel Genişliği seçin ve '%60' olarak değiştirin.

Ardından Tasarım sekmesine gidin ve üst ve alt kenar boşluğunu '%5' olarak değiştirin.

Metin Modülü

Şimdi, bir Metin Modülü ekleyin ve İçerik sekmesinin Metin alt kategorisindeki metin kutusuna bir ailenin soyadını yazın. Tasarım sekmesine gidip aşağıdaki değişiklikleri yaparak devam edin:

• Metin Hizalama: Merkez
• Metin Yazı Tipi: Mandalina
• Metin Yazı Tipi Boyutu: 60
• Metin Rengi: #9b857b
• Metin Satırı Yüksekliği: 1,6em

Aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisinde üst kenar boşluğunu '%20' olarak değiştirin.

Gelişmiş sekmesine geçin. CSS Kimliği ve Sınıfları alt kategorisinin CSS Kimliği alanında, yukarıda yaptığınız bağlantı bağlantısını Metin Modülüne bağlamanız gerekir. Bu nedenle, listedeki ilk bağlantı bağlantısı '#adams' ise, o zaman 'adams'ı doldurmanız gerekir. Kimliğin, daha önce oluşturduğunuz listedeki ada bağladığınız kimlikle aynı olduğundan emin olun.

Satırın ikinci sütununda bir Galeri Modülü eklemeniz gerekecek. Genel sekmesinin Görüntüler alt kategorisindeki Görüntü Numarası alanına '8' yazın ve 8 görüntü seçin.

Ardından, Tasarım sekmesine gidin ve Mizanpajınızın 'Izgara' ve Mizanpaj alt kategorisinde Küçük Resim Yönlendirmenizin 'Yatay' olduğundan emin olun.

Devam ederek, Gelişmiş sekmesine gidin. Bu sekmede, Özel CSS alt kategorisinin iki farklı bölümüne kod eklemeniz gerekecek; Ana Eleman ve Kaplama.

Ana Eleman:

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;

Kaplama:

-webkit-filter: brightness(0%);

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

Şimdi devam edin ve bölümü klonlayın. Sütun yapısını aşağıdakine değiştirin ve Metin Modülü ile Galeri Modülü arasında yer değiştirin:

Galerideki resimleri, metin kutusunda belirtilen soyadı ve Sınıf Kimliğini değiştirin. Bu bölümün başka bir arka plan rengi de var; '#fffaf6'.

Şimdi, bu satırın Gelişmiş sekmesine gidin ve Görünürlük alt kategorisinde tabletler ve telefonlar için gizleyin.

Düğünde bulunan aile isimlerinin sayısına bağlı olarak galeri bölümleri yapmaya devam edebilirsiniz.

Galeri Bölümü (Mobil)

Daha önce de belirttiğimiz gibi her ikinci galeri bölümü mobil için bir alternatife ihtiyaç duyacaktır. Yaptığımız ilk galeri satırını klonlayın ve oluşturduğumuz son galeri satırının aynı bölümüne yerleştirin.

Ardından Metin Modülü seçeneklerini açın. Tasarım sekmesine gidin ve Aralık alt kategorisindeki üst kenar boşluğunu kaldırın. Ardından, Gelişmiş sekmesine gidin ve CSS Kimliği ve Sınıfları alt kategorisindeki CSS Kimliğini 'avery1' olarak değiştirin. Bu, tabletlere ve telefonlara uygulanan listedekiyle aynı kimliktir.

Bu kadar. Düzeniniz şimdi tam olarak bizim oluşturduğumuz ve bu blog gönderisinin başında gösterdiğimiz gibi görünmelidir:

Sıradaki

Bu mini dizinin üçüncü bölümünde, düğün web sitesine eklemek için nasıl hediye listesi sayfası oluşturacağınızı göreceğiz. Bu eğitimle ilgili herhangi bir sorunuz varsa veya gelecekteki eğitimler için herhangi bir talebiniz varsa; Bu blog gönderisinin yorum bölümüne bir yorum bıraktığınızdan emin olun, bu yüzden cevaplarla size geri dönün!

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!