Divi ile Düğün Galerisi Nasıl Yapılır
Bu yazı, mini dizilerimizde 5’in 2. Bölümündedir. 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 bölümünde, zarif bir düğün duyuru sayfasının nasıl oluşturulacağını gösteriyoruz. Bu ikinci bölüm, düğün web sitenizde bir galeri sayfası oluşturmaya ayrılacaktır. Galeri sayfası, birçok değişiklik yapmak zorunda kalmadan her ikisini de aynı web sitesinde kullanmanızı sağlayan düğün duyuru sayfasıyla aynı stile sahiptir.
Divi’nin görsel üreticisi ile aşağıdaki düzeni nasıl yapacağı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. Kahramanlarımız çok meşgul görünmeyen çok basit bir başlık kullanmaya karar verdiler. Galeri sayfasında zaten birçok resim var ve insanların buna odaklanmasını istiyoruz. Basit bir kahramana sahip olmak, konukların sayfanın başında görseller tarafından çok rahatsız olmadan sayfanın özünü bulmasını kolaylaştırır. Bir sayfa oluşturun Bir sayfa oluşturarak, bir Divi oluşturucu kullanarak ve görsel oluşturucuya geçerek başlayın. Yeni sayfanızda otomatik olarak bir bölüm olduğunu görebilirsiniz. Bu kısım içinde tam geniş bir çizgi içeriyor. Bu bölümün ilk kısmı için tam geniş bir çizgiye ihtiyacımız olacak, bu yüzden kullanmaya devam edin. Yeni oluşturduğunuz parçanın ayarlarını açın ve içerik sekmesindeki arka plan alt kategorisini açın. Ardından, arka plan rengini ‘#fffaf6’ olarak değiştirin. Metin Modülü Metin modülünü satırın tam geniş sütununa ekleyerek devam edin. Metni İçerik sekmesi metin kutusuna girin ve Tasarım sekmesine devam edin. İçerik tasarımınızı düzenlemeye başlamak için Tasarım sekmesindeki alt kategori metnini seçin. Yaptığımız düzen için, metin modülünüzün metninin alt kategorisinde aşağıdaki ayarlamaları yapmamız gerekir: Metin Oryantasyonu: Orta
Metin yazı tipi: mandalina
Metin yazı tipi boyutu: 90p (masaüstü), 80 (tablet), 66 (telefon)
Metin Rengi: #9B857B
Hat yüksekliği metni: 1.7em
Aşağı kaydırmak ve değiştirmek için farklı bir seçenek aramak istemiyorsanız, arama seçeneğini de kullanabilirsiniz. Bu seçenek, daha üretken olmanıza ve çok denemeden birçok şeyi anında değiştirmenize yardımcı olur. Aşağıdaki örnekte, yalnızca ‘metin yazı tipi’ terimini arıyoruz ve yakında seçeneği göreceğiz. Kaydet ve Çıkış’ı tıklayın. Bir sonraki gelin, iki bireysel gelinle bir rol oynamalısınız. Devam edin ve yaptığınız önceki satırın hemen altındaki iki yeni sütunun satırını ekleyin. Satır ayarlarını açın ve tasarım sekmesini açın. Ardından, Tasarım sekmesini satır ayarlarından açın ve boyut 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. Yine, kolay bir çözüm seçebilir ve arama çubuğuna ‘özel genişlik’ yazabilirsiniz. Gelin ve damat görüntü modülünü satırın ilk sütununa ekler. Görüntü alt kategorisi altındaki İçerik sekmesine gelin görüntüsünü yükleyin ve Gelişmiş sekmesine geçin. CSS özel alt kategorisine tıklayın ve ana öğe alanına aşağıdaki kod satırını ekleyin: Sınır: 10px Double #9B857B; Daha önce de belirtildiği gibi, arama çubuğuna ‘ana öğeyi’ yazabilirsiniz ve yakında görünecektir. Bir arama seçeneğini kullanmak, özellikle öğretici adımları izlemeye çalıştığınızda zamandan tasarruf edebilir. Çok fazla düşünmeden gerekenleri tam olarak yapabilirsiniz.
Kaydet ve Çıkış tuşuna basın. Erkek gelin ve damat fark ettiğiniz gibi, görüntü aynı ayarlara sahiptir. Lütfen ve klon görüntü modülü, değiştirmeniz gereken tek şey resim. Bu, galeri sayfanızın şimdiye kadar gösterilmesidir: Teşekkür Galeri sayfaları genellikle bir düğünden sonra düğün web sitesinde görünür. İnsanlar çekilen resmi görmekten mutluluk duyarlar, bu nedenle büyük olasılıkla tüm konuklarınız sayfayı ziyaret eder. Bu, konuklara son şeyi söylemek için ideal galeri sayfasını yapar. Başlamak için, düzeninize yeni bir standart parça ekleyin. İçeride, tam geniş bir sıra kullanın. Ardından, ayarları açın ve arka plan rengini arka plan alt kategorisinde ‘#fffaf6’ olarak değiştirin. İlk metin modülü metin modülünü yeni yaptığınız satıra ekler. İçerik sekmesinde, web sitenizde görüntülemek istediğiniz metni metin kutusuna girin. Tasarım sekmesine geçmeye devam edin. Tasarım sekmesinde alt kategori metnini seçerek başlayın ve manuel olarak arayarak veya arama çubuğunda arayarak aşağıdaki değişiklikleri yapın: Metin Oryantasyonu: Orta Metin yazı tipi: mandalina
Metin yazı tipi boyutu: 70 (masaüstü ve tablet), 50 (telefon)
Metin Rengi: #9B857B
Hat yüksekliği metni: 1em
Şimdi, aynı sekmedeki alanın alt kategorisini seçin ve alt kenar boşluğunu ‘%5’ olarak değiştirin.
Kaydet ve Çıkış’ı tıklayın. İkinci metin modülü, oluşturduğunuz ilk metin modülü altına yeni bir metin modülü ekler. İçerik sekmesinde, metin kutusundaki konuklarla paylaşmak istediğiniz bir not yazın ve Tasarım sekmesine devam edin.
Manuel olarak veya arama çubuğuyla seçenekler arayarak tasarım sekmesinde aşağıdaki değişiklikleri yapın. Metin yönlendirmesi: haklı Metin yazı tipi: Raleway Light
Metin Stili: Kalınlık
Metin yazı tipi boyutu: 14
Metin Rengi: #9B857B
Hat yüksekliği metni: 1.6em
Kaydet ve Çıkış’ı tıklayın ve bunu yapmaya hazırsınız. Galeri sayfanızın şimdi gösterdiği şey budur:
En sevdiğim resim bölümü Teşekkürler bitirdikten sonra, gelinin en sevdiği fotoğrafları gösterdiğiniz bölüme gidebilirsiniz. Bu bölümde, iki parça kullanacak ve Polaroid görünmesini sağlamak için CSS kodunu görüntü modülüne uygulayacaksınız.
Standart bir parça ekleyerek başlayın. Bu standart bölümde, tam geniş bir çizgiye ihtiyacınız olacak. Bölüm ayarlarını açın ve içerik sekmesindeki arka plan alt kategorisinde arka plan rengini ‘#9b857b’ olarak değiştirin. Ardından, metin modülünü satıra ekleyin. Ayarları açın ve metin kutusu alt kategori metninde görüntülemek istediğiniz başlığı girin. Ardından, Tasarım sekmesini açın ve metin 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
Hat yüksekliği metni: 1.6em
Kaydet ve Çıkış’ı tıklayın. Polaroid (Masaüstü) Görüntüler Bu bölüm için başka standart bölümlere ihtiyacınız var. Bu bölümde, 4 sütuna sahip bir satıra ihtiyacınız olacaktır. Arka plan alt kategorisi altındaki İçerik sekmesindeki bu bölümün arka plan rengini ‘#FAE4DE’ olarak değiştirin. Görüntü modülünü satırın ilk sütununa ekleyerek devam edin. Görüntü ayarlarını açın ve içerik sekmesinin görüntü alt kategorisindeki favori resimlerden birini yükleyin. Ardından, Gelişmiş sekmesini açın, CSS ID & Sınıfları alt kategorisine tıklayın ve CSS sınıfı sütununa ‘Polaroid’ yazın. Ana öğe alanında aşağıdaki kodu ekleyin: z-index: 1;
-Webkit-Transform: Rotate (-10deg);
-Moz-transform: rotate (-10deg);
Şimdi, ‘Polaroid’ sınıfını uygulamak için web sitenizin arkasına gitmelisiniz. Divi> Tema Seçenekleri> ve sayfanın altındaki CSS özel alanına aşağıdaki kodu girin: .polaroid { Arka plan: Beyaz;
Ekran: satır içi;
Şamandıra: sol; Marj: 0 15px 30px;
Dolgu: 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: Tüm .15s lineer;
-Moz-Transition: Tüm .15s lineer;
Geçiş: Tüm .15s doğrusal;
Z-endeks: 0;
Pozisyon: göreceli;
}
.polaroid :: sonra {
Renk: #333;
yazı tipi boyutu: 20px;
İçerik: attr (başlık);
Pozisyon: göreceli;
Üst: 15px;
}
.polaroid.et_pb_image_2 {
Ekran bloğu;
Genişlik: miras;
} Bundan sonra görsel oluşturucuya geri dönebilirsiniz. Birden fazla Polaroid resmine ihtiyacınız olacak, bu yüzden görüntü modülünü 7 kez klonlamanız ve farklı bir sütuna koyduğunuzdan emin olmanız gerekir. Her sütunda 2 görüntü modülü olmalıdır. Bir polaroid görüntünün komik görünmesini sağlamak için, her görüntü modülünün ana öğesi alanındaki CSS kodunu tek tek değiştirmelisiniz. Farklı bir kod uygulamak için, aşağıdaki resimde her farklı sayı görüntü modülünü verdik:
Belirtilen numaraya bağlı olarak, uygun ana öğe alanındaki kodu değiştirin. Ana öğeleri CSS özel alt kategorisi altında devam eden sekmede bulabilirsiniz. Tasarım sekmesindeki boşluk alt kategorisindeki özel marj alanına değeri ekleyin: Şekil 1, yaptığınız ilk görüntü modülüdür, böyle kalır. Şekil 2 Özel kenar: Üst:% -10 Sol: -20% Ana Eleman: Z -Index: 5;
-Webkit-Transform: Rotate (-3deg);
-Moz-transform: rotate (-3deg); Şekil 3 Özel Marj: Sol:% -20 Ana Eleman: Yok Şekil 4 Özel kenar: Üst:% -10 Sol:% -20 Ana Eleman: Z -Index: 3;
-Webkit-Transform: Rotate (4deg);
-Moz-transform: rotate (4deg); Şekil 5 Özel kenar boşluğu: ana öğeler yoktur: -webkit -Transform: rotate (14deg); -Moz-transform: rotate (14deg);
Dönüşüm: döndür (14deg); Şekil 6 Özel Marj: Üst:% -10 Sol:% -20 Ana Eleman: -Webkit-Transform: Rotate (-18deg);-Moz-Transform: Rotate (-18deg);
Dönüşüm: döndür (-18deg); Şekil 7 Özel kenar: Sol: -20% Ana Eleman: Z -Index: 1;
-Webkit-Transform: Rotate (-10deg); l
-Moz-transform: rotate (-10deg); Şekil 8 Özel Marj: Üst:% -10 Sol: -20%
Ana öğe: z-endeks: 5;
-Webkit-Transform: Rotate (-3deg);
-Moz-transform: rotate (-3deg); Tüm görüntüleri ayarladıktan sonra satır ayarlarını açın. Devam sekmesini açın ve görünürlük alt kategorisinde mobil ve tabletler için satırları gizleyin.
Ayrıca, İçerik sekmesindeki bağlantı alt kategorisindeki LightBox’ı etkinleştirerek kullanıcıların bu bölümdeki görüntüleri açabileceğinden emin olun.
En sevdiğim resimler (tabletler ve cep telefonları) Duyarlı görüntüler sağlamak için aynı bölüme başka bir çizgi ekleyeceğiz. Tam geniş bir çizgi ve klon numarası 1 ve 5 görüntü modülleri yapın. Bu klonlama modülünü yeni bir çizgiye yerleştirin. Hücresel sürüm için, sadece yaptığımız görüntü modülünün iki versiyonunu kullanacağız.
Şimdi satır ayarlarını açın. Devam sekmesini açın ve görünürlük alt kategorisindeki masaüstündeki satırları gizleyin.
Tüm bu değişiklikleri yaptıktan sonra, düzeniniz masaüstünde şimdiye kadar böyle görünecek:
Soyadına dayanan galeri (masaüstü) genellikle bir düğünde çekilen birçok resim vardır, bu da içinde belirli yapıları bulmayı zorlaştırabilir. Bu yüzden bu galeri sayfasının galerisini biraz daha rahat hale getirmeye karar verdik. Galeri, konuğun soyadına göre gösterilecek ve bu da kendi fotoğraflarını yeniden keşfetmelerini kolaylaştıracak. Başlamak için isimlerin listesi, soyadı listesini göstermeniz ve resim bulacakları sayfaya bağlamanız gerekir. Yeni bir standart bölüm yapın ve içine tam geniş bir çizgi yerleştirin. Ardından, metin modülünü ekleyin. İçerik sekmesinin metin alt kategorisine görüntülemek istediğiniz metni yazın. Ardından, Tasarım sekmesini açın ve metin alt kategorisinde aşağıdaki değişiklikleri yapın:
Metin Oryantasyonu: Orta
Ardından, metin modülünü sol satır sütuna ekleyin. Metin modülüne, konuk soyadının üçte birini ekleyin. Bu soyadların her biri, gitmek istediğiniz web sitesi bölümüne bir çapa bağlantısı gerektirir. Adlardan birini seçin, bağlantı simgesini tıklayın ve ‘#’ + adı yazın. Bu blog yazısının ilerleyen saatlerinde, bu adı belirli bir bölüme bağlayacaksınız. Listedeki her isim için aynı şeyi tekrarlayın. Adlardan birini seçin, bağlantı simgesini tıklayın ve ‘#’ + adı yazın. Bu blog yazısının ilerleyen saatlerinde, bu adı belirli bir bölüme bağlayacaksınız. Listedeki her ad için aynı şeyi tekrarlayın. Tasarım sekmesini açın ve metin alt kategorisinde aşağıdaki ayarlamaları yapın:
Metin Oryantasyonu: Doğru
Metin yazı tipi: Raleway Light
Metin Stili: Kalınlık
Metin yazı tipi boyutu: 20 Metin Rengi: #9B857B Hat yüksekliği metni: 1.6em Daha sonra, metin modülünün klonlanması iki kez klonlama modülünü diğer iki sütuna yerleştirin. Üçüncü sütun için ikinci ve ‘sol’ sütunlar için bu listedeki soyadı ve metin yönünü ‘orta’ olarak değiştirdiğinizden emin olun. Satır ayarlarını açın ve görünürlüğü yalnızca Masaüstüne Değiştirin Gelişmiş Seviye sekmesindeki görünürlük alt kategorisinde.
Web sitesinin duyarlı olduğundan emin olmak için Soyadına Galeri (Tablet ve Cep Telefonu), tablet ve cep telefonuna uygun yeni bir çizgi oluşturacağız. Tam geniş bir sütuna sahip yeni bir satır ekleyin. Ardından, metin modülünü tam geniş satıra ekleyin ve metin kutusuna soyadı yazın. İçerik sekmesinin metin alt kategorisinde metin kutularını bulabilirsiniz. Bağlantı simgesine tıklayarak ve URL kutusuna ‘#’ + adı yazarak önceki satırda yaptığımız aynı şeyi tekrarlayın.
Ancak her saniye ad için farklı bir çapa bağlantısı ayarladığınızdan emin olun. Bu örnekte, hem Avery hem de Brown, masaüstünde sahip olduklarından farklı bir çapa bağlantısına sahip olacak. Bunu yapmak zorundayız, çünkü web sitesinin bir sonraki bölümünde, her ikinci galeri için iki farklı galeri parçamız olmalı. Bu şekilde, tabletlere ve cep telefonlarına cevap verecektir. Son olarak, gelişmiş sekmeyi hattan açın ve görünürlük alt kategorisindeki masaüstü hatlarını devre dışı bırakın.
Galeri bölümü (masaüstü) Web sitesinin son bölümünde, farklı bir kalıcı adı temsil eden farklı bir galeri oluşturmalıyız. Size bunlardan ikisini nasıl yapacağınızı göstereceğiz ve sonra diğerlerini de ekleyebilirsiniz.
İlk olarak, standart bölümü ekleyin. İçerik sekmesinin arka plan alt kategorisinde arka plan rengini ‘#fae4de’ olarak değiştirin
Ardından, böyle bir çizgi ekleyin:
Satırın içinde özel bir genişlik kullanın. Tasarım sekmesini açın ve özelliğin genişliğini boyut alt kategorisinde ’60’ olarak değiştirin. Ardından, tasarım sekmesini açın ve üst ve alt marjı ‘%5’e değiştirin. Geçerli metin modülü, metin modülünü ekleyin ve içerik sekmesindeki metin alt kategorisindeki metin kutusuna aile soyadını yazın. Tasarım sekmesini açarak ve aşağıdaki değişiklikleri yaparak devam edin: Hizalama Metni: Orta Metin yazı tipi: mandalina Metin yazı tipi boyutu: 60 Metin Rengi: #9B857B Hat yüksekliği metni: 1.6em Aynı sekmeyi aşağı kaydırın ve uzay alt kategorisinde üst kenar boşluğunu ‘%20’ olarak değiştirin. Takip sekmesine geçin. CSS ID & Class alt kategorisinden CSS kimliği alanında, yukarıda oluşturduğunuz bağlantı bağlantısını metin modülüne bağlamanız gerekir. Yani, listedeki ilk bağlantı bağlantısı ‘#adams’ ise, o zaman ‘Adams’ doldurmalısınız. Kimliğin daha önce yaptığınız listedeki adla bağlantılı olduğunuzdan emin olun. İkinci sütunda bir galeri modülü eklemeniz gerekir. Genel sekmedeki görüntü alt kategorisindeki görüntü numaraları alanına ‘8’ yazın ve 8 resim seçin. Ardından, Tasarım sekmesini açın ve düzeninizin düzen alt kategorisinde ‘ızgara’ ve küçük resim oryantasyonu ‘manzara’ olduğundan emin olun. Taşın, bir takip sekmesini açın. Bu sekmede, CSS özel alt kategorisine ikinci bir kod eklemelisiniz; Ana unsurlar ve kaplama. Ana öğeler: Box-Shadow: 0 4px 8px 0 RGBA (0, 0, 0, 0.2), 0 6px 20px 0 RGBA (0, 0, 0, 0.19);
Metin-align: merkez;
Sınır: 5px katı #ffffff;
Sütun sayımı: 2;
Sütun boşluğu: 0px;
Açıklama: -Webkit -Filter: Parlaklık (%0); Kaydet ve Çıkış’ı tıklayın. Şimdi, bölüme devam edin ve klonladı. Sütun yapısını aşağıdakilere değiştirin ve metin modülü ile galeri modülü arasındaki yeri yönlendirin: Metin kutusunda ve sınıf kimliğinde belirtilen soyadı galerideki görüntüyü değiştirin. Bu bölümde başka bir arka plan rengi var; ‘#Ffff6’. Şimdi, bu çizginin devam eden sekmesini açın ve görünürlük alt kategorisinde tabletler ve cep telefonları için gizlenin. Düğünde bulunan aile isimlerinin sayısına bağlı olarak böyle bir galeri bölümü yapmaya devam edebilirsiniz. Galeri (Hücresel) bölümü Daha önce de belirttiğimiz gibi, ikinci galerinin her bir kısmı hücresel için alternatifler gerektirecektir. Yeterli Klon Sırası Yaptığımız ilk galeri ve yaptığımız son galeri hattının aynı bölümüne yerleştirin. Ardından, metin modülü seçeneğini açın. Tasarım sekmesini açın ve uzay alt kategorisindeki üst kenar boşluğunu silin. Ardından, Gelişmiş sekmesini açın ve CSS Kimliği ve Sınıf alt kategorisindeki CSS kimliğini ‘Avery1’ olarak değiştirin. Bu, tabletlere ve cep telefonlarına uygulanan listede olduğu gibi kimliktir. İşte burada. Düzeniniz şimdi tam olarak bu blogu yayınlamanın başında yarattığımız ve gösterdiğimiz gibi görünecek:
Ayrıca, bu mini dizilerin üçüncü bölümünde, düğün web sitesine eklemek için nasıl bir hediye listesi sayfası oluşturduğunuzu göreceğiz. Bu öğretici hakkında sorularınız varsa veya bir sonraki öğretici için bir isteğiniz varsa; Bu blog yayınının yorum bölümünde bir yorum bıraktığınızdan emin olun, böylece cevaplarla sizinle iletişime geçin! 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!
