Divi ile Çarpıcı Tasarımda Kopyanızı Bölüm Ayırıcıların Altına Şık Bir Şekilde Gizleme

Divi'nin yerleşik seçenekleri, belirli bir tasarım ayarını birden çok amaç için kullanmanıza olanak tanır ve bu da yaratıcılığın kıvılcımlanmasına yardımcı olur. Bugün, web sitenizin kopyasını zarif bir şekilde gizlemek için bölüm ayırıcıları benzersiz bir şekilde kullanacağız. Bu, özel koda ihtiyaç duymadan sayfanıza ekstra etkileşim eklemenin harika bir yoludur. Güzel bir örneği sıfırdan yeniden oluşturacağız ve örneğin JSON dosyasını da ücretsiz olarak indirebileceksiniz.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

1. Bölüm Ekle

Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir normal bölüm eklemek.

Yeni Satır Ekle

Sütun Yapısı

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

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Bu satırda ihtiyacımız olan ilk modül, bazı H2 içeriğine sahip bir Metin Modülüdür.

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını değiştirin.

• Başlık 2 Yazı Tipi: Playfair Gösterimi
• Başlık 2 Yazı Tipi Ağırlığı: Normal
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Boyutu: 70px (Masaüstü), 40px (Tablet), 30px (Telefon)

Sütuna Ayırıcı Modül Ekle

görünürlük

Bu satırda ihtiyacımız olan ikinci ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Tasarım sekmesindeki çizgi rengini de değiştiriyoruz.

• Çizgi Rengi: #000000

boyutlandırma

Boyutlandırma ayarlarına geçin ve aşağıdaki ayarları uygulayın:

• Bölücü Ağırlığı: 5px
• Genişlik: %27
• Modül Hizalaması: Merkez

2. Bölüm Ekle

Arka plan rengi

İkinci normal bölümü sayfanıza ekleyin, bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f7f7f7

taşma

Gelişmiş sekmesinde de bölüm taşmasını gizlediğinizden emin olun. Bu, hiçbir şeyin bölüm kapsayıcısını aşmamasını sağlayacaktır.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

geçişler

Bu gönderide daha sonra, bir vurgulu geçiş oluşturacağız. Bunun sorunsuz bir şekilde çalıştığından emin olmak için gelişmiş sekmesinde geçiş süresini artıracağız.

• Geçiş Süresi: 800ms

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve aşağıdaki ayarları uygulayarak satırın bölüm kabının tüm genişliğini kaplamasına izin verin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Sütuna Metin Modülü #1 Ekle

H3 İçeriği Ekle

Bir Metin Modülü ile başlayarak modül eklemeye başlama zamanı. Seçtiğiniz bazı H3 içeriğini girin.

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını değiştirin.

• Başlık 3 Yazı Tipi: Playfair Gösterimi
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Rengi: #000000
• Başlık 3 Metin Boyutu: 3vw (Masaüstü), 6vw (Tablet), 7vw (Telefon)

Sütuna Ayırıcı Modül Ekle

görünürlük

Bu satırda ihtiyacımız olan ikinci modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Ayırıcının rengini de değiştirin.

• Çizgi Rengi: #000000

aralık

Ve alan yaratmak için bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Marj: 2vw
• Alt Marj: 2vw

Sütuna Metin Modülü Ekle

İçerik Ekle

İhtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bazı paragraf içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Hizalama: Merkez
• Metin Rengi: #777777
• Metin Boyutu: 0.8vw (Masaüstü), 1.7vw (Tablet), 2.2vw (Telefon)
• Metin Satır Yüksekliği: 1.8em

aralık

Daha sonra bazı özel kenar boşluğu değerleri ekleyin.

• Sol Kenar Boşluğu: 3vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)
• Sağ Kenar Boşluğu: 3vw (Masaüstü), 7vw (Tablet ve Telefon)

Sütuna Düğme Modülü Ekle

Kopya Ekle

Bu satırda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

hizalama

Tasarım sekmesinde düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarını şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Kenar Genişliği: 1px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Playfair Ekranı

aralık

Ve bazı özel boşluk değerleri de ekleyin.

• Üst Marj: 2vw
• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

Ek Bölüm Ayarları

Varsayılan Üst Bölücü

Bölüme tüm modülleri eklemeyi bitirdikten sonra, bazı ek bölüm ayarlarını gözden geçirmenin zamanı geldi. Bölüm ayarlarını açın, tasarım sekmesine gidin ve aşağıdaki üst ayırıcıyı ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #e8e8e8
• Bölücü Yüksekliği: 7000px
• Bölücü Çevirme: Dikey
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Vurgulu Üst Bölücü

Vurguluyken bölücü yüksekliğini değiştirin.

• Bölücü Yüksekliği: 0px

Alt Bölücü

Bir alt bölücü de ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #5c26ff
• Bölücü Yüksekliği: 600px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Vurgulu Alt Bölücü

Ve vurgulu olarak bölücü yüksekliğini kaldırın.

• Bölücü Yüksekliği: 0px

aralık

Bu gönderinin önizlemesinde fark edebileceğiniz gibi, bu bölümü bir daire içinde döndürüyoruz. Bunu yapmak için önce farklı ekran boyutlarına bazı özel kenar boşluğu ve dolgu değerleri eklememiz gerekecek:

• Sol Kenar Boşluğu: 10vw (Masaüstü), 11vw (Tablet), 0vw (Telefon)
• Sağ Kenar Boşluğu: 47vw (Masaüstü), 11vw (Tablet), 0vw (Telefon)
• Üst Dolgu: 8vw (Masaüstü), 15vw (Tablet), 16vw (Telefon)
• Alt Dolgu: 8vw (Masaüstü), 15vw (Tablet), 16vw (Telefon)

Sınır

Bölümü bir daireye dönüştürmek için köşelerin her birine '50vw' ekleyerek devam edin. Ayrıca aşağıdaki ayarları kullanarak bir kenarlık ekliyoruz:

• Kenar Genişliği: 1px
• Kenar Rengi: rgba(255,255,255,0)

fareyle üzerine gelin

Fareyle üzerine gelindiğinde kenarlık rengini değiştirin.

• Kenar Rengi: #000000

Bölümü İki Kez Klonla

Tüm bölüm ayarlarını tamamladıktan sonra, devam edip bölümü iki kez klonlayabilirsiniz.

Kopyalama #1'i Değiştir

Üst Bölücü Rengini Değiştir

İlkinden başlayarak her iki bölüm kopyasını da değiştireceğiz. Bölüm ayarlarını açın ve üst ayırıcı rengini değiştirin.

• Bölücü Rengi: #5c26ff

Alt Bölücü Rengini Değiştir

Alt ayırıcı rengini de değiştirin.

• Bölücü Rengi: #ff3a5e

Aralığı Değiştir

Ardından, boşluk ayarlarına gidin ve aşağıdaki değerlerin geçerli olduğundan emin olun:

• Üst Marj: -20vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 47vw (Masaüstü), 11vw (Tablet), 0vw (Telefon)
• Sağ Kenar Boşluğu: 10vw (Masaüstü), 11vw (Tablet), 0vw (Telefon)

Kopya #2'yi Değiştir

Üst Bölücü Rengini Değiştir

İkinci kopyanın ayarlarını açın ve üst ayırıcı rengini değiştirin.

• Bölücü Rengi: #ff3a5e

Alt Bölücü Rengini Değiştir

Alt ayırıcı rengini de değiştirin.

• Bölücü Rengi: #e8e8e8

Aralığı Değiştir

Ve burada da boşluk değerlerini değiştirin.

• Üst Marj: -20vw (Masaüstü), 0vw (Tablet ve Telefon)
• Alt Marj: 7vw
• Sol Kenar Boşluğu: 10vw (Masaüstü), 11vw (Tablet), 0vw (Telefon)
• Sağ Kenar Boşluğu: 47vw (Masaüstü), 11vw (Tablet), 0vw (Telefon)

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, kopyanızı bölüm ayırıcıların altında nasıl zarif bir şekilde gizleyeceğinizi gösterdik. Bu, Divi'nin bazı sezgisel yerleşik seçeneklerini alışkın olduğunuzdan farklı bir şekilde kullanmanın harika bir yoludur. Umarız bu eğitim, bu tekniği kullanarak kendi alternatif tasarımlarınızı yaratmanız için size ilham verir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.