Profesyonel Açılış Sayfaları Oluşturmak için Divi Tel Çerçeve Kiti Nasıl Kullanılır

Divi 100 Maratonumuzun 91. Gününe hoş geldiniz. Serinin son gününde muhteşem Divi 3.0 sürümüne geri sayarken, 100 gün boyunca muhteşem Divi kaynaklarını izlemeye devam edin!

---

Bugünün gönderisinde, size yeni bir ücretsiz Tel Çerçeve Açılış Sayfası ve bitmiş bir açılış sayfası tasarımı sunmanın yanı sıra, herhangi bir sayıda etkileyici Divi sayfası oluşturmak için Divi Tel Çerçeve Kitimizi nasıl kullanabileceğinizi göstermek için sürecimde size yol göstermek istiyorum. .

Bu ücretsiz Divi Düzen paketleri için standart video/blog gönderi biçimimiz haline gelen şeyin yeni bir varyasyonunu sağlamak için Nathan ile birlikte çalıştım. Bu sefer çok daha fazla ayrıntıya gireceğiz ve (umarız) size gelecekte çok değerli olduğunu kanıtlayacak bir tasarım becerisi öğreteceğiz.

Bunu kontrol et!

Profesyonel Açılış Sayfaları (Veya Her Türlü Sayfa) Oluşturmak için Divi Tel Çerçeve Kiti Nasıl Kullanılır

Kendi Divi web sitenizi takip etmek için, öncelikle düzen paketinin sıkıştırılmış klasörünü indirmek için aşağıdaki düğmeyi kullanmanız gerekir: divi-100-to-kablo çerçevesinden-landing-page-step-by-step.zip . Genellikle içinde sadece json dosyaları bulunan tipik paketlerimizin aksine, bunu açtığınızda içinde bazı ekstra klasörler ve dosyalar olacaktır.

All.json , Landing Page (Wireframe) ve Landing Page (Son Tasarım) adlı üç json dosyasına ek olarak, her bir düzenin iki önizleme görüntüsü ve "tutorial-images" adlı bir klasör vardır. Bu klasörde, yukarıdaki videodaki talimatları veya aşağıdaki yazılı talimatları izlemeniz gereken tüm resimleri bulacaksınız.

Düzen Paketini İndirin

Özet: Altı Adımda Bir Açılış Sayfası Oluşturmak için Divi Tel Çerçeve Kitini Nasıl Kullandık (Ve Siz De Yapabilirsiniz!)

Yukarıdaki videoda ve aşağıdaki adım adım talimatlarda size "A" sürümünden "B" sürümüne nasıl geçeceğinizi göstereceğiz. Yukarıdaki indirme, takip etmeniz ve Wireframe Açılış Sayfası Düzeninde yaptığımız düzenlemelerin aynısını yapmanız için gerekli tüm dosyaları içerir. Bu yüzden bağlanın, takip edin ve Divi kullanan herkes için değerli bir tasarım becerisi olacağına inandığımız bir şey öğrenin.

Adım 0: “All.json” Dosyasını İçe Aktarın ve Tel Çerçeve Düzenini Yükleyin

Aşağıdaki talimatları ve/veya yukarıdaki videoyu takip etmek için öncelikle Divi > Divi Library > Import & Export 'a giderek “All.json” dosyasını içe aktarmanız gerekir. Taşınabilirlik modu açıldığında, içe aktarma sekmesine gidin, siyah dosya seç düğmesini tıklayın ve az önce indirdiğiniz ve sıkıştırdığınız klasörden “All.json” dosyasını seçin.

Düzenleri içe aktardıktan sonra, Sayfalar > Yeni Ekle'ye giderek yeni bir sayfa oluşturmak isteyeceksiniz. Bu sayfayı aramanızı tavsiye ederim: Açılış Sayfası Eğitimi. Ardından mor Divi Builder Kullan düğmesini tıklayın, Kitaplıktan Yükle > Kitaplığa Ekle'ye gidin ve “Açılış Sayfası (Tel Çerçeve)” düzenini yükleyin. Ön uçta kaydedip önizlediğinizde, aşağıdaki resim gibi görünmelidir.

1. Adım: Bölüm #1'i Düzenle

