Divi Tasarım Konferansı Paketi ile Dijital Kaynak Sayfası Nasıl Oluşturulur
Düzenleme tasarım öğelerinizi sizin için çalışmak için kullandığınızda Divi ile dijital bir kaynak sayfası tasarlamak kolaylaşır. Görsel yapımcılar, bu süreci daha keyifli hale getiren birçok yararlı özelliğe sahiptir. Ama tasarım her şey değil. Kaynak sayfanızın çalışması için de önemlidir. Bu nedenle, dijital indirmeleri hızlı ve verimli bir şekilde yönetmenize ve göndermenize yardımcı olmak için Google Cloud gibi üçüncü taraf depolama sağlayıcılarını kullanmak her zaman iyi bir fikirdir. Ve bu indirmeye bağlantılar eklemek Divi modülünü kullanmak çok kolaydır.
Bu kullanımın öğretici durumunda, Divi Design Konferans Düzeni paketini kullanarak fonksiyonel bir dijital kaynak sayfası tasarlamanın bir yolu boyunca size rehberlik edeceğim. İşte birlikte başaracağımız bazı şeyler:
Program sayfası düzenini kullanarak içeriğin üç parçasını içeren bir kaynak sayfası oluşturun
Sayfadaki farklı parçalara atlayan özel bir kaynak menüsü oluşturun
Kaynağın üç bölümünün altına özel bir arka arkaya düğme ekleyin
Google Cloud’da indir dosyaları kaydedin ve kaynak sayfasında kullanmak için dosyaya genel bağlantılar oluşturun
Başlayalım!
Aşağıdaki gizlice göz atma, birlikte yapacağımız kaynak sayfasının bir görüntüsüdür.
Aşağıdaki satırda, sütun yapısını bir sütuna değiştirin ve satırdaki iki düğme modülünü silin. Ardından “Tasarım İlhamını” okumak için kalan metin modülü içeriğini güncelleyin. Ardından, az önce yaptığınız satırın altına üç sütun satır ekleyin. Metin modülünü sol sütuna ekleyin ve içerik kutusuna bir bağlantı ekleyin. HTML kullanıyorsanız, aşağıdakileri ekleyin: <a href="nter url buraya 15 web sitesine bağlantı Tasarım sekmesinin altında, aşağıdaki bağlantı sekmesini tıklayın ve aşağıdakileri güncelleyin: Bağlantı Yazı Tipi Stili: Lower Line Link Metin Boyutu: 16px Bağlantı Metni Renk: #4646C4
Ayarları kaydedin. Ardından, “Blog Tasarımı” adlı başka bir bağlantı kategorisi ekleyelim. Bunu yapmak için, “İlham Tasarımı” başlığının metin modülünü içeren satırı ve ayrıca üç bağlantı ve macun içeren satırı kopyalayın.
“Tasarım İlhamı” başlığı ile metin modülünü “Blog Tasarımı” olarak güncelleyin. Ardından, iki sütun yapılandıracak şekilde aşağıdaki üç sütun satırını değiştirin. Ve kullanıcıların her bağlantı tarafından neler sunulduğunu daha iyi anlamalarına yardımcı olmak için her bağlantıya ek olarak bazı açıklama metni ekleyebilirsiniz. Mevcut bölümde kullanmadığımız kalan iki satırı kaldırın. Önceki Konferans Oturumu Bölümünü Oluşturma Kaynak sayfamız için son bölüm, önceki oturum için video ve indirme görüntülemenin bir parçasıdır. Bunu yapmak için, kalan tasarım öğelerinden bazılarını başlattığımız orijinal program sayfasının düzeninden kullanacağız. Hala yaptığımız “Kaynak Bağlantısı” bölümü altında orijinal programın iki bölümüne sahip olmanız gerekiyor. Buna ihtiyacın olacak. İlk orijinal bölümde, “1 – 23 Kasım Çarşamba” içeren satırlar hariç tüm satırları silin. Şimdi bu bölümün sadece bir satırı olmalı. “Önceki Konferans Oturumu” nu okumak için başlığın başlığını güncelleyin. Bu bölümün altında, sağ sütunda satırlarla sütunun yarım yapısına sahip özel bir parça ekleyin. Ardından, sağ sütuna bir satır sütun ekleyin ve oturumun zamanını ve yerini göstermek için kullanılan orijinal bölümün açıklamasının modüllerinden birini sürükleyin. Açıklama ayarlarını “Açıklama” başlığı ile güncelleyin ve yeni bir belge simgesi sağlayın. Bundan sonra, anahtar modülünü yeni eklediğiniz açıklama modülünün hemen altındaki orijinal bölümden sürükleyin.
Yeni “Açıklama” başlığı ile bir açıklama modülünü çift ve anahtar modülünün altına sürükleyin. Ardından başlığı “İndir” olarak değiştirin ve bulut indir simgesini verin. Anahtar modülünün altına iki yeni sütun ekleyin. Ardından, “İndirme Oturumu” bölümünde yaptığımız düğmelerden birini kopyalayın ve 2 düğmeleri yeni satırdaki her sütuna yapıştırın. Ardından, düğme metnini her bir düğmeye bağlanacak indirme türünü yansıtacak şekilde güncelleyebilirsiniz. Eklediğim dört tür: Video (MP4) Audio (MP3) Slayt (PDF) Not (PDF) Açıklama altında bir miktar alanı ortadan kaldırmak için 0px’lik özel bir alt kenar eklemeniz gerekebilir. Şimdi oturumun başlığını aşağıdaki orijinal bölümden özel bölümün sol sütununa tutan metin modüllerinden birini sürükleyin. Şimdi önceki oturumdan video kayıtları ekleyebiliriz. Bunu yapmak için, bir video URL girerek (YouTube veya Vimeo’da barındırılırsa) metin modülünün altına bir video modülü ekleyin ve sayfa tasarımına daha uygun olmak istiyorsanız özel bir görüntü ekleyin. İşte burada. Şimdi oldukça yinelenen bir bölümdür ve her ek oturum için içeriği gerektiği gibi güncelleyin. Aşağıdaki kalan orijinal parçaları kaldırın ve sayfanızı kaydedin. Kaynak menünüzü oluşturma Çok fazla içerik depolayan bir kaynak sayfası için, ihtiyaç duyduklarını hızlı ve kolay bir şekilde bulmak için kullanıcı deneyimini geliştirmek için bir alt gezinmeye sahip olmak daha iyidir. Bu kaynak sayfası için, sayfadaki belirli parçalara atlayacak bir çapa bağlantısı olan özel bir menü ekleyeceğinizi göstereceğim. Bu yöntem, Divi ile tek sayfalık bir web sitesi oluşturma şeklinize benzer. Görünüş> menülere gidin ve “Kaynak Menüsü” adlı yeni bir menü oluşturun. Bu menü için kaynak sayfamızda üç parçaya atlayacak üç özel bağlantı kullanacağız. İlk özel bağlantı için, URL giriş kutusuna “#downloads” ve bağlantının metni için “İndirme Oturumu” girin. Ardından menüye ekleyin. İkinci özel bağlantı için “#links” ve metin bağlantısı “kaynak bağlantıları” girin. Üçüncü özel bağlantı için “#Past” URL ve metin bağlantısı “Geçen Konferans Oturumu” girin. Şimdi menümüz yapıldı, sayfamıza ekleyelim. İlk olarak, başlığınızın hemen altına yeni bir geniş parça ekleyin. Ardından bu bölüme tam geniş bir menü modülü ekleyin. Menü ayarlarının altındaki İçerik sekmesinde, görüntülenecek menü olarak “Kaynak Menüsü” ni seçin ve aşağıdaki arka plan rengini ekleyin: #474BC1. Tasarım sekmesinin ayarları altında aşağıdakileri güncelleyin: Metin Rengi: Lightf Metin Oryantasyonu: Orta Yazı Tipi Menüsü: Merriweather Ağırlık Yazı Tipi Menüsü: Kalınlık Metin Boyutu Menüsü: 16px Alan Harfleri Menü: 1px Ayarları Kaydet. CSS kimliği ekleyin sayfanıza, çapa bağlantılarımızı yapmak için eklediğimiz özel bağlantı URL’sini hatırlıyor musunuz? Artık her bağlantı için uygun bir CSS kimliği eklememiz gerekiyor, böylece her bağlantının kullanıcı tıkladığında nereye atlayacağını bilecek. Oturum indirimizi içeren ilk bölümle başlayalım. Bölüm ayarlarını açın, Gelişmiş sekmesine gidin ve “İndir” i Giriş Kimliği CSS kutusuna girin. Ardından ayarlarınızı kaydedin.
Bir kaynak bağlantısı içeren bir sonraki bölüm için ID CSS için “Bağlantı” nı girin.
Ve önceki konferans oturumunu içeren son bölüm için, bölümün başlığını içeren CSS kimliği bölümü için “Geçmiş” i girin (iki özel parçanın üzerinden birine). Ayarlarınızı kaydedin. Şimdi Gezinme Menüsü bağlantısını tıkladığınızda, uygun bölüme kaydırırlar. Her Divi bölümünün altına arka arkaya özel bir bağlantı ekleyin, sayfanızın sağ alt kısmında yüzecek varsayılan arka arkaya düğme seçeneği vardır. Bu seçeneği, genel sekmenin altındaki Divi> tema seçenekleri altında kolayca etkinleştirebilirsiniz. Ancak, kaynak sayfanızın her bir bölümünden sonra kendi arka arkaya düğmenizi de oluşturabilirsiniz. Bu, sayfanın sağ alt kısmındaki varsayılana geri dönmeye dikkat etmeyen kullanıcılar için daha iyi bir kullanıcı deneyimi oluşturabilir. Yedek düğmesini yapmak için, kaynaklarımızın üç bölümünün her birine son içerik satırı altına yeni bir sütun satırı eklememiz gerekir. Ardından önceki konferans oturumunda kullanılan açıklamalarımızdan birini kopyalayacağız. Açıklamayı “Açıklama” başlığı ile kopyalayın ve yeni satıra yapıştırın. Açıklama modülünü, simge için üst okla “Üst’e Dön” başlıkına sahip olacak şekilde güncelleyin. URL için “#top” girin. Bu URL, kaynak menüsünün bulunduğu sayfanın üstüne bağlanacak bir çapa bağlantısı olarak işlev görür. Tasarım sekmesinin altında aşağıdakileri güncelleyin: Genişlik: 150px modül hizalama: sağ Şimdi bu açıklama modülünü arka arkaya bir şekilde kopyalayın ve üç parçanın her birinin altında yaptığınız satırda bağlantıyı yapıştırın. Bu şekilde kullanıcı bölümün sonuna ulaştığında, sayfanın üst kısmındaki menüye kolayca dönebilirler. Son adım, tam geniş menü bölümüne CSS kimliği eklemektir. Tam geniş menü ayarlarını açın ve devam eden sekmenin altında CSS kimliği için “Üst” i girin. Ayarları kaydedin. Arka arkaya düğme ile birlikte bağlantı bağlantısının işlevselliğine dikkat edin. İşte burada! Kaynak sayfanızın düzeni tamamlandı. Şimdi yapılması gereken tek şey, her bağlantıyı veya video URL’sini kendi video kaynağınızla veya indirme ile güncellemektir. İşte sayfanın son tasarımı. İndirme dosyanızı kaydetmek için Google Cloud’u kullanın Google Cloud’a kaydolduktan sonra (ücretsiz deneme seçeneği vardır), Google hesabınızı girmeli ve Google Cloud Console’a erişmelisiniz. Projeden aşağı iner, proje için tıklayın: Ardından, proje adını vererek ve bunu yapmayı seçerek yeni projenizi oluşturun. Ardından, gösterge panelinizden Depolama> Tarayıcıya gidin. Ardından, sayfanın üst kısmındaki kova bağlantısını tıklayın. Yeni kova adınızı girin. Ben buna “tasarım yeniden kaynakları” diyorum. Yine de çok bölgeli varsayılan seçeneği seçebilir ve Oluştur düğmesini tıklayabilirsiniz. Yeni kovanızı açın ve indirme dosyanızı tarayıcıya sürükleyin. Yüklemeyi bitirdikten sonra, indirmeleri herkes için kullanılabilir hale getirmek için “Genel Bağlantı” nın yanındaki onay kutusunu tıklayın. İpuçları: Dosyanın yeni bir tarayıcıda açmak yerine kullanıcının sabit sürücüsüne otomatik olarak indirilmesini istiyorsanız, sepetinize eklemeden önce dosyanızı zip sürümüne sıkıştırın. İlgileniyorsanız, Google Cloud ve diğer sağlayıcılarla nasıl karşılaştırılacağı hakkında daha fazla bilgi edinebilirsiniz. Kaynak sayfanıza indirme bağlantınızı ekleyin Kaynak sayfasına yeni bir indirme bağlantısı eklemek için önce Google Cloud Buck’ta 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 kopyalayın. Ardından kaynak sayfanıza dönün ve her bir uygun düğme modülü için Giriş URL düğmesine bağlantı URL’sini yapıştırın. Final Mind Konferans web siteniz için bir kaynak sayfasına ihtiyacınız varsa, gerçekten sıfırdan başlamanıza gerek yoktur. Tasarım Konferansı düzeni paketi, ihtiyacınız olan tüm tasarım öğelerini sağlayacaktır. Harika görünen bir dijital indirme bağlantısı sağlayabilirsiniz ve isterseniz, daha hızlı akış için indirme dosyasını depolamak için Google Cloud depolama gibi üçüncü bir bölüm depolama sağlayıcısını kullanabilirsiniz. kendin. sunucu. Umarım bu kullanım vaka öğreticisi, kullanıcınızın seveceği bir kaynak sayfası oluşturmanız için size ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!