Divi'nin Önceden Tanımlanmış Düzenlerini Tam Potansiyeliyle Nasıl Kullanılır: Adım Adım 3 Örnek

Divi 100 Maratonumuzun 47. 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!

---

Divi 100 Maratonu'nda şimdiye kadar tamamen telifsiz görseller ve örnek metinlerle dolu birçok Divi Düzen Paketi verdik. Bunlar, kendiniz için oluşturmak istediğiniz siteyi tasavvur etmenize yardımcı olarak bir adım daha ileri gittikleri için harika kaynaklar olduklarını kanıtladılar.

Ancak bunun anlamı, Divi'nin zaten birlikte gönderdiği önceden tanımlanmış sayfa düzenlerinin zenginliğinin artık değerli olmadığıdır. Aslında, benzersiz tasarımınıza hızlı bir başlangıç ​​yapmak için bunları kullanmak, bir tasarımcı olarak öğrenmek ve büyümek için harika bir yoldur, çünkü tamamen tarz düzenlerin olmaması, yaratıcı kararlar almanız için size çok fazla alan bırakır.

Bu sürecin sizin için nasıl çalışabileceğini göstermek için bugünün gönderisini kısmen öğretici ve kısmen alıştırma olan bir şeye ayırdık. Bu hafta yaptığım ve bir iş hayal ettiğim, bu iş için üç temel web sayfası belirlediğim ve ardından başlangıç ​​içeriğinden nihai ürüne geçmek için Divi'nin önceden tanımlanmış düzenlerini kullandığım bir tasarım alıştırmasında size yol göstereceğiz.

Benim sürecimi not alırsanız, hatta onu takip ederseniz, bu önceden tanımlanmış mizanpajları gelecekte kendiniz için nasıl kullanabileceğiniz konusunda daha iyi bir fikre sahip olmalısınız.

Başlayalım!

Divi'nin Önceden Tanımlanmış Düzenlerini Tam Potansiyeliyle Nasıl Kullanılır: Adım Adım 3 Örnek

Youtube Kanalımıza Abone Olun

İlk önce, bugünün gönderisinde üzerinde çalışacağım konseptten bahsedelim. Hayali bir fırıncının web sitesi için üç web sayfası oluşturmaya karar verdim. Bazı ön araştırmalara dayanarak, birçok fırın web sitesinde bu üç sayfanın olduğunu buldum ve bu yüzden onları nasıl yapacağımı bildiğimden emin olmak istedim.

Ayrıca çeşitli fırın web sitelerinden bu sayfaların en sevdiğim sürümlerinin bazı ekran görüntülerini topladım. Rakiplerinize kıyasla iyi göründüğünüzden emin olmak için kendi alanınızda da yapabileceğiniz bir şey.

Ama sizinle onlar arasındaki benzerliklerin durduğu yer burası olmalı. Bu tasarım alıştırmasının sonraki aşamaları, toplanan ilhamdan benzersiz bir şeye geçmekle ilgilidir. O halde en üst düzey, geniş kapsamlı tasarım kararlarıyla başlayalım ve ardından her sayfanın ayrıntılarına inelim.

Renklerimizle başlıyoruz!

Renk paleti

Web sitesini oluşturmak için kullandığım renk paleti aşağıdadır. Ayrıca ilgili hex kodlarına sahiptir.

Tema Özelleştirici Ayarları

Sayfayı düzenlemeye başlamadan önce Tema Özelleştiricide birkaç ayarı değiştirmemiz gerekiyor.

Birincil Navigasyon Kurulumu
Aktif bağlantı rengi: #F3A902
Arka plan rengi: şeffaf
Metin rengi: #FFFFFF
Açılır menü satırı rengi: #F3A902
Yazı Tipi: Acı.
Metin boyutu: 16
Harf aralığı: 2
Metin stili: tümü büyük harf

Düzen Ayarları
Web sitesi içerik genişliği:1200
Tema vurgu rengi: #D6652B

Tipografi Ayarları
Başlık metni rengi: #D6652B
Gövde metni rengi: #4C471E