Bölüm Ayarları:

• Mavi bölüm ayarlarını açın ve “tutorial-images” klasöründen “01.jpg” resmini bölümün arka planı olarak ekleyin.

Görüntü Modülü Ayarları:

• “Tutorial-images” klasöründen “02.png” imajını General Settings Sekmesi altındaki image modülüne ekleyin.

Metin Modülü Ayarları:

• Gelişmiş Tasarım Ayarları Sekmesi altında, tüm metin modüllerinin metin rengini #ffffff olarak değiştirin.
• Üçüncü metin modülünde (altta), App Store logo görüntüsünü “tutorial-images” klasöründeki “03.png” görüntü dosyasıyla değiştirin.
• Bunu yapmanın en kolay yolu, içerik alanının metin sekmesindeki "src" resim bağlantısını değiştirmektir. Bu, görüntüye zaten uygulanmış satır içi stilleri koruyacaktır.

Satır içi stilleri yanlışlıkla silerseniz, bunları aşağıdaki pasajdan kopyalayabilirsiniz:

<p><img class="size-full wp-image-25761" style="float: left; margin-right: 36px;" src="IMAGE LINK TO 03.JPG" alt="02" width="178" height="60"></p><p style="margin-top: 2%;">WATCH A DEMO</p>

Tüm ayarlarınızı kaydettiğinizde, sayfanın kendisini ekleyin ve sonuçları önizleyin, şimdi buna benzeyen bir üst bölüme sahip olmalısınız.

2. Adım: 2. Bölümü Düzenle

Bölücü Modül Ayarları:

• Hem masaüstü hem de mobil bölücü modüllerinde Genel Ayarlar Sekmesi altına bu renk kodunu ekleyin: rgba(48,48,48,0.3)

Metin Modülü Ayarları:

• Her metin modülünün Gelişmiş Ayarlar Sekmesi içinde metin rengini #303030 olarak değiştirin.

Görüntü Modülü Ayarları:

• Görüntü modülünün içindeki görüntüyü “tutorial-images” klasöründen “04.png” olarak değiştirin ve hizalamasını merkeze değiştirin.

Tüm bu ayarlar yapılandırılıp kaydedildiğinde, sayfayı tekrar kaydedin ve ön uçta önizleyin. Bu gibi görünmelidir.

3. Adım: Bölüm #3'ü düzenleyin

Görüntü Modülü Ayarları:

• Görüntü modülünün içindeki görüntüyü, “tutorial-images” klasöründen “05.png” adlı dosyayla değiştirin.

Bölücü Modül Ayarları:

• Her bölücü modülün içindeki rengi şu kodla değiştirin: rgba(48,48,48,0.3)

Tüm Metin Modülü Ayarları:

• Gelişmiş Tasarım Ayarları Sekmesi altındaki her metin modülünün içinde metin rengini #303030 olarak değiştirin.

İkinci ve Üçüncü Metin Modülü Ayarları:

• İkinci ve üçüncü metin modüllerinin içinde (alttaki iki), içerik alanının içinde bulunan kontrol simgesi görüntüsünü “tutotial-images” klasöründen “06.png” görüntü dosyasıyla değiştirin.
• Satır içi stilleri satmak için yukarıda kullandığımız src bağlantısını değiştirme tekniğini kullandığınızdan emin olun.

Satır içi stilleri yanlışlıkla silerseniz, bunları aşağıdaki snippet'ten alabilirsiniz.

<p><img class=" size-full wp-image-25874" style="float: left; margin-top: 10px; margin-right: 33px; margin-bottom: 20px;" src="http://www.divitests.dev/wp-content/uploads/2016/08/06-3.png" alt="03" width="70" height="70"></p><div><p style="padding-bottom: 0px;">Feature two</p><p style="margin-top: 16px; font-size: 18px;">Integer elementum massa at nulla placera. Suspendisse in libero risus, in massa.</p></div>

Tüm ayarlarınız yapılandırılıp kaydedildiğinde, sayfayı kaydedin ve ön tarafta ön izlemesini yapın. Üçüncü bölüm şimdi böyle görünmelidir.

4. Adım: 4. Bölümü Düzenle

Görüntü Modülü Ayarları:

• İmaj modülünün içine “tutorial-images” klasöründen “07.png” isimli imaj dosyasını ekleyin.

Bölücü Modül Ayarları:

• Her bölücü modülün içine şu renk kodunu ekleyin: rgba(48,48,48,0.3)

Metin Modülü Ayarları:

• Gelişmiş Tasarım Ayarları Sekmesi altındaki her metin modülünün içinde metin rengini #303030 olarak değiştirin.

Tüm ayarlarınız yapılandırılıp kaydedildiğinde, sayfayı kaydedin ve sonucu ön uçta önizleyin. Şimdi aşağıdaki resim gibi görünmelidir.

Adım 5: Bölüm #5'i Düzenle

Bölüm Ayarları:

• Genel Ayarlar Sekmesi altındaki bölüm ayarlarında arka plan rengini şu şekilde değiştirin: #f7f7f7.

Bölücü Modül Ayarları:

• Her bölücü modülün içine ş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ünün içinde metin rengini #303030 olarak değiştirin.

Kaydırıcı Modül Ayarları:

• Kaydırıcı modülünün Gelişmiş Tasarım Ayarları Sekmesi içinde metin renklerini #303030 olarak değiştirin.
• Kaydırıcı modülünün slayt ayarlarının içinde, Gelişmiş Tasarım Ayarları Sekmesi altında, tüm metin renklerini #303030 olarak değiştirin ve Ok Özel Rengi ile Dot Nav Özel Rengini #303030 olarak değiştirin.
• Slaytın içerik bölümünde, kullanıcının görselini “tutorial-images” klasöründen “08.png” adlı dosya ile değiştirin. Bağlantıyı yalnızca satır içi ayarları olduğu gibi tutmak için değiştirin.

Diğer metni ve satır içi kodu yanlışlıkla sildiyseniz, hepsini aşağıdaki snippet'ten alabilirsiniz.

<p><img class="aligncenter size-full wp-image-27020" style="margin-top: 26px; margin-bottom: 6px;" src="http://www.divitests.dev/wp-content/uploads/2016/08/08-2.png" alt="11" width="100" height="100"></p><p style="text-align: center;"><strong>Aubert Y.</strong><br> <span style="font-size: 16px;">New York, NY</span></p>

Tüm bu ayarları yapılandırıp kaydettiğinizde, sayfayı kaydedin ve sonucu ön uçta önizleyin. Bu bölüm şimdi aşağıdaki resimdeki gibi görünmelidir.

Adım 6: Bölüm #6'yı Düzenle

Bölücü Modül Ayarları:

• Her bölücü modülün içine şu renk kodunu ekleyin: rgba(48,48,48,0.3)

Metin Modülü Ayarları:

• Metin modülünün içinde metin rengini #303030 olarak değiştirin.

Düğme Modül Ayarları:

• Düğme modülünün içinde düğme arka planını ve kenarlık renklerini (ve fareyle üzerine gelme düğmesi arka planı ve kenarlık renklerini) #41bb99 olarak değiştirin.

Tüm ayarlarınız yapılandırılıp kaydedildiğinde, sayfayı kaydedin ve ön uçtaki bölümü önizleyin.

Nihai Sonuç

Bu noktada, Tel Çerçeve Kitimizden canlı bir web sitesinde kullanabileceğiniz bir şeye dönüştürülmüş nihai bir tasarım düzenine sahip olmalısınız. Tabii ki bu durumda hala örnek içerik kullanıyoruz, ancak aynı işlemi kendiniz için yaptığınızda kendi orijinal içeriğinizi veya bir müşteri tarafından size verilen içeriği kullanacaksınız.

Yarın: Kendi Divi Düzenlerinizi, Kitaplık Öğelerinizi ve Özelleştirici Ayarlarınızı Nasıl Dışa Aktaracağınızı ve Paylaşacağınızı Öğrenin

Bugünün öğreticisinin bir nevi takipçisi olarak, yarın Nathan, mizanpajlar, bireysel kitaplık öğeleri ve özelleştirici ayarları için kendi Divi json dosyalarınızı dışa aktarmak ve paylaşmak için önerilen en iyi uygulamalarımızı gösterecek. Orada görüşürüz!

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!