Divi ile Mobil Öncelikli Tasarımlar Nasıl Oluşturulur

Birçok web sitesi, mobil cihazlardan tonlarca ziyaretçi alır. Bu, tasarımlarınızın daha küçük ekran boyutları için yeterince optimize edilip edilmediği sorusuna yol açar. Divi ile, bir masaüstü deneyimi için oluşturulmuş bir tasarım, aynı zamanda anında yanıt verir hale gelir. Ancak bir şeyin duyarlı olması, onun da optimize edildiği anlamına gelmez.

Ana ziyaretçi kaynağınız mobil ise, masaüstü yerine mobil bir bakış açısıyla tasarlamaya ve oluşturmaya başlamak gerçekten yardımcı olabilir. Bu yazıda, size bunu tam olarak nasıl yapacağınızı göstereceğiz. Aklınızda bulundurmanız gereken bazı ipuçlarını ve püf noktalarını inceledikten sonra, bu ipuçlarını dikkate alan sıfırdan bir örnek de oluşturacağız.

Hadi hadi bakalım!

Ön izleme

Daha önce de belirtildiği gibi, bazı ipuçlarını ve püf noktalarını gözden geçirerek başlayacağız. Daha sonra, bu ipuçlarından yararlanan sıfırdan bir örnek oluşturacağız. Sonuca bir göz atalım.

Mobil

masaüstü

Yaklaşmak

Youtube Kanalımıza Abone Olun

1. Yeni Sayfa Ekledikten Hemen Sonra Mobil Görünüme Geçin

Yeni bir sayfa ekledikten sonra yapmanız gereken ilk şey hemen mobil görünüme geçmek. Bu, mobil odaklı ve doğru bir tasarım oluşturmanıza olanak tanır.

2. Her Tasarım Öğesi için Duyarlı Seçenekleri Etkinleştirin ve Önce Mobil Değerleri Değiştirin

İstediğiniz tasarımı tasarlamaya başladığınızda, tasarım öğeleri için duyarlı seçenekleri etkinleştirmek isteyeceksiniz. Buna metin boyutu, dolgu ve kenar boşluğu dahildir ancak bunlarla sınırlı değildir. Ekleyeceğiniz ilk değerler, tasarımın önce mobil için optimize edildiğinden emin olmak için (masaüstü değerleri yerine) mobil değerler olacaktır.

3. Sütunlar Arasındaki Varsayılan Boşluğu Kaldırın ve Gerekirse Elle Dolgu Ekleyin

Daha fazla yatay alan oluşturmak için sütunlar arasındaki tüm varsayılan özel dolguyu kaldırmanız da önerilir. Gerekirse, dolguyu her zaman her sütuna veya tasarım öğesine manuel olarak ekleyebilir ve orada ne kadar mesafe olmasını istediğinizi kendiniz seçebilirsiniz.

4. Yatay Tasarım Oluşturmak için 2 veya 3 Sütunu Yanyana Yerleştirin

Divi'deki duyarlı yapı dikey olarak yönlendirilir. Bu, modüllerin ve sütunların birbirinin altında göründüğü anlamına gelir. Ancak bu, daha dikey olarak kaydırmayı gerektirir. Üzerinde çalıştığınız tasarıma bağlı olarak, daha yatay bir akış yaratmak gerçekten fark yaratabilir.

5. Yol Boyunca veya Daha Sonra Masaüstü ve Tablet Görünümlerini Değiştirin

Mobil öncelikli bir amaç için tasarım yapıyor olsanız bile, diğer görünümleri de düzenli tutmak önemlidir. Her tasarım öğesinde bulunan duyarlı seçenekler, bunu başarmanıza yardımcı olacaktır. Bu değerleri daha sonra veya tasarım süreci boyunca değiştirmeyi seçebilirsiniz.

Örneği Yeniden Oluşturmaya Başlayalım!

Yeni Bölüm Ekle

Başlamak için yeni bir sayfa açın, mobil görünüme geçin ve yeni bir bölüm ekleyin.

1. Satır Ekle

Sütun Yapısı

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

Satıra Metin Modülü Ekle

H2 İçeriği Ekle

Satırınızın sütununa bir Metin Modülü ekleyin ve bazı H2 başlık içeriği girin.

H2 Metin Ayarları

Ardından, başlık metni ayarlarına gidin ve başlığın görünümünü değiştirin.

• Başlık 2 Yazı Tipi: Didact Gothic
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #333333
• Başlık 2 Metin Boyutu: 5.5vw (Telefon), 5vw (Tablet), 2vw (Masaüstü)

Satıra Bölücü Modülü Ekle

görünürlük

Eklediğiniz Metin Modülünün hemen altında, devam edin ve bir Bölücü Modül ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Renk

Ardından tasarım sekmesine gidin ve ayırıcının rengini değiştirin.

• Renk: #333333

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Genişlik: %48
• Modül Hizalaması: Merkez

2. Satır Ekle

Sütun Yapısı

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

Arka plan rengi

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

• Arka Plan Rengi: #ffe69e

Sütun 2 Arka Plan Rengi

Satırın ikinci sütununa da bir arka plan rengi ekleyin.

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

hizalama

Ardından, satır hizalamasını değiştirin.

• Satır Hizalama: Sol

boyutlandırma

Sonraki boyutlandırma ayarlarını açın. Burada, sütunlar arasındaki tüm varsayılan boşluğu kaldırmak isteyeceğiz. Ayrıca, sütunun masaüstünde iyi görünmesi için özel genişlik kullanıyoruz.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 700 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Aralık ayarlarına giderek devam edin ve manuel olarak bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: 5vw
• Alt Marj: 5vw
• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 10vw (Telefon), 8vw (Tablet), 4vw (Masaüstü)
• Sütun 1 Alt Dolgu: 10vw (Telefon), 8vw (Tablet), 4vw (Masaüstü)

Sınır

Satıra bazı yuvarlak köşeler de ekleyin.

• Sağ Üst: 10px
• Sağ Alt: 10px

Kutu Gölge

Ve ona ince bir kutu gölgesi de verin.

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

Özel CSS

Son olarak, sahip olduğumuz yatay alandan tam olarak yararlandığımızdan emin olmak için sütunları daha küçük ekran boyutlarında yan yana yerleştireceğiz. Gelişmiş sekmesine gidin ve ana öğeye tek bir CSS kodu satırı ekleyin.

display: flex;

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

H3 İçeriği Ekle

Modül eklemeye başlama zamanı! İlk sütuna bir Metin Modülü başlığı ekleyin ve bazı H3 içeriği girin.

H3 Metin Ayarları

Ardından tasarım sekmesine gidin ve başlık metni ayarlarını değiştirin.

• Başlık 3 Yazı Tipi: Didakt Gotik
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Rengi: #ee6f49
• Başlık 3 Metin Boyutu: 4vw (Telefon), 3vw (Tablet), 1.5vw (Masaüstü)

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Ardından bir Bölücü Modül ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Renk

Ardından, ayırıcının rengini değiştirin.

• Renk: #ffffff

boyutlandırma

Boyutlandırma ayarlarıyla birlikte.

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

aralık

Modüle de bazı özel üst kenar boşlukları ekleyin.

• Üst Marj: 4vw (Telefon), 2vw (Tablet), 1.5vw (Telefon)

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

İlk sütunda ihtiyaç duyulan sonraki ve son modül bir Düğme Modülüdür. Bir kopya girin.

hizalama

Ardından tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarında düğmenin görünümünü de değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 3vw (Telefon), 2vw (Tablet), 1.5vw (Masaüstü)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ee6f49
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi: Didact Gothic
• Yazı Ağırlığı: Kalın

Sütun 2'ye Görüntü Modülü Ekle

Simge Yükle

2. sütunda ihtiyaç duyacağımız tek modül bir Görüntü Modülüdür. Seçtiğiniz herhangi bir görseli kullanabilirsiniz, ancak bu örnekte kullanılan simgelerin aynısını kullanmak istiyorsanız, Mobilya Mağazası Düzen Paketine gidebilir ve gönderinin sonunda bunları indirebilirsiniz.

hizalama

Ardından tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

Klon Satır #2

Satırı değiştirmeyi bitirdikten sonra, devam edip klonlayabilirsiniz.

Satır Arka Plan Rengini Değiştir

Satır arka plan renginden başlayarak bu kopyada bazı değişiklikler yapmamız gerekecek.

• Arka Plan Rengi: #8ee5cf

Sütun 2 Arka Plan Rengini Kaldır

Sütun 2 arka plan rengini kaldırarak devam edin.

Sütun 1 Arka Plan Rengi Ekle

Bunun yerine ilk sütuna bir arka plan rengi ekliyoruz.

• Sütun 1 Arka Plan Rengi: #47e5bd

Sütunlardaki Modülleri Değiştir

Ayrıca modüller için sütunları değiştiriyoruz.

Görüntü Modülündeki Simgeyi Değiştir

Ardından, Görüntü Modülündeki simgeyi değiştirin.

Görüntü Modülüne Filtre Ekle

Ve filtre ayarlarında tonu değiştirerek yeni satır ve sütun arka plan renkleriyle eşleşmesini sağlayın.

• renk tonu: 65 derece

Satır Hizalamasını Değiştir

Sonraki satır hizalamasını değiştirin.

• Satır Hizalama: Sağ

Satır Kenarlığını Değiştir

Yuvarlatılmış köşelerle birlikte.

• Sol Üst: 10 piksel
• Sol Alt: 10px

Sütun 2'deki Metin Modülünün Metin Rengini Değiştirme

Ayrıca 2. sütundaki Metin Modülü için başka bir metin rengi kullanıyoruz.

• Başlık 3 Metin Rengi: #7b9710

Düğme Arka Plan Rengini Değiştir

Ve aynı rengi düğme arka planı için kullanıyoruz.

• Düğme Arka Plan Rengi: #7b9710

Her İki Satırı Klonla

Artık sıranın her iki tarafı da elimizde olduğuna göre, ikisini de ihtiyacımız olduğu kadar klonlayabilir ve sıraya koyabiliriz.

Kopyalama #1'i Değiştir

Satır Arka Plan Rengini Değiştir

İlk kopyanın satır arka plan rengini değiştirerek başlayacağız.

• Arka Plan Rengi: #ffc9cf

Sütun Rengini Değiştir

Ardından, sütun 2'nin arka plan rengini de değiştireceğiz.

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

Görüntü Modülündeki Simgeyi Değiştir

Görüntü Modülündeki simgeyi istediğiniz başka bir simgeyle değiştirin.

Görüntü Modülüne Filtre Ekle

Ve yeni satır ve sütun arka plan renkleriyle eşleşmesi için filtre ayarlarındaki tonu değiştirin.

• Renk tonu: 309 derece

Metin Rengini Değiştir

Metin rengini de değiştiriyoruz.

• Başlık 3 Metin Rengi: #f862b0

Düğme Arka Plan Rengini Değiştir

Ve aynı rengi düğme arka planı için kullanıyoruz.

• Düğme Arka Plan Rengi: #f862b0

Kopya #2'yi Değiştir

Satır Arka Plan Rengini Değiştir

Bir sonraki ve son kopyaya! Satır arka plan rengini değiştirin.

• Arka Plan Rengi: #b2c4ff

Sütun Rengini Değiştir

Sütun 1 arka plan rengi için de aynı şeyi yapın.

• Sütun 1 Arka Plan Rengi: #9eb4ff

Görüntü Modülündeki Simgeyi Değiştir

Ardından, kullanılan simgeyi değiştirin.

Görüntü Modülüne Filtre Ekle

Görüntü Modülünün filtre ayarlarındaki renk tonuyla birlikte.

• Renk tonu: 221 derece

Metin Rengini Değiştir

Daha sonra Görüntü Modülünün metin rengini değiştirin.

• Başlık 3 Metin Rengi: #6287f9

Düğme Arka Plan Rengini Değiştir

Ve düğme arka planı için aynı rengi kullanın.

• Düğme Arka Plan Rengi: #6287f9

Ön izleme

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.

Mobil

masaüstü

Son düşünceler

Ana ziyaretçi kaynağınız mobil cihazlardan geliyorsa, her şeyi o ekran boyutu için optimize etmek önemlidir. Divi ile her şey anında yanıt verir hale gelir. Ancak bir şeyin duyarlı olması, o belirli ekran boyutu için de optimize edildiği anlamına gelmez. Mobil cihazlar için tasarıma yaklaşmanın bir başka yolu da tasarımınıza mobil öncelikli bir bakış açısıyla başlamaktır. Bu gönderide, bunun nasıl yapılacağına dair bazı ipuçları ve püf noktaları paylaştık. Daha sonra, bu kurallara uyan ve çarpıcı bir sonuç yaratmamızı sağlayan bir örneği yeniden yarattık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!