Profesyonel Bir Yön sayfası oluşturmak için bir Divi Tel Kafes Kiti Nasıl Kullanılır
91 Divi 100 maratonumuza hoş geldiniz. Bu serinin son gününde Divi 3.0’ın muhteşem sürümünü geri saydığımızda Divi’nin olağanüstü kaynaklarının 100 gününü takip etmeye devam edin!
Bugünün gönderisinde, size yeni bir ücretsiz tel çerçeve sayfası ve hazır sayfalar vermenin yanı sıra, bir dizi etkileyici divi sayfası oluşturmak için Divi Wire Frame kitimizi nasıl kullanabileceğinizi göstermek için size rehberlik etmek istiyorum. Bu ücretsiz divi düzeni paketi için standart video/blog yayın formatımız haline gelen yeni varyasyonlar sağlamak için Nathan ile birlikte çalışıyorum. Bu kez daha ayrıntılı olarak tartışacağız ve (umarım) gelecekte değerli olacak tasarım becerilerini öğreteceğiz.
Bir bakayım! Kendi Divi web sitenizi takip etmek için profesyonel bir yön sayfası (veya her türlü sayfa türü) oluşturmak için divi tel kafes kitini nasıl kullanılır, önce zip klasörü düzeni paketini indirmek için aşağıdaki düğmeyi kullanmalısınız: divi-100-from-wireframe- to Landing-page-by-by-step.zip. Genellikle sadece bir JSON dosyası olan tipik paketimizin aksine, bu bir fermuar açtığınızda, içinde birkaç ek klasör ve dosya olacaktır. Üç JSON ALL.json dosyalarına ek olarak, açılış sayfası (tel çerçeve) ve açılış sayfası (son tasarım) “öğretici-görüntü” adı verilen her düzen ve klasörün iki önizleme resmi vardır. Bu klasörde, yukarıdaki videodaki talimatları veya aşağıdaki yazılı talimatları izlemek için ihtiyacınız olan tüm resimleri bulacaksınız.
Düzen paketini indirin
Unssplash.com’daki cömert yazarların tüm fotoğrafları Unsplash lisansı aracılığıyla.Düzen paketi GPL altında piyasaya sürülür, yani özel ve ticari projeler için ücretsiz kullanabilirsiniz!Elegantthemes.com ve ürünlerimizi kullanarak hizmet gereksinimlerimizi kabul edersiniz. Dolaşım: Yukarıdaki videoda altı adımda (ve siz de yapabilirsiniz!) Yön sayfaları oluşturmak için Divi Wire Frame kitini nasıl kullanırız – Aşağıda, “A” ‘ndan “B” sürümünden nasıl geçeceğinizi göstereceğiz.Yukarıdaki indirme, yaptığımız tel kafes sayfalarının düzeninde aynı düzenlemeyi takip etmeniz ve yapmanız için gereken tüm dosyaları içerir.Bu yüzden, Divi kullanan herkes için değerli bir tasarım becerisi olacağına inandığımız bir şeyi bağlayın, takip edin ve öğrenin.
Adım 0: “All.json” dosyasını içe aktarın ve aşağıdaki talimatları takip etmek için tel kafes düzenini yükleyin ve/veya yukarıdaki videoyu, ilk olarak divi> divi kütüphanesi> İçe Aktarma ve Dışa Aktarma dosyasını aktarmanız gerekir. Taşınabilirlik sermayesi göründüğünde, İçe Aktarma sekmesini açın, siyah dosya seç düğmesini tıklayın ve yeni indirdiğiniz klasörden “all.json” dosyasını seçin ve fermuarı açın. Düzen içe aktarıldıktan sonra, bir sayfa> yeni ekle açarak yeni bir sayfa oluşturmak istersiniz. Bu sayfayı aramanızı tavsiye edeceğim: Yönlendirme sayfasında öğretici. Ardından Mor düğmesini tıklayın Divi Builder’ı kullanın, Kütüphane> Kütüphaneye Ekle Yüklemeyi Açın ve Düzen “Açılış Sayfasına (Wire Frame) takın. Ön uçta sakladığınızda ve sardığınızda, aşağıdaki resme benzeyecektir. 1. Adım: Bölüm #1’i düzenle Bölüm #1 arka uç
Ayarlar Bölümü: Mavi bölüm ayarlarını açın ve bölümün arka planı olarak “Öğretici-İmarlar” klasöründen “01.jpg” görüntüsünü ekleyin.
Resim Modülü Ayarları:
Genel Ayarlar sekmesinin altındaki görüntü modülüne “Öğretici-İmages” klasöründen “02.png” görüntüsünü ekleyin. Metin Modülü Ayarları:
Gelişmiş Tasarım Ayarları sekmesi altında, tüm metin modülleri için metnin rengini #FFFFFF olarak değiştirin. Üçüncü (alt) metin modülünde, App Store logo görüntüsünü “03.png” görüntü dosyasıyla “Öğretici-İmages” klasöründen değiştirin.
Bunu yapmanın en kolay yolu, metin alanı metin sekmesindeki “SRC” görüntü bağlantısını değiştirmektir. Bu, resme uygulanan bir stil çizgisini koruyacaktır.
Yanlışlıkla bir stil satırını silerseniz, aşağıdaki fragmandan kopyalayabilirsiniz:
Demo izle
Gelişmiş Ayarlar sekmesinde her metin modülünde, metnin rengini #303030 olarak değiştirin.
Resim Modülü Ayarları: Görüntü modülünün içinde görüntüyü “04.png” olarak değiştirin “öğretici-görüntü” klasöründen ve rasyonu ortaya değiştirin.
Tüm bu ayarlar yapılandırıldığında ve depolandığında, sayfayı tekrar kaydedin ve ön uçta önizleyin. Böyle görünmeli. Adım 3: Bölüm #3’ü düzenleyin
Bölüm #3 arka uç Resim Modülü Ayarları: Görüntü modülünde, görüntüyü “Öğretici-İmages” klasöründen “05.png” adlı bir dosyayla değiştirin. Bölüm Modülü Ayarları:
Her bir bölme modülünün içinde rengi bu koda değiştirin: RGBA (48,48,48,0,3)
Tüm metin modülü ayarları: Gelişmiş Tasarım Ayarları sekmesinin altındaki her metin modülünde, metnin rengini #303030 olarak değiştirin.
İkinci ve Üçüncü Metin Modülü Ayarları: İkinci ve üçüncü metin modüllerinde (iki tabanlı) İçerik alanında bulunan “06.png” görüntü dosyasıyla “Tutotial-images” klasöründen değiştirin. SRC bağlantısını değiştirmek için aynı tekniği kullandığından emin olun. Yukarıda bir stil satır satmak için kullanıyoruz.
Yanlışlıkla bir stil dizisini silerseniz, aşağıdaki fragmandan alabilirsiniz.
Tüm ayarlarınızı kaydedin, sayfanın kendisini ekleyin ve sonuçları önizleyin, şimdi böyle görünen üst kısmı olacak. Adım 2: Bölüm #2’yi düzenle
Bölüm #2 arka uç
Gelişmiş Ayarlar sekmesinde her metin modülünde, metnin rengini #303030 olarak değiştirin.
Resim Modülü Ayarları: Görüntü modülünün içinde görüntüyü “04.png” olarak değiştirin “öğretici-görüntü” klasöründen ve rasyonu ortaya değiştirin.
Tüm bu ayarlar yapılandırıldığında ve depolandığında, sayfayı tekrar kaydedin ve ön uçta önizleyin. Böyle görünmeli. Adım 3: Bölüm #3’ü düzenleyin
Bölüm #3 arka uç Resim Modülü Ayarları: Görüntü modülünde, görüntüyü “Öğretici-İmages” klasöründen “05.png” adlı bir dosyayla değiştirin. Bölüm Modülü Ayarları:
Her bir bölme modülünün içinde rengi bu koda değiştirin: RGBA (48,48,48,0,3)
Tüm metin modülü ayarları: Gelişmiş Tasarım Ayarları sekmesinin altındaki her metin modülünde, metnin rengini #303030 olarak değiştirin.
İkinci ve Üçüncü Metin Modülü Ayarları: İkinci ve üçüncü metin modüllerinde (iki tabanlı) İçerik alanında bulunan “06.png” görüntü dosyasıyla “Tutotial-images” klasöründen değiştirin. SRC bağlantısını değiştirmek için aynı tekniği kullandığından emin olun. Yukarıda bir stil satır satmak için kullanıyoruz.
Yanlışlıkla bir stil dizisini silerseniz, aşağıdaki fragmandan alabilirsiniz.
iki özellik
nulla placera’daki kütle elementumunun tamsayısı. Libero Risus’ta Suspendisse, Massa’da. Üçüncü kısım şimdi böyle görünecek. 4. Adım: Bölüm #4’ü düzenleyin
Bölüm #4 arka plan
Resim Modülü Ayarları:
Metin Modülü Ayarları:
Gelişmiş Tasarım Ayarları sekmesinin altındaki her metin modülünde, metnin rengini #303030 olarak değiştirin. Tüm ayarlarınız yapılandırıldığında ve depolandığında, sayfayı kaydedin ve sonuçları ön taraftaki önizleyin. Şimdi aşağıdaki resim gibi görünmeli.
Adım 5: Bölüm #5’i düzenle Bölüm #5 Arka uç bölüm ayarları:
Genel Ayar sekmesi altındaki ayarlarda, arka plan rengini şu şekilde değiştirin: #F7F7F7. Bölüm Modülü Ayarları: Her bölücü modülünde şu renk kodunu ekleyin: RGBA (48,48,48,0,3) Metin Modülü Ayarları:
Gelişmiş Tasarım Ayarları sekmesi altındaki metin modülünde, metnin rengini #303030 olarak değiştirin.
Modül modülünü ayarlama: Sekme içindeki Ayarlar Gelişmiş Tasarım Modülü, metnin rengini #303030 olarak değiştirin.
Slayt modülünün slayt ayarlarında, Gelişmiş Tasarım Ayarları sekmesinin altındaki tüm metin renklerini #303030 olarak değiştirin ve özel okların ve özel nokta NAV renklerinin rengini #303030 olarak değiştirin. Slayt İçeriği bölümünde, kullanıcı görüntüsünü “08.png” adlı bir dosyayla “Öğretici-İmages” klasöründen değiştirin. Sadece satır içi ayarları sağlam tutmak için bağlantıları değiştirin.
Yanlışlıkla diğer metin ve satır kodunu silerseniz, aşağıdaki snippet’lerden her şeyi alabilirsiniz.
nulla placera’daki kütle elementumunun tamsayısı. Libero Risus’ta Suspendisse, Massa’da. Üçüncü kısım şimdi böyle görünecek. 4. Adım: Bölüm #4’ü düzenleyin
Bölüm #4 arka plan
Resim Modülü Ayarları:
Görüntü Modülüne “Öğretici-İmages” klasöründen “07.png” adlı bir görüntü dosyası ekleyin.
Bölüm Modülü Ayarları: Her bölücü modülünde şu renk kodunu ekleyin: RGBA (48,48,48,0,3)Metin Modülü Ayarları:
Gelişmiş Tasarım Ayarları sekmesinin altındaki her metin modülünde, metnin rengini #303030 olarak değiştirin. Tüm ayarlarınız yapılandırıldığında ve depolandığında, sayfayı kaydedin ve sonuçları ön taraftaki önizleyin. Şimdi aşağıdaki resim gibi görünmeli.
Adım 5: Bölüm #5’i düzenle Bölüm #5 Arka uç bölüm ayarları:
Genel Ayar sekmesi altındaki ayarlarda, arka plan rengini şu şekilde değiştirin: #F7F7F7. Bölüm Modülü Ayarları: Her bölücü modülünde şu renk kodunu ekleyin: RGBA (48,48,48,0,3) Metin Modülü Ayarları:
Gelişmiş Tasarım Ayarları sekmesi altındaki metin modülünde, metnin rengini #303030 olarak değiştirin.
Modül modülünü ayarlama: Sekme içindeki Ayarlar Gelişmiş Tasarım Modülü, metnin rengini #303030 olarak değiştirin.
Slayt modülünün slayt ayarlarında, Gelişmiş Tasarım Ayarları sekmesinin altındaki tüm metin renklerini #303030 olarak değiştirin ve özel okların ve özel nokta NAV renklerinin rengini #303030 olarak değiştirin. Slayt İçeriği bölümünde, kullanıcı görüntüsünü “08.png” adlı bir dosyayla “Öğretici-İmages” klasöründen değiştirin. Sadece satır içi ayarları sağlam tutmak için bağlantıları değiştirin.
Yanlışlıkla diğer metin ve satır kodunu silerseniz, aşağıdaki snippet’lerden her şeyi alabilirsiniz.
aubert y. Ve onları kaydedin, sayfayı kaydedin ve sonuçları ön tarafta önizleyin. Bu bölüm şimdi aşağıdaki resme benzeyecek.
Adım 6: Bölüm #6’yı düzenle
Bölüm #6 arka plan
Bölüm Modülü Ayarları:
Her bölücü modülünde şu renk kodunu ekleyin: Metin modülünün RGBA (48,48,48,0,3) ayarları: Metin modülünün içinde metnin rengini #303030 olarak değiştirin. Modül Ayarları Düğmesi: Banyo ve sınır renginin arka planını (ve imleç düğmesinin ve sınır renginin arka planını) #41BB99 olarak değiştirmek için modülün içinde.
Tüm ayarlarınız yapılandırıldığında ve saklandığında, sayfayı kaydedin ve parçaları ön uçtaki önizleyin.
Bu noktada nihai sonuç, şimdi tel kafes kitimizden son tasarım düzenini doğrudan web sitesinde kullanabileceğiniz bir şeye dönüştürmeniz gerekir. Tabii ki bu durumda hala örnek içeriği kullanıyoruz, ancak aynı işlemi kendiniz yaptığınızda, kendi orijinal içeriğinizi veya istemci tarafından size verilen içeriği kullanacaksınız. Son Yön Sayfası Tasarımı
Yarın: Divi, kütüphane öğelerinin ve kendi ayarlarınızın düzenini ve günümüzün bir tür izlenmesi, bireysel kütüphane öğeleri ve ayar düzenlemeleri olarak nasıl dışa aktarılacağınızı ve paylaşacağınızı öğrenin. Sonra görüşürüz! 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! DIVI 100 Gün 91 Divi 3.0’a Geri Sayın Bu yazı Divi 100 Maratonumuzun bir parçasıdır.Arka arkaya 100 gün boyunca ücretsiz bir divi kaynağı yayınladığımızda takip etmeye devam edin!REACT kullanarak aşağıdan yukarıya inşa edilmiş yeni görsel düzenleyicimiz de dahil olmak üzere Divi 3.0 oyununu değiştiren bir sürümle sona erecek.Divi 3.0 sonsuza dek Divi Builder ile bir web sitesi oluşturma şeklinizi değiştirecek!Geri sayım başlasın. Divi 3.0 hakkında daha fazla bilgi edinin
Bölüm #6 arka plan
Bölüm Modülü Ayarları:
Her bölücü modülünde şu renk kodunu ekleyin: Metin modülünün RGBA (48,48,48,0,3) ayarları: Metin modülünün içinde metnin rengini #303030 olarak değiştirin. Modül Ayarları Düğmesi: Banyo ve sınır renginin arka planını (ve imleç düğmesinin ve sınır renginin arka planını) #41BB99 olarak değiştirmek için modülün içinde.
Tüm ayarlarınız yapılandırıldığında ve saklandığında, sayfayı kaydedin ve parçaları ön uçtaki önizleyin.
Bu noktada nihai sonuç, şimdi tel kafes kitimizden son tasarım düzenini doğrudan web sitesinde kullanabileceğiniz bir şeye dönüştürmeniz gerekir. Tabii ki bu durumda hala örnek içeriği kullanıyoruz, ancak aynı işlemi kendiniz yaptığınızda, kendi orijinal içeriğinizi veya istemci tarafından size verilen içeriği kullanacaksınız. Son Yön Sayfası Tasarımı
Yarın: Divi, kütüphane öğelerinin ve kendi ayarlarınızın düzenini ve günümüzün bir tür izlenmesi, bireysel kütüphane öğeleri ve ayar düzenlemeleri olarak nasıl dışa aktarılacağınızı ve paylaşacağınızı öğrenin. Sonra görüşürüz! 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! DIVI 100 Gün 91 Divi 3.0’a Geri Sayın Bu yazı Divi 100 Maratonumuzun bir parçasıdır.Arka arkaya 100 gün boyunca ücretsiz bir divi kaynağı yayınladığımızda takip etmeye devam edin!REACT kullanarak aşağıdan yukarıya inşa edilmiş yeni görsel düzenleyicimiz de dahil olmak üzere Divi 3.0 oyununu değiştiren bir sürümle sona erecek.Divi 3.0 sonsuza dek Divi Builder ile bir web sitesi oluşturma şeklinizi değiştirecek!Geri sayım başlasın. Divi 3.0 hakkında daha fazla bilgi edinin