Divi ile Çarpıcı Bir Mobil Tasarımda En Son Blog Yazılarınızı Öne Çıkarın

Blog yazılarını web sitenizde sergileme şekliniz, ziyaretçilerinizin web sitenizde gezinirken karşılaştıklarında nasıl davrandıkları üzerinde büyük bir etkiye sahiptir. Yaratıcı ve etkili olmanıza yardımcı olmak için, size en son blog gönderilerinizi çarpıcı bir şekilde nasıl öne çıkaracağınızı göstereceğiz.

Yeniden oluşturacağımız örnek, masaüstü ve tablette de harika bir görünüm ve his sağlarken, özellikle daha küçük ekran boyutlarında harika görünecek. Bu öğreticinin, kendi özel en son blog gönderisi tasarımlarınızı oluşturmanız için size ilham vermesini umuyoruz.

Hadi hadi bakalım!

Ön izleme

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

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Degrade Arka Plan

Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve ona normal bir bölüm ekleyin. Ayarları açın ve ardından bir degrade arka planı ekleyin.

• Renk 1: #2e1b8f
• Renk 2: #ffffff
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %53.3
• Bitiş Konumu: %53.3

aralık

Ardından, boşluk ayarlarına gidin. Burada, masaüstündeki bölüm içeriğinin boyutunu küçülteceğiz ve daha küçük ekran boyutlarında bu alandan yavaş yavaş kurtulacağız.

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel
• Sol Dolgu: 26vw (Masaüstü), 13vw (Tablet), 0vw (Telefon)
• Sağ Doldurma: 22.8vw (Masaüstü), 11.4vw (Tablet), 0vw (Telefon)

Yeni Satır Ekle

Sütun Yapısı

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

Sütun 2 Arka Plan Rengi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ikinci sütuna bir arka plan rengi ekleyin.

• 2. Sütun Arka Plan Rengi: #f7f7f7

Sütun 3 Arka Plan Rengi

Aynı rengi 3. sütunun arka planına da ekleyin. Bu iki sütunu birbirine bağlamak ve tek parça gibi görünmelerini sağlamak için aynı rengi kullanıyoruz. Gönderinin ilerleyen bölümlerinde, bunu daha küçük ekran boyutlarında sütun genişliklerini değiştirmek için kullanacağız.

• 3. Sütun Arka Plan Rengi: #f7f7f7

boyutlandırma

Sonraki tasarım sekmesine gidin ve boyutlandırma ayarlarını açın. Burada, sütunlar arasındaki tüm varsayılan boşluğu kaldıracağız.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

Görüntülemek

Şimdi, daha küçük ekran boyutlarında üç sütunun da yan yana görünmesini sağlamak için satırın ana öğesine tek bir CSS kodu satırı eklememiz gerekiyor.

display: flex;

Sütun 1'e Blurb Modülü Ekle

Simge Seç

Modül eklemeye başlama zamanı! 1. sütunda bir Blurb Modülü ile başlayın ve istediğiniz bir simgeyi seçin.

Degrade Arka Plan

Modülün arka plan ayarlarına gidin ve radyal degrade arka planı ekleyin.

• Renk 1: #5000ff
• Renk 2: rgba(41,196.169,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %28
• Bitiş Konumu: %28

Simge Ayarları

Tasarım sekmesine giderek ve simge ayarlarını değiştirerek devam edin.

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Kullan: Evet
• Simge Yazı Tipi Boyutu: 22px

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 10px

Sınır

Ve Blurb Module tasarımını tamamlamak için ince bir alt kenarlık ekleyin.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #ffffff
• Alt Kenarlık Stili: Kesikli

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

İlk sütunda ihtiyacımız olan sonraki ve son modül bir Metin Modülüdür. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Didact Gothic
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #ffffff

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

İkinci sütuna geç! Burada ihtiyacımız olan tek modül bir Metin Modülü. Seçtiğiniz bazı içeriği girin.

Arka plan rengi

Arka plan ayarlarına geçin ve tamamen beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Tasarım sekmesindeki metin ayarlarını değiştirerek içeriğimizin görünümünü de değiştiriyoruz.

• Metin Yazı Tipi: Kaynak Serif Pro
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 13px
• Metin Yönü: Merkez

boyutlandırma

Daha önce de belirtildiği gibi, daha küçük ekran boyutlarında özel bir tasarım oluşturmak için sütun yapılarını değiştiriyoruz. Bunu yapmak için Metin Modülünün genişliğini azaltmanız ve sütunun sol tarafına hizalandığından emin olmanız gerekir.

• Genişlik: %60
• Modül Hizalama: Sol

aralık

Sırada bazı özel dolgu değerleri ekliyoruz.

• Üst Dolgu: 57px
• Alt Dolgu: 57px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Kutu Gölge

İnce bir kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.23)

Sütun 3'e Metin Modülü Ekle

İçerik Ekle

Bir sonraki ve son sütuna. Blog yayınınızın H3 başlığı ve bir bağlantı ile bir Metin Modülü ekleyin. Gönderi ayrıntılarını, başlığın hemen altındaki paragraf metin stiline ekleyin.

Metin Ayarları

Metin Modülünün tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Kaynak Serif Pro
• Metin Rengi: #a8a8a8
• Metin Boyutu: 12px

H3 Metin Ayarları

H3 metin ayarlarını da değiştirerek devam edin.

• Başlık 3 Yazı Tipi: Didakt Gotik
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Boyutu: 17px

aralık

Son olarak, bazı özel boşluk değerleri eklememiz gerekecek. Modüle bir miktar negatif sol kenar boşluğu da eklediğimizi fark edeceksiniz. Bu, daha küçük ekran boyutlarında farklı türde bir sütun yapısı oluşturmaya yönelik son adımdır. Bu nedenle, sütun yapısı teknik olarak hala aynı olsa da, farklı görünen bir sonuç oluşturmak için sütun arka planlarını, modül genişliklerini ve negatif sol kenar boşluğunu birleştirdik.

• Üst Kenar Boşluğu: 35px
• Sol Kenar Boşluğu: -80px (Masaüstü), -50px (Tablet ve Telefon)
• Sağ Dolgu: 20px

Satırı İki Kez Klonla

Satırı ve tüm modüllerini değiştirmeyi bitirdikten sonra, öne çıkarmak istediğiniz en son blog gönderilerinin sayısına bağlı olarak tüm satırı istediğiniz kadar klonlayabilirsiniz.

Simgeleri Değiştir

Her kopyanın simgesini değiştirin.

İçeriği ve Bağlantıları Değiştirin

Dahil olan içerik ve bağlantılarla birlikte ve bitirdiniz!

Ön izleme

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

Son düşünceler

Bu gönderide, en son blog gönderilerinizi sergileyen çarpıcı bir mobil tasarımı nasıl oluşturacağınızı gösterdik. Adım adım yeniden oluşturduğumuz tasarım, öncelikle daha küçük ekran boyutları için yapılmıştır ancak tablet ve masaüstünde de harika görünmektedir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!