Divi ile Mobil Cihazlarda Hizmetler Nasıl Güzel Bir Şekilde Sergilenir (Ücretsiz İndirin!)
Yayınlanan: 2019-02-25Mobil öncelikli tasarımlara odaklanıyorsanız, bu gönderi size yardımcı olabilir. Daha küçük ekran boyutlarında harika görünen iki güzel hizmet vitrini örneği oluşturduk. Dahası, masaüstünde iyi bir tasarımı korurken mobilde en iyi şekilde görünecek şekilde özel olarak tasarlandılar. Bu yazıda, onları sıfırdan nasıl yeniden oluşturacağınızı adım adım göstereceğiz. Bu öğreticinin, oluşturduğunuz herhangi bir web sitesi için hizmet bölümleri tasarlarken yaratıcılığınızı serbest bırakmanız için size ilham vereceğini umuyoruz. Eğitimin sonunda, her iki bölümün JSON dosyalarını da indirebileceksiniz.
Hadi hadi bakalım!
Ön izleme
Eğiticiye dalmadan önce, yeniden oluşturacağımız iki mobil örneğe hızlıca göz atalım.
Örnek 1
Örnek #2
Örnek 1'i Yeniden Oluşturmaya Başlayalım
Youtube Kanalımıza Abone Olun
Yeni Bölüm Ekle
Degrade Arka Plan
Yeni bir sayfa oluşturun ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve bir degrade arka planı ekleyin.
- Renk 1: #ff0f83
- Renk 2: rgba(255,255,255,0)
- Gradyan Türü: Radyal
- Radyal Yön: Sol
- Başlangıç Konumu: %20
- Bitiş Konumu: %20
1. 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:
Metin Modülü #1 Ekle
İçerik Ekle
İhtiyacımız olan ilk modül bir Metin Modülü. İçerik kutusuna biraz içerik ekleyin.
Metin Ayarları
Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.
- Metin Yazı Tipi: Poppins
- Metin Yazı Tipi Ağırlığı: Ağır
- Metin Rengi: #ffffff
- Metin Boyutu: 20vw
- Metin Satırı Yüksekliği: 1em
- Metin Gölge Bulanıklığı Gücü: 0.95em
- Metin Gölge Rengi: rgba(0,0,0,0.13)
- Metin Yönü: Merkez
Metin Modülü #2 Ekle
H2 İçeriği Ekle
Bir öncekinin hemen altına başka bir Metin Modülü ekleyin. Seçtiğiniz bazı H2 içeriğini girin.
H2 Metin Ayarları
Ardından tasarım sekmesine gidin ve H2 metin ayarlarını değiştirin.
- Başlık 2 Yazı Tipi: Poppins
- Başlık 2 Yazı Tipi Ağırlığı: Kalın
- Başlık 2 Metin Hizalama: Orta
- Başlık 2 Metin Rengi: #000000
- Başlık 2 Metin Boyutu: 10vw (Telefon ve Tablet), 10vw (Masaüstü)
aralık
Negatif üst kenar boşluğu kullanarak her iki metin modülü arasında bir örtüşme oluşturun.
- Üst Marj: -12vw (Telefon), -10vw (Tablet), -8vw (Masaüstü)
2. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak başka bir satır ekleyerek devam edin:
Degrade Arka Plan
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir degrade arka planı ekleyin.
- Renk 1: #3239ff
- Renk 2: rgba(255,255,255,0)
- Gradyan Türü: Radyal
- Radyal Yön: Sağ
- Başlangıç Konumu: %30
- Bitiş Konumu: %30
boyutlandırma
Sonraki boyutlandırma ayarlarına gidin ve satırın ekranın tüm genişliğini kaplamasına izin verin.
- Bu Satırı Tam Genişlikte Yap: Evet
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
aralık
Bazı boşluk değerleri de ekleyin. Bu değerler, tüm ekran boyutlarında her şeyin iyi görünmesini sağlayacaktır.
- Sol Dolgu: 0vw (Telefon ve Tablet), 15vw (Masaüstü)
- Sağ Doldurma: 0vw (Telefon ve Tablet), 15vw (Masaüstü)
Özel CSS
Ayrıca gelişmiş sekmesinde bir satır CSS kodu ekleyerek iki sütunu yan yana yerleştiriyoruz.
display: flex;
Sütun 1'e Metin Modülü Ekle
H3 ve Bağlantı İçeriği Ekle
Artık modülleri eklemeye başlayabiliriz! Bazı H3 kopyaları ve bir bağlantı ile ilk sütuna bir Metin Modülü ekleyin.
Arka plan rengi
Ardından modülün arka plan ayarlarına gidin ve bir arka plan rengi ekleyin.
- Arka Plan Rengi: rgba(255,255,255,0.95)
Metin Ayarları
Modülün metin ayarlarında metin yönünü değiştirerek devam edin.
- Metin Yönü: Merkez
Bağlantı Metni Ayarları
Bağlantı metni ayarlarını da değiştirin.
- Bağlantı Yazı Tipi: Poppins
- Linke Yazı Tipi Ağırlığı: Kalın
- Bağlantı Yazı Tipi Stili: Altı Çizili
- Bağlantı Alt Çizgi Rengi: #000000
- Bağlantı Metni Rengi: #000000
- Bağlantı Metni Boyutu: 3vw (Telefon), 2vw (Tablet), 1vw (Masaüstü)
H3 Metin Ayarları
H3 metin ayarlarıyla birlikte.
- Başlık 3 Yazı Tipi: Poppins
- Başlık 3 Yazı Tipi Ağırlığı: Ultra Hafif
- Başlık 3 Metin Rengi: #000000
- Başlık 3 Metin Boyutu: 4vw (Telefon), 3vw (Tablet), 2vw (Masaüstü)
- Başlık 3 Metin Satırı Yüksekliği: Daire şekli için 1,9em veya oval şekil için 3em
aralık
Bu modülden bir şekil oluşturmak için, boşluk ayarlarına bazı özel kenar boşlukları ve dolgu değerleri ekleyeceğiz.
- Sol Kenar Boşluğu: 5vw
- Sağ Kenar Boşluğu: -5vw
- Üst Dolgu: 17vw (Telefon), 20vw (Tablet), 15vw (Masaüstü)
- Alt Dolgu: 17vw (Telefon), 20vw (Tablet), 15vw (Masaüstü)
Sınır
Köşelerin her birine '100vw' ekleyerek kareyi yuvarlatılmış köşeler kullanarak daire haline getiriyoruz.
Kutu Gölge
Ve biraz derinlik yaratmak için ince bir kutu gölgesi ekleyeceğiz.
- Kutu Gölge Bulanıklığı Gücü: 100 piksel
- Gölge Rengi: rgba(0,0,0,0.12)
Metin Modülünü 4 Kez Klonla
Artık ilk Metin Modülünü değiştirmeyi bitirdiğimize göre, devam edip dört kez klonlayabiliriz. İki kopyayı ikinci sütuna yerleştirin.
Kopyalama #1'i Değiştir
aralık
İlk kopyanın boşluk ayarlarını değiştirerek devam edin.
- Üst Marj: 20vw
- Sol Kenar Boşluğu: -5vw
- Sağ Marj: 5vw
Kopya #2'yi Değiştir
Arka plan rengi
Ardından ikinci kopyayı açın ve arka plan rengini değiştirin.
- Arka Plan Rengi: rgba(255,248,209,0.92)
aralık
Boşluk ayarlarını da değiştirin.
- Üst Marj: -5vw
Kopyalama #3'ü Değiştir
Arka plan rengi
Ardından üçüncü kopyayı açın ve arka plan rengini değiştirin.
- Arka Plan Rengi: rgba(219,255,223,0.95)
aralık
Sonraki boşluk ayarlarını değiştirin.
- Üst Marj: -5vw
- Sol Kenar Boşluğu: -5vw
- Sağ Marj: 5vw
Kopyalama #4'ü Değiştir
aralık
Son kopyayı da açın ve tasarımı bitirmek için bir miktar negatif üst kenar boşluğu ekleyin.
- Üst Marj: -5vw
Örnek #2'yi Yeniden Oluşturmaya Başlayalım
Yeni Bölüm Ekle
İkinci örneğe geçelim! Sayfanıza yeni bir bölüm ekleyin.
1. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Metin Modülü Ekle
H2 İçeriği Ekle
İhtiyacımız olan ilk modül bir Metin Modülü. Seçtiğiniz bazı H2 içeriğini girin.
H2 Metin Ayarları
Ardından tasarım sekmesine gidin ve H2 metin ayarlarını değiştirin.
- Başlık 2 Yazı Tipi: Poppins
- Başlık 2 Metin Hizalama: Orta
- Başlık 2 Metin Rengi: #333333
- Başlık 2 Metin Boyutu: 7vw (Telefon ve Tablet), 4vw (Masaüstü)
Bölücü Modülü Ekle
görünürlük
Metin Modülünün hemen altına bir Bölücü Modül ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.
Renk
Ardından tasarım sekmesine gidin ve ayırıcı rengini değiştirin.
- Renk: #333333
boyutlandırma
Boyutlandırma ayarlarıyla da oynayın.
- Bölücü Ağırlığı: 5px
- Genişlik: %12
- Modül Hizalaması: Merkez
2. 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:
Arka plan rengi
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve beyaz bir arka plan rengi ekleyin.
- Arka Plan Rengi: #ffffff
boyutlandırma
Sonraki boyutlandırma ayarlarına gidin ve satırın ekranın tüm genişliğini kaplamasına izin verin.
- Bu Satırı Tam Genişlikte Yap: Evet
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
aralık
Tüm ekran boyutları için tasarımı optimize etmek için bazı özel kenar boşluğu ve dolgu değerleri ekleyin.
- Üst Marj: 2vw
- Alt Marj: 2vw
- Üst Dolgu: 10vw (Telefon ve Tablet), 5vw (Masaüstü)
- Alt Dolgu: 10vw (Telefon ve Tablet), 5vw (Masaüstü)
- Sol Dolgu: 2vw (Telefon ve Tablet), 20vw (Masaüstü)
- Sağ Dolgu: 2vw (Telefon ve Tablet), 20vw (Masaüstü)
Kutu Gölge
Biz de ince bir kutu gölgesi kullanıyoruz.
- Kutu Gölge Bulanıklığı Gücü: 50px
- Gölge Rengi: rgba(0,0,0,0.07)
Özel CSS
Son olarak, gelişmiş sekmesindeki ana öğeye tek bir CSS kod satırı ekleyerek her iki sütunu da yan yana yerleştirin.
display: flex;
Sütun 1'e Blurb Modülü Ekle
Simge Seç
Artık modül eklemeye başlayabiliriz! Sütun 1'de ihtiyacımız olan tek modül bir Blurb Modülüdür. İstediğiniz bir simgeyi seçin.
Degrade Arka Plan
Ardından, bir degrade arka planı ekleyin.
- Renk 1: #7b28ef
- Renk 2: #29b6e5
- Gradyan Yönü: 142deg
Simge Ayarları
Sonraki simge ayarlarını değiştirin.
- Simge Rengi: #ffffff
- Simge Yerleşimi: Üst
- Simge Yazı Tipi Boyutunu Kullan: Evet
- Simge Yazı Tipi Boyutu: 5vw (Telefon ve Tablet), 4vw (Masaüstü)
boyutlandırma
Ve boyutlandırma ayarlarını değiştirin.
- Genişlik: %48 (Telefon ve Tablet), %78 (Masaüstü)
aralık
Ayrıca, tasarımı tüm ekran boyutlarında optimize etmek için bazı özel kenar boşluğu ve dolgu değerleri ekliyoruz.
- Üst Marj: 2vw (Telefon)
- Üst Dolgu: 8.5vw (Telefon), 9vw (Tablet), 6vw (Masaüstü)
- Alt Dolgu: 3vw (Telefon), 5vw (Tablet), 4vw (Masaüstü)
Sınır
Kenarlık ayarlarında köşelerin her birine '100vw' ekleyerek modülü bir daireye çevirin.
Kutu Gölge
Bir kutu gölgesi de ekliyoruz.
- Kutu Gölge Dikey Konumu: 10px
- Kutu Gölge Yayılma Gücü: 5px
- Gölge Rengi: rgba(2,185,252,0,35)
Metin Modülü #1'i Sütun 2'ye ekleyin
H3 İçeriği Ekle
İkinci sütuna geç! İhtiyacımız olan ilk modül, bir Metin Modülü başlığıdır. Biraz H3 içeriği ekleyin.
H3 Metin Ayarları
Ardından tasarım sekmesine gidin ve H3 metin ayarlarını değiştirin.
- Başlık 3 Yazı Tipi: Poppins
- Başlık 3 Metin Boyutu: 4vw (Telefon), 3vw (Tablet), 2vw (Masaüstü)
aralık
Daha sonra bazı özel boşluk değerleri ekleyin.
- Üst Marj: 0vw (Telefon), 3vw (Tablet ve Masaüstü)
- Sol Kenar Boşluğu: -20vw (Telefon ve Tablet), 0vw (Masaüstü)
- Sağ Kenar Boşluğu: 0vw
- Alt Dolgu: 2vw (Telefon ve Tablet), 1vw (Masaüstü)
- Sol Dolgu: 5vw (Telefon ve Tablet), 2vw (Masaüstü)
Sınır
Sol kenarlık ile birlikte.
- Sol Kenar Genişliği: 5px
- Sol Kenar Rengi: #f4f4f4
- Sol Kenarlık Stili: Çift
Sütun 2'ye Bölücü Modülü Ekle
Bölücüyü Göster
İhtiyacı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
Renk
Ardından tasarım sekmesine gidin ve ayırıcı rengini değiştirin.
- Renk: #f4f4f4
Stiller
Sonraki stil ayarlarında ayırıcı stilini değiştirin.
- Bölücü Tarzı: Çift
boyutlandırma
Boyutlandırma ayarlarındaki farklı seçenekleri değiştirerek devam edin.
- Bölücü Ağırlığı: 5px
- Yükseklik: 0 piksel
aralık
Ve boşluk değerleriyle de oynayın.
- Sol Kenar Boşluğu: -20vw (Telefon ve Tablet), 0vw (Masaüstü)
Metin Modülü #2'yi Sütun 2'ye ekleyin
İçerik Ekle
İkinci sütunda ihtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bazı gövde içeriğini ekleyin.
Metin Ayarları
Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.
- Metin Boyutu: 2vw (Telefon), 1.7vw (Tablet), 0.8vw (Masaüstü)
- Metin Yönü: Sol
aralık
Boşluk değerleriyle de oynayın.
- Üst Marj: 0vw
- Sol Kenar Boşluğu: -20vw (Telefon ve Tablet), 0vw (Masaüstü)
- Sağ Kenar Boşluğu: 0vw
- Üst Dolgu: 3vw (Telefon ve Tablet), 2vw (Masaüstü)
- Sol Dolgu: 5vw (Telefon ve Tablet), 2vw (Masaüstü)
Sınır
Ve bir sol kenarlık ekleyin.
- Sol Kenar Genişliği: 5px
- Sol Kenar Rengi: #f4f4f4
- Sol Kenarlık Stili: Çift
Sütun 2'ye Düğme Modülü Ekle
Kopya Ekle
İkinci sütunda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Biraz kopya ekleyin.
Düğme Ayarları
Ardından tasarım sekmesine gidin ve düğme ayarlarını değiştirin.
- Düğme için Özel Stilleri Kullan: Evet
- Düğme Metin Boyutu: 2.5vw (Telefon), 2vw (Tablet), 1vw (Masaüstü)
- Düğme Metin Rengi: #4f77e8
- Düğme Kenar Genişliği: 1px
- Düğme Kenar Rengi: #4f77e8
- Düğme Sınır Yarıçapı: 1 piksel
- Düğme Yazı Tipi: Poppins
aralık
Boşluk değerlerini de değiştirin.
- Üst Marj: 4vw (Telefon ve Tablet), 2vw (Masaüstü)
- Sol Kenar Boşluğu: -20vw (Telefon ve Tablet), 0vw (Masaüstü)
Satırı İki Kez Klonla
Artık satırı ve tüm modüllerini değiştirmeyi bitirdiğimize göre, onu iki kez klonlayabiliriz.
Simgeleri Değiştir
Her iki Blurb Modülünün simgelerini değiştirdiğinizden emin olun.
Gradyan Arka Planlarını Değiştir
Degrade arka planlarını da değiştirin.
- Renk 1: #ff2885
- Renk 2: #d6ac24
- Renk 1: #70ff1e
- Renk 2: #2699ff
Kutu Gölge Renklerini Değiştir
Kutu gölge rengini yeni degrade arka planıyla eşleştirin.
- Gölge Rengi: rgba(255,208,2,0.37)
- Gölge Rengi: rgba(42,255,0,0.37)
Düğme Kenarlığını ve Metin Renklerini Değiştir
Ve düğme kenarlığı ve metin renklerini değiştirerek tasarımı tamamlayın.
- Düğme Metin Rengi: #e96c54
- Düğme Kenar Rengi: #e96c54
- Düğme Metin Rengi: #4dcb93
- Düğme Kenar Rengi: #4dcb93
Mobil Hizmetler Bölümlerini ÜCRETSİZ İndirin
Ücretsiz mobil hizmetler bölümlerine el 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.
Ü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.
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!
Ön izleme
Artık tüm adımların üzerinden geçtik, şimdi her iki örneğin mobil sonuçlarına son bir göz atalım.
Örnek 1
Örnek #2
Son düşünceler
Bu gönderide, hizmetleri yalnızca Divi'nin yerleşik seçeneklerini kullanarak mobil cihazlarda nasıl sergileyeceğiniz konusunda size iki yaratıcı yol gösterdik. Mobil cihazlara öncelik veren bu yaklaşımın size yaratıcı olmanız için de ilham vereceğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!