Divi ile Özel Yapışkan “Başa Dön” Tasarımları Nasıl Oluşturulur

Yayınlanan: 2019-06-19

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi ve Green Energy Layout Pack ile nasıl özel yapışkan en üstteki tasarımları nasıl oluşturacağınızı göstereceğiz. Bu teknik, tasarım tarafında Divi'nin yerleşik seçeneklerinden yararlanırken sayfalarınızdaki kullanıcı deneyimini geliştirmenize yardımcı olacaktır. Umarız bu eğitim, en iyi tasarımlara kendi alternatifinizi yaratmanız ve bunları bir sonraki web sitenizde kullanmanız için size ilham verir!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, bu öğreticinin sonucuna hızlıca bir göz atalım.

GIF

başa dönüş

Örnek 1

başa dönüş

Örnek #2

başa dönüş

Örnek 3

başa dönüş

1. Sayfa HTML'sine Düzgün Kaydırma Ekle

Green Energy Açılış Sayfasını Yeni Sayfaya Yükleyin

Yapmanız gereken ilk şey, yeni bir sayfa oluşturmak ve Green Energy Layout Pack'in açılış sayfasını yüklemek.

başa dönüş

Sayfa Ayarlarını Aç

Aşağıdaki yazdırma ekranında işaretli simgeye tıklayarak sayfa ayarlarını açın:

başa dönüş

Özel CSS Kutusuna Düzgün Kaydırma Ekle

Gelişmiş sekmesine geçin ve Özel CSS kutusuna aşağıdaki CSS kodunu ekleyerek tüm sayfaya yumuşak kaydırma davranışı ekleyin:

html {
scroll-behavior: smooth;
}

başa dönüş

2. Kahraman Bölümüne CSS Kimliği ekleyin

Kahraman Bölümünü Aç

Başa dön tasarımı, ziyaretçileri kahraman bölümüne yönlendirecektir. Çıkarmak için önce kahraman bölümü ayarlarını açmanız gerekir.

başa dönüş

CSS kimliği ekle

Ardından, gelişmiş sekmesine gidin ve bölüme bir CSS kimliği ekleyin. Bu gönderide daha sonra, ziyaretçileri bu bölüme yönlendirecek bir bağlantı bağlantısı ekleyeceğiz.

CSS Kimliği: bölüm-1

başa dönüş

3. “Başa Dön” Tasarımı ile Sayfanın Altına Yeni Bölüm Ekleyin

Genel Adımlar

Sayfanın Altına Yeni Normal Bölüm Ekle

Bu yazının önizlemesinde fark edebileceğiniz gibi, üç farklı tasarım örneğini yeniden oluşturacağız. Süreci kolaylaştırmak için önce bazı genel adımlarla başlayacağız ve daha sonra gönderide her tasarım örneğine ayrı ayrı odaklanacağız. Sayfanızın altına yeni bir normal bölüm ekleyin.

başa dönüş

aralık

Bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

Üst Dolgu: 0px
Alt Dolgu: 0px

başa dönüş

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

başa dönüş

Bağlantı Bağlantısı Ekle

Birisi tüm satırı tıkladığında, sayfanın en üstüne yönlendirilmesini istiyoruz. Bunu yapmak için sayfanın kahraman bölümüne yönlendiren bir bağlantı ekleyeceğiz.

Satır Bağlantı URL'si: web siteniz.com/page/#section-1

başa dönüş

Satır Hizalama

Ayrıca satırı bölüm kabının sağ tarafına yerleştiriyoruz.

Satır Hizalama: Sağ

başa dönüş

Sabit Konum

Ardından, satırın gelişmiş sekmesine gidip aşağıdaki konum seçeneklerini güncelleyerek tüm satırı sabitliyoruz:

Pozisyon: Sabit
Dikey Ofset: 30 piksel
Yatay Ofset: 30 piksel
Z İndeksi: 99

Satırı sabitlemenin yanı sıra, z indeksini artırarak satırın tüm sayfa içeriğiyle örtüşmesini sağlıyoruz.

başa dönüş

Tasarım Örneği #1'i Yeniden Oluşturun

başa dönüş

Satır Ayarları

Sütun Yapısını Değiştir

Artık tüm genel adımların üzerinden geçtik, bu yazının başında görebildiğiniz üç farklı örneği yeniden oluşturacağız. İlkiyle başlayalım! Satır sütun yapısını değiştirin:

başa dönüş

Arka plan rengi

Satır ayarlarını açarak devam edin ve beyaz bir arka plan rengi ekleyin.

Arka Plan Rengi: #ffffff

başa dönüş

boyutlandırma

Tasarım sekmesine gidin ve boyutlandırma ayarlarını değiştirin.

Özel Oluk Genişliğini Kullan: 1
Genişlik: 9vw (Masaüstü), 23vw (Tablet), 35vw (Telefon)

başa dönüş