Logo

Logoyu yüklemek için Divi Tema Seçenekleri'ne gidin ve ardından değişiklikleri kaydedin.

Sabit Navigasyon Ayarları
Birincil menü arka plan rengini #311E0 olarak değiştirin, ardından kaydedin ve çıkın.

Bunların hepsi, web sitenizin benzersiz görünümünü ve verdiği hissi şekillendirmeye başlamak için her Divi web sitesinin başlangıcında yapmanızı önerdiğim, site genelindeki birkaç değişikliğin harika örnekleridir. Artık temel sayfalarımızı oluşturmaya başlayabiliriz.

1. Ana Sayfa

Bu bölümde, önceden tanımlanmış ana sayfa düzenini benzersiz ve hayali işimle alakalı bir şeye dönüştürmek için attığım adımlarda size yol göstereceğim. Kendi Divi web sitelerinizde sayfalar oluştururken, tam eylemler değilse de aynı adımları izleyebilirsiniz.

Gereksiz Bölümleri Kaldır
Aklımdaki tasarım için tam genişlikte portföy, referans bölümü, harita veya iletişim formuna ihtiyacımız yok. Yani takip ediyorsanız, devam edin ve bunları silin.

Tam Genişlik Kaydırıcısı

Ardından, tam genişlik kaydırıcısına gidin ve şirket kaydırıcımızın ayarlarına tıklayın. Bir arka plan resmi ekleyin ve ardından açıklamayı eklemek için aşağı kaydırın.

Genel ayarlar altında başlık metni ekleyin, düğme metnini ve URL'yi değiştirin. Gelişmiş ayarlarda, başlık metnini tamamı büyük harf yapın. Düğme için özel stiller kullanın ve ekran görüntüsünde aşağıdaki ayarları kullanın.

İkinci Modül
Arka plan rengini #E1E8DD olarak değiştirin, ardından kaydedin ve çıkın.

Bulanıklık Ayarları
Başlığı ve resmi değiştirin, ardından içeriği düzenleyin ve diğer 2 hizmet için tekrarlayın.

Bölüm için Başlık Ekle
Bir satır ekle (bir sütun)
Metin modülü ekle
Metin yönünü merkeze değiştir
Gelişmiş ayarlarda metni büyük harf yapın, metin boyutunu 44 ve harf aralığını 2 olarak değiştirin.
Bunu tanıtım yazılarının üzerine sürükleyin.

Galeri İçin Satır Modülü Ayarlarını Yapın
Özel dolguyu kaldırın ve satırı tam genişlikte yapın

Görüntü Modülü
Görüntü modülü ayarlarında özel kenar boşluğunu kaldırın.

Görüntüler arasında aşağıdaki örnekte olduğu gibi boşluk var, bu nedenle satır modülü ayarlarının genel ayarlarına gidin ve evet için 'Özel Cilt Payı Genişliğini Kullan'ı seçin ve genişliği 0'a ayarlayın.

Önce sonra

Aşağıdaki resimde görebileceğiniz gibi, Divi'nin önceden tanımlanmış düzenini hızlı ve kolay bir başlangıç ​​noktası olarak kullanabildim, ancak tamamen kendime ait bir şeyle bitirmek için ekleme, çıkarma ve özelleştirme yaptım.

2. Sipariş Sayfanızı Yerleştirin

Ele almaya karar verdiğim sonraki sayfa bir sipariş sayfasıydı. Bu sayfa için Satış Sayfası ön tanımlı düzenini kullanacağız.

Gereksiz Bölümleri Kaldır
Bu sayfa için tanıtım yazısı bölümüne, resimlere veya 'utanma' bölümüne ihtiyacımız yok, bu yüzden devam edin ve silin.

Tam Genişlik Kaydırıcısı
Tam genişlik kaydırıcı modülü ayarlarında arka plan olarak bir görüntü ekleyin. Resmin daha fazlasını görmek için tam genişlik kaydırma modülü ayarlarının gelişmiş ayarlarına üst ve alt dolgu ekleyin.

Başlık metni rengini #E1E8DD olarak değiştirin. Metnin okunması oldukça zordur, bu nedenle bunu çözmek için slayt ayarlarında metin yerleşimini kullanın.

Referans Bölümü
Üç tane olmak yerine bir tane almayı seçtim. Üç sütunlu (bir çeyrek, bir yarım, bir çeyrek) bir satır ekleyin ve referans modülünü yerine sürükleyin. Üç referanslı bölümü silin veya devre dışı bırakın.

Referans modülünde, gelişmiş tasarım ayarlarına gidin ve resmin boyutlarını aşağıdaki ayara değiştirin ve metni italik hale getirin.

SSS
Bölümün arka plan rengini #4E471E olarak değiştirin ve metin modülü ayarlarında metin rengini #E1E8DD olarak değiştirin

Önce sonra

Bir kez daha, sadece birkaç ayarlama ve kendi içeriğimle, bir sayfayı önceden tanımlanmış düzenden işim için oldukça iyi çalışacak bir şeye tamamen dönüştürebildim.

3. İletişim Sayfası

Son olarak, iletişim sayfası için önceden tanımlanmış "iletişim sayfası" düzenini kullanın. Aşağıda görebileceğiniz gibi, harita üstte, metni kaplıyor, bu yüzden haritayı sayfanın sonuna kadar taşımamız gerekiyor.

Tam genişlikte bir bölüm ekleyin ve tam genişlikte yazı başlıklarını ekleyin. Başlık dışındaki her şeyi devre dışı bırakın ve metni ortalayın.

Gelişmiş ayarlarda, başlık metni tamamen büyük olmalı ve ardından kaydedip çıkılmalıdır.

Tam genişlikte gönderi başlığını en üste sürükleyin. Şimdi bölüme bir arka plan resmi ekleyin.

Resmin daha fazlasını göstermek için özel dolgu ekleyin. Bu örnekte, yukarıya ve aşağıya 300 piksel ekledim.

Başlık ayarlarında, metin boyutunu 48 piksel olarak değiştirin ve öne çıkması için tamamı büyük harflerle kalın yapın. Rengi #E1E8DD olarak değiştirin ve üstüne özel dolgu ekleyin.

Son olarak, adres bilgilerini ve harita ayrıntılarını kendinize göre düzenleyin.

Önce sonra

Bu sayfa, önceden tanımlanmış düzende zaten mevcut olan belirli bir sayfadaki öğelerin tamamını veya çoğunu nasıl bulacağınıza dair harika bir örnekti. Bu sadece onları yeniden düzenlemek, içeriğinizle doldurmak ve web sitenizin geri kalanı için tutarlı bir stil tutmak meselesidir.

Toplama

Sürecimi hızlı bir şekilde gözden geçirmek için, kendi Divi web sitelerinizi oluştururken Divi'nin önceden tanımlanmış düzenlerinden en iyi şekilde yararlanmanızı şu şekilde önerebilirim:

• İlk olarak, ilham toplayın. Sitenizi oluşturmak için oturmadan önce sitenizin her sayfasının nasıl görünmesini istediğinizi, özellikle değilse de genel anlamda bilmelisiniz.
• Ardından, sitenizdeki her şeyi tutarlı tutmak için her sayfada daha az değişiklik yapmak için özelleştirici aracılığıyla site genelinde değişiklikler yapın.
• Son olarak, tasarımınızı başlatmak için Divi Kitaplığından en uygun önceden tanımlanmış düzeni yükleyin. İlham toplantınızın rehberliğinde, tamamen size ait bir sayfanız olana kadar önceden tanımlanmış düzende gerekli düzenlemeleri yapın.

Herkesi takip ettiğiniz için teşekkürler! Umarım bu tasarım alıştırmasını faydalı bulmuşsunuzdur. Benim için herhangi bir sorunuz varsa, lütfen bunları aşağıdaki yorumlar bölümünde bırakın.

Ayrıca, 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!