Divi ile Mobil İlk Tasarım Nasıl Yapılır
Birçok web sitesi mobil cihazlardan birçok ziyaretçi alır. Bu, tasarımınızın daha küçük bir ekran boyutu için oldukça optimize olup olmadığı sorusuna yol açar. Divi ile, masaüstü deneyimi için yapılan tasarım da anında duyarlıdır. Ancak sadece duyarlı bir şey de optimize edildiği anlamına gelmez. Hücresel ana ziyaretçi kaynağınızsa, masaüstü yerine hücresel bir perspektiften tasarlamaya ve inşa etmeye başlamak çok yararlı olacaktır. Bu yazıda size nasıl yapılacağını göstereceğiz. Hatırlamanız gereken birkaç ipucu ve püf noktasından geçtikten sonra, bu ipucunu düşünen örnekleri de yeniden oluşturacağız.
Haydi Yapalım şunu! Önizleme Daha önce de belirtildiği gibi, bazı ipuçlarını ve püf noktalarını tartışarak başlayacağız. Bundan sonra, bu ipuçlarını kullanarak baştan bir örnek oluşturacağız. Sonuçlara bakalım. Hücresel
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #333333
Başlık 2 Metin Boyutu: 5.5VW (Telefon), 5VW (Tablet), 2VW (Masaüstü) Bölme modülünü eklediğiniz metin modülünün hemen altındaki görünürlük hattına ekleyin, devam edin ve bölücü modülünü ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin.
Renk: #333333 Yapıştırıcı değişim de boyutu ayarlayın.
Genişlik:% 48 Modül hizalaması: merkez
Sıra #2 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak bölüme başka satırlar ekleyerek devam edin:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini satıra ekleyin. Arka plan rengi: #ffe69e Arka Plan Rengi Sütun 2 Arka plan rengini satırın ikinci sütununa da ekleyin.
Sütun 2 Renk Arka Plan: #FFD65B Daha sonra uyum, satır seviyesini değiştirin.
Satır Hizalama: Sol Yapıştırıcı Bir sonraki boyut ayarlarını açın. Burada, sütunlar arasındaki tüm varsayılan odaları silmek istiyoruz. Ayrıca, masaüstünde iyi görünmesini sağlamak için sütun için özel bir genişlik kullanıyoruz.
Özel genişlik kullanın: evet Birim: PX
Özel genişlik: 700 piksel
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Uzay ayarlarını girerek ve bazı özel marjlar ve dolgu değerleri manuel olarak ekleyerek daha fazla mesafe.
Üst Marj: 5VW Alt marj: 5VW
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Dolgu: 10VW (Telefon), 8VW (Tablet), 4VW (Masaüstü)
Sütun 1 Dolgu Alt: 10VW (Telefon), 8VW (Tablet), 4VW (Masaüstü)
Sınır, satıra da birkaç yuvarlak açı ekleyin.
Sağ üst: 10 piksel Sağ alt: 10 piksel
Kutunun gölgesi ve ayrıca pürüzsüz bir kutunun gölgesini verir.
Bulanık Güç Gölgesi Kutusu: 50px Gölge Rengi: RGBA (0.0,0,0.16)
CSS özellikle son olarak, ancak en az değil, sahip olduğumuz yatay alanı tam olarak kullandığımızdan emin olmak için sütunu daha küçük bir ekran boyutuna yerleştireceğiz. Gelişmiş sekmesini açın ve ana öğeye bir satır CSS kodu ekleyin. Ekran: Flex;
Metin modülünü Sütun 1’e ekleyin H3 içeriği ekleyin, modül eklemeye başlama zamanı! Metin modülünün başlığını ilk sütuna ekleyin ve bazı H3 içeriğine girin. H3 Metin Ayarları Ardından, Tasarım sekmesini açın ve başlık metni ayarlarını değiştirin. Başlık 3 Yazı Tipi: Didact Gothic Başlık 3 yazı tipi ağırlığı: kalın
Başlık 3 Metin Seviyeleri: Orta
Başlık 3 Renk Metni: #EE6F49
Başlık 3 Metin Boyutu: 4VW (Telefon), 3VW (Tablet), 1.5VW (Masaüstü)
Bölme modülünü Sütun 1 görünürlüğüne ekleyin Bir sonraki bölücü modülünü ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet O zaman renk bölücünün rengini değiştirin.
Renk: #ffffff Boyut ayarları ile yapıştırıcı.
Bölücü ağırlığı: 4px
Genişlik:% 30
Modül hizalaması: merkez
Mesafe Modüle özel olarak bazı kenar boşlukları ekleyin.
Üst kenar: 4VW (telefon), 2vw (tablet), 1.5vw (telefon)
Hizalama daha sonra tasarım sekmesini açın ve düğmenin hizalanmasını değiştirin. Düğmenin hizalanması: orta Düğme ayarlarını değiştirme düğmesi ayarlarındaki düğmeyi de görüntüler.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 3VW (Telefon), 2VW (Tablet), 1.5VW (Masaüstü)
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #EE6F49
Düğmenin sınır genişliği: 0px
Yazı tipi düğmesi: Didact Gothic
Mektup Ağırlığı: Kalın
Resim Modülünü Sütun 2’ye Ekleyin Sütun 2’de ihtiyacımız olan tek simgeyi yükleyin. İstediğiniz herhangi bir görüntüyü kullanabilirsiniz, ancak bu örnekte kullanılanla aynı simgeyi kullanmak istiyorsanız, mobilya mağazası düzeni paketini açabilir ve yazının sonunda indirebilirsiniz. Solomon sonra, tasarımı açın Sekleyin ve görüntü seviyesini değiştirin.
Görüntü Uygulama: Orta Satır Klonu #2 Çizgiyi değiştirmeyi bitirdikten sonra devam edebilir ve klonlayabilirsiniz. Satırın arka plan renginden başlayarak bu kopyada bazı değişiklikler yapmak için ihtiyacımız olan arka plan rengini değiştirin.
Arka plan rengi: #8ee5cf Sütun 2’nin arka plan rengini kaldırın Sütun 2’nin arka plan rengini kaldırarak devam edin. Sütun 1’in arka plan rengini ekleyin, bunun yerine arka plan rengini ilk sütuna ekliyoruz.
Renk Renk Sütunu 1: #47E5BD Sütunumuzdaki modülü değiştirin, modülün sütunu da değiştirin. Görüntü modülündeki simgeyi değiştirin, ardından görüntü modülündeki simgeyi değiştirin.
Görüntü modülüne bir filtre ekleyin ve filtre ayarlarındaki renk tonunu değiştirerek yeni satır ve sütunun arka plan rengini eşleştirin. Renk: 65 derece Hat seviyesini değiştirin Bir sonraki satır seviyesini değiştirin. Satır Hizalama: Doğru
Sınır çizgisini yuvarlak açı ile değiştirin. Sol üst: 10 piksel
Sol alt: 10 piksel Sütun 2’deki Metin Modülünün Metin Rengini Değiştirme Sütun 2’deki metin modülü için başka metin renklerini de kullanıyoruz.
Başlık 3 Renk Metni: #7B9710
Düğmenin arka plan rengini değiştirin ve düğmenin arka planı için aynı rengi kullanırız. Arka Plan Renk Düğmesi: #7B9710
Satırın ikinci klonu şimdi çizginin her iki tarafına da sahibiz, hem ihtiyacımız kadar klonlayabilir hem de sırayla yerleştirebiliriz. Değiştir #1 Değiştir Sıramızın arka plan rengini değiştirerek başlayacak İlk kopyadan satır. Arka plan rengi: #ffc9cf
Sütun rengini daha sonra değiştirin, Sütun 2’nin arka plan rengini de değiştireceğiz. Sütun 2 Renk Arka Plan: #FFADB6 Görüntü modülündeki simgeyi değiştirin Görüntü modülündeki simgeyi seçiminize başka bir şekilde değiştirin.
Filtreyi görüntü modülüne ekleyin ve yeni satır ve sütunun arka plan rengi ile uyumlu hale getirmek için filtre ayarındaki renk tonu değiştirin. Renk: 309deg
Metnimizin rengini değiştirin, metnin rengini de değiştirin. Başlık 3 Renk Metni: #F862B0 Düğmenin arka plan rengini değiştirin ve düğmenin arka planı için aynı rengi kullanırız.
Arka Plan Renk Düğmesi: #F862B0 DEĞİŞTİRİN #2 Satırın arka plan rengini bir sonrakine ve son olarak değiştirin! Satırın arka plan rengini değiştirin.
Arka plan rengi: #B2C4FF Sütun sütununu değiştirin Arka plan renk sütunu 1 için de aynısını yapın.
Renk Renk Sütunu 1: #9EB4FF Görüntü modülündeki simgeyi değiştirin, ardından kullanılan simgeyi değiştirin.
Görüntü modülü ile birlikte görüntü modülüne ve görüntü modülü filtresini ayarlarken bir filtre ekleyin. Renk: 221 derece
Metin Rengi Değiştir Metin rengini bir sonraki görüntü modülünden değiştirin. Başlık 3 Renk Metni: #6287F9 Düğmenin arka plan rengini değiştirin ve düğme arka planı için aynı rengi kullanın.
Arka Plan Renk Düğmesi: #6287F9 Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım. Hücresel
Masaüstü
