Divi'nin Tasarım Konferansı Düzen Paketi ile Dijital Kaynaklar Sayfası Nasıl Oluşturulur

Mizanpajınızın tasarım öğelerini sizin için çalışacak şekilde kullandığınızda, Divi ile bir dijital kaynak sayfası tasarlamak kolaydır. Görsel oluşturucu, bu süreci oldukça keyifli hale getiren birçok yararlı özelliğe sahiptir. Ancak tasarım her şey değildir. Kaynak sayfanızın çalışması da önemlidir. Bu nedenle, dijital indirmelerinizi hızlı ve verimli bir şekilde yönetmenize ve teslim etmenize yardımcı olması için Google Cloud gibi üçüncü taraf depolama sağlayıcılarını kullanmak her zaman iyi bir fikirdir. Ve bu indirmelere bağlantı eklemek Divi'nin modüllerini kullanarak gerçekten çok kolay.

Bu kullanım örneği eğitiminde, Divi's Design Conference Layout Pack'i kullanarak işlevsel bir dijital kaynaklar sayfasını nasıl tasarlayacağınız konusunda size yol göstereceğim.

İşte birlikte başaracağımız şeylerden bazıları:

1. Zamanlama Sayfası Düzenini kullanarak üç bölüm içerikli bir Kaynak Sayfası oluşturun
2. Sayfadaki farklı bölümlere atlayan özel bir kaynak menüsü oluşturun
3. Üç kaynak bölümünün her birinin altına özel başa çıkma düğmeleri ekleyin
4. İndirilen dosyaları Google Cloud'da depolayın ve kaynaklar sayfasında kullanmak üzere bu dosyalara genel bağlantılar oluşturun

Başlayalım!

Gizlice Bakış

İşte birlikte oluşturacağımız kaynak sayfasının bir özeti.

Dijital Kaynaklar Sayfanızı oluşturun

Kaynaklar sayfasını oluşturmak için yeni bir sayfa ekleyin, ona "Kaynaklar" başlığını verin ve Visual Builder'ı dağıtın. Ayarlar menüsünden Tasarım Konferansı Takvim Sayfası düzenini sayfanıza ekleyin.

Sayfalarınıza nasıl düzen ekleyeceğinizle ilgili ayrıntılar için Tasarım Konferansı Düzen Paketini içeren blog gönderisine bakın.

Başlık bölümündeki Başlığı "Program"dan "Kaynaklar"a değiştirin. Ardından, doğrudan başlık bölümünün altındaki bölümü çoğaltın.

Aynı bölümde, üst satırdaki metin modülündeki başlığı “Oturum İndirmeleri” okuyacak şekilde güncelleyin. (Bunun için metne tıklayıp satır içi düzenleyiciyi kullanabilirsiniz)

Hemen altındaki satırda, sütun yapısını dört sütun olarak değiştirin ve “Açılış İfadeleri” başlıklı metin modülü dışındaki tüm modülleri silin. Ardından bu metin modülünü en soldaki sütuna sürükleyin.

Artık indirme linklerimizi eklemeye hazırız. Bunu yapmak için tasarım konferansı ana sayfa düzeninin “Öne Çıkan Konuşmalar ve Konuşmacılar” bölümünün altında kullanılan butonları kullanacağım. Ana sayfa düzeninizle sayfaya gidin (veya henüz yoksa bir tane oluşturun). Visual Builder'ı kullanarak, düğmelerden birini “indirme düğmesi” adıyla kitaplığınıza kaydedin.

Şimdi kaynaklar sayfanıza dönün ve bu düğmeyi dört sütunlu satırınızın ikinci sütununa ekleyin.

İçerik sekmesi altındaki düğme modülü ayarlarına gidin ve düğme metnini “Slaytlar (PDF)” diyecek şekilde güncelleyin.

Tasarım sekmesi altında, düğme hizalamasını Sola hizalı olarak değiştirin.

Ayarları kaydet.

Yeni oluşturduğunuz düğmeyi kopyalayıp yapıştırın (veya çoğaltın) ve doğrudan sağdaki 3. sütuna ekleyin. Ardından düğme metnini “Notlar (PDF)” okuyacak şekilde güncelleyin.

Ardından, tüm satırı iki kez çoğaltın. Öne çıkan oturumların her biri ile her bir satırdaki metin modülü başlık metnini güncelleyin.

Ardından bölümde kullanmadığınız son iki satırı silin. Bölümün son tasarımı böyle görünecek.

Kaynak Bağlantıları Bölümünü Oluşturma

Bu bölümü oluşturmak için az önce oluşturduğunuz “Oturum İndirmeleri” bölümünü çoğaltın. Sonra
kopyalanan bölümün ilk metin modülündeki başlık metnini “Kaynak Bağlantıları”nı okuyacak şekilde değiştirin.

Doğrudan altındaki satırda, sütun yapısını tek sütun olarak değiştirin ve satırdaki iki düğme modülünü silin. Ardından kalan metin modülü içeriğini “Tasarım İlhamı”nı okuyacak şekilde güncelleyin.

Ardından, az önce oluşturduğunuz satırın altına üç sütunlu bir satır ekleyin. Sol sütuna bir metin modülü ekleyin ve içerik kutusuna bir bağlantı ekleyin. Html kullanıyorsanız, aşağıdakileri ekleyin:

<a href="enter url here" target="_blank">Link to website</a>

Tasarım sekmesi altında, bağlantı sekmesine tıklayın ve aşağıdakileri güncelleyin:

Bağlantı Yazı Tipi Stili: Altı Çizili
Bağlantı Metni Boyutu: 16px
Bağlantı Metni Rengi: #4646c4

Ayarları kaydet.

Ardından, “Tasarım Blogları” adlı başka bir bağlantı kategorisi ekleyelim. Bunu yapmak için “Design Inspiration” başlık metin modülünü içeren satırı ve ayrıca üç bağlantı sütununu içeren satırı kopyalayıp aşağıya yapıştırın.

“Tasarım Blogları”nı okumak için metin modülünü “Tasarım İlhamı” başlığıyla güncelleyin. Ardından aşağıdaki üç sütunlu satırı iki sütunlu bir yapıya dönüştürün. Ayrıca, kullanıcıların her bir bağlantının neler sunabileceğini daha iyi anlamalarına yardımcı olmak için her bağlantının yanına bir açıklama metni ekleyebilirsiniz.

Geçerli bölümde kullanmadığımız kalan iki satırı silin.

Geçmiş Konferans Oturumları Bölümünü Oluşturma

Kaynaklar sayfamız için oluşturacağımız son bölüm, geçmiş oturumlar için videoları ve indirmeleri gösteren bir bölümdür.

Bunu yapmak için, başladığımız orijinal Zamanlama sayfa düzeninin kalan tasarım öğelerinden bazılarını kullanacağız. Az önce oluşturduğumuz “Kaynak Bağlantıları” bölümünün altında iki orijinal program bölümüne sahip olmalısınız. Buna ihtiyacın olacak.

İlk orijinal bölümde, "Gün 1 – 23 Kasım Çarşamba" içeren satır dışındaki tüm satırları silin. Şimdi bu bölümde yalnızca bir satır olmalıdır. Başlık metnini “Geçmiş Konferans Oturumları”nı okuyacak şekilde güncelleyin.

Bu bölümün altına, sağ sütunda bulunan satırlarla bir buçuk sütun yapısına sahip bir özel bölüm ekleyin.

Ardından, sağ sütuna bir sütun satırı ekleyin ve oturumların zamanını ve yerini göstermek için kullanılan aşağıdaki orijinal bölümden tanıtıcı modüllerden birini sürükleyin.

"Açıklama" başlığıyla tanıtım yazısı ayarlarını güncelleyin ve yeni bir belge simgesi verin.

Bundan sonra, yeni eklediğiniz tanıtım modülünün hemen altındaki orijinal bölümden bir geçiş modülünü sürükleyin.

Tanımlama modülünü yeni "Açıklama" başlığıyla çoğaltın ve geçiş modülünün altına sürükleyin. Ardından başlığı “İndirilenler” olarak değiştirin ve ona bir bulut indirme simgesi verin.

Geçiş modülünün altına iki sütunlu yeni bir satır ekleyin.

Ardından “Sessions Downloads” bölümünde oluşturduğumuz butonlardan birini kopyalayın ve yeni satırın her sütununa 2 buton yapıştırın.

Ardından, düğme metnini, her düğmenin bağlanacağı indirme türünü yansıtacak şekilde güncelleyebilirsiniz. İşte eklediğim dört tür:

Video (MP4)
Ses (MP3)
Slaytlar (PDF)
Notlar (PDF)

Tanıtım yazılarının altındaki boşluktan kurtulmak için 0 piksellik özel bir alt kenar boşluğu eklemeniz gerekebilir.

Şimdi, aşağıdaki orijinal bölümden oturum başlığını tutan metin modüllerinden birini uzmanlık bölümünün sol sütununa sürükleyin.

Şimdi geçmiş oturumun bir video kaydını ekleyebiliriz. Bunu yapmak için, videonun url'sini (youtube veya vimeo'da barındırılıyorsa) girerek metin modülünün altına bir video modülü ekleyin ve sayfanın tasarımına daha iyi uymasını istiyorsanız özel bir görüntü yerleşimi ekleyin.

Bu kadar. Şimdi bölümü çoğaltın ve her ek oturum için içeriği gerektiği gibi güncelleyin. Aşağıda kalan orijinal bölüm(ler)i silin ve sayfanızı kaydedin.

Kaynak Menünüzü Oluşturma

Çok fazla içeriğe sahip kaynak sayfaları için, kullanıcı deneyimini hızlı ve kolay bir şekilde bulma konusunda kullanıcı deneyimini geliştirmek için alt gezinmeye sahip olmak yardımcı olur. Bu kaynak sayfası için, sayfadaki belirli bölümlere atlayacak bağlantı bağlantılarına sahip özel bir menünün nasıl ekleneceğini göstereceğim. Bu yöntem, Divi ile tek sayfalık bir web sitesini nasıl oluşturacağınıza benzer.

Görünüm > Menüler'e gidin ve “Kaynak Menüsü” adlı yeni bir menü oluşturun. Bu menü için kaynak sayfamızdaki üç bölüme atlayacak üç özel bağlantı kullanacağız. İlk özel bağlantı için, url giriş kutusuna "#downloads" ve bağlantı metni için "Oturum İndirmeleri" yazın. Ardından menüye ekleyin.

İkinci özel bağlantı için "#links" url'sini ve "Kaynak Bağlantıları" bağlantı metnini girin.

Üçüncü özel bağlantı için "#past" url'sini ve "Geçmiş Konferans Oturumu" bağlantı metnini girin.

Artık menümüz oluşturulduğuna göre sayfamıza ekleyelim. İlk olarak, mizanpajınızın üst başlık bölümünün hemen altına yeni bir tam genişlikli bölüm ekleyin. Ardından bölüme tam genişlikte bir menü modülü ekleyin. Menü ayarları altındaki içerik sekmesinde, görüntülenecek menü olarak “Kaynak Menüsü”nü seçin ve şu arka plan rengini ekleyin: #474bc1.

Tasarım sekmesi ayarları altında aşağıdakileri güncelleyin:

Metin rengi: Lightf
Metin Yönü: Merkez
Menü Yazı Tipi: Merriweather
Menü Yazı Tipi Ağırlığı: Kalın
Menü Metin Boyutu: 16px
Menü Harf Aralığı: 1px

Ayarları kaydet.

Sayfanıza CSS Kimlikleri ekleyin

Menü bağlantı bağlantılarımızı oluşturmak için eklediğimiz özel bağlantı URL'lerini hatırlıyor musunuz? Şimdi, bu bağlantıların her biri için karşılık gelen CSS kimliklerini eklememiz gerekiyor, böylece her bağlantı, bir kullanıcı tıkladığında nereye atlayacağını bilsin.

Oturum indirmelerimizi içeren ilk bölümle başlayalım. Bölüm ayarlarını açın, gelişmiş sekmeye gidin ve CSS ID giriş kutusuna "indirilenler" yazın. Ardından ayarlarınızı kaydedin.

Kaynak bağlantılarını içeren sonraki bölüm için CSS kimliği için "bağlantılar" girin.

Ve geçmiş konferans oturumlarını içeren son bölüm için, bölümün başlığını içeren bölümün CSS ID'sine (özel olarak iki bölümün hemen üstündeki birine) "geçmiş" girin.

Ayarlarınızı kaydedin.

Şimdi navigasyon menüsü bağlantılarına tıkladığınızda, ilgili bölüme kaydıracaklar.

Her Bölümün Altına Özel Başa Dön Bağlantıları Ekleme

Divi, sayfanızın sağ alt kısmında yüzen yerleşik bir başa dönüş düğmesi seçeneğine sahiptir. Bu seçeneği Divi > Tema Seçenekleri altında Genel Sekmesi altında kolayca etkinleştirebilirsiniz.

Ancak, kaynaklar sayfanızın her bölümünden sonra kendinize ait bir başa dön düğmesi de oluşturabilirsiniz. Bu, sayfanın sağ alt kısmındaki varsayılan başa dön düğmesini fark etmeyebilecek kullanıcılar için daha iyi bir kullanıcı deneyimi oluşturabilir.

Başa dön düğmesi oluşturmak için, üç kaynak bölümümüzün her birinde son içerik satırının altına yeni bir sütun satırı eklememiz gerekiyor.

Ardından, Geçmiş Konferans Oturumları bölümünde kullanılan tanıtım yazılarımızdan birini kopyalayacağız. "Açıklama" başlıklı tanıtım metnini kopyalayın ve yeni satıra yapıştırın. Simge için bir yukarı ok ile "Başa Dön" başlığına sahip olacak şekilde tanıtım modülünü güncelleyin. URL için "#top" girin.

Bu url, kaynak menüsünün bulunduğu sayfanın üst kısmına bağlantı verecek bir bağlantı bağlantısı görevi görecektir.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Genişlik: 150 piksel
Modül Hizalaması: Sağ

Şimdi bu tanıtım modülünü baştan başa bağlantıyla kopyalayın ve üç bölümün her birinin altında oluşturduğunuz satıra yapıştırın. Bu şekilde kullanıcı bir bölümün sonuna geldiğinde sayfanın üst kısmındaki menüye kolayca geri dönebilir.

Son adım, tam genişlikli menü bölümüne CSS kimliğini eklemektir. Tam genişlikli menü ayarlarını açın ve gelişmiş sekmesinin altında CSS kimliği için "top" girin. Ayarları kaydet.

Baştan başa düğmelerle birlikte bağlantı bağlantılarının işlevselliğine dikkat edin.

Bu kadar! Kaynak sayfa düzeniniz tamamlandı. Şimdi yapılacak tek şey, her bir bağlantıyı veya video url'sini kendi videonuzla veya indirme kaynaklarınızla güncellemektir.

İşte sayfanın son tasarımı.

İndirilen dosyalarınızı Depolamak için Google Cloud'u Kullanma

Google Cloud'a kaydolduktan sonra (ücretsiz deneme seçeneği vardır), Google hesabınıza giriş yapmanız ve Google Cloud Console'a erişmeniz gerekir. Proje açılır menüsünden Proje oluştur'a tıklayın:

Ardından projeye bir isim vererek ve Oluştur'u seçerek yeni projenizi oluşturun.

Ardından, panonuzdan Depolama > Tarayıcı'ya gidin.

Ardından, sayfanın üst kısmındaki Kova Oluştur bağlantısını tıklayın.

Yeni paketinizin adını girin. Ben buna “tasarım-konferans-kaynaklar” diyorum. Varsayılan çok bölgeli seçeneği seçili tutabilir ve Oluştur düğmesini tıklayabilirsiniz.

Yeni kovanızı açın ve indirme dosyanızı tarayıcıya sürükleyin. Yükleme bittiğinde, indirmeyi herkesin kullanımına açmak için "Genel Bağlantı"nın yanındaki onay kutusunu tıklayın.

İpucu: Dosyanın yeni bir tarayıcıda açmak yerine otomatik olarak kullanıcının sabit sürücüsüne indirilmesini istiyorsanız, klasörünüze eklemeden önce dosyanızı sıkıştırılmış bir sürüme sıkıştırın.

İlgileniyorsanız, Google Cloud ve diğer sağlayıcılarla karşılaştırması hakkında daha fazla bilgi edinebilirsiniz.

İndirme bağlantılarınızı Kaynaklar Sayfanıza ekleme

Yeni indirme bağlantılarınızı kaynaklar sayfanıza eklemek için öncelikle Google Cloud Bucket'ınızda oluşturduğunuz genel bağlantıyı kopyalamanız gerekir. İstediğiniz dosyanın yanındaki genel bağlantıya sağ tıklayın ve Bağlantı Adresini Kopyala'yı seçin.

Ardından kaynaklar sayfanıza dönün ve bağlantı url'sini her bir düğme modülü için Düğme URL giriş kutusuna uygun şekilde yapıştırın.

Son düşünceler

Konferans web siteniz için bir kaynaklar sayfasına ihtiyacınız varsa, gerçekten sıfırdan başlamanız gerekmez. Tasarım konferansı düzen paketi, ihtiyacınız olan tüm tasarım öğelerini sağlayacaktır. Harika görünen dijital indirme bağlantıları sağlayabilir ve isterseniz, daha hızlı akış için bu indirme dosyalarını depolamak ve bu dosyaların kendi dosyanızı aşırı yüklemeden dünyanın her yerine teslimi için Google Cloud Storage gibi bir üçüncü taraf depolama sağlayıcısı kullanabilirsiniz. sunucu.

Bu kullanım örneği öğreticisinin, kullanıcılarınızın seveceği bir kaynak sayfası oluşturmanız için size ilham vereceğini umuyorum.

Yorumlarda sizden haber bekliyorum.

Şerefe